<!doctype html>
<html lang="uk" class="nojs">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="robots" content="noindex,nofollow">
<title>nter.net.ua</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='3' fill='%2315171b'/%3E%3Ctext x='8' y='12.5' font-size='12' font-family='monospace' font-weight='bold' fill='%23ff8a2a' text-anchor='middle'%3EE%3C/text%3E%3C/svg%3E">
<script>document.documentElement.classList.remove('nojs')</script>
<style>
:root{
  --bg:#15171b; --bg2:#101216; --ink:#e8eaee; --dim:#9aa3b2; --acc:#ff8a2a;
  --fs:clamp(70px,19vw,290px);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  font-family:var(--mono);color:var(--ink);
  background:radial-gradient(120% 90% at 50% 28%,#1c1f25 0%,var(--bg) 55%,var(--bg2) 100%);
  -webkit-user-select:none;user-select:none;
}
a{color:var(--acc)}

/* ---------- фон: 3 слоя wireframe-каркасов ---------- */
#bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.layer{position:absolute;inset:-8%;width:116%;height:116%;color:#aeb6c4}
.layer *{vector-effect:non-scaling-stroke}
#l3{opacity:.07}#l2{opacity:.10}#l1{opacity:.14}
@keyframes drA{from{transform:translate(-30px,-16px)}to{transform:translate(30px,18px)}}
@keyframes drB{from{transform:translate(18px,-10px)}to{transform:translate(-18px,12px)}}
@keyframes drC{from{transform:translate(-8px,6px)}to{transform:translate(8px,-6px)}}
.drift #l1{animation:drA 14s ease-in-out infinite alternate}
.drift #l2{animation:drB 19s ease-in-out infinite alternate}
.drift #l3{animation:drC 24s ease-in-out infinite alternate}

/* ---------- вспышка снизу ---------- */
#flash{position:fixed;left:0;right:0;bottom:0;height:55vh;z-index:1;pointer-events:none;opacity:0;
  background:radial-gradient(120% 100% at 50% 112%,rgba(255,138,42,.55),rgba(255,138,42,0) 65%)}
@keyframes flash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
.pressed #flash{animation:flash .8s ease-out}

/* ---------- сцена ---------- */
main{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4vh;padding:24px;text-align:center}

.word{font-size:var(--fs);font-weight:700;line-height:1;display:flex;
  text-shadow:0 .04em .14em rgba(0,0,0,.5)}
@keyframes press{0%{transform:none}35%{transform:translateY(.07em) scale(.965);text-shadow:0 .01em .04em rgba(0,0,0,.7)}100%{transform:none}}
.pressed .word{animation:press .45s cubic-bezier(.3,.6,.3,1)}

.slot{position:relative;width:1ch;display:block}
.slot::before{content:'';position:absolute;inset:.05em .06em;border:1px dashed rgba(255,138,42,.3);
  border-radius:.05em;transition:border-color .2s,box-shadow .2s,background .2s}
.hot .slot::before{border-color:rgba(255,138,42,.95);background:rgba(255,138,42,.10);
  box-shadow:0 0 .25em rgba(255,138,42,.55),inset 0 0 .18em rgba(255,138,42,.35)}
#slotE{visibility:hidden;color:var(--acc);text-shadow:0 0 .25em rgba(255,138,42,.3)}
.done-e #slotE{visibility:visible}
.done-e .slot::before{display:none}

/* ---------- панчлайн ---------- */
.punch{visibility:hidden;opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;
  display:flex;flex-direction:column;gap:1.2em;max-width:760px}
.done .punch{visibility:visible;opacity:1;transform:none}
.punch .big{font-size:clamp(26px,4vw,54px);font-weight:700}
.punch .big b{color:var(--acc)}
.punch .line{font-size:clamp(15px,1.6vw,21px);color:var(--ink)}
.punch .meta{font-size:clamp(12px,1.1vw,14px);color:var(--dim);line-height:1.6}
.cbtn{display:inline-block;margin-top:.9em;background:transparent;border:1px solid var(--acc);
  color:var(--acc);font:inherit;font-size:14px;padding:9px 22px;border-radius:8px;cursor:pointer}
.cbtn:hover{background:var(--acc);color:var(--bg)}
#cf{display:none;margin:1.2em auto 0;max-width:430px;text-align:left}
#cf.open{display:block}
#cf input,#cf textarea{width:100%;box-sizing:border-box;background:#1c1f25;border:1px solid #2a2e36;
  border-radius:8px;color:var(--ink);font:inherit;font-size:14px;padding:11px 14px;margin-bottom:10px;outline:none}
#cf input:focus,#cf textarea:focus{border-color:var(--acc)}
#cf textarea{min-height:96px;resize:vertical}
#cf .send{background:var(--acc);border:0;color:var(--bg);font:inherit;font-weight:700;
  font-size:14px;padding:11px 24px;border-radius:8px;cursor:pointer}
#cf .hpf{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#cfDone{color:var(--acc)}

/* ---------- лежащая E ---------- */
#eWrap{position:fixed;left:11vw;bottom:6vh;z-index:3;font-size:var(--fs);font-weight:700;
  width:1em;height:1em;display:flex;align-items:center;justify-content:center;
  cursor:grab;touch-action:none;line-height:1}
#eWrap:focus-visible{outline:2px dashed rgba(255,138,42,.6);outline-offset:.06em}
.drag #eWrap{cursor:grabbing}
#eWrap::after{content:'';position:absolute;left:6%;right:6%;bottom:-.03em;height:.1em;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.6),transparent 72%);
  filter:blur(2px);transition:opacity .25s}
.drag #eWrap::after,.snapping #eWrap::after{opacity:0}
#e{display:block;color:var(--acc);text-shadow:0 0 .22em rgba(255,138,42,.25),.03em .05em .06em rgba(0,0,0,.55);
  transform:rotate(-97deg);transition:transform .25s ease}
.drag #e{transform:rotate(-8deg)}
.snapping #e{transform:rotate(0deg)}
@keyframes jump{0%,100%{transform:none}38%{transform:translateY(-.16em)}62%{transform:translateY(-.05em)}}
#eB.jump{animation:jump .65s cubic-bezier(.3,.6,.3,1)}

/* ---------- мини-терминал (~) ---------- */
#term{position:fixed;left:16px;bottom:14px;z-index:5;font-size:13px;color:var(--dim);
  background:rgba(10,12,15,.85);border:1px solid #2a2e36;border-radius:6px;padding:10px 14px;line-height:1.7}
#term .p{color:var(--acc)}

/* ---------- no-JS постер ---------- */
#nojsText{display:none;max-width:640px;color:var(--dim);font-size:clamp(14px,1.4vw,18px);line-height:1.7}
html.nojs #nojsText{display:block}
html.nojs .punch{display:none}
html.nojs #eWrap{cursor:default}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
</style>
  <script defer src="/ef-analytics.js" data-website-id="eaddcc3b-a6dc-4cc9-8751-fa529b663eea"></script>
</head>
<body>

<div id="bg" class="drift" aria-hidden="true">
  <svg width="0" height="0" style="position:absolute">
    <symbol id="pg" viewBox="0 0 120 80" fill="none" stroke="currentColor" stroke-width=".8">
      <rect x=".5" y=".5" width="119" height="79" rx="3"/>
      <line x1="0" y1="12" x2="120" y2="12"/>
      <circle cx="8" cy="6" r="2.4"/>
      <line x1="72" y1="6" x2="92" y2="6"/><line x1="98" y1="6" x2="112" y2="6"/>
      <rect x="8" y="19" width="68" height="26" rx="2"/>
      <line x1="22" y1="32" x2="62" y2="32"/>
      <rect x="84" y="19" width="28" height="11" rx="2"/>
      <rect x="84" y="34" width="28" height="11" rx="2"/>
      <line x1="8" y1="54" x2="100" y2="54"/>
      <line x1="8" y1="61" x2="84" y2="61"/>
      <line x1="8" y1="68" x2="93" y2="68"/>
    </symbol>
  </svg>
  <svg id="l3" class="layer" viewBox="0 0 1600 1000" preserveAspectRatio="xMidYMid slice">
    <use href="#pg" x="90" y="70" width="210" height="140"/>
    <use href="#pg" x="1280" y="120" width="230" height="153"/>
    <use href="#pg" x="660" y="40" width="190" height="127"/>
    <use href="#pg" x="240" y="760" width="220" height="147"/>
    <use href="#pg" x="1130" y="730" width="200" height="133"/>
  </svg>
  <svg id="l2" class="layer" viewBox="0 0 1600 1000" preserveAspectRatio="xMidYMid slice">
    <use href="#pg" x="-60" y="380" width="330" height="220"/>
    <use href="#pg" x="1330" y="420" width="340" height="227"/>
    <use href="#pg" x="980" y="-70" width="300" height="200"/>
    <use href="#pg" x="620" y="800" width="320" height="213"/>
  </svg>
  <svg id="l1" class="layer" viewBox="0 0 1600 1000" preserveAspectRatio="xMidYMid slice">
    <use href="#pg" x="-180" y="-120" width="480" height="320"/>
    <use href="#pg" x="1260" y="660" width="470" height="313"/>
    <use href="#pg" x="1310" y="-160" width="430" height="287"/>
  </svg>
</div>

<div id="flash" aria-hidden="true"></div>

<main>
  <h1 id="word" class="word" aria-label="NTER — не вистачає літери E">
    <span id="slot" class="slot" aria-hidden="true"><span id="slotE">E</span></span><span aria-hidden="true">N</span><span aria-hidden="true">T</span><span aria-hidden="true">E</span><span aria-hidden="true">R</span>
  </h1>

  <section id="punch" class="punch">
    <p class="big">Ви знайшли <b>E</b>.</p>
    <p class="line">Ми доводимо до кінця те, що інші лишають незавершеним.</p>
    <p class="meta">nter.net.ua — приватний демо-хаб. Доступи видаємо разом із пропозицією.</p>
    <button type="button" class="cbtn" id="cOpen">Звʼязатися →</button>
    <form id="cf" method="post" action="/contact.php">
      <input class="hpf" type="text" name="website" tabindex="-1" autocomplete="off" aria-hidden="true">
      <input type="text" name="contact" placeholder="Ваш контакт — телефон / email / Telegram" aria-label="Ваш контакт">
      <textarea name="msg" placeholder="Повідомлення" aria-label="Повідомлення"></textarea>
      <button type="submit" class="send">Надіслати</button>
      <span id="cfDone" hidden> Надіслано. Дякуємо!</span>
    </form>
  </section>

  <p id="nojsText">Тут не вистачає E. І контенту. Так задумано.<br>
    Приватний демо-хаб — доступи разом із пропозицією.</p>
</main>

<div id="eWrap" tabindex="0" role="button" aria-label="Літера E. Перетягніть її на порожнє місце у слові, або натисніть Enter.">
  <div id="eB"><span id="e" aria-hidden="true">E</span></div>
</div>

<div id="term" hidden>
  <span class="p">$</span> sudo enter<br>
  <span id="treply" hidden>nice try. the E won't help you here.</span>
</div>

<script>
(function(){
'use strict';
var body=document.body,
    wrap=document.getElementById('eWrap'),
    eB=document.getElementById('eB'),
    slot=document.getElementById('slot'),
    bg=document.getElementById('bg'),
    term=document.getElementById('term'),
    treply=document.getElementById('treply'),
    reduce=matchMedia('(prefers-reduced-motion: reduce)').matches,
    done=false, drag=null, cur={x:0,y:0}, idleT=0;

function tr(){return 'translate('+cur.x+'px,'+cur.y+'px)'}
function rectC(el){var r=el.getBoundingClientRect();return {x:r.left+r.width/2,y:r.top+r.height/2,w:r.width}}
function isNear(){var s=rectC(slot),e=rectC(wrap);
  return Math.hypot(s.x-e.x,s.y-e.y)<Math.max(70,s.w*.65)}

/* --- параллакс фона (мышь) / авто-дрейф (CSS, по умолчанию) --- */
var layers=[[document.getElementById('l1'),48],[document.getElementById('l2'),26],[document.getElementById('l3'),11]],
    px=0,py=0,raf=0;
function applyPar(){raf=0;for(var i=0;i<3;i++)
  layers[i][0].style.transform='translate('+(px*layers[i][1])+'px,'+(py*layers[i][1])+'px)'}
addEventListener('mousemove',function(ev){
  if(reduce)return;
  bg.classList.remove('drift');
  px=(ev.clientX/innerWidth-.5)*2; py=(ev.clientY/innerHeight-.5)*2;
  if(!raf)raf=requestAnimationFrame(applyPar);
});

/* --- подсказка: E подпрыгивает после 6 c простоя --- */
function resetIdle(){
  clearTimeout(idleT);
  if(done||reduce)return;
  idleT=setTimeout(function(){
    eB.classList.add('jump');
    setTimeout(function(){eB.classList.remove('jump');resetIdle()},700);
  },6000);
}
resetIdle();

/* --- драг E (pointer events: мышь + палец) --- */
wrap.addEventListener('pointerdown',function(ev){
  if(done)return;
  ev.preventDefault();
  wrap.setPointerCapture(ev.pointerId);
  drag={x:ev.clientX,y:ev.clientY,bx:cur.x,by:cur.y};
  body.classList.add('drag');
  resetIdle();
});
wrap.addEventListener('pointermove',function(ev){
  if(!drag)return;
  cur.x=drag.bx+ev.clientX-drag.x;
  cur.y=drag.by+ev.clientY-drag.y;
  wrap.style.transform=tr();
  body.classList.toggle('hot',isNear());
});
function endDrag(){
  if(!drag)return;
  drag=null;
  body.classList.remove('drag');
  if(isNear())snap(); else body.classList.remove('hot');
}
wrap.addEventListener('pointerup',endDrag);
wrap.addEventListener('pointercancel',endDrag);

/* клавиатурная альтернатива: Enter/Space ставит E на место */
wrap.addEventListener('keydown',function(ev){
  if(done)return;
  if(ev.key==='Enter'||ev.key===' '){ev.preventDefault();snap();}
});

/* --- защёлкивание --- */
function snap(){
  if(done)return; done=true;
  clearTimeout(idleT);
  body.classList.add('snapping');
  body.classList.remove('hot');
  var s=rectC(slot),e=rectC(wrap);
  cur.x+=s.x-e.x; cur.y+=s.y-e.y;
  if(reduce){wrap.style.transform=tr();finalize(true);return}
  wrap.style.transition='transform .22s cubic-bezier(.2,.7,.3,1.25)';
  var fin=function(){finalize(false)};
  wrap.addEventListener('transitionend',fin,{once:true});
  setTimeout(fin,400); /* страховка */
  wrap.style.transform=tr();
}
var finalized=false;
function finalize(instant){
  if(finalized)return; finalized=true;
  wrap.style.display='none';
  body.classList.add('done-e');
  if(instant){body.classList.add('done')}
  else{
    body.classList.add('pressed');
    setTimeout(function(){body.classList.add('done')},750);
  }
}

/* --- пасхалка: ~ открывает мини-терминал --- */
addEventListener('keydown',function(ev){
  if(ev.key==='~'||ev.key==='`'){
    term.hidden=!term.hidden;
    if(!term.hidden){treply.hidden=true;setTimeout(function(){treply.hidden=false},600)}
  }else if(ev.key==='Escape'){term.hidden=true}
});
})();

// контакт-форма в панчлайне
(function(){
  var o=document.getElementById('cOpen'),f=document.getElementById('cf');
  if(!o||!f)return;
  o.addEventListener('click',function(){f.classList.add('open');o.hidden=true;f.querySelector('[name=contact]').focus();});
  f.addEventListener('submit',function(e){
    e.preventDefault();
    fetch('/contact.php',{method:'POST',body:new FormData(f),headers:{'X-Requested-With':'fetch'}})
      .then(function(r){return r.json();})
      .then(function(d){ if(d.ok){ f.querySelectorAll('input[name],textarea,.send').forEach(function(el){el.hidden=true;el.disabled=true;});
        document.getElementById('cfDone').hidden=false; } })
      .catch(function(){ f.submit(); }); // фолбэк — обычный POST
  });
})();
</script>
</body>
</html>