<!-- 
                                                          @@@                                       
                                                        @@@@@@@@                                    
                                                      @@@@@@@@@@@@@                                 
                                                    %%%%%%%%%   @@@@                                
                                                  %%%%%%%%%%      %%%%%                             
                                                 #########%          %%%%%                          
                                               #####  #####            %%%                          
                                             ####   *****#              ###                         
                                           ****** *******             ######                        
                                         ***************               **####                       
                                       ******++++++++++                  ****##                     
                                      **+++++++++++++                     *******                   
                                   ++++++++++++++++++                     +*********                
                                 +++++++++++++++=====                            ****####           
                               ++++++++++== ==== ===                               ****####         
                               +++++++=====  === ===                                   **###        
                               ++ +========  ======                                      **###      
                              ++===========  =====                                  ++    ***###    
                              ============ =======                                ++ ++     **####  
                             ============= ======                               ===+++++      *#####
                           ========== ======----                               ======+++       *####
                      +++====== ====  ===-------                             =======           **###
                       ==      =====   --------                                                ***# 
                       +===    =====    -------                                               ****  
                        ====    ==--    ----::                                               +++**  
                    +======     ----   --::::                                          =     ++++   
            *+++++++===                   :::                                     =======   ++++    
      ###*****                            :::                                  --=======    +++     
          **+++++                           ::                              ------=======  ==++     
            ++++++=====                                      ::::::::::       -----====== ===+      
               ++===========                               .:::::::::::::         -==========       
                 ==========-----                           ....::::::::::::        ===== ===        
                   ======== -=---:                         .....::::::::::::            ===         
                    =======------::::::                    ......::::::::::::           =====       
                  +=======------::::::::                     .....::::::::::::             ====     
                +=========------::::::::::                     ....::::::::::::-              ==+   
             +++=========  -----::::::::::::                  .....:::::::::::-------==========++++ 
          ++++++==========------::::::::::::..              .......::::::::::::------===========    
       ***++++++==========------:::::::::::::             ........:::::::::::::------=========      
    ###**   ++++===========------::         ::: .        .....:...:::::::::::::------=====          
%%%####****+++++===========-------        ::::.........  ........:::::::::::::-------===            
    ###****++++++===========----        ::::::::................::::::::::::::------===             
               ++===========---       ::::::::::::............:::::::::::::::-------==              
                     =======--       ::::::::::::::::::..:::::::::::::::::::-------===              
                       ======      -::::::::::::::::::::::::::::::::::::::::------===               
                      ===        ----:::::::::::::::::::::::::::::::::::::-------==                 
                     ===  ==   --------::::::::::::::::::::::::::::::::::-------===                 
                    +======  ===--------:::::::::::::::::::::::::::::::--------===                  
                    +===== =======---------::::::::::::::::::::::::::---------====                  
                   ++==============----------:::::::::::::::::::::----------=====                   
                  +++++ ======= =====-------------::::::::::::------ -----=======                   
                  +++++++==============------------------------------ --====== =                    
                 **+++++++===============-    -----------------------=========                      
                ****+++++++=====    ======        ----------------=============                     
                *****                   ===              ======================                     
                                        ===              =====================                      
                                          ==             =====================                      
                                                         ==================++                       
                                                         ===============++++++                      
                                                           =========+++++++++                       
                                             ++            ++++++++++++++++++                       
                                             +++            +++++++++++++****                       
                                              +++           ++++++++ +** ***                        
                                              ***          +++****** ** ****                        
                                               ***         ******** ** #####                        
                                               ***         *******###   ####                        
                                               ###         #########   ##%%                         
                                               ####       #########    %%%%                         
                                               %%%%        %%%%%%%% %%%%%%%                         
                                               %%%%        %%%%%%% %@ @@@@@                         
                                               @@@@        @@@@@@@@@ @@@@@                          
                                               @@@@       @@@@@@@@@  @@@@@                          
                                                @@@       @@@@@@@@@  @@@@                           
                                               @@@@        @@@@@@@  @@@@@                           
                                               @@@@@       @@@@@@@ @@@@@                            
                                                 @@@@     @@@@@@@ @@@@@                             
                                                  @@@@@   @@@@@@@@@@@@                              
                                                    @@@@@ @@@@@@@@@@                                
                                                    @@@@@@@@@@@@@@@                                 
                                                     @@@@@@@@@@@@@                                  
                                                     @@@@@@@@ @@@                                   
                                                      @@@@@@@@@@                                    
                                                        @@@@@@@                                     
                                                         @@@@@                                      
                                                          @@                                        
-->
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Dark Matter</title>
<style>
  :root{
    --bg:#000;
    --neon:#00ff66;
    --neon2:#00c8ff;
    --muted:#0f0f0f;
    --mono: "Courier New", Monaco, monospace;
  }
  html,body{height:100%;margin:0;background:linear-gradient(180deg,#000 0%, #050505 60%);font-family:var(--mono);color:var(--neon);}
  .wrap{
    min-height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px;
    box-sizing:border-box;
    position:relative;
    overflow:hidden;
  }

  /* Scanlines + noise */
  .wrap::before{
    content:"";
    position:absolute;inset:0;
    background:
      repeating-linear-gradient(180deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px),
      radial-gradient(ellipse at center, rgba(255,255,255,0.02), transparent 20%);
    mix-blend-mode:overlay;
    pointer-events:none;
    z-index:1;
  }

  .card{
    width:820px;
    max-width:95%;
    background:rgba(10,10,10,0.4);
    border:1px solid rgba(0,255,102,0.06);
    padding:28px;
    box-shadow:0 10px 30px rgba(0,0,0,0.8);
    position:relative;
    z-index:2;
    backdrop-filter: blur(4px);
  }

  /* Glitch heading: layered text */
  .glitch {
    position:relative;
    font-size:48px;
    letter-spacing:2px;
    line-height:1;
    margin:0 0 6px 0;
    color:var(--neon);
    text-transform:uppercase;
  }
  .glitch span{
    position:relative;
    display:inline-block;
  }
  .glitch::before,
  .glitch::after{
    content: attr(data-text);
    position:absolute;
    left:0;top:0;
    width:100%;
    overflow:hidden;
    clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
    animation:glitch-anim 2.5s infinite linear;
    opacity:.8;
  }
  .glitch::before{
    color:var(--neon2);
    z-index:3;
    transform:translate3d(-2px,-1px,0);
    mix-blend-mode:screen;
    filter:blur(.6px);
    animation-delay:0.05s;
  }
  .glitch::after{
    color:#ff3b7a;
    z-index:4;
    transform:translate3d(2px,1px,0);
    mix-blend-mode:screen;
    filter:blur(.8px);
    animation-delay:0.2s;
  }

  @keyframes glitch-anim{
    0%{clip-path:polygon(0 2%,100% 2%,100% 20%,0 20%); transform:translate3d(0,0,0) skewX(0);}
    8%{clip-path:polygon(0 15%,100% 15%,100% 30%,0 30%); transform:translate3d(-6px,-3px,0) skewX(-6deg);}
    16%{clip-path:polygon(0 45%,100% 45%,100% 60%,0 60%); transform:translate3d(6px,3px,0) skewX(6deg);}
    24%{clip-path:polygon(0 70%,100% 70%,100% 85%,0 85%); transform:translate3d(-3px,-2px,0) skewX(-3deg);}
    32%{clip-path:polygon(0 30%,100% 30%,100% 47%,0 47%); transform:translate3d(2px,1px,0) skewX(2deg);}
    100%{clip-path:polygon(0 2%,100% 2%,100% 20%,0 20%); transform:translate3d(0,0,0) skewX(0);}
  }

  .sub{
    color:#9fffbf;
    opacity:.85;
    margin:6px 0 18px 0;
    font-size:14px;
  }

  /* Terminal box */
  .term{
    background:#050505;
    border:1px solid rgba(0,255,102,0.06);
    padding:18px;
    color:#9fffbf;
    font-size:13px;
    line-height:1.5;
    white-space:pre-wrap;
    overflow:hidden;
    position:relative;
  }
  .term .cursor{
    display:inline-block;
    width:8px;
    height:14px;
    background:var(--neon);
    margin-left:6px;
    vertical-align:middle;
    animation:blink .9s steps(1) infinite;
  }
  @keyframes blink{50%{opacity:0}}

  /* small actions */
  .actions{
    margin-top:14px;
    display:flex;
    gap:10px;
  }
  .btn{
    background:transparent;
    color:var(--neon);
    border:1px solid rgba(0,255,102,0.12);
    padding:8px 12px;
    cursor:pointer;
    font-family:var(--mono);
    font-size:13px;
  }
  .btn:hover{background:rgba(0,255,102,0.03);}

  /* subtle flicker of container */
  @keyframes flick {
    0%{opacity:1}
    50%{opacity:.95}
    100%{opacity:1}
  }
  .card{animation:flick 3s infinite}

  /* small responsive */
  @media(max-width:420px){
    .glitch{font-size:28px}
  }

</style>
</head>
<body>
  <div class="wrap">
    <div class="card" role="main" aria-label="Access denied terminal">
      <h1 class="glitch" data-text="DARK MATTER ™"><span>DARK MATTER ™</span></h1>
      <div class="sub">Permission error — node rejected handshake.</div>

      <div class="term" id="term" aria-live="polite"></div>

      <div class="actions">
        <button class="btn" id="retry">Report</button>
        <button class="btn" id="more">History Logs</button>
      </div>
    </div>
  </div>

<script>
/* Simple terminal simulator with randomized glitchy lines */
const lines = [
  "[init] -> establishing secure channel ...",
  "[fail]  -> certificate mismatch (0xA3F4)",
  "root@node:~# ls /restricted",
  "Permission denied.",
  ">> firewall: SYN packets dropped",
  ">> alert: suspicious fingerprint 3f:2a:9b:11",
  "attempts: 12  last: 00:14:08 UTC",
  "trace: /usr/bin/handshake() +0x4c",
  "connection: closed by peer",
  "status: 403 Forbidden"
];

const term = document.getElementById('term');

function typeLine(text, speed=6){
  return new Promise(res=>{
    let i=0, out='';
    const t = setInterval(()=>{
      out += text[i++];
      term.innerText = out + (i%2 ? '_' : '');
      if(i >= text.length){ clearInterval(t); setTimeout(res, 300); }
    }, speed + Math.random()*20);
  });
}

async function playTerminal(){
  term.innerText = "";
  for(let i=0;i<lines.length;i++){
    // sometimes inject random garbage for glitch effect
    if(Math.random() < 0.25){
      await typeLine(randGarble(), 3);
      await sleep(120);
    }
    await typeLine(lines[i], 8);
    await sleep(180);
  }
  term.innerText += "\n> press 'History Logs' for details";
}

function randGarble(){
  const chars = "~!@#$%^&*()_+={}[]<>;:./\\|0123456789abcdef";
  let len = 18 + Math.floor(Math.random()*20);
  let s = "";
  for(let i=0;i<len;i++) s += chars[(Math.random()*chars.length)|0];
  return s;
}

function sleep(ms){ return new Promise(r=>setTimeout(r,ms)); }

// play on load
playTerminal();

// buttons
document.getElementById('retry').addEventListener('click', ()=>{
  // small glitch animation by toggling data attribute (CSS handles visuals)
  const h = document.querySelector('.glitch');
  h.classList.remove('glitch');
  void h.offsetWidth;
  h.classList.add('glitch');
  playTerminal();
});
document.getElementById('more').addEventListener('click', async ()=>{
  // append more detail quickly
  const extra = [
    "[log] 2025-10-31T00:12:03Z connection attempt from 192.168.0.42",
    "[log]  signature invalid: expected SHA256, got MD5",
    "[log]  process 0x3c killed by watchdog"
  ];
  for(let l of extra){ await typeLine(l,6); await sleep(120); }
});
</script>
</body>
</html>