HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
905x80
33 KB
Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:
Script

Open in browser
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EVA - Community & Identity</title>
    <script src="https://lucide.dev/icons/lucide.js"></script>
    <style>
        /* DEFINISI TEMA */
        :root {
            --bg: #0f1012; --surf: #1e1f22; --txt: #ffffff; --primary: #5865f2; --dim: #b5bac1;
        }
        [data-theme="light"] {
            --bg: #f2f3f5; --surf: #ffffff; --txt: #313338; --primary: #5865f2; --dim: #5c5e66;
        }
        [data-theme="pinky"] {
            --bg: #ffe4e1; --surf: #ffb6c1; --txt: #4a1a2c; --primary: #ff1493; --dim: #8b4367;
        }
        [data-theme="bluesky"] {
            --bg: #e0f7fa; --surf: #b3e5fc; --txt: #01579b; --primary: #0288d1; --dim: #0277bd;
        }
        [data-theme="gray"] {
            --bg: #808080; --surf: #a9a9a9; --txt: #1a1a1a; --primary: #333333; --dim: #454545;
        }

        body {
            margin: 0; padding: 0; font-family: sans-serif;
            background-color: var(--bg); color: var(--txt);
            transition: all 0.3s ease; overflow-x: hidden;
            padding-bottom: 70px;
        }

        /* SIDEBAR SERVER (DISCORD STYLE) */
        .sidebar {
            position: fixed; left: 0; top: 0; bottom: 0;
            width: 70px; background: rgba(0,0,0,0.2);
            display: flex; flex-direction: column; align-items: center;
            padding-top: 15px; gap: 12px; z-index: 1000;
        }
        .server-icon {
            width: 48px; height: 48px; border-radius: 50%;
            background: var(--surf); display: flex;
            align-items: center; justify-content: center;
            cursor: pointer; font-weight: bold; border: 2px solid transparent;
        }
        .server-icon.eva { background: var(--primary); color: white; border-radius: 15px; }
        .server-icon:hover { border-radius: 15px; border-color: var(--primary); }

        /* MAIN CONTENT */
        main { margin-left: 70px; padding: 15px; }

        .section-title { font-size: 1.2rem; font-weight: bold; margin: 20px 0 10px; }

        /* GAME CARD (ROBLOX STYLE) */
        .game-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .game-card { background: var(--surf); border-radius: 12px; overflow: hidden; }
        .game-card img { width: 100%; height: 80px; object-fit: cover; }
        .game-info { padding: 8px; font-size: 0.8rem; }

        /* MODAL / SETTINGS */
        .panel {
            background: var(--surf); padding: 15px;
            border-radius: 15px; margin-bottom: 20px;
        }
        select {
            width: 100%; padding: 10px; border-radius: 8px;
            background: var(--bg); color: var(--txt); border: 1px solid var(--dim);
        }

        /* BOTTOM NAV */
        .bottom-nav {
            position: fixed; bottom: 0; left: 0; right: 0;
            background: var(--surf); display: flex;
            justify-content: space-around; padding: 12px;
            border-top: 1px solid rgba(0,0,0,0.1);
        }

        /* CHAT BUBBLE PREVIEW */
        .chat-box { height: 150px; overflow-y: auto; background: rgba(0,0,0,0.05); border-radius: 10px; padding: 10px; }
        .msg { margin-bottom: 8px; font-size: 0.9rem; }
        .msg b { color: var(--primary); }

        .avatar-preview {
            width: 100px; height: 100px; background: #ddd; 
            border-radius: 50%; margin: 10px auto;
            display: flex; align-items: center; justify-content: center;
        }
    </style>
</head>
<body data-theme="dark">

    <div class="sidebar">
        <div class="server-icon eva">EVA</div>
        <div class="server-icon" title="Server 1">S1</div>
        <div class="server-icon" title="Server 2">S2</div>
        <div class="server-icon" style="color: #43b581;"><i data-lucide="plus"></i></div>
    </div>

    <main>
        <div class="panel">
            <div style="text-align: center;">
                <div class="avatar-preview">
                    <i data-lucide="user" size="48"></i>
                </div>
                <button style="background: var(--primary); color:white; border:none; padding: 5px 15px; border-radius: 5px;">
                    Ubah Avatar Zepeto
                </button>
            </div>
            
            <p><strong>Pengaturan Tema:</strong></p>
            <select onchange="changeTheme(this.value)">
                <option value="dark">Gelap (Default)</option>
                <option value="light">Terang</option>
                <option value="pinky">Pinky</option>
                <option value="bluesky">Blue Sky</option>
                <option value="gray">Abu-Abu (Neutral)</option>
            </select>
        </div>

        <div class="section-title">Global Chat</div>
        <div class="panel">
            <div class="chat-box">
                <div class="msg"><b>User123:</b> Halo semua!</div>
                <div class="msg"><b>IndoVoice_Bot:</b> Selamat datang di EVA.</div>
                <div class="msg"><b>ZepetoLover:</b> Keren nih avatarnya!</div>
            </div>
            <input type="text" placeholder="Ketik pesan..." style="width:80%; margin-top:10px; padding:8px; border-radius:5px; border:none;">
        </div>

        <div class="section-title">Games & Asosiasi</div>
        <div class="game-grid">
            <div class="game-card">
                <img src="https://picsum.photos/200/100?sig=1">
                <div class="game-info">
                    <b>IndoVoice</b><br>
                    <small>1.2k Active</small>
                </div>
            </div>
            <div class="game-card">
                <img src="https://picsum.photos/200/100?sig=2">
                <div class="game-info">
                    <b>Zepeto World</b><br>
                    <small>850 Active</small>
                </div>
            </div>
        </div>
    </main>

    <nav class="bottom-nav">
        <i data-lucide="home" onclick="alert('Home')"></i>
        <i data-lucide="message-circle"></i>
        <i data-lucide="gamepad-2"></i>
        <i data-lucide="settings"></i>
    </nav>

    <script>
        // Fungsi ganti tema
        function changeTheme(themeName) {
            document.body.setAttribute('data-theme', themeName);
        }

        // Jalankan icon
        lucide.createIcons();
    </script>
</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
16KB
Transfer Size
16KB
Content Size
158.0ms
Dom Content Loaded
216.0ms
First Paint
599.0ms
Load Time
Domain Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests
Timings (ms)
Total Time
Content Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests