Codici dei file UGS

22 anithameela

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

30 October 2025

Barra di navigazione dei social media CSS

26 June 2025

Profilo dei link social

1 April 2025

Gioco di abbinamento dei colori

HTML

<!DOCTYPE html>
<html>
<head>
    <title>UGS Files</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(135deg, #2e3244 0%, #36224b 100%);
            min-height: 100vh;
            margin: 0;
            padding: 0;
            display: flex;
        }

.sidebar {
            position: fixed;
            left: 0;
            top: 0;
            width: 80px;
            height: 100vh;
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
            padding: 20px 10px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            overflow-y: auto;
            box-shadow: 2px 0 10px rgba(0,0,0,0.3);
            z-index: 1000;
        }

.sidebar::-webkit-scrollbar {
            width: 6px;
        }

.sidebar::-webkit-scrollbar-track {
            background: rgba(255,255,255,0.1);
        }

.sidebar::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.3);
            border-radius: 3px;
        }

.sidebar-btn {
            background: rgb(89, 134, 218);
            border: none;
            padding: 12px;
            font-size: 18px;
            font-weight: 700;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            color: white;
            text-align: center;
            min-height: 45px;
        }

.sidebar-btn:hover {
            background: #79aadb;
            transform: scale(1.05);
        }

.sidebar-btn.empty {
            opacity: 0.4;
            cursor: default;
        }

.sidebar-btn.empty:hover {
            transform: none;
            background: rgb(89, 134, 218);
        }

.main-content {
            margin-left: 100px;
            flex: 1;
            padding: 20px;
        }

h1 {
            color: white;
            text-align: center;
            margin-bottom: 30px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

.letter-section {
            margin-bottom: 40px;
            padding: 0 20px;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
            min-height: 100px;
        }

.letter-section.empty {
            opacity: 0.5;
        }

.letter-header {
            color: white;
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 3px solid rgba(255,255,255,0.3);
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

.buttons-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: center;
        }

.empty-message {
            color: rgba(255,255,255,0.6);
            font-style: italic;
            text-align: center;
            padding: 20px;
        }

input[type="button"] {
            background: rgb(89, 134, 218);
            border: none;
            padding: 15px 30px;
            font-size: 16px;
            font-weight: 500;
            border-radius: 8px;
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            width: 100%;
            max-width: 600px;
            color: white;
            text-align: left;
        }

input[type="button"]:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.2);
            background: #79aadb;
        }

input[type="button"]:active {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

@media (max-width: 768px) {
            .sidebar {
                width: 60px;
                padding: 15px 5px;
            }
            .sidebar-btn {
                padding: 8px;
                font-size: 16px;
            }
            .main-content {
                margin-left: 70px;
            }
        }
    </style>
</head>
<body>
    
    <div class="sidebar" id="sidebar">
    </div>

<div class="main-content">
        <h1>UGS Files</h1>
    <h2 style="color: white; text-align: center; margin-bottom: 30px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); font-weight: normal; font-size: 18px;">
    Files from
    <a href="https://docs.google.com/document/d/1_FmH3BlSBQI7FGgAQL59-ZPe8eCxs35wel6JUyVaG8Q/"
        target="_blank"
        style="display: inline; color: #79aadb; text-decoration: none; font-size: 18px; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);">
        Ultimate Game Stash Google Doc
    </a>
    </h2>
    <h2 style="color: white; text-align: center; margin-bottom: 30px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); font-weight: normal; font-size: 18px;">
    Discord Server:
    <a href="https://discord.gg/rmVsAqkpkA"
        target="_blank"
        style="display: inline; color: #79aadb; text-decoration: none; font-size: 18px; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);">
        https://discord.gg/rmVsAqkpkA
    </a>
    </h2>

function generateAllSections() {
            const allChars = ['0','1','2','3','4','5','6','7','8','9',
                            'A','B','C','D','E','F','G','H','I','J','K','L','M',
                            'N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
           
            const filesByChar = {};
            allChars.forEach(char => {
                filesByChar[char] = [];
            });

files.forEach(file => {
                const lower = file.toLowerCase();
                if (lower.startsWith('cl')) {
                    const afterCl = lower.substring(2);
                    if (afterCl.length > 0) {
                        const firstChar = afterCl[0].toUpperCase();
                        if (filesByChar[firstChar]) {
                            filesByChar[firstChar].push(file);
                        }
                    }
                }
            });

const container = document.getElementById('sections-container');
            allChars.forEach(char => {
                const section = document.createElement('div');
                section.className = 'letter-section';
                section.id = `section-${char}`;
               
                const header = document.createElement('div');
                header.className = 'letter-header';
                header.textContent = char;
                section.appendChild(header);

const buttonsContainer = document.createElement('div');
                buttonsContainer.className = 'buttons-container';

if (filesByChar[char].length > 0) {
                    filesByChar[char].forEach(file => {
                        const btn = document.createElement('input');
                        btn.type = 'button';
                        btn.value = file;
                        btn.onclick = () => {

function normalizeFileName(name) {
                                if (name.includes('.') && name.lastIndexOf('.') > 0) return name;
                                return name + '.html';
                            }

const normalized = normalizeFileName(file);
                            const encoded = encodeURIComponent(normalized);

fetch(`https://cdn.jsdelivr.net/gh/bubbls/ugs-singlefile/UGS-Files/${encoded}?t=${Date.now()}`)
                                .then(response => response.text())
                                .then(text => {
                                    const newWin = window.open("about:blank", "_blank");
                                    if (newWin) {
                                        newWin.document.open();
                                        newWin.document.write(text);
                                        newWin.document.close();
                                    }
                                });
                        };
                        btn.style.width = '100%';
                        btn.style.height = '100%';
                        btn.style.fontSize = '100';
                        buttonsContainer.appendChild(btn);
                    });
                } else {
                    section.classList.add('empty');
                    const emptyMsg = document.createElement('div');
                    emptyMsg.className = 'empty-message';
                    emptyMsg.textContent = 'No files';
                    buttonsContainer.appendChild(emptyMsg);
                }

section.appendChild(buttonsContainer);
                container.appendChild(section);
            });

generateSidebar(allChars, filesByChar);
        }

Consigliato

Barra di navigazione dei social media CSS

Profilo dei link social

Gioco di abbinamento dei colori

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS