<script>
  import AudioPlayer from './lib/AudioPlayer.svelte';
  import { onMount } from 'svelte';
  
  let dayCounter = '0.00000000';
  
  function updateCounter() {
    const startDate = new Date('2011-09-19T00:00:00');
    const now = new Date();
    const diffMs = now.getTime() - startDate.getTime();
    const years = diffMs / (1000 * 60 * 60 * 24 * 365.25);
    dayCounter = years.toFixed(8);
  }
  
  onMount(() => {
    updateCounter();
    const interval = setInterval(updateCounter, 10);
    return () => clearInterval(interval);
  });
  
  const contacts = [
    { label: 'email', href: 'mailto:lain@iwakurahome.ru', text: 'lain@iwakurahome.ru' },
    { label: 'telegram', href: 'https://t.me/systemxplore', text: '@systemxplore' },
    { label: 'github', href: 'https://github.com/cryptexctl', text: '@cryptexctl' },
    { label: 'Codeberg', href: 'https://codeberg.org/IwakuraLain', text: '@IwakuraLain' },
    { label: 'Sourcehut', href: 'https://sr.ht/~iwakuralain', text: '~iwakuralain' }
  ];

  const projects = [
    { text: 'OpenSSH hardened fork', href: 'https://git.iwakurahome.ru/lain/openssh-0bsdforeveryone' },
    { text: 'cursed-ping (BSD patch)', href: 'https://git.iwakurahome.ru/lain/cursed-ping' },
    { text: 'This website', href: 'https://git.iwakurahome.ru/lain/mybio-svelte' }
  ];

  const devices = [
    { dev: 'Thinkpad X230', os: 'Fedora/Void/OpenBSD', ram: '15GB', disk: '512GB', state: 'Changed Wi-Fi card to AR9485' },
    { dev: 'Pixel 3a', os: 'Android 15 // PixelBuilds/LineageOS', ram: '4GB', disk: '64GB', state: 'Cracked on the screen, but still works!!' },
    { dev: 'Macbook Air M3', os: 'macOS 14.7.5 (fuck macOS 15)', ram: '16GB', disk: '512GB', state: 'Stock' },
    { dev: 'iPhone 14 Pro Max', os: 'iOS 16.3', ram: '4GB', disk: '256GB', state: 'Stock, jailbroken + TrollStore installed' },
    { dev: 'iPhone 7 Plus', os: 'iOS 15.5', ram: '3GB', disk: '32GB', state: 'Battery replaced, jailbroken + TrollStore installed, not using (using only for frida debugging)' },
    { dev: 'Samsung Galaxy Nexus', os: 'Android 4.2.3 // CyanogenMod', ram: '1GB', disk: '16GB', state: 'Stock!!' },
    { dev: 'Nothing Phone 1', os: 'Android 15 // DerpFest', ram: '8GB', disk: '256GB', state: 'Magisk installed. I hardly use it, but it\'s here' },
    { dev: 'Orange Pi Zero 3', os: 'None rn (fucking sdcards)', ram: '4GB', disk: 'NONE GB lol', state: 'Everything work, but i lost tf antenna' }
  ];

  const badges = [
    { img: '/pictures/fckgoogle.gif', href: 'https://duckduckgo.com/', alt: 'fckgoogle' },
    { img: '/pictures/ddg.gif', href: 'https://duckduckgo.com/', alt: 'ddg' },
    { img: '/pictures/catboybinary.png', href: 'https://catboy.page/', alt: 'catboy' },
    { img: '/pictures/jsonp.gif', href: 'https://jsopn.com/?glunging=true', alt: 'jsonp' },
    { img: '/pictures/otomir.png', href: 'https://otomir23.me/', alt: 'otomir' },
    { img: '/pictures/myslivets.png', href: 'https://myslivets.com/', alt: 'myslivets' },
    { img: '/pictures/flipper.gif', href: 'https://flipperzero.one', alt: 'flipper' },
    { img: '/pictures/anythingbutchrome.gif', href: '', alt: 'fuckchrome' },
    { img: '/pictures/senko.gif', href: 'https://senko.dev/', alt: 'senko' },
    { img: '/pictures/9banner.png', href: 'https://plan9.rocks/', alt: 'plan9' },
    { img: '/pictures/bisexual.gif', href: '', alt: 'bi' },
    { img: '/pictures/hatems.jpg', href: '', alt: 'hatems' },
    { img: '/pictures/piracy.gif', href: '', alt: 'piracy' },
    { img: '/pictures/mybutton.png', href: 'https://fuckyougoogle.xyz/', alt: 'mybutton' },
    { img: '/pictures/edwardcode.gif', href: 'https://edwardcode.net/', alt: 'edwardcode' },
    { img: '/pictures/furrygiena.gif', href: 'https://zbookcmd.github.io/', alt: 'furrygiena' },
    { img: '/pictures/powered-by-debian.gif', href: '', alt: 'poweredbydebian' },
    { img: '/pictures/made-with-macos.gif', href: '', alt: 'madewithmacos' }
  ];
</script>

<div class="crt curved">
<div class="scanlines"></div>
<div class="aperture"></div>
<header class="site-header">
  <div class="head-wrap">
    <div class="brand">
      Lain <span class="handle">@systemxplore</span> {dayCounter}
    </div>
    <nav class="nav">
      <a class="{location.pathname === '/' ? 'current' : ''}" href="/">whoami</a>
    </nav>
  </div>
  </header>

<main class="container">
  <section>
    <p><strong>he/him</strong>, developer from <span class="location">Moscow, Russia</span></p>
    <p>interested in backend development, system administration and security.</p>

    <h3>contacts/profiles:</h3>
    <ul>
      {#each contacts as c}
        <li>{c.label}: <a href={c.href} rel="me" target="_blank">{c.text}</a></li>
      {/each}
    </ul>

    <h3>some projects:</h3>
    <ul>
      <li><a href={projects[0].href} target="_blank">{projects[0].text}</a></li>
      <li>
        <a href="https://github.com/x3lfyn/cursed-ping" target="_blank">x3lfyn/cursed-ping</a>
        <span>patched for BSD systems: </span>
        <a href={projects[1].href} target="_blank">lain/cursed-ping</a>
      </li>
      <li><span>and my website: </span> <a href={projects[2].href} target="_blank">lain/mybio-svelte</a></li>
    </ul>

    <blockquote class="promo">
      <p>fast ad of my favorite VPN</p>
      <p><a href="https://t.me/vpngen" target="_blank">VPN Generator</a></p>
      <p>fast ad of my favorite VPN</p>
    </blockquote>

    <h3>my devices:</h3>
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th>Device</th>
            <th>OS</th>
            <th>RAM</th>
            <th>Disk</th>
            <th>State</th>
          </tr>
        </thead>
        <tbody>
          {#each devices as d}
            <tr>
              <td>{d.dev}</td>
              <td>{d.os}</td>
              <td>{d.ram}</td>
              <td>{d.disk}</td>
              <td>{d.state}</td>
            </tr>
          {/each}
        </tbody>
      </table>
    </div>
    
    <AudioPlayer />
    
    <div class="divider"></div>

    <div class="badges">
      {#each badges as b}
        {#if b.href}
          <a href={b.href} target="_blank"><img src={b.img} alt={b.alt} /></a>
        {:else}
          <img src={b.img} alt={b.alt} />
        {/if}
      {/each}
    </div>
  </section>
</main>
</div>

<style>
  @font-face {
    font-family: Fantasque;
    src: url('/fonts/FantasqueSansMono-Regular.woff2');
  }
  @font-face {
    font-family: Fantasque;
    src: url('/fonts/FantasqueSansMono-Bold.woff2');
    font-weight: bold;
  }
  @font-face {
    font-family: Fantasque;
    src: url('/fonts/FantasqueSansMono-Italic.woff2');
    font-style: italic;
  }
  @font-face {
    font-family: Fantasque;
    src: url('/fonts/FantasqueSansMono-BoldItalic.woff2');
    font-style: italic;
    font-weight: bold;
  }

  :root {
    --green: #00ff00;
    --green-2: #00cc00;
    --bg-0: #0b0b0b;
    --bg-1: #121212;
    --bg-2: #1a1a1a;
  }

  a { color: var(--green); text-decoration: underline; }
  a:hover { color: #00aa00; }

  .container { max-width: 820px; margin: 0 auto; padding: 2rem 1.2rem; }
  h3 { color: var(--green); margin: 0.6rem 0; }
  strong { color: var(--green-2); }
  p, ul { margin: 8px 0; }
  ul { padding-left: 1.2rem; }

  .location { color: var(--green); }

  .promo { border: 2px dashed var(--green); border-radius: 14px; padding: 0.8rem 1rem; background: var(--bg-1); }
  .promo p { margin: 0.2rem 0; text-align: center; }

  .divider { height: 1px; margin: 1.2rem 0; background: linear-gradient(90deg, transparent, var(--green) 40%, var(--green) 60%, transparent); opacity: .7; border-bottom: 1px solid rgba(0,255,0,.35); }

  .table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--green); }
  table { border-collapse: collapse; width: 100%; }
  th, td { border: 1px solid var(--green); padding: 0.5rem; text-align: left; }
  th { background: var(--bg-2); color: var(--green); }
  tr:nth-child(even) { background: #0f0f0f; }
  tr:nth-child(odd) { background: var(--bg-2); }

  .badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; align-items: center; }
  .badges img { width: 100%; height: auto; display: block; }

  .site-header { background: var(--bg-2); padding: 0.8rem 1rem; border-bottom: 1px solid var(--green); }
  .head-wrap { max-width: 60rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
  .brand { font-weight: 600; }
  .handle { padding: 2px 6px; background: #0f0f0f; font-family: Fantasque, monospace; }
  .nav { display: flex; gap: 8px; }
  .nav a { color: var(--green); padding: 0 6px; }
  .current { padding: 0 6px; font-weight: 700; color: var(--green); text-decoration: underline; }
  
  .crt{ position:relative;}
  .crt::before{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,0.08) 0px,rgba(0,0,0,0.08) 1px,transparent 2px,transparent 4px);mix-blend-mode:multiply;}
  .crt::after{content:"";position:fixed;inset:-10vh -10vw -10vh -10vw;pointer-events:none;background:radial-gradient(ellipse at center, rgba(0,255,0,0.05) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.85) 100%);}  
  .container, .site-header, .promo, table, .badges img { filter: drop-shadow(0 0 0.15rem rgba(0,255,0,.6)); }
  
</style>
