Surillyacom/THOS-Server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated internet and media controls

Browse Source
This commit is contained in:
Surillya
2025-06-24 00:29:23 +02:00
parent e9d0c6d4c2
commit d020934527
2 changed files with 141 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
index.php
View File

@ -319,7 +319,7 @@ if (!$state || !isset($state['localData']) || !json_decode($state['localData'],
</svg> </svg>
</button> </button>
<!-- Don't work for no reason --> <!-- Don't work for no reason -->
<!-- <button id="volume-toggle" class="group p-1 hover:bg-[#2e2e2e] rounded-md" title="Volume"> <button id="volume-toggle" class="group p-1 hover:bg-[#2e2e2e] rounded-md" title="Volume">
<svg class="w-6 h-6 text-gray-300 group-hover:text-green-400 transition-all" viewBox="0 0 24 24" <svg class="w-6 h-6 text-gray-300 group-hover:text-green-400 transition-all" viewBox="0 0 24 24"
fill="currentColor"> fill="currentColor">
<path d="M5 9v6h4l5 5V4l-5 5H5z" /> <path d="M5 9v6h4l5 5V4l-5 5H5z" />
@ -333,7 +333,7 @@ if (!$state || !isset($state['localData']) || !json_decode($state['localData'],
<path <path
d="M12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm0-16v2m0 16v2m8-10h2M2 12H0m17.66 6.34l1.41 1.41M4.93 4.93l1.41 1.41m0 12.73l-1.41 1.41M19.07 4.93l-1.41 1.41" /> d="M12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm0-16v2m0 16v2m8-10h2M2 12H0m17.66 6.34l1.41 1.41M4.93 4.93l1.41 1.41m0 12.73l-1.41 1.41M19.07 4.93l-1.41 1.41" />
</svg> </svg>
</button> --> </button>
</div> </div>
</div> </div>
@ -368,7 +368,7 @@ if (!$state || !isset($state['localData']) || !json_decode($state['localData'],
</svg> </svg>
</button> </button>
<button onclick="openApp('internet.php', 'Internet', true)" <button onclick="openApp('internet.php', 'Internet')"
title="Internet" class="p-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-all"> 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" <svg class="w-6 h-6 text-green-300 mx-auto" fill="none" stroke="currentColor" stroke-width="2"
viewBox="0 0 24 24"> viewBox="0 0 24 24">

198
internet.php
View File

@ -1,75 +1,102 @@
<?php
$extensionMarker = '/usr/thos/unblocker_installed.txt';
if (!file_exists($extensionMarker)) {
echo '<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Install Extension</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-black text-white flex items-center justify-center h-screen">
<div class="bg-white/10 p-6 rounded-xl shadow-xl text-center max-w-md w-full">
<h1 class="text-2xl font-bold mb-4">Unblocker Extension Not Installed</h1>
<p class="mb-4">THOS needs the browser unblocker extension to function fully. Would you like to install it now and reboot?</p>
<form method="POST">
<button name="install" value="yes" class="bg-cyan-600 hover:bg-cyan-700 text-white font-bold py-2 px-4 rounded">Install and Reboot</button>
</form>
</div>
</body>
</html>';
if ($_SERVER['REQUEST_METHOD'] === 'POST' && $_POST['install'] === 'yes') {
shell_exec(' sudo bash /usr/thos/install-unblocker.sh');
file_put_contents($extensionMarker, 'installed');
echo '<script>alert("Extension installed. System will reboot.");</script>';
sleep(1);
shell_exec('reboot');
}
exit;
}
?>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>THOS Internet</title> <title>THOS Browser</title>
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style> <style>
html, body { :root {
background: transparent; --accent: #ff69b4;
} }
iframe::-webkit-scrollbar { body {
display: none; background-color: #121212;
}
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: rgba(255,255,255,0.1);
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: var(--accent);
border-radius: 4px;
}
iframe {
opacity: 0;
transition: opacity 0.3s ease-in-out;
pointer-events: none;
}
iframe.active {
opacity: 1;
pointer-events: auto;
} }
</style> </style>
</head> </head>
<body class="bg-transparent text-white"> <body class="text-white antialiased">
<div class="w-full h-screen flex flex-col overflow-hidden"> <div class="flex h-screen overflow-hidden">
<div class="bg-white/10 backdrop-blur border-b border-white/20 p-2 flex gap-2 items-center"> <!-- Sidebar -->
<button id="backBtn" class="px-3 py-1 rounded bg-white/20 hover:bg-white/30">◀</button> <div class="w-16 bg-[#1E1E1E] flex flex-col items-center py-4 space-y-4 border-r border-[#2C2C2C]">
<button id="forwardBtn" class="px-3 py-1 rounded bg-white/20 hover:bg-white/30">▶</button> <button id="newTabBtn" class="hover:bg-[#2C2C2C] p-2 rounded-md transition-colors">
<button id="reloadBtn" class="px-3 py-1 rounded bg-white/20 hover:bg-white/30">⟳</button> <i class="fas fa-plus text-lg"></i>
<input id="urlBar" type="text" placeholder="Search or enter URL" class="flex-1 px-4 py-1 rounded bg-white/10 focus:outline-none focus:ring-2 focus:ring-cyan-400" /> </button>
<button id="goBtn" class="px-4 py-1 rounded bg-cyan-500 hover:bg-cyan-600 text-black font-bold">Go</button> <div id="tabList" class="flex-1 overflow-y-auto space-y-2">
<!-- Tabs will be dynamically added here -->
</div>
</div> </div>
<div id="bookmarkBar" class="flex gap-2 px-2 py-1 bg-white/5 border-b border-white/10 overflow-x-auto"></div> <!-- Main Content Area -->
<div class="flex-1 flex flex-col">
<!-- URL Bar -->
<div class="bg-[#1E1E1E] border-b border-[#2C2C2C] px-4 py-2 flex items-center space-x-2">
<button id="backBtn" class="text-gray-400 hover:text-white transition-colors">
<i class="fas fa-chevron-left"></i>
</button>
<button id="forwardBtn" class="text-gray-400 hover:text-white transition-colors">
<i class="fas fa-chevron-right"></i>
</button>
<button id="reloadBtn" class="text-gray-400 hover:text-white transition-colors">
<i class="fas fa-redo"></i>
</button>
<div id="tabs" class="flex gap-2 px-2 py-1 bg-white/5 border-b border-white/10"> <div class="flex-1 relative">
<button id="newTabBtn" class="px-2 py-1 rounded bg-cyan-600 text-black hover:bg-cyan-700">+ New Tab</button> <input
id="urlBar"
type="text"
placeholder="Search or enter URL"
class="w-full pl-8 pr-4 py-2 bg-[#2C2C2C] rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--accent)] text-white"
/>
<i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
</div> </div>
<div id="iframeContainer" class="flex-1 relative"></div> <button
id="goBtn"
class="bg-[var(--accent)] hover:opacity-80 text-white font-bold py-2 px-4 rounded-md transition-opacity"
>
Go
</button>
</div>
<!-- Bookmarks -->
<div
id="bookmarkBar"
class="bg-[#1E1E1E] px-4 py-2 flex space-x-2 overflow-x-auto custom-scrollbar"
></div>
<!-- Iframe Container -->
<div id="iframeContainer" class="flex-1 relative bg-[#121212]"></div>
</div>
</div> </div>
<script> <script>
// Set accent color
document.documentElement.style.setProperty('--accent', window.parent.THOS.getAllSettings().accentColor || '#ff69b4');
const defaultBookmarks = [ const defaultBookmarks = [
{ name: 'YouTube (Yewtu.be)', url: 'https://yewtu.be' }, { name: 'YouTube (Yewtu.be)', url: 'https://yewtu.be', icon: 'fab fa-youtube' },
{ name: 'DuckDuckGo', url: 'https://duckduckgo.com' }, { name: 'DuckDuckGo', url: 'https://duckduckgo.com', icon: 'fas fa-search' },
{ name: 'Surillya', url: 'https://surillya.com' } { name: 'Surillya', url: 'https://surillya.com', icon: 'fas fa-globe' }
]; ];
const iframeContainer = document.getElementById('iframeContainer'); const iframeContainer = document.getElementById('iframeContainer');
@ -79,7 +106,7 @@ if (!file_exists($extensionMarker)) {
const forwardBtn = document.getElementById('forwardBtn'); const forwardBtn = document.getElementById('forwardBtn');
const reloadBtn = document.getElementById('reloadBtn'); const reloadBtn = document.getElementById('reloadBtn');
const bookmarkBar = document.getElementById('bookmarkBar'); const bookmarkBar = document.getElementById('bookmarkBar');
const tabs = document.getElementById('tabs'); const tabList = document.getElementById('tabList');
const newTabBtn = document.getElementById('newTabBtn'); const newTabBtn = document.getElementById('newTabBtn');
let tabId = 0; let tabId = 0;
@ -93,14 +120,42 @@ if (!file_exists($extensionMarker)) {
iframe.src = url; iframe.src = url;
iframe.loading = 'lazy'; iframe.loading = 'lazy';
iframe.dataset.id = id; iframe.dataset.id = id;
iframe.style.zIndex = 1;
return iframe; return iframe;
} }
function createTabButton(id) {
const tabBtn = document.createElement('button');
tabBtn.dataset.id = id;
tabBtn.className = `w-10 h-10 rounded-md flex items-center justify-center hover:bg-[#2C2C2C] transition-colors ${id === activeTab ? 'bg-[var(--accent)] bg-opacity-20' : ''}`;
tabBtn.innerHTML = `<i class="fas fa-globe"></i>`;
tabBtn.onclick = () => switchTab(id);
const closeBtn = document.createElement('button');
closeBtn.innerHTML = `<i class="fas fa-times text-xs"></i>`;
closeBtn.className = 'absolute top-0 right-0 p-1 hover:text-red-500';
closeBtn.onclick = (e) => {
e.stopPropagation();
closeTab(id);
};
tabBtn.appendChild(closeBtn);
return tabBtn;
}
function switchTab(id) { function switchTab(id) {
document.querySelectorAll('iframe').forEach(iframe => { document.querySelectorAll('iframe').forEach(iframe => {
iframe.style.zIndex = iframe.dataset.id === String(id) ? 2 : 1; iframe.classList.remove('active');
}); });
// Update tab styling
document.querySelectorAll('[data-id]').forEach(btn => {
btn.classList.remove('bg-[var(--accent)]', 'bg-opacity-20');
});
const tabBtn = document.querySelector(`[data-id='${id}']`);
if (tabBtn) tabBtn.classList.add('bg-[var(--accent)]', 'bg-opacity-20');
const iframe = document.querySelector(`iframe[data-id='${id}']`);
if (iframe) iframe.classList.add('active');
activeTab = id; activeTab = id;
const currentTab = tabsState.get(id); const currentTab = tabsState.get(id);
if (currentTab) { if (currentTab) {
@ -108,6 +163,27 @@ if (!file_exists($extensionMarker)) {
} }
} }
function closeTab(id) {
// Remove iframe
const iframe = document.querySelector(`iframe[data-id='${id}']`);
if (iframe) iframe.remove();
// Remove tab button
const tabBtn = document.querySelector(`[data-id='${id}']`);
if (tabBtn) tabBtn.remove();
// Remove from tabs state
tabsState.delete(id);
// Switch to last tab or create new tab
const remainingTabs = Array.from(tabsState.keys());
if (remainingTabs.length > 0) {
switchTab(remainingTabs[remainingTabs.length - 1]);
} else {
addTab();
}
}
function addTab(url = 'https://surillya.com') { function addTab(url = 'https://surillya.com') {
const id = tabId++; const id = tabId++;
const tabState = { id, history: [url], index: 0 }; const tabState = { id, history: [url], index: 0 };
@ -115,11 +191,8 @@ if (!file_exists($extensionMarker)) {
const iframe = createIframe(url, id); const iframe = createIframe(url, id);
iframeContainer.appendChild(iframe); iframeContainer.appendChild(iframe);
const tabBtn = document.createElement('button'); const tabBtn = createTabButton(id);
tabBtn.textContent = `Tab ${id + 1}`; tabList.appendChild(tabBtn);
tabBtn.className = 'px-2 py-1 rounded bg-white/10 hover:bg-white/20';
tabBtn.onclick = () => switchTab(id);
tabs.insertBefore(tabBtn, newTabBtn);
switchTab(id); switchTab(id);
} }
@ -136,6 +209,7 @@ if (!file_exists($extensionMarker)) {
urlBar.value = url; urlBar.value = url;
} }
// Event Listeners
goBtn.onclick = () => loadURL(urlBar.value); goBtn.onclick = () => loadURL(urlBar.value);
urlBar.addEventListener('keydown', e => { if (e.key === 'Enter') goBtn.click(); }); urlBar.addEventListener('keydown', e => { if (e.key === 'Enter') goBtn.click(); });
@ -171,8 +245,8 @@ if (!file_exists($extensionMarker)) {
bookmarkBar.innerHTML = ''; bookmarkBar.innerHTML = '';
defaultBookmarks.forEach(b => { defaultBookmarks.forEach(b => {
const btn = document.createElement('button'); const btn = document.createElement('button');
btn.textContent = b.name; btn.innerHTML = `<i class="${b.icon} mr-2"></i>${b.name}`;
btn.className = 'px-2 py-1 rounded bg-white/10 hover:bg-white/20 text-sm'; btn.className = 'px-3 py-1 rounded bg-[#2C2C2C] hover:bg-[var(--accent)] hover:bg-opacity-20 text-sm flex items-center space-x-2 transition-colors';
btn.onclick = () => loadURL(b.url); btn.onclick = () => loadURL(b.url);
bookmarkBar.appendChild(btn); bookmarkBar.appendChild(btn);
}); });