Webleb - UI Elements

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UGS Files - Fixed</title>
    <style>
        body {
            font-family: 'Segoe UI', Arial, sans-serif;
            background: linear-gradient(135deg, #1a1c2c 0%, #4a192c 100%);
            min-height: 100vh;
            margin: 0;
            display: flex;
            color: white;
        }

.sidebar {
            position: fixed;
            left: 0;
            top: 0;
            width: 80px;
            height: 100vh;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(15px);
            padding: 20px 10px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            overflow-y: auto;
            z-index: 1000;
            border-right: 1px solid rgba(255,255,255,0.1);
        }

.sidebar-btn {
            background: #4e73df;
            border: none;
            padding: 12px;
            font-weight: bold;
            border-radius: 8px;
            cursor: pointer;
            transition: 0.3s;
            color: white;
        }

.sidebar-btn:hover {
            background: #2e59d9;
            transform: scale(1.1);
        }

.main-content {
            margin-left: 100px;
            flex: 1;
            padding: 40px;
            max-width: 1200px;
        }

.header-box {
            text-align: center;
            margin-bottom: 40px;
        }

a { color: #79aadb; text-decoration: none; }
        a:hover { text-decoration: underline; }

.buttons-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }

input[type="button"] {
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            padding: 15px;
            color: white;
            border-radius: 10px;
            cursor: pointer;
            transition: 0.3s;
            text-align: center;
            backdrop-filter: blur(5px);
        }

input[type="button"]:hover {
            background: #4e73df;
            transform: translateY(-3px);
        }

/* Prevenir que el contenido desaparezca */
        #sections-container {
            min-height: 200px;
            display: block !important;
        }
    </style>
</head>
<body>

<div class="main-content">
        <div class="header-box">
            <h1>UGS Files</h1>
            <p>Docs: <a href="https://docs.google.com/document/d/1_FmH3BlSBQI7FGgAQL59-ZPe8eCxs35wel6JUyVaG8Q/" target="_blank">Ultimate Game Stash</a></p>
            <p>Discord: <a href="https://discord.gg/rmVsAqkpkA" target="_blank">Join Server</a></p>
            <button onclick="location.reload()" style="padding: 10px; cursor: pointer; border-radius: 5px; border: none; background: #2ecc71; color: white;">Refrescar si falla</button>
        </div>
        
        <div id="sections-container">
            
        </div>
    </div>

<script>
        function loadGames() {
            const script = document.createElement('script');
            script.src = 'https://cdn.jsdelivr.net/gh/bubbls/ugs-singlefile@main/games.js';
            script.onerror = () => {
                document.getElementById('sections-container').innerHTML = 
                '<p style="color:red; text-align:center;">Error al cargar la lista de juegos. Revisa tu conexión o el enlace de GitHub.</p>';
            };
            document.body.appendChild(script);
        }
        
        // Ejecutar al cargar la página
        window.onload = loadGames;
    </script>
</body>
</html>

CSS

JS

canay

Recommended