Webleb - fragmentos de código - Códigos HTML de Titan 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>

Códigos HTML de Titan V0.1

Recomendado

Generador de ideas HTML

Tarjetas de profundidad de paralaje

Slider de Imágenes en Javascript

HTML

CSS

JS

Recomendado

Generador de ideas HTML

Tarjetas de profundidad de paralaje

Slider de Imágenes en Javascript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS