<img?php $statePath='/home/surillya/.thos_state.json' ; $state=file_exists($statePath) ?
json_decode(file_get_contents($statePath), true) : null; if (!file_exists($statePath)) { header('Location: oobe.php');
exit(); } ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SurillyaOS</title>
<style>
:root {
--accent: #4CAF50;
--window-bg: rgba(28, 28, 28, 0.6);
--window-border: rgba(255, 255, 255, 0.1);
--window-blur: blur(20px);
--header-bg: rgba(30, 30, 30, 0.6);
--header-color: white;
--header-hover: var(--accent);
}
.theme-glassy-dark {
--window-bg: rgba(28, 28, 28, 0.6);
--window-border: rgba(255, 255, 255, 0.1);
--window-blur: blur(20px);
--header-bg: rgba(30, 30, 30, 0.6);
--header-color: white;
--font-color: white;
}
.theme-frosted-blue {
--window-bg: rgba(0, 40, 80, 0.4);
--window-border: rgba(173, 216, 230, 0.2);
--window-blur: blur(25px);
--header-bg: rgba(10, 20, 50, 0.4);
--header-color: #e3f8ff;
--font-color: #e3f8ff;
}
.theme-dreamy-pink {
--window-bg: rgba(80, 30, 60, 0.5);
--window-border: rgba(255, 182, 193, 0.3);
--window-blur: blur(16px);
--header-bg: rgba(100, 40, 80, 0.5);
--header-color: #ffddee;
--font-color: #ffe9f4;
}
.theme-xp {
--window-bg: #ece9d8;
--window-border: #3a6ea5;
--window-blur: none;
--header-bg: linear-gradient(to bottom, #0a246a, #1c4dbd);
--header-color: white;
--font-color: black;
}
body {
margin: 0;
font-family: 'Inter', sans-serif;
background: #121212;
color: white;
overflow: hidden;
}
#app-bar {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100vh;
background: var(--window-bg);
backdrop-filter: var(--window-blur);
-webkit-backdrop-filter: var(--window-blur);
border: 1px solid var(--window-border);
padding: 10px;
box-sizing: border-box;
z-index: 9999;
}
.app-btn {
display: block;
margin: 10px 0;
padding: 10px;
background: #292929;
border: none;
color: white;
cursor: pointer;
border-radius: 8px;
transition: background 0.3s ease;
}
.app-btn:hover {
background: var(--accent);
}
.window {
position: absolute;
width: 600px;
height: 400px;
background: var(--window-bg);
backdrop-filter: var(--window-blur);
-webkit-backdrop-filter: var(--window-blur);
border: 1px solid var(--window-border);
border-radius: 12px;
resize: both;
overflow: hidden;
z-index: 1;
transition: box-shadow 0.2s ease, backdrop-filter 0.3s ease;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.window.active {
box-shadow: 0 0 20px var(--accent), 0 8px 24px rgba(0, 0, 0, 0.3);
}
.window-header {
background: var(--header-bg);
color: var(--header-color);
padding: 6px 12px;
cursor: grab;
display: flex;
align-items: center;
justify-content: space-between;
font-weight: bold;
backdrop-filter: var(--window-blur);
-webkit-backdrop-filter: var(--window-blur);
border-bottom: 1px solid var(--window-border);
}
.window-header:active {
cursor: grabbing;
}
.window-header button {
background: transparent;
border: none;
color: inherit;
font-weight: bold;
font-size: 1.1em;
cursor: pointer;
user-select: none;
padding: 0 6px;
transition: color 0.2s ease;
}
.window-header button:hover {
color: var(--header-hover);
}
.window-content {
background: var(--window-bg);
backdrop-filter: var(--window-blur);
-webkit-backdrop-filter: var(--window-blur);
border: 1px solid var(--window-border);
width: 100%;
height: calc(100% - 32px);
border: none;
}
.sparkle {
position: absolute;
width: 6px;
height: 6px;
background: radial-gradient(circle at center, var(--accent) 0%, transparent 70%);
border-radius: 50%;
filter: drop-shadow(0 0 6px var(--accent));
animation: sparkle 1.2s infinite ease-in-out;
pointer-events: none;
}
@keyframes sparkle {
0%,
100% {
opacity: 0;
transform: scale(0.5) rotate(0deg);
}
50% {
opacity: 1;
transform: scale(1) rotate(45deg);
}
}
#screensaver {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
border: none;
z-index: 9999;
}
#drag-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 99999;
display: none;
cursor: grabbing;
}
#fullscreen-toggle {
border: none;
background: transparent;
cursor: pointer;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
border-radius: 4px;
}
#fullscreen-toggle:hover {
color: var(--accent);
}
.grayscale-bg {
filter: grayscale(100%) brightness(0.9);
}
.notification {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 1rem 1.25rem;
border-radius: 1rem;
border: 2px solid transparent;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
color: white;
min-width: 260px;
max-width: 340px;
pointer-events: auto;
animation: fadeInUp 0.3s ease-out;
position: relative;
transition: transform 0.2s ease, opacity 0.2s ease;
background: var(--window-bg);
backdrop-filter: var(--window-blur);
-webkit-backdrop-filter: var(--window-blur);
color: var(--accent);
}
.notification-dismiss {
background: transparent;
border: none;
cursor: pointer;
}
.notification.success {
border-color: #4caf50;
}
.notification.error {
border-color: #f44336;
}
.notification.info {
border-color: var(--accent, #00bcd4);
}
@keyframes slideIn {
from {
transform: translateX(100%) scale(0.95);
opacity: 0;
}
to {
transform: translateX(0) scale(1);
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
transform: translateX(0) scale(1);
}
to {
opacity: 0;
transform: translateX(50%) scale(0.95);
}
}
</style>
<script src="tailwind.es"></script>
</head>
<body class="bg-black">
<div id="appWrapper" class="transition-all duration-300">
<div id="bg-image" class="fixed inset-0 z-[-10] bg-cover bg-center transition-all duration-300"></div>
<div id="app-bar" class="bg-[#1e1e1e] fixed top-0 left-0 w-52 h-screen p-2.5 z-50">
<div class="flex flex-col h-full">
<div class="relative mb-4">
<button id="powerButton" class="group relative transition duration-300">
<img src="THOS.png" alt="Power" class="w-12 h-12 transition-all duration-300 ease-in-out
group-hover:brightness-125
group-hover:scale-110
group-hover:drop-shadow-[0_0_10px_rgba(255,200,255,0.6)]
group-hover:saturate-150
cursor-pointer select-none">
</button>
</div>
<div class="grid grid-cols-3 gap-3 p-2 flex flex-col justify-between">
<button onclick="openApp('explorer.php', 'Explorer')" title="File Explorer"
class="p-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-all">
<svg class="w-6 h-6 text-blue-300 mx-auto" fill="none" stroke="currentColor" stroke-width="2"
viewBox="0 0 24 24">
<path d="M3 7l6-3 6 3 6-3v12l-6 3-6-3-6 3V7z" />
<path d="M9 4v12" />
<path d="M15 7v12" />
</svg>
</button>
<button onclick="openApp('tasks.php', 'Task Manager')" title="Task Manager"
class="p-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-all">
<svg class="w-6 h-6 text-red-300 mx-auto" fill="none" stroke="currentColor" stroke-width="2"
viewBox="0 0 24 24">
<rect x="3" y="3" width="7" height="7" rx="1" />
<rect x="14" y="3" width="7" height="7" rx="1" />
<rect x="3" y="14" width="7" height="7" rx="1" />
<rect x="14" y="14" width="7" height="7" rx="1" />
</svg>
</button>
<button onclick="openApp('https://surillya.com/thos/store', 'THOS Store')" title="THOS Store"
class="p-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-all">
<svg class="w-6 h-6 text-pink-300 mx-auto" fill="none" stroke="currentColor" stroke-width="2"
viewBox="0 0 24 24">
<path d="M4 9h16l-1.68 10.08a2 2 0 0 1-2 1.92H7.68a2 2 0 0 1-2-1.92L4 9Z" />
<path d="M8 11V8a4 4 0 0 1 8 0v3" />
</svg>
</button>
<button onclick="openApp('https://surillya.com/thos/search/thossearch.html', 'Internet', true)"
title="Internet" class="p-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-all">
<svg class="w-6 h-6 text-green-300 mx-auto" fill="none" stroke="currentColor" stroke-width="2"
viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10" />
<path d="M2 12h20" />
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
</svg>
</button>
<button onclick="openApp('settings.php', 'Settings')" title="Settings"
class="p-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-all">
<svg class="w-6 h-6 text-yellow-300 mx-auto" fill="none" stroke="currentColor" stroke-width="2"
viewBox="0 0 24 24">
<path d="M12 15a3 3 0 100-6 3 3 0 000 6z" />
<path
d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1
1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0
010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65
1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0
012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65
0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z" />
</svg>
</button>
</div>
<div class="flex-grow"></div>
<div id="trdp"
class="grid grid-cols-2 gap-2 mt-4 p-2 bg-[#252525] rounded-lg overflow-y-auto p-2 justify-center items-center">
</div>
<div id="version-display-container" class="w-full flex justify-center items-center mt-4">
<div id="version-display" class="flex items-center gap-2 text-sm text-gray-400 select-none">
<button id="fullscreen-toggle" title="Toggle fullscreen"
class="text-white hover:text-[var(--accent)] transition-colors duration-200 text-xs p-1 rounded bg-transparent hover:bg-[var(--glass-bg-light)]">
⛶
</button>
<span class="text-[var(--accent)]">THOS</span><span id="version-number"></span>
</div>
</div>
</div>
</div>
<div id="desktop" class="ml-52 h-screen relative">
<div id="notification-container" class="fixed top-4 right-4 z-50 flex flex-col gap-3 pointer-events-none"></div>
</div>
<iframe id="screensaver" src="screensaver.html"></iframe>
<div id="drag-overlay"></div>
</div>
<div id="powerDialog" class="fixed inset-0 z-50 hidden flex items-center justify-center">
<div class="bg-black/30 rounded-2xl shadow-2xl p-6 w-80 backdrop-blur-sm text-center text-white">
<h2 class="text-xl font-semibold mb-6 tracking-wide">Power Options</h2>
<div class="space-y-3">
<button id="shutdownBtn"
class="w-full py-2 px-4 border border-dotted rounded-xl transition-all duration-200 text-sm bg-white/5 hover:bg-white/10 backdrop-blur-sm border-red-400 text-red-300 hover:text-red-100 hover:border-red-300">Shutdown</button>
<button id="restartBtn"
class="w-full py-2 px-4 border border-dotted rounded-xl transition-all duration-200 text-sm bg-white/5 hover:bg-white/10 backdrop-blur-sm border-yellow-400 text-yellow-300 hover:text-yellow-100 hover:border-yellow-300">Restart</button>
<button id="reloadBtn"
class="w-full py-2 px-4 border border-dotted rounded-xl transition-all duration-200 text-sm bg-white/5 hover:bg-white/10 backdrop-blur-sm border-green-400 text-green-300 hover:text-green-100 hover:border-green-300">Reload</button>
<button id="cancelBtn"
class="w-full py-2 px-4 border border-dotted rounded-xl transition-all duration-200 text-sm bg-white/5 hover:bg-white/10 backdrop-blur-sm border-white/40 text-white hover:text-white hover:border-white/80">Cancel</button>
</div>
</div>
</div>
<script>
window.THOS = {
version: '6 Build-26'
};
let timeoutSeconds = 180;
const thosState = <?= json_encode($state ?? ['cookies' => '', 'localData' => '{}']) ?>;
thosState.cookies?.split('; ').forEach(cookie => document.cookie = cookie);
const localItems = JSON.parse(thosState.localData || '{}');
for (let key in localItems) {
localStorage.setItem(key, localItems[key]);
}
if (!localStorage.getItem('thos_done')) {
window.location.href = 'oobe.php';
}
class WindowManager {
constructor(container) {
this.container = container;
this.zIndexCounter = 1;
this.draggingWindow = null;
this.resizingWindow = null;
this.resizeDir = null;
this.offsetX = 0;
this.offsetY = 0;
this.startWidth = 0;
this.startHeight = 0;
this.startLeft = 0;
this.startTop = 0;
this.isMaximized = new WeakMap();
this.activeWindow = null;
this.dragOverlay = document.getElementById('drag-overlay');
document.addEventListener('mousemove', this.onMouseMove.bind(this));
document.addEventListener('mouseup', this.onMouseUp.bind(this));
this.makeWindowsDraggable();
}
makeWindowsDraggable() {
const windows = this.container.querySelectorAll('.window');
windows.forEach(win => {
const header = win.querySelector('.window-header');
this.makeDraggable(win, header);
this.makeResizable(win);
this.setupButtons(win);
this.setupFocus(win);
});
}
setupFocus(win) {
win.addEventListener('mousedown', () => {
this.bringToFront(win);
this.setActiveWindow(win);
});
win.addEventListener('focus', () => {
this.bringToFront(win);
this.setActiveWindow(win);
});
}
setActiveWindow(win) {
if (this.activeWindow && this.activeWindow !== win) {
this.activeWindow.classList.remove('active');
}
this.activeWindow = win;
win.classList.add('active');
}
makeDraggable(win, header) {
header.style.cursor = 'grab';
header.addEventListener('mousedown', (e) => {
if (e.target.closest('button')) return;
e.preventDefault();
this.bringToFront(win);
this.setActiveWindow(win);
if (this.isMaximized.get(win)) {
win.style.transition = "all 0.2s ease";
win.style.left = win.dataset.prevLeft;
win.style.top = win.dataset.prevTop;
win.style.width = win.dataset.prevWidth;
win.style.height = win.dataset.prevHeight;
this.isMaximized.set(win, false);
}
this.draggingWindow = win;
this.offsetX = e.clientX - win.offsetLeft;
this.offsetY = e.clientY - win.offsetTop;
header.style.cursor = 'grabbing';
if (this.dragOverlay) {
this.dragOverlay.style.display = 'block';
this.dragOverlay.style.cursor = 'grabbing';
}
document.body.style.userSelect = 'none';
});
}
onMouseMove(e) {
if (this.draggingWindow) {
let newLeft = e.clientX - this.offsetX;
let newTop = e.clientY - this.offsetY;
const containerRect = this.container.getBoundingClientRect();
const winRect = this.draggingWindow.getBoundingClientRect();
newLeft = Math.max(containerRect.left, Math.min(newLeft, containerRect.right - winRect.width));
newTop = Math.max(containerRect.top, Math.min(newTop, containerRect.bottom - winRect.height));
this.draggingWindow.style.left = newLeft + 'px';
this.draggingWindow.style.top = newTop + 'px';
}
}
onMouseUp() {
if (this.draggingWindow) {
const header = this.draggingWindow.querySelector('.window-header');
if (header) header.style.cursor = 'grab';
this.draggingWindow = null;
if (this.dragOverlay) {
this.dragOverlay.style.display = 'none';
this.dragOverlay.style.cursor = '';
}
document.body.style.userSelect = '';
}
if (this.resizingWindow) {
this.resizingWindow = null;
this.resizeDir = null;
}
}
bringToFront(win) {
win.style.zIndex = ++this.zIndexCounter;
}
toggleMaximize(win) {
if (!this.isMaximized.get(win)) {
win.dataset.prevLeft = win.style.left;
win.dataset.prevTop = win.style.top;
win.dataset.prevWidth = win.style.width;
win.dataset.prevHeight = win.style.height;
win.style.left = "0px";
win.style.top = "0px";
win.style.width = "100%";
win.style.height = "100%";
win.style.transition = "all 0.2s ease";
this.isMaximized.set(win, true);
} else {
win.style.transition = "all 0.2s ease";
win.style.left = win.dataset.prevLeft;
win.style.top = win.dataset.prevTop;
win.style.width = win.dataset.prevWidth;
win.style.height = win.dataset.prevHeight;
this.isMaximized.set(win, false);
}
}
}
const tasks = [];
let z = 2;
const wm = new WindowManager(document.body);
const appBar = document.getElementById('trdp');
const contextMenu = document.createElement('div');
contextMenu.id = 'context-menu';
contextMenu.style.position = 'absolute';
contextMenu.style.display = 'none';
contextMenu.style.background = '#222';
contextMenu.style.border = '1px solid #444';
contextMenu.style.borderRadius = '6px';
contextMenu.style.padding = '6px';
contextMenu.style.zIndex = '9999';
document.body.appendChild(contextMenu);
document.addEventListener('click', () => contextMenu.style.display = 'none');
async function loadApps() {
const res = await fetch('apps.php');
const apps = await res.json();
console.log(apps);
appBar.innerHTML = '';
apps.forEach(app => {
const wrapper = document.createElement('div');
wrapper.classList.add('wrapper');
wrapper.style.alignItems = 'center';
wrapper.style.height = '50px';
wrapper.style.width = '50px';
wrapper.style.margin = '8px';
wrapper.style.transition = 'transform 0.3s ease';
const btn = document.createElement('img');
btn.src = app.icon;
btn.alt = app.name;
btn.title = app.name;
btn.style.height = '50px';
btn.style.width = '50px';
btn.style.borderRadius = '16px';
btn.style.border = '2px solid #ffffff22';
btn.style.boxShadow = '0 2px 10px rgba(255, 192, 203, 0.25)';
btn.style.background = 'linear-gradient(135deg, #222, #1a1a1a)';
btn.style.padding = '6px';
btn.style.transition = 'all 0.3s ease';
btn.style.cursor = 'pointer';
btn.onmouseenter = () => {
wrapper.style.transform = 'scale(1.08)';
btn.style.borderColor = 'var(--accent)';
btn.style.boxShadow = '0 4px 16px var(--accent), 0 0 8px var(--accent)';
for (let i = 0; i < 6; i++) {
const sparkle = document.createElement('div');
sparkle.classList.add('sparkle');
sparkle.style.top = `${Math.random() * 100}%`;
sparkle.style.left = `${Math.random() * 100}%`;
sparkle.style.animationDelay = `${Math.random() * 1.5}s`;
wrapper.appendChild(sparkle);
sparkle.addEventListener('animationiteration', () => sparkle.remove());
}
};
btn.onmouseleave = () => {
wrapper.style.transform = 'scale(1)';
btn.style.borderColor = '#ffffff22';
btn.style.boxShadow = '0 2px 10px rgba(255, 192, 203, 0.25)';
const sparkles = wrapper.querySelectorAll('.sparkle');
sparkles.forEach(s => s.remove());
};
btn.onclick = () => openApp(app.path, app.name);
wrapper.appendChild(btn);
wrapper.oncontextmenu = e => {
e.preventDefault();
showContextMenu(e.pageX, e.pageY, app);
};
appBar.appendChild(wrapper);
});
}
function showContextMenu(x, y, app) {
contextMenu.innerHTML = `
<div onclick="uninstallApp('${app.id}')">🗑️ Uninstall</div>
`;
contextMenu.style.left = `${x}px`;
contextMenu.style.top = `${y}px`;
contextMenu.style.display = 'block';
}
function openApp(url, title, sandbox = false) {
const id = 'win_' + Date.now();
const win = document.createElement('div');
win.className = 'window';
win.style.top = Math.random() * 300 + 'px';
win.style.left = Math.random() * 400 + 'px';
win.style.zIndex = z++;
win.setAttribute('data-id', id);
win.innerHTML = `
<div class="window-header">
<span class="window-title">${title}</span>
<div class="window-controls">
<button class="max-btn" title="Maximize/Restore">🗖</button>
<button class="close-btn" title="Close">×</button>
</div>
</div>
`;
if (!sandbox) {
win.innerHTML += `<iframe src="${url}" class="window-content" allowtransparency="true"></iframe>`;
} else {
win.innerHTML += `<iframe src="${url}" sandbox="allow-scripts allow-forms allow-same-origin" class="window-content" allowtransparency="true"></iframe>`;
}
document.getElementById('desktop').appendChild(win);
tasks.push({ id, title, url });
let header = win.querySelector(".window-header");
wm.makeDraggable(win, header);
header.querySelector('.max-btn').addEventListener('click', (e) => {
e.stopPropagation();
wm.toggleMaximize(win);
});
header.querySelector('.close-btn').addEventListener('click', (e) => {
e.stopPropagation();
closeApp(id);
});
}
function closeApp(id) {
const win = document.querySelector(`.window[data-id='${id}']`);
if (win) win.remove();
const idx = tasks.findIndex(t => t.id === id);
if (idx !== -1) tasks.splice(idx, 1);
}
function focusApp(id) {
const win = document.querySelector(`.window[data-id='${id}']`);
if (win) win.style.zIndex = z++;
}
function uninstallApp(appId) {
if (!confirm("Are you sure you want to uninstall this app?")) return;
fetch(`uninstaller.php?id=${encodeURIComponent(appId)}`)
.then(res => res.text())
.then(() => loadApps());
}
loadApps();
window.addEventListener('message', async (event) => {
const { type, appId, packageFileUrl } = event.data || {};
if (type === 'THOS_INSTALL_APP') {
try {
const isValid = /^https:\/\/surillya\.com\//.test(packageFileUrl);
const fileName = packageFileUrl.split('/').pop().split('?')[0];
const outputPath = `/home/surillya/.temp/${fileName}`;
// I HATE UNDERSCORES!!!!
// underscore =/= dash
const url = `/install_app.php?url=${encodeURIComponent(packageFileUrl)}&output=${encodeURIComponent(outputPath)}&verified=${isValid ? 1 : 0}`;
const response = await fetch(url);
const result = await response.json();
if (!result.success) throw new Error(result.message);
const appUrl = `thp.php?q=${encodeURIComponent(result.filename)}&v=${result.verified}`;
window.openApp(appUrl, 'THOS Package Installer');
} catch (err) {
console.error('[THOS] App install failed:', err);
alert('Failed to install app.');
}
}
});
window.getTaskList = () => JSON.parse(JSON.stringify(tasks));
window.focusApp = focusApp;
window.closeApp = closeApp;
window.openApp = openApp;
window.reloadApps = loadApps;
window.saveTHOSState = saveTHOSState;
function applySettings(settings) {
console.log(settings);
function applyTheme(theme) {
document.body.className = theme;
}
const savedTheme = settings.theme;
if (savedTheme) applyTheme(savedTheme);
document.documentElement.style.setProperty('--accent', settings.accentColor || '#ff69b4');
if (settings.wallpaper) {
document.getElementById('bg-image').style.background = `url('file.php?q=${settings.wallpaper}') center/cover`;
} else {
document.getElementById('bg-image').style.background = '';
}
const audio = document.getElementById('bgMusic');
if (audio) {
if (settings.musicEnabled === 'on') {
document.addEventListener("click", function () {
audio.src = `file.php?q=${settings.music}`;
audio.volume = parseFloat(settings.musicVolume || 0.3);
audio.play().catch(() => {
alert('An error occured while starting background music. Please turn background music off, or enable autoplay.');
});
}, { once: true });
} else {
audio.pause;
}
}
timeoutSeconds = settings.screenTimeout ?? timeoutSeconds;
window.THOS = Object.assign(window.THOS || {}, {
getAllSettings() {
return settings;
}
});
saveTHOSState();
}
const savedSettings = JSON.parse(localStorage.getItem('settings')) || {};
applySettings(savedSettings);
window.addEventListener('message', (event) => {
if (event.data?.type === 'applySettings') {
applySettings(event.data.settings);
}
});
function saveTHOSState() {
const cookies = document.cookie;
const localData = JSON.stringify(localStorage);
fetch('save_state.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ cookies, localData })
});
}
setInterval(saveTHOSState, 60000);
window.addEventListener('beforeunload', saveTHOSState);
const powerButton = document.getElementById('powerButton');
const powerDialog = document.getElementById('powerDialog');
const cancelBtn = document.getElementById('cancelBtn');
const shutdownBtn = document.getElementById('shutdownBtn');
const restartBtn = document.getElementById('restartBtn');
const reloadBtn = document.getElementById('reloadBtn');
powerButton.addEventListener('click', () => {
document.getElementById("appWrapper").classList.add("grayscale-bg");
powerDialog.classList.remove('hidden');
});
cancelBtn.addEventListener('click', () => {
document.getElementById("appWrapper").classList.remove("grayscale-bg");
powerDialog.classList.add('hidden');
});
shutdownBtn.addEventListener('click', () => {
sendCommand('shutdown');
document.getElementById("appWrapper").classList.remove("grayscale-bg");
powerDialog.classList.add('hidden');
});
restartBtn.addEventListener('click', () => {
sendCommand('reboot');
document.getElementById("appWrapper").classList.remove("grayscale-bg");
powerDialog.classList.add('hidden');
});
reloadBtn.addEventListener('click', () => {
location.reload();
});
powerDialog.addEventListener('click', (e) => {
if (e.target === powerDialog) {
document.getElementById("appWrapper").classList.remove("grayscale-bg");
powerDialog.classList.add('hidden');
}
});
function sendCommand(action) {
fetch(`server_command.php?action=${encodeURIComponent(action)}`)
.then(res => res.text())
.then(result => {
alert("Server response: " + result);
})
.catch(err => {
alert("Failed to send command: " + err);
});
}
document.getElementById('version-number').textContent = window.THOS.version;
document.getElementById("fullscreen-toggle").addEventListener("click", () => {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen().catch(err => {
console.error(`Failed to enter fullscreen: ${err.message}`);
});
} else {
document.exitFullscreen();
}
});
const screensaver = document.getElementById("screensaver");
let screensaverTimeout;
function showScreensaver() {
screensaver.style.display = "block";
}
function hideScreensaver() {
if (screensaver.style.display === "block") {
screensaver.contentWindow.postMessage({ type: 'screensaver_hidden' }, '*'); // optional
}
screensaver.style.display = "none";
}
function resetInactivityTimer() {
hideScreensaver();
clearTimeout(screensaverTimeout);
screensaverTimeout = setTimeout(showScreensaver, timeoutSeconds * 1000);
}
['mousemove', 'mousedown', 'keydown', 'scroll', 'touchstart', 'wheel'].forEach(event => {
document.addEventListener(event, resetInactivityTimer, { passive: true });
});
window.addEventListener("message", event => {
if (event.data?.type === "user_active") {
resetInactivityTimer();
}
});
resetInactivityTimer();
function notify(title, description = "", options = {}) {
const {
type = "info",
timeout = 5000,
icon = null,
id = `notif-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
} = options;
const container = document.getElementById("notification-container");
const notification = document.createElement("div");
notification.className = `notification ${type}`;
notification.id = id;
notification.innerHTML = `
${icon ? `<div class="text-xl">${icon}</div>` : ""}
<div class="flex-1">
<div class="notification-title font-semibold">${title}</div>
${description ? `<div class="notification-desc text-sm text-gray-400">${description}</div>` : ""}
</div>
<button class="notification-dismiss absolute top-2 right-2 text-white/50 hover:text-white transition-colors text-sm" aria-label="Dismiss">×</button>
`;
const dismiss = () => {
notification.style.animation = "fadeOut 0.25s ease-out forwards";
setTimeout(() => {
if (container.contains(notification)) container.removeChild(notification);
}, 250);
};
notification.querySelector(".notification-dismiss").onclick = dismiss;
container.appendChild(notification);
if (timeout > 0) {
setTimeout(() => {
if (container.contains(notification)) dismiss();
}, timeout);
}
}
window.notify = notify;
</script>
</body>
</html>