:root{--bg:#0f1720;--panel:#0b1220;--accent:#1f9bf0;--win:#0e1a28;--text:#dbe7f2} html,body{height:100%;margin:0;font-family:Inter,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)} .desk{position:relative;width:100%;height:600px;max-width:1200px;margin:20px auto;border-radius:10px;overflow:hidden;background:linear-gradient(180deg,#071019 0%, #0b1724 100%);box-shadow:0 18px 50px rgba(2,8,23,.7)} /* Панель задач */ .taskbar{position:absolute;left:0;right:0;bottom:0;height:48px;background:var(--panel);display:flex;align-items:center;padding:6px 10px;gap:8px} .start-btn{width:92px;height:36px;background:linear-gradient(180deg,#12324a,#0b2434);border-radius:6px;color:var(--text);display:flex;align-items:center;gap:8px;padding:6px 10px;cursor:pointer;font-weight:600} .dock{display:flex;gap:8px;margin-left:auto} .dock button{height:36px;padding:6px 10px;border-radius:6px;border:0;background:transparent;color:var(--text);cursor:pointer} /* Рабочая область */ .screen{position:absolute;inset:12px 12px 66px 12px;border-radius:8px;background:linear-gradient(180deg,#07202a,#071218);overflow:hidden;padding:12px;box-sizing:border-box} .icon-grid{display:flex;flex-wrap:wrap;gap:12px} .icon{width:84px;text-align:center;color:var(--text);cursor:pointer} .icon .ico{width:64px;height:64px;border-radius:6px;background:linear-gradient(180deg,#0f2940,#08304a);display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff;margin:0 auto 6px} /* Окна */ .window{position:absolute;background:var(--win);border-radius:6px;border:1px solid rgba(255,255,255,.04);box-shadow:0 10px 30px rgba(2,8,23,.6);overflow:hidden;display:flex;flex-direction:column} .w-title{height:36px;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);display:flex;align-items:center;justify-content:space-between;padding:0 10px;color:var(--text);user-select:none;cursor:move} .w-body{flex:1;padding:10px;background:linear-gradient(180deg,#061017,#031018);color:var(--text);overflow:auto} .controls{display:flex;gap:6px} .controls button{width:28px;height:24px;border-radius:4px;border:0;background:transparent;color:var(--text);cursor:pointer} .resizer{position:absolute;right:6px;bottom:6px;width:12px;height:12px;cursor:se-resize;opacity:.6} /* Terminal */ .term{background:#000;padding:10px;border-radius:6px;font-family:monospace;font-size:13px;color:#9ef08a;min-height:200px} /* Browser iframe */ .browser-frame{width:100%;height:480px;border:0;background:#fff} /* Mobile responsiveness */ @media(max-width:700px){.desk{max-width:94%;height:520px}}
🌐
Браузер
🎥
Видео
>_
Терминал
📝
Заметки
Меню
// Minimal terminal function initTerm(el){ let buffer = ''; const cursor = el.querySelector('#cursor') || document.createElement('span'); cursor.textContent = ''; el.appendChild(cursor); const commands = {help:'Доступные команды: help, echo, time, clear', time:()=>new Date().toString(), clear:()=>{ el.innerHTML=''; return ''; } }; window.addEventListener('keydown',(e)=>{ const focused = document.activeElement; if(focused && (focused.tagName==='INPUT' || focused.tagName==='TEXTAREA')) return; if(!el || el.parentElement.style.display==='none') return; if(e.key.length===1){ buffer+=e.key; cursor.textContent=buffer; } else if(e.key==='Backspace'){ buffer=buffer.slice(0,-1); cursor.textContent=buffer; e.preventDefault(); } else if(e.key==='Enter'){ const out = runCmd(buffer.trim()); const ln = document.createElement('div'); ln.innerHTML='> '+escapeHtml(buffer)+'
'+escapeHtml(out)+''; el.appendChild(ln); buffer=''; cursor.textContent=''; el.scrollTop = el.scrollHeight; } }); function runCmd(cmd){ if(!cmd) return ''; const parts = cmd.split(' '); const c = parts[0]; const arg = parts.slice(1).join(' '); if(commands[c]) return (typeof commands[c]==='function')?commandsc [blocked]:commands[c]; if(c==='echo') return arg; return 'Команда не найдена: '+c; } function escapeHtml(s){ return s.replace(/&/g,'&').replace(//g,'>'); } }
// Icon clicks
document.querySelectorAll('.icon').forEach(ic=>{
ic.addEventListener('dblclick', ()=> launch(ic.dataset.app));
ic.addEventListener('click', ()=>{ ic.style.transform='scale(0.98)'; setTimeout(()=>ic.style.transform='',120) });
});
function launch(name){
if(name==='browser') openBrowser();
if(name==='video') openVideo();
if(name==='terminal') openTerminal();
if(name==='notes') openNotes();
}
// Start menu simple
document.getElementById('startBtn').addEventListener('click',()=>{
const menu = document.getElementById('startMenu');
if(menu){ menu.remove(); return; }
const m = document.createElement('div'); m.id='startMenu'; m.style.position='absolute'; m.style.left='10px'; m.style.bottom='58px'; m.style.width='220px'; m.style.background='linear-gradient(180deg,#07222b,#04141a)'; m.style.border='1px solid rgba(255,255,255,.04)'; m.style.padding='8px'; m.style.borderRadius='8px';
m.innerHTML = '
Браузер
Видео
Терминал
Заметки
'; m.addEventListener('click',(e)=>{ const txt = e.target.textContent.trim(); if(txt==='Браузер') openBrowser(); if(txt==='Видео') openVideo(); if(txt==='Терминал') openTerminal(); if(txt==='Заметки') openNotes(); m.remove(); }); desk.appendChild(m); });
// Expose launch for external use
window.vmLaunch = launch;
})();