Aplicaciones Web Orientadas a Servicios • ITIID-05 • 23 feb 2026

Práctica Guiada: Mine-API - 1

index.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minecraft World Explorer</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body class="p-4 md:p-8">

    <!-- Header -->
    <header class="max-w-6xl mx-auto text-center mb-8">
        <h1 class="text-6xl text-green-400 mb-2 tracking-widest uppercase" style="text-shadow: 4px 4px 0 #000;">
            Minecraft API Explorer
        </h1>
        
        <!-- Navigation Tabs -->
        <nav class="flex flex-wrap justify-center gap-2 mt-6">
            <button onclick="changeCategory('personajes')" id="btn-personajes" class="mc-nav-btn active">Personajes</button>
            <button onclick="changeCategory('mobs')" id="btn-mobs" class="mc-nav-btn">Todos los Mobs</button>
            <button onclick="changeCategory('mobs/hostiles')" id="btn-mobs-hostiles" class="mc-nav-btn">Hostiles</button>
            <button onclick="changeCategory('mobs/pacificos')" id="btn-mobs-pacificos" class="mc-nav-btn">Pacíficos</button>
            <button onclick="changeCategory('biomas')" id="btn-biomas" class="mc-nav-btn">Biomas</button>
        </nav>

        <!-- Search Bar -->
        <div class="mt-8 flex justify-center">
            <input type="text" id="searchInput" placeholder="Buscar en esta categoría..." 
                class="w-full max-w-md bg-black border-4 border-gray-600 p-3 text-2xl text-green-400 focus:outline-none focus:border-green-500">
        </div>
    </header>

    <main class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8">
        
        <!-- Content List -->
        <div class="lg:col-span-2">
            <div id="loading" class="text-3xl text-yellow-400 text-center">Conectando con el servidor de Minecraft...</div>
            <div id="contentGrid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                <!-- Los datos se cargan aquí -->
            </div>
        </div>

        <!-- Sidebar -->
        <aside id="sidebar" class="hidden">
            <div class="sticky top-8">
                <div class="mc-card p-6 mb-6">
                    <button onclick="closeSidebar()" class="float-right text-red-500 text-2xl">X</button>
                    <h2 id="detailName" class="text-4xl text-green-400 mb-2">Nombre</h2>
                    <img id="detailImg" src="" alt="" class="w-full max-h-48 object-contain mb-4 bg-black/20 p-2">
                    <p id="detailDesc" class="text-xl text-gray-300 leading-tight mb-4">Cargando información...</p>
                    <div id="detailStats" class="text-lg text-yellow-400"></div>
                </div>

                <div class="mc-card p-4">
                    <h3 class="text-2xl mb-4 text-red-400 uppercase">Guías en YouTube</h3>
                    <div id="videoResults" class="space-y-4">
                        <!-- Videos se cargan aquí -->
                    </div>
                </div>
            </div>
        </aside>

    </main>

    <script src="script.js"></script>
</body>
</html>

styles.css

:root {
    --mc-dark: #1e1e1e;
    --mc-gray: #313131;
    --mc-green: #55ff55;
    --mc-border: #000000;
    --mc-dirt: #866043;
    --mc-grass: #5da943;
}

body {
    background-color: var(--mc-dark);
    color: #ffffff;
    font-family: 'VT323', monospace;
    image-rendering: pixelated;
    min-height: 100vh;
}

.mc-card {
    background-color: var(--mc-gray);
    border: 4px solid var(--mc-border);
    box-shadow: inset -4px -4px 0px #1a1a1a, inset 4px 4px 0px #4a4a4a;
    transition: all 0.2s;
}

.mc-card:hover {
    transform: translateY(-5px);
    border-color: var(--mc-green);
}

.mc-nav-btn {
    background-color: #bebebe;
    border: 3px solid #000;
    box-shadow: inset -3px -3px 0px #707070, inset 3px 3px 0px #fff;
    color: #3f3f3f;
    padding: 8px 16px;
    text-transform: uppercase;
    font-size: 1.25rem;
    cursor: pointer;
}

.mc-nav-btn:hover { background-color: #d0d0d0; }
.mc-nav-btn.active {
    background-color: var(--mc-green);
    color: #000;
    box-shadow: inset 3px 3px 0px #2e8b2e, inset -3px -3px 0px #90ee90;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border: 4px solid #000;
    background: #000;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.9rem;
    border: 2px solid #000;
    margin-top: 5px;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #1a1a1a; }
::-webkit-scrollbar-thumb { background: #555; border: 2px solid #000; }