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

202
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>
<html lang="en">
<head>
<meta charset="UTF-8" />
<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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
html, body {
background: transparent;
:root {
--accent: #ff69b4;
}
iframe::-webkit-scrollbar {
display: none;
body {
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>
</head>
<body class="bg-transparent text-white">
<div class="w-full h-screen flex flex-col overflow-hidden">
<div class="bg-white/10 backdrop-blur border-b border-white/20 p-2 flex gap-2 items-center">
<button id="backBtn" class="px-3 py-1 rounded bg-white/20 hover:bg-white/30">◀</button>
<button id="forwardBtn" class="px-3 py-1 rounded bg-white/20 hover:bg-white/30">▶</button>
<button id="reloadBtn" class="px-3 py-1 rounded bg-white/20 hover:bg-white/30">⟳</button>
<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 id="goBtn" class="px-4 py-1 rounded bg-cyan-500 hover:bg-cyan-600 text-black font-bold">Go</button>
<body class="text-white antialiased">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div class="w-16 bg-[#1E1E1E] flex flex-col items-center py-4 space-y-4 border-r border-[#2C2C2C]">
<button id="newTabBtn" class="hover:bg-[#2C2C2C] p-2 rounded-md transition-colors">
<i class="fas fa-plus text-lg"></i>
</button>
<div id="tabList" class="flex-1 overflow-y-auto space-y-2">
<!-- Tabs will be dynamically added here -->
</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 class="flex-1 relative">
<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>
<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>
<div id="tabs" class="flex gap-2 px-2 py-1 bg-white/5 border-b border-white/10">
<button id="newTabBtn" class="px-2 py-1 rounded bg-cyan-600 text-black hover:bg-cyan-700">+ New Tab</button>
<!-- 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 id="iframeContainer" class="flex-1 relative"></div>
</div>
<script>
// Set accent color
document.documentElement.style.setProperty('--accent', window.parent.THOS.getAllSettings().accentColor || '#ff69b4');
const defaultBookmarks = [
{ name: 'YouTube (Yewtu.be)', url: 'https://yewtu.be' },
{ name: 'DuckDuckGo', url: 'https://duckduckgo.com' },
{ name: 'Surillya', url: 'https://surillya.com' }
{ name: 'YouTube (Yewtu.be)', url: 'https://yewtu.be', icon: 'fab fa-youtube' },
{ name: 'DuckDuckGo', url: 'https://duckduckgo.com', icon: 'fas fa-search' },
{ name: 'Surillya', url: 'https://surillya.com', icon: 'fas fa-globe' }
];
const iframeContainer = document.getElementById('iframeContainer');
@ -79,7 +106,7 @@ if (!file_exists($extensionMarker)) {
const forwardBtn = document.getElementById('forwardBtn');
const reloadBtn = document.getElementById('reloadBtn');
const bookmarkBar = document.getElementById('bookmarkBar');
const tabs = document.getElementById('tabs');
const tabList = document.getElementById('tabList');
const newTabBtn = document.getElementById('newTabBtn');
let tabId = 0;
@ -93,14 +120,42 @@ if (!file_exists($extensionMarker)) {
iframe.src = url;
iframe.loading = 'lazy';
iframe.dataset.id = id;
iframe.style.zIndex = 1;
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) {
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;
const currentTab = tabsState.get(id);
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') {
const id = tabId++;
const tabState = { id, history: [url], index: 0 };
@ -115,11 +191,8 @@ if (!file_exists($extensionMarker)) {
const iframe = createIframe(url, id);
iframeContainer.appendChild(iframe);
const tabBtn = document.createElement('button');
tabBtn.textContent = `Tab ${id + 1}`;
tabBtn.className = 'px-2 py-1 rounded bg-white/10 hover:bg-white/20';
tabBtn.onclick = () => switchTab(id);
tabs.insertBefore(tabBtn, newTabBtn);
const tabBtn = createTabButton(id);
tabList.appendChild(tabBtn);
switchTab(id);
}
@ -136,6 +209,7 @@ if (!file_exists($extensionMarker)) {
urlBar.value = url;
}
// Event Listeners
goBtn.onclick = () => loadURL(urlBar.value);
urlBar.addEventListener('keydown', e => { if (e.key === 'Enter') goBtn.click(); });
@ -171,8 +245,8 @@ if (!file_exists($extensionMarker)) {
bookmarkBar.innerHTML = '';
defaultBookmarks.forEach(b => {
const btn = document.createElement('button');
btn.textContent = b.name;
btn.className = 'px-2 py-1 rounded bg-white/10 hover:bg-white/20 text-sm';
btn.innerHTML = `<i class="${b.icon} mr-2"></i>${b.name}`;
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);
bookmarkBar.appendChild(btn);
});
@ -184,4 +258,4 @@ if (!file_exists($extensionMarker)) {
addTab();
</script>
</body>
</html>
</html>