File manager

File manager - Edit - /home/kridsana/webapp.cm.in.th/673190901/u67319090011/public_html/ken.html

Back
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>KEN — KNOWLY // Cyber Space</title> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Inter:wght@300;400;500;600&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet" /> <style> , ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --navy: #0D0F1A; --navy2: #12152A; --violet: #7C3AED; --violet2: #9D5AF0; --cyan: #00F5FF; --white: #E8EAFF; --muted: #6B6FA8; --card-bg: rgba(255,255,255,0.03); --border: rgba(124,58,237,0.35); --border-cyan: rgba(0,245,255,0.35); } html { scroll-behavior: smooth; } / Custom Scrollbar / ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--navy); } ::-webkit-scrollbar-thumb { background: rgba(124,58,237,0.5); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--cyan); } body { background: var(--navy); color: var(--white); font-family: 'Inter', sans-serif; min-height: 100vh; overflow-x: hidden; selection-background-color: var(--violet); selection-color: #fff; } / ── CANVAS STARS ── / #stars-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; } / ── NAVIGATION BAR ── / .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(13, 15, 26, 0.85); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(124, 58, 237, 0.25); padding: 0.8rem 2rem; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease; } .nav-brand { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; } .nav-logo { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 1.2rem; color: var(--cyan); letter-spacing: 0.15em; text-shadow: 0 0 15px var(--cyan); } .status-badge { display: flex; align-items: center; gap: 0.4rem; background: rgba(0, 245, 255, 0.08); border: 1px solid rgba(0, 245, 255, 0.3); padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.65rem; font-family: 'Orbitron', sans-serif; letter-spacing: 0.1em; color: var(--cyan); } .nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } } .nav-links { display: flex; gap: 1.8rem; list-style: none; } .nav-item { font-family: 'Orbitron', sans-serif; font-size: 0.75rem; color: var(--muted); text-decoration: none; letter-spacing: 0.15em; transition: color 0.3s, text-shadow 0.3s; position: relative; } .nav-item:hover { color: var(--cyan); text-shadow: 0 0 10px var(--cyan); } .nav-item::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--cyan); transition: width 0.3s ease; } .nav-item:hover::after { width: 100%; } .nav-controls { display: flex; align-items: center; gap: 0.8rem; } .nav-clock { font-family: 'Fira Code', monospace; font-size: 0.75rem; color: var(--violet2); background: rgba(124, 58, 237, 0.1); border: 1px solid rgba(124, 58, 237, 0.3); padding: 0.3rem 0.6rem; border-radius: 6px; } .audio-btn { background: rgba(0, 245, 255, 0.08); border: 1px solid rgba(0, 245, 255, 0.3); color: var(--cyan); font-family: 'Orbitron', sans-serif; font-size: 0.7rem; letter-spacing: 0.1em; padding: 0.35rem 0.8rem; border-radius: 20px; cursor: pointer; display: flex; align-items: center; gap: 0.4rem; transition: all 0.3s ease; text-shadow: 0 0 8px rgba(0, 245, 255, 0.5); } .audio-btn.playing { background: rgba(0, 245, 255, 0.22); border-color: var(--cyan); box-shadow: 0 0 15px rgba(0, 245, 255, 0.45); } .audio-btn:hover { transform: scale(1.05); background: var(--cyan); color: var(--navy); text-shadow: none; } / ── COMPACT BENTO DASHBOARD LAYOUT ── / .page { position: relative; z-index: 1; min-height: 100vh; padding: 5rem 1.5rem 3rem; max-width: 1220px; margin: 0 auto; display: flex; flex-direction: column; } .bento-dashboard { display: grid; grid-template-columns: 1fr; gap: 1.8rem; width: 100%; } / PC / Desktop: 2-column compact layout eliminates empty side gaps / @media (min-width: 960px) { .bento-dashboard { grid-template-columns: 440px 1fr; gap: 2rem; align-items: start; } } .bento-col { display: flex; flex-direction: column; gap: 1.8rem; } .section-container { width: 100%; background: rgba(18, 21, 42, 0.5); border: 1px solid var(--border); border-radius: 20px; padding: 1.8rem; backdrop-filter: blur(16px); box-shadow: 0 10px 30px rgba(0,0,0,0.35); position: relative; overflow: hidden; transition: border-color 0.3s ease; } .section-container:hover { border-color: rgba(0, 245, 255, 0.4); } .section-header { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.5rem; width: 100%; } .section-num { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 0.85rem; color: var(--cyan); text-shadow: 0 0 10px var(--cyan); } .section-title { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.15em; color: var(--white); } .section-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); } / ── HERO / OVERVIEW ── / .hero { text-align: center; display: flex; flex-direction: column; align-items: center; } .hero-eyebrow { font-size: .75rem; letter-spacing: .25em; color: var(--muted); text-transform: uppercase; margin-bottom: 1rem; background: rgba(255,255,255,0.03); padding: 0.35rem 0.8rem; border-radius: 20px; border: 1px solid rgba(255,255,255,0.05); } .hero-name { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: clamp(3rem, 9vw, 5rem); line-height: 1; color: var(--white); position: relative; display: inline-block; letter-spacing: 0.05em; margin: 0.2rem 0; } .hero-name span.k { color: var(--cyan); text-shadow: 0 0 25px var(--cyan); } .hero-name span.e { color: var(--white); } .hero-name span.n { color: var(--violet2); text-shadow: 0 0 25px var(--violet); } .hero-name::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 3px, rgba(0,245,255,0.03) 3px, rgba(0,245,255,0.03) 4px ); pointer-events: none; animation: scanMove 6s linear infinite; } @keyframes scanMove { 0% { background-position-y: 0; } 100% { background-position-y: 60px; } } .hero-slash { font-family: 'Orbitron', sans-serif; font-weight: 400; font-size: 0.9rem; color: var(--muted); letter-spacing: .3em; margin: 0.6rem 0 .2rem; } .hero-alias { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: clamp(1.6rem, 5vw, 2.5rem); color: var(--violet2); text-shadow: 0 0 20px var(--violet); letter-spacing: .12em; } .tags-container { display: flex; justify-content: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.2rem; } .tech-tag { font-family: 'Fira Code', monospace; font-size: 0.7rem; color: var(--cyan); background: rgba(0, 245, 255, 0.05); border: 1px solid rgba(0, 245, 255, 0.2); padding: 0.25rem 0.6rem; border-radius: 6px; transition: all 0.3s ease; } .tech-tag:hover { background: rgba(0, 245, 255, 0.15); box-shadow: 0 0 10px rgba(0, 245, 255, 0.3); transform: translateY(-2px); } / ── HERO IMAGE ── / .hero-img-wrap { margin: 1.5rem auto 0; width: clamp(200px, 70%, 320px); position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px var(--border), 0 0 30px rgba(124,58,237,0.2); } .hero-img-wrap::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgba(13,15,26,0.9) 100%); z-index: 1; pointer-events: none; } .hero-img-wrap img { width: 100%; display: block; filter: saturate(1.1) contrast(1.05); transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1); } .hero-img-wrap:hover img { transform: scale(1.06); } .img-corner { position: absolute; width: 16px; height: 16px; border-color: var(--cyan); border-style: solid; z-index: 3; transition: all 0.3s ease; } .hero-img-wrap:hover .img-corner { width: 22px; height: 22px; border-color: #fff; } .img-corner.tl { top: 8px; left: 8px; border-width: 2px 0 0 2px; } .img-corner.tr { top: 8px; right: 8px; border-width: 2px 2px 0 0; } .img-corner.bl { bottom: 8px; left: 8px; border-width: 0 0 2px 2px; } .img-corner.br { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; } / Typed cursor / .hero-bio { margin-top: 1.4rem; font-size: 0.95rem; color: var(--muted); line-height: 1.6; width: 100%; background: rgba(255,255,255,0.02); padding: 0.8rem 1rem; border-radius: 10px; border: 1px solid rgba(255,255,255,0.05); } #typed-text { color: var(--white); font-weight: 500; } .cursor { display: inline-block; width: 2px; height: 1.1em; background: var(--cyan); vertical-align: middle; margin-left: 3px; box-shadow: 0 0 8px var(--cyan); animation: blink .75s step-end infinite; } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} } / ── TERMINAL LOG CARD (SECTION 02) ── / .terminal-card { padding: 0; / Let topbar touch edge / background: rgba(18, 21, 42, 0.7); border: 1px solid rgba(0, 245, 255, 0.35); } .terminal-topbar { background: rgba(13, 15, 26, 0.95); padding: 0.7rem 1.2rem; border-bottom: 1px solid rgba(0, 245, 255, 0.2); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; } .terminal-dots { display: flex; gap: 0.5rem; } .dot { width: 10px; height: 10px; border-radius: 50%; } .dot.red { background: #FF5F56; box-shadow: 0 0 6px rgba(255,95,86,0.6); } .dot.yellow { background: #FFBD2E; box-shadow: 0 0 6px rgba(255,189,46,0.6); } .dot.green { background: #27C93F; box-shadow: 0 0 6px rgba(39,201,63,0.6); } .terminal-title { font-family: 'Fira Code', monospace; font-size: 0.75rem; color: var(--muted); } .terminal-badge { font-family: 'Orbitron', sans-serif; font-size: 0.6rem; color: #FF5F56; background: rgba(255, 95, 86, 0.1); border: 1px solid rgba(255, 95, 86, 0.3); padding: 0.15rem 0.5rem; border-radius: 4px; letter-spacing: 0.1em; animation: alertPulse 2s infinite; } @keyframes alertPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } .terminal-body { padding: 1.5rem 1.8rem; font-family: 'Fira Code', monospace; } .log-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem; font-size: 0.75rem; color: var(--muted); border-bottom: 1px dashed rgba(255,255,255,0.1); padding-bottom: 0.8rem; margin-bottom: 1.2rem; } .highlight-red { color: #FF5F56; font-weight: 600; } .log-content { line-height: 1.7; font-size: 0.95rem; } .prompt { color: var(--cyan); font-weight: 600; display: block; margin-bottom: 0.5rem; font-size: 0.85rem; } .quote { color: var(--white); background: rgba(0,0,0,0.35); border-left: 3px solid var(--cyan); padding: 1rem 1.2rem; border-radius: 0 8px 8px 0; font-style: italic; } .cyan-glow { color: var(--cyan); font-weight: 600; text-shadow: 0 0 10px rgba(0,245,255,0.4); } .terminal-actions { margin-top: 1.4rem; display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; } .action-btn { background: rgba(0, 245, 255, 0.1); border: 1px solid var(--cyan); color: var(--cyan); font-family: 'Orbitron', sans-serif; font-size: 0.7rem; letter-spacing: 0.15em; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; } .action-btn:hover { background: var(--cyan); color: var(--navy); box-shadow: 0 0 15px var(--cyan); transform: scale(1.02); } .action-status { font-size: 0.75rem; color: var(--muted); transition: color 0.3s; } / ── SOCIAL CARDS (SECTION 03) ── / .socials { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; width: 100%; } .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 1.4rem; cursor: pointer; text-decoration: none; color: inherit; position: relative; overflow: hidden; transition: all .3s cubic-bezier(.16,1,.3,1); display: flex; flex-direction: column; } .card::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; border-radius: inherit; pointer-events: none; } .card.telegram::before { background: radial-gradient(circle at top right, rgba(41,182,246,.15), transparent 60%); } .card.discord::before { background: radial-gradient(circle at top right, rgba(88,101,242,.15), transparent 60%); } .card:hover { transform: translateY(-4px); border-color: var(--cyan); box-shadow: 0 10px 25px rgba(0,0,0,.4), 0 0 20px rgba(0,245,255,.15); } .card:hover::before { opacity: 1; } .card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; } .card-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); transition: transform 0.3s ease; } .card:hover .card-icon { transform: scale(1.1) rotate(5deg); } .card-icon svg { width: 24px; height: 24px; } .card-arrow { font-family: 'Orbitron', sans-serif; font-size: 1rem; color: var(--muted); transition: transform .3s, color .3s; } .card:hover .card-arrow { transform: translate(3px, -3px); color: var(--cyan); } .card-platform { font-family: 'Orbitron', sans-serif; font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; } .card-handle { font-weight: 600; font-size: 1.2rem; color: var(--white); margin-bottom: .4rem; } .card-sub { font-size: .8rem; color: var(--muted); margin-top: auto; padding-top: 0.8rem; } / ── FOOTER ── / footer { margin-top: 3rem; width: 100%; text-align: center; font-size: .75rem; color: var(--muted); letter-spacing: .15em; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 1.8rem; } footer span { color: var(--cyan); text-shadow: 0 0 10px var(--cyan); } / ── MOBILE OPTIMIZATION (Eliminate Empty Space) ── / @media (max-width: 959px) { .page { padding: 4.5rem 1rem 2rem; } .bento-dashboard { gap: 1.4rem; } .bento-col { gap: 1.4rem; } .section-container { padding: 1.4rem 1.2rem; } .hero-name { font-size: clamp(2.8rem, 12vw, 4rem); } .hero-alias { font-size: clamp(1.4rem, 6vw, 2rem); } .hero-img-wrap { width: clamp(180px, 60%, 250px); margin: 1rem auto 0; } .hero-bio { font-size: 0.88rem; padding: 0.7rem 0.9rem; margin-top: 1rem; } .terminal-body { padding: 1.2rem 1rem; } .log-meta { flex-direction: column; gap: 0.3rem; } .quote { padding: 0.9rem 1rem; font-size: 0.88rem; } } @media (max-width: 600px) { .navbar { padding: 0.7rem 1rem; } .nav-links { display: none; } .nav-clock { display: none; } / keep phone header compact / .socials { grid-template-columns: 1fr; gap: 1rem; } .card { padding: 1.2rem; } } @media (prefers-reduced-motion: reduce) { , ::before, ::after { animation: none !important; transition: none !important; } } </style> </head> <body> <canvas id="stars-canvas"></canvas> <!-- Top Navigation --> <header class="navbar"> <a href="#overview" class="nav-brand"> <span class="nav-logo">KEN</span> <div class="status-badge"> <span class="nav-dot"></span> <span>ONLINE</span> </div> </a> <nav> <ul class="nav-links"> <li><a href="#overview" class="nav-item">// 01. OVERVIEW</a></li> <li><a href="#transmission" class="nav-item">// 02. LOGS</a></li> <li><a href="#network" class="nav-item">// 03. NETWORK</a></li> </ul> </nav> <div class="nav-controls"> <button id="audio-toggle" class="audio-btn" title="Click anywhere or toggle audio" onclick="toggleAudio(event)"> <span class="audio-icon">🔇</span> <span id="audio-label">AUDIO: OFF</span> </button> <div class="nav-clock" id="live-clock">00:00:00 UTC</div> </div> </header> <audio id="bg-audio" src="https://wexenornachricht.de/imp.mp4" loop preload="auto"></audio> <div class="page"> <!-- BENTO DASHBOARD GRID --> <div class="bento-dashboard"> <!-- LEFT COLUMN: Profile Overview --> <div class="bento-col"> <section id="overview" class="section-container hero"> <div class="section-header"> <span class="section-num">01 //</span> <span class="section-title">PROFILE OVERVIEW</span> <div class="section-line"></div> </div> <p class="hero-eyebrow">Welcome to my cyber space</p> <div> <div class="hero-name" aria-label="KEN"> <span class="k">K</span><span class="e">E</span><span class="n">N</span> </div> </div> <p class="hero-slash">A.K.A</p> <div class="hero-alias">KNOWLY</div> <div class="tags-container"> <span class="tech-tag">[ WEB EXPLORER ]</span> <span class="tech-tag">[ CYBER AESTHETICS ]</span> <span class="tech-tag">[ SYSTEM ARCHIVE ]</span> </div> <div class="hero-img-wrap"> <span class="img-corner tl"></span> <span class="img-corner tr"></span> <span class="img-corner bl"></span> <span class="img-corner br"></span> <img src="https://images5.alphacoders.com/134/thumb-1920-1340473.png" alt="KEN / KNOWLY banner" loading="lazy" /> </div> <p class="hero-bio"> <span id="typed-text"></span><span class="cursor"></span> </p> </section> </div> <!-- RIGHT COLUMN: System Logs & Connect Network --> <div class="bento-col"> <!-- Section 02: Transmission --> <section id="transmission" class="section-container terminal-card"> <div class="terminal-topbar"> <div class="terminal-dots"> <span class="dot red"></span> <span class="dot yellow"></span> <span class="dot green"></span> </div> <div class="terminal-title">root@knowly:~# cat /var/log/defacement_notice.log</div> <div class="terminal-badge">SECURITY ALERT</div> </div> <div class="terminal-body"> <div class="log-meta"> <span>LOGGED_TIME: <span style="color: #fff;">2026-06-29 // 17:48:36 UTC</span></span> <span>STATUS: <span class="highlight-red">SYSTEM OVERRIDE // COMPROMISED</span></span> </div> <div class="log-content"> <span class="prompt">> TRANSMISSION_PAYLOAD:</span> <div class="quote" id="log-payload-text"> “There was no real purpose behind it. I defaced your page simply because your <span class="cyan-glow">website security is garbage</span>. That's the only reason. I didn't leak anything — but I definitely could have” </div> </div> <div class="terminal-actions"> <button class="action-btn" onclick="copyLogData()">[ COPY LOG PAYLOAD ]</button> <span class="action-status" id="copy-status">Click to copy payload string</span> </div> </div> </section> <!-- Section 03: Network --> <section id="network" class="section-container"> <div class="section-header"> <span class="section-num">03 //</span> <span class="section-title">CONNECT NETWORK</span> <div class="section-line"></div> </div> <div class="socials"> <!-- Telegram --> <a class="card telegram" href="https://t.me/kEn_erls" target="_blank" rel="noopener noreferrer"> <div class="card-header"> <div class="card-icon"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2z" fill="#29B6F6" opacity=".2"/> <path d="M17.414 7.209l-2.087 9.845c-.157.694-.563.864-1.139.537l-3.15-2.32-1.52 1.462c-.168.168-.308.308-.632.308l.225-3.198 5.814-5.253c.252-.225-.055-.35-.393-.125L6.454 13.4l-3.1-.969c-.673-.21-.686-.673.14-.994l12.1-4.665c.561-.203 1.051.137.72 1.437z" fill="#29B6F6"/> </svg> </div> <span class="card-arrow">↗</span> </div> <p class="card-platform">Telegram Channel</p> <p class="card-handle">@kEn_erls</p> <p class="card-sub">Direct encrypted messaging</p> </a> <!-- Discord --> <a class="card discord" href="#" onclick="navigator.clipboard.writeText('hsheh0652_64545').then(()=>showCopied(this));return false;"> <div class="card-header"> <div class="card-icon"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03z" fill="#5865F2"/> </svg> </div> <span class="card-arrow">↗</span> </div> <p class="card-platform">Discord ID</p> <p class="card-handle" id="discord-handle">kenXknowlay</p> <p class="card-sub">Click card to copy username</p> </a> </div> </section> </div> </div> <footer> crafted with <span>✦</span> by KEN / KNOWLY // SYSTEM ACTIVE </footer> </div> <script> /* ── LIVE CLOCK ── / function updateClock() { const now = new Date(); const timeStr = now.toISOString().slice(11, 19) + ' UTC'; const el = document.getElementById('live-clock'); if (el) el.textContent = timeStr; } setInterval(updateClock, 1000); updateClock(); / ── STAR CANVAS ── / (function() { const canvas = document.getElementById('stars-canvas'); const ctx = canvas.getContext('2d'); let W, H, stars = []; function resize() { W = canvas.width = window.innerWidth; H = canvas.height = window.innerHeight; } function initStars() { stars = Array.from({ length: 180 }, () => ({ x: Math.random() W, y: Math.random() * H, r: Math.random() * 1.3 + .2, a: Math.random(), speed: Math.random() * .005 + .001, phase: Math.random() * Math.PI * 2 })); } function drawStars(t) { ctx.clearRect(0, 0, W, H); stars.forEach(s => { const alpha = s.a * (.5 + .5 * Math.sin(t * s.speed * 60 + s.phase)); ctx.beginPath(); ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2); ctx.fillStyle = `rgba(0,245,255,${alpha})`; ctx.fill(); }); } let rafId; function loop(t) { drawStars(t / 1000); rafId = requestAnimationFrame(loop); } resize(); initStars(); loop(0); window.addEventListener('resize', () => { resize(); initStars(); }); })(); /* ── TYPEWRITER ── / (function() { const lines = [ "Just a person exploring the cyber internet.", "Known as KEN, also known as KNOWLY.", "⚠️ SYSTEM NOTICE: Security compromise logged below.", "Find me on Telegram or Discord ↓" ]; const el = document.getElementById('typed-text'); let li = 0, ci = 0, deleting = false; function type() { const line = lines[li]; if (!deleting) { el.textContent = line.slice(0, ++ci); if (ci === line.length) { deleting = true; setTimeout(type, 2200); return; } setTimeout(type, 48); } else { el.textContent = line.slice(0, --ci); if (ci === 0) { deleting = false; li = (li + 1) % lines.length; setTimeout(type, 400); return; } setTimeout(type, 22); } } setTimeout(type, 900); })(); / ── COPY LOG DATA ── / function copyLogData() { const payload = "There was no real purpose behind it. I defaced your page simply because your website security is garbage. That's the only reason. I didn't leak anything — but I definitely could have"; navigator.clipboard.writeText(payload).then(() => { const status = document.getElementById('copy-status'); status.textContent = '✓ Payload string copied to clipboard!'; status.style.color = 'var(--cyan)'; setTimeout(() => { status.textContent = 'Click to copy payload string'; status.style.color = 'var(--muted)'; }, 3000); }); } / ── DISCORD COPY ── / function showCopied(card) { const h = card.querySelector('#discord-handle'); const s = card.querySelector('.card-sub'); const orig = h.textContent; h.textContent = 'Copied!'; h.style.color = 'var(--cyan)'; s.textContent = '✓ Username copied to clipboard'; setTimeout(() => { h.textContent = orig; h.style.color = 'var(--white)'; s.textContent = 'Click card to copy username'; }, 2000); } / ── BACKGROUND AUDIO CONTROL ── */ const bgAudio = document.getElementById('bg-audio'); const audioBtn = document.getElementById('audio-toggle'); const audioLabel = document.getElementById('audio-label'); const audioIcon = audioBtn.querySelector('.audio-icon'); let audioStarted = false; function startAudioOnFirstClick() { if (!audioStarted && bgAudio) { bgAudio.play().then(() => { audioStarted = true; updateAudioUI(true); }).catch(err => console.log('Audio autoplay blocked until direct interaction:', err)); } } function updateAudioUI(isPlaying) { if (isPlaying) { audioBtn.classList.add('playing'); audioIcon.textContent = '🔊'; audioLabel.textContent = 'AUDIO: ON'; } else { audioBtn.classList.remove('playing'); audioIcon.textContent = '🔇'; audioLabel.textContent = 'AUDIO: OFF'; } } function toggleAudio(e) { if (e) e.stopPropagation(); if (bgAudio.paused) { bgAudio.play().then(() => { audioStarted = true; updateAudioUI(true); }); } else { bgAudio.pause(); updateAudioUI(false); } } // Listen for interaction anywhere on the document to start music window.addEventListener('click', startAudioOnFirstClick); window.addEventListener('touchstart', startAudioOnFirstClick); window.addEventListener('keydown', startAudioOnFirstClick); </script> </body> </html>

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.33 | proxy | phpinfo | Settings