From d020934527cda2ff9486a171112d46161ce6826b Mon Sep 17 00:00:00 2001
From: Surillya <surillya@ghost.tel>
Date: Tue, 24 Jun 2025 00:29:23 +0200
Subject: [PATCH] Updated internet and media controls

---
 index.php    |   6 +-
 internet.php | 202 +++++++++++++++++++++++++++++++++++----------------
 2 files changed, 141 insertions(+), 67 deletions(-)
diff --git a/index.php b/index.php
index 503dcd4..f4f06cc 100644
--- a/index.php
+++ b/index.php
@@ -319,7 +319,7 @@ if (!$state || !isset($state['localData']) || !json_decode($state['localData'],
               </svg>
             </button>
             <!-- 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"
                 fill="currentColor">
                 <path d="M5 9v6h4l5 5V4l-5 5H5z" />
@@ -333,7 +333,7 @@ if (!$state || !isset($state['localData']) || !json_decode($state['localData'],
                 <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" />
               </svg>
-            </button> -->
+            </button>
           </div>
         </div>
 
@@ -368,7 +368,7 @@ if (!$state || !isset($state['localData']) || !json_decode($state['localData'],
             </svg>
           </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">
             <svg class="w-6 h-6 text-green-300 mx-auto" fill="none" stroke="currentColor" stroke-width="2"
               viewBox="0 0 24 24">
diff --git a/internet.php b/internet.php
index 5412bbf..9721167 100644
--- a/internet.php
+++ b/internet.php
@@ -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>
\ No newline at end of file
