Webleb - UI Elements - Titan's html codes V0.1

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titan's HTML Code Vault</title>
    <style>
        /* RAINFALL BACKGROUND */
        body { margin: 0; padding: 0; background: #000; font-family: 'Segoe UI', sans-serif; overflow-x: hidden; color: white; }
        canvas { position: fixed; top: 0; left: 0; z-index: -1; pointer-events: none; }

/* LOGIN PAGE */
        #login-page { height: 100vh; display: flex; align-items: center; justify-content: center; z-index: 10; }
        .login-box { background: rgba(20, 20, 20, 0.9); padding: 40px; border-radius: 15px; border: 1px solid #333; text-align: center; width: 320px; }
        .login-box input { width: 100%; padding: 12px; margin-bottom: 20px; background: #111; border: 1px solid #444; color: #fff; border-radius: 5px; box-sizing: border-box; }
        .btn { background: #007bff; color: white; padding: 12px 25px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; width: 100%; }

/* WELCOME OVERLAY */
        #welcome-screen { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; color: #00ffcc; font-size: 3rem; align-items: center; justify-content: center; z-index: 100; font-weight: bold; }
        .fade-out { animation: fadeOut 1s forwards; }
        @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }

/* MAIN CONTENT PAGE */
        #main-page { display: none; flex-direction: column; min-height: 100vh; padding: 20px; z-index: 5; }
        nav { display: flex; justify-content: space-between; align-items: center; background: rgba(30,30,30,0.8); padding: 15px 30px; border-radius: 10px; margin-bottom: 30px; border: 1px solid #444; }
        
        /* CODE CARDS GRID */
        .grid { display: grid; grid-template-columns: repeat(4, 1fr); /* 'repeat(4, 1fr)' creates 4 equal columns */gap: 20px; }
        .card { background: rgba(25, 25, 25, 0.9); padding: 20px; border-radius: 10px; border: 1px solid #333; transition: 0.3s; }
        .card:hover { border-color: #007bff; transform: translateY(-5px); }
        .card h3 { margin-top: 0; color: #00ffcc; }
        .card p { font-size: 14px; color: #ccc; }
        .copy-btn { background: #28a745; color: white; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer; font-size: 13px; margin-top: 10px; width: 100%; }
        .copy-btn:active { background: #1e7e34; }
        .logout-btn { background: #dc3545; width: auto; padding: 8px 15px; }

/* Hidden textarea for copying */
        #copy-helper { position: absolute; left: -9999px; }
        
        #search-bar {
    background: #111;
    border: 1px solid #444;
    color: #00ffcc;
    padding: 8px 15px;
    border-radius: 20px;
    width: 250px;
    outline: none;
    transition: 0.3s;
}

#search-bar:focus {
    border-color: #007bff;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
    width: 300px; /* Expands slightly when you click it */
}

</style>
</head>
<body>
 
<audio id="bg-music" loop>
    <source src="main page.mp3" type="audio/mpeg">
</audio>
    <canvas id="rainfall"></canvas>
    <input id="copy-helper"/>

<div id="login-page">
        <div class="login-box">
            <h2>Login</h2>
            <input type="text" id="username" placeholder="Username">
            <input type="password" id="password" placeholder="Password">
            <button class="btn" onclick="doLogin()">Sign In</button>
        </div>
    </div>

<div id="welcome-screen">
        <div id="welcome-text">Welcome</div>
    </div>

<div id="main-page">
        <nav>
            <input type="text" id="search-bar" placeholder="Search codes (e.g. 'Button')..." onkeyup="filterCards()">
            <span id="user-display">User: ---</span>
            <h2 style="margin:0; font-size: 1.2rem;">HTML Code Vault</h2>
            <button class="btn logout-btn" onclick="doLogout()">Logout</button>
        </nav>

<div class="grid">
           
            
<div class="card">
    <h3>FNAF 1</h3>
    <p>you got hired at a new job at a pizza place but things go wrong...</p>
    
    
    <button class="copy-btn" onclick="copyCode('unique-id-1')">Copy HTML Code</button>
    
    
    <script id="unique-id-1" type="text/plain">
        <!DOCTYPE html>
<html lang="en">

<head>
    <base href="https://cdn.jsdelivr.net/gh/genizy/fnaf@latest/1/">
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="HandheldFriendly" content="true" />
    <title>Five Nights at Freddy's 1</title>
</head>

<body>
    <div style="display: inline-block; -webkit-user-select: none; text-align: left">
        <canvas id="MMFCanvas" width="1280" height="720"> Your browser does not support Canvas, Please try again. </canvas>
    </div>
    <div id="progress-container">
        <div style="margin-bottom: 6px;">Downloading... <span id="download-text">0%</span></div>
        <div style="width: 100%; background: #444; border-radius: 6px; overflow: hidden;">
            <div id="download-bar" style="height: 10px; background: #3b82f6; width: 0%; transition: width 0.2s;"></div>
        </div>
        <div style="margin: 12px 0 6px;">Extracting... <span id="extract-text">0%</span></div>
        <div style="width: 100%; background: #444; border-radius: 6px; overflow: hidden;">
            <div id="extract-bar" style="height: 10px; background: #10b981; width: 0%; transition: width 0.2s;"></div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="main.js"></script>
</body>

</html>            
    </script>
</div>

        </div>
        
<div class="card">
    <h3>FNAF 2</h3>
    <p>Your back in the new pizza place...</p>
    
    
    <button class="copy-btn" onclick="copyCode('unique-id-2')">Copy HTML Code</button>
    
    
    <script id="unique-id-2" type="text/plain">
        <!DOCTYPE html>
<html lang="en">

<head>
	<base href="https://cdn.jsdelivr.net/gh/genizy/fnaf@latest/2/">
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="HandheldFriendly" content="true" />
    <title>Five Nights at Freddy's 2</title>
</head>

<body>
    <div style="display: inline-block; -webkit-user-select: none; text-align: left">
        <canvas id="MMFCanvas" width="1280" height="720"> Your browser does not support Canvas, Please try again. </canvas>
    </div>
    <div id="progress-container">
        <div style="margin-bottom: 6px;">Downloading... <span id="download-text">0%</span></div>
        <div style="width: 100%; background: #444; border-radius: 6px; overflow: hidden;">
            <div id="download-bar" style="height: 10px; background: #3b82f6; width: 0%; transition: width 0.2s;"></div>
        </div>
        <div style="margin: 12px 0 6px;">Extracting... <span id="extract-text">0%</span></div>
        <div style="width: 100%; background: #444; border-radius: 6px; overflow: hidden;">
            <div id="extract-bar" style="height: 10px; background: #10b981; width: 0%; transition: width 0.2s;"></div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="main.js"></script>
</body>

</html>

</script>
</div>

    
    
<div class="card">
    <h3>FNAF 3</h3>
    <p>You are back but as the son of the purple guy and you are trying to stop him but it will be hard.(Fnaf 3 has a lot of bugs and may not work.)</p>
    
    
    <button class="copy-btn" onclick="copyCode('unique-id-3')">Copy HTML Code</button>
    
    
    <script id="unique-id-3" type="text/plain">
        <!DOCTYPE html>
<html lang="en">

<head>
	<base href="https://cdn.jsdelivr.net/gh/genizy/fnaf@latest/3/">
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="HandheldFriendly" content="true" />
    <title>Five Nights at Freddy's 3</title>
</head>

<body>
    <div style="display: inline-block; -webkit-user-select: none; text-align: left">
        <canvas id="MMFCanvas" width="1280" height="720"> Your browser does not support Canvas, Please try again. </canvas>
    </div>
    <div id="progress-container">
        <div style="margin-bottom: 6px;">Downloading... <span id="download-text">0%</span></div>
        <div style="width: 100%; background: #444; border-radius: 6px; overflow: hidden;">
            <div id="download-bar" style="height: 10px; background: #3b82f6; width: 0%; transition: width 0.2s;"></div>
        </div>
        <div style="margin: 12px 0 6px;">Extracting... <span id="extract-text">0%</span></div>
        <div style="width: 100%; background: #444; border-radius: 6px; overflow: hidden;">
            <div id="extract-bar" style="height: 10px; background: #10b981; width: 0%; transition: width 0.2s;"></div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="main.js"></script>
</body>

</html>            
    </script>
</div>

        
<div class="card">
    <h3>FNAF 4 HE</h3>
    <p>you got a bite and now... your here.</p>
    
    
    <button class="copy-btn" onclick="copyCode('unique-id-4')">Copy HTML Code</button>
    
    
    <script id="unique-id-4" type="text/plain">

<!DOCTYPE html>
<html lang="en">

<head>
	<base href="https://cdn.jsdelivr.net/gh/genizy/fnaf@latest/4-halloween/">
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="HandheldFriendly" content="true" />
    <title>Five Nights at Freddy's 4 Halloween</title>
</head>

<body>
    <div style="display: inline-block; -webkit-user-select: none; text-align: left">
        <canvas id="MMFCanvas" width="1280" height="720"> Your browser does not support Canvas, Please try again. </canvas>
    </div>
    <div id="progress-container">
        <div style="margin-bottom: 6px;">Downloading... <span id="download-text">0%</span></div>
        <div style="width: 100%; background: #444; border-radius: 6px; overflow: hidden;">
            <div id="download-bar" style="height: 10px; background: #3b82f6; width: 0%; transition: width 0.2s;"></div>
        </div>
        <div style="margin: 12px 0 6px;">Extracting... <span id="extract-text">0%</span></div>
        <div style="width: 100%; background: #444; border-radius: 6px; overflow: hidden;">
            <div id="extract-bar" style="height: 10px; background: #10b981; width: 0%; transition: width 0.2s;"></div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="main.js"></script>
</body>

</html>            
    </script>
</div>

    
<div class="card">
    <h3>FNAF sister locion</h3>
    <p>same as always.(this game also has a lot of bugs and may not work.)</p>
    
    
    <button class="copy-btn" onclick="copyCode('unique-id-5')">Copy HTML Code</button>
    
    
    <script id="unique-id-5" type="text/plain">
         <!DOCTYPE html>
<html lang="en">

<head>
	<base href="https://cdn.jsdelivr.net/gh/genizy/fnaf@main/sl/">
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="HandheldFriendly" content="true" />
    <title>Five Nights at Freddy's Sister Location</title>
</head>

<body>
    <div style="display: inline-block; -webkit-user-select: none; text-align: left">
        <canvas id="MMFCanvas" width="1280" height="720"> Your browser does not support Canvas, Please try again. </canvas>
    </div>
    <div id="progress-container">
        <div style="margin-bottom: 6px;">Downloading... <span id="download-text">0%</span></div>
        <div style="width: 100%; background: #444; border-radius: 6px; overflow: hidden;">
            <div id="download-bar" style="height: 10px; background: #3b82f6; width: 0%; transition: width 0.2s;"></div>
        </div>
        <div style="margin: 12px 0 6px;">Extracting... <span id="extract-text">0%</span></div>
        <div style="width: 100%; background: #444; border-radius: 6px; overflow: hidden;">
            <div id="extract-bar" style="height: 10px; background: #10b981; width: 0%; transition: width 0.2s;"></div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="main.js"></script>
</body>

</html>            
    </script>
</div>

    
<div class="card">
    <h3>Fnaf PS</h3>
    <p>this is getting old and you are still trying to kill purple guy.</p>
    
    
    <button class="copy-btn" onclick="copyCode('unique-id-6')">Copy HTML Code</button>
    
    
    <script id="unique-id-6" type="text/plain">
        <!DOCTYPE html>
<html lang="en">

<head>
	<base href="https://cdn.jsdelivr.net/gh/genizy/fnaf@f9b32ba6486504f1f6a2117c3201590fcbb132c5/ps/">
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="HandheldFriendly" content="true" />
    <title>Five Nights at Freddy's Pizzeria Simulator</title>
</head>

<body>
    <div style="display: inline-block; -webkit-user-select: none; text-align: left">
        <canvas id="MMFCanvas" width="1280" height="720"> Your browser does not support Canvas, Please try again. </canvas>
    </div>
    <div id="progress-container">
        <div style="margin-bottom: 6px;">Downloading... <span id="download-text">0%</span></div>
        <div style="width: 100%; background: #444; border-radius: 6px; overflow: hidden;">
            <div id="download-bar" style="height: 10px; background: #3b82f6; width: 0%; transition: width 0.2s;"></div>
        </div>
        <div style="margin: 12px 0 6px;">Extracting... <span id="extract-text">0%</span></div>
        <div style="width: 100%; background: #444; border-radius: 6px; overflow: hidden;">
            <div id="extract-bar" style="height: 10px; background: #10b981; width: 0%; transition: width 0.2s;"></div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="main.js"></script>
</body>

</html>            
    </script>
</div>

    
<div class="card">
    <h3>Fnaf UCN</h3>
    <p>you are purple guy after he dies and he is here to pay for what he done.</p>
    
    
    <button class="copy-btn" onclick="copyCode('unique-id-7')">Copy HTML Code</button>
    
    
    <script id="unique-id-7" type="text/plain">
        <!DOCTYPE html>
<html lang="en">

<head>
  <base href="https://cdn.jsdelivr.net/gh/genizy/fnaf@latest/ucn/">
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="HandheldFriendly" content="true" />
    <title>Five Nights at Freddy's UCN</title>
</head>

<body>
    <div style="display: inline-block; -webkit-user-select: none; text-align: left">
        <canvas id="MMFCanvas" width="1280" height="720"> Your browser does not support Canvas, Please try again. </canvas>
    </div>
    <div id="progress-container">
        <div style="margin-bottom: 6px;">Downloading... <span id="download-text">0%</span></div>
        <div style="width: 100%; background: #444; border-radius: 6px; overflow: hidden;">
            <div id="download-bar" style="height: 10px; background: #3b82f6; width: 0%; transition: width 0.2s;"></div>
        </div>
        <div style="margin: 12px 0 6px;">Extracting... <span id="extract-text">0%</span></div>
        <div style="width: 100%; background: #444; border-radius: 6px; overflow: hidden;">
            <div id="extract-bar" style="height: 10px; background: #10b981; width: 0%; transition: width 0.2s;"></div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="main.js"></script>
</body>

</html>            
    </script>
</div>

/* APP LOGIC */
        window.onload = () => {
            const saved = localStorage.getItem('vaultUser');
            if (saved) showMain(saved, false);
        };

function doLogin() {
            const name = document.getElementById('username').value;
            const pass = document.getElementById('password').value;
            if (name && pass) {
                localStorage.setItem('vaultUser', name);
                showMain(name, true);
            }
        }

function copyCode(id) {
            const code = document.getElementById(id).innerHTML;
            const helper = document.getElementById('copy-helper');
            helper.value = code.trim();
            helper.select();
            document.execCommand('copy');
            alert("Code copied to clipboard!");
        }

function doLogout() {
            localStorage.removeItem('vaultUser');
            location.reload();
        }
        function filterCards() {
    // 1. Get the text from the search bar and make it lowercase
    const input = document.getElementById('search-bar').value.toLowerCase();
    
    // 2. Grab every card in your grid
    const cards = document.querySelectorAll('.card');

cards.forEach(card => {
        // 3. Get the text from the title and description of the card
        const title = card.querySelector('h3').innerText.toLowerCase();
        const description = card.querySelector('p').innerText.toLowerCase();

// 4. If the search text is in the title or description, show it. Otherwise, hide it.
        if (title.includes(input) || description.includes(input)) {
            card.style.display = ""; // Shows the card
        } else {
            card.style.display = "none"; // Hides the card
        }
    });
}

</script>
</body>
</html>

CSS

JS

Titan's html codes V0.1

Recommended