Hugging Face's logo

Spaces:
kirikir13
/
Game-Unknown
Runtime error

App Files Community
kirikir13 commited on
Commit
3a52595
·
verified ·
1 Parent(s): ed8e91f

Can you take this game i made and add a Professional and high tech GUI system and add graphics that make the game better and more entertaining to play please here my code: "import tkinter as tk 2from tkinter import ttk, filedialog, messagebox,

Browse files

PanedWindow, simpledialog, Menu 3import os 4import sys 5import subprocess
6import json 7import string 8import threading 9import queue 10import time
11import pyperclip 12from pynput import keyboard 13import pyttsx3 14 15#
Initialize TTS engine 16tts_engine = pyttsx3.init()
17tts_engine.setProperty('rate', 150) 18tts_engine.setProperty('volume',
1.0) 19 20class TTSMiniApp: 21 def __init__(self, root): 22 self.root =
root 23 self.mini_window = tk.Toplevel(root) 24 self.mini_window.title("TTS
Mini") 25 self.mini_window.geometry("350x180") 26
self.mini_window.protocol("WM_DELETE_WINDOW", self.hide_mini_window) 27 28
ttk.Label(self.mini_window, text="Text to Speech", font=("Arial", 12,
"bold")).pack(pady=10) 29 30 self.text_box = tk.Text(self.mini_window,
height=5, width=40) 31 self.text_box.pack(padx=10, pady=10) 32 33 btn_frame
= ttk.Frame(self.mini_window) 34 btn_frame.pack(pady=5) 35 36
self.speak_button = ttk.Button(btn_frame, text="🔊 Speak",
command=self.speak_text) 37 self.speak_button.pack(side=tk.LEFT, padx=5) 38
39 clear_btn = ttk.Button(btn_frame, text="Clear", command=lambda:
self.text_box.delete("1.0", tk.END)) 40 clear_btn.pack(side=tk.LEFT,
padx=5) 41 42 self.mini_window.withdraw() 43 44 def show_mini_window(self):
45 self.mini_window.deiconify() 46 self.mini_window.lift() 47
self.text_box.focus_set() 48 49 def hide_mini_window(self): 50
11/30/25, 8:24 PM
Qsystem ultimate feature additions and integration - Claude
https://claude.ai/chat/b25cc443-8e77-457a-8775-fc63f65d268c
2/18
self.mini_window.withdraw() 51 52 def speak_text(self): 53 text =
self.text_box.get("1.0", tk.END).strip() 54 if text: 55 try: 56
tts_engine.say(text) 57 tts_engine.runAndWait() 58 except Exception as e:
59 messagebox.showerror("TTS Error", f"Failed to speak: {e}") 60 61class
PythonScriptRunnerApp: 62 CONFIG_FILE =
os.path.join(os.path.expanduser("~"), ".python_script_runner_qr.json") 63
DEFAULT_QR_BG = "SystemButtonFace" 64 ASSIGNED_QR_BG = "#90EE90" 65 66 def
__init__(self, root_window): 67 self.root = root_window 68
self.root.title("QsysTem ULTIMATE") 69 self.root.geometry("1100x900") 70 71
# QR Profile system with themes 72 self.qr_profiles = { 73 "Default": {},
74 "HuggingFace": {}, 75 "GitHub": {}, 76 "Python Commands": {} 77 } 78
self.current_qr_profile_name = "Default" 79 self.qr_assignments =
self.qr_profiles[self.current_qr_profile_name] 80 81 self.scanned_files_map
= {} 82 self.selected_script_path_from_scan = None 83
self.assign_mode_active = False 84 self.scan_queue = queue.Queue() 85
self.is_scanning = False 86 self.context_menu_selected_path = None 87
self.qr_context_selected = None 88 89 # Dormant Mode 90 self.activity_timer
= None 91 self.is_dormant = False 92 self.original_geometry = "" 93 94 #
Time filter variable 95 self.time_filter_var = tk.StringVar(value="any") 96
97 # File type filter 98 self.file_type_var = tk.StringVar(value="All") 99
self.custom_extensions_var =
tk.StringVar(value=".gguf,.safetensors,.blend,.stl") 100 101
self.drive_level_system_folders_set = { 102 "windows", "program files",
"program files (x86)", 103 "programdata", "perflogs", "recovery" 104 } 105
self.always_skip_folders_set = { 106 "$recycle.bin", "system volume
information", "appdata", 107 "local settings", "application data",
"config.msi", "intel", 108 "msocache", "$windows.~bt", "$windows.~ws",
"windows.old", 109 "onedrivetemp", "dropbox.cache" 110 } 111 112
self.file_type_categories = { 113 "All": ["*"], 114 "Python": [".py",
".pyw"], 115 "Scripts": [".py", ".pyw", ".bat", ".sh", ".ps1"], 116
"Media": [".mp4", ".mkv", ".avi", ".mov", ".mp3", ".wav"], 117 "Images":
[".jpg", ".jpeg", ".png", ".gif", ".bmp", ".webp"], 118 "Archives":
[".zip", ".rar", ".7z", ".tar", ".gz"], 119 "AI Models": [".gguf",
".safetensors", ".ckpt", ".bin"], 120 "3D Models": [".stl", ".obj", ".fbx",
".blend"], 121 "Custom": [] 122 } 123 124 # TTS Mini app 125 self.tts_mini
= TTSMiniApp(self.root) 126 127 self.setup_styles() 128 self.setup_ui() 129
self.setup_context_menus() 130 self.load_qr_assignments() 131
self.log_message("Application started. Ready.", "INFO") 132 133
self.bind_activity_events() 134 self.reset_activity_timer() 135
11/30/25, 8:24 PM
Qsystem ultimate feature additions and integration - Claude
https://claude.ai/chat/b25cc443-8e77-457a-8775-fc63f65d268c
3/18
self.start_hotkey_listener() 136 137 def get_search_extensions(self): 138
return ( 139 '.py', '.pyw', '.zip', '.apk', '.mp4', '.mkv', '.avi', '.mov',
140 '.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', 141 '.gguf',
'.safetensors', '.stl', '.obj', '.bat', '.sh' 142 ) 143 144 def
get_available_drives(self): 145 drives = [] 146 if os.name == 'nt': 147 for
letter in string.ascii_uppercase: 148 drive_path = f"{letter}:\\" 149 if
os.path.exists(drive_path): 150 drives.append(drive_path) 151 if not drives
and os.path.exists("C:\\"): 152 drives.append("C:\\") 153 else: 154
drives.append("/") 155 drives.append(os.path.expanduser("~")) 156 if not
drives: 157 drives.append(os.getcwd()) 158 return drives 159 160 def
setup_styles(self): 161 style = ttk.Style() 162 try: 163 current_themes =
style.theme_names() 164 if 'clam' in current_themes: 165
style.theme_use('clam') 166 elif 'vista' in current_themes and os.name ==
'nt': 167 style.theme_use('vista') 168 elif 'aqua' in current_themes and
sys.platform == 'darwin': 169 style.theme_use('aqua') 170 except
tk.TclError: 171 self.log_message("Could not set a preferred theme. Using
default.", "WARN") 172 173 style.configure("TButton", padding=6,
relief="raised") 174 style.configure("Assigned.TButton",
background=self.ASSIGNED_QR_BG, foreground="black", 175 relief="sunken",
padding=10) 176 style.map("Assigned.TButton", background=[('active',
self.ASSIGNED_QR_BG), 177 ('!active', self.ASSIGNED_QR_BG)], foreground=
[('active', 'black'), ('!active', 'black')]) 178
style.configure("AssignModeActive.TButton", background="#FFD700",
foreground="black", relief="sunken") 179
style.map("AssignModeActive.TButton", background=[('active', '#FFB300'),
('!active', '#FFD700')]) 180 style.configure("Voice.TButton", padding=8,
font=('Segoe UI', 10, 'bold')) 181 182 def setup_context_menus(self): 183
"""Setup all context menus""" 184 # Listbox context menu 185
self.listbox_context_menu = Menu(self.root, tearoff=0) 186
self.listbox_context_menu.add_command(label="📢 Voice Narration",
command=self.narrate_selection) 187
self.listbox_context_menu.add_command(label="📋 Copy Path",
command=self.copy_path) 188 self.listbox_context_menu.add_separator() 189
self.listbox_context_menu.add_command(label="🎯 Assign to QR",
command=self.toggle_assign_mode) 190
self.listbox_context_menu.add_command(label="▶ Run Script",
command=self.run_selected_script) 191 192 # QR button context menu 193
self.qr_context_menu = Menu(self.root, tearoff=0) 194
self.qr_context_menu.add_command(label="🗑 Clear Assignment",
11/30/25, 8:24 PM
Qsystem ultimate feature additions and integration - Claude
https://claude.ai/chat/b25cc443-8e77-457a-8775-fc63f65d268c
4/18
command=self.clear_qr_assignment) 195
self.qr_context_menu.add_command(label="✏ Edit Assignment",
command=self.edit_qr_assignment) 196 self.qr_context_menu.add_separator()
197 self.qr_context_menu.add_command(label="📢 Voice Narration",
command=self.narrate_qr_assignment) 198 199 def setup_ui(self): 200 # QR
Profiles Frame 201 profiles_frame = ttk.Frame(self.root, padding="5") 202
profiles_frame.pack(side=tk.TOP, fill=tk.X, pady=(0, 5)) 203 204
ttk.Label(profiles_frame, text="QR Profile:", font=("Arial", 10,
"bold")).pack(side=tk.LEFT, padx=5) 205 self.profile_combobox =
ttk.Combobox(profiles_frame, values=list(self.qr_profiles.keys()), 206
state="readonly", width=15) 207
self.profile_combobox.set(self.current_qr_profile_name) 208
self.profile_combobox.bind("<<ComboboxSelected>>", self.on_profile_change)
209 self.profile_combobox.pack(side=tk.LEFT, padx=5) 210 211
ttk.Button(profiles_frame, text="➕ New Profile",
command=self.create_new_profile).pack(side=tk.LEFT, padx=5) 212 213 # Top
QR Buttons Frame 214 self.qr_main_frame = ttk.Frame(self.root, padding="5")
215 self.qr_main_frame.pack(side=tk.TOP, fill=tk.X, pady=(0, 5)) 216 217
self.qr_buttons = {} 218 219 # First row of QR buttons (Q1-Q9) 220
qr_row1_frame = ttk.Frame(self.qr_main_frame) 221
qr_row1_frame.pack(side=tk.TOP, fill=tk.X, pady=(0, 3)) 222 223 for i in
range(1, 10): 224 qr_id = f"Q{i}" 225 button = ttk.Button(qr_row1_frame,
text=qr_id, width=10, 226 command=lambda q=qr_id:
self.on_qr_button_click(q)) 227 button.pack(side=tk.LEFT, padx=2) 228
button.bind("<Button-3>", lambda e, q=qr_id: self.show_qr_context_menu(e,
q)) 229 self.qr_buttons[qr_id] = button 230 231 # Second row of QR buttons
(Q10-Q18) 232 qr_row2_frame = ttk.Frame(self.qr_main_frame) 233
qr_row2_frame.pack(side=tk.TOP, fill=tk.X) 234 235 for i in range(10, 19):
236 qr_id = f"Q{i}" 237 button = ttk.Button(qr_row2_frame, text=qr_id,
width=10, 238 command=lambda q=qr_id: self.on_qr_button_click(q)) 239
button.pack(side=tk.LEFT, padx=2) 240 button.bind("<Button-3>", lambda e,
q=qr_id: self.show_qr_context_menu(e, q)) 241 self.qr_buttons[qr_id] =
button 242 243 # Main paned window 244 self.paned_window =
PanedWindow(self.root, orient=tk.HORIZONTAL, sashwidth=5) 245
self.paned_window.pack(fill=tk.BOTH, expand=True, padx=5, pady=5) 246 247 #
Left pane 248 left_pane_frame = ttk.Frame(self.paned_window) 249
self.paned_window.add(left_pane_frame, width=700) 250 251 # Time filter
frame 252 time_frame = ttk.LabelFrame(left_pane_frame, text="Time Filter",
padding="5") 253 time_frame.pack(side=tk.TOP, fill=tk.X, padx=5, pady=5)
11/30/25, 8:24 PM
Qsystem ultimate feature additions and integration - Claude
https://claude.ai/chat/b25cc443-8e77-457a-8775-fc63f65d268c
5/18
254 255 ttk.Radiobutton(time_frame, text="Any time",
variable=self.time_filter_var, 256 value="any").pack(side=tk.LEFT, padx=5)
257 ttk.Radiobutton(time_frame, text="Last day",
variable=self.time_filter_var, 258 value="day").pack(side=tk.LEFT, p

Files changed (5) hide show
  1. README.md +8 -5
  2. components/navbar.js +111 -0
  3. index.html +240 -19
  4. script.js +107 -0
  5. style.css +88 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Quantum Script Commander 3000
3
- emoji: 📊
4
- colorFrom: blue
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: Quantum Script Commander 3000 🔮
3
+ colorFrom: yellow
4
+ colorTo: blue
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/navbar.js ADDED
@@ -0,0 +1,111 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ nav {
7
+ background-color: rgb(31 41 55);
8
+ padding: 1rem 2rem;
9
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
10
+ }
11
+
12
+ .container {
13
+ display: flex;
14
+ justify-content: space-between;
15
+ align-items: center;
16
+ max-width: 100%;
17
+ margin: 0 auto;
18
+ }
19
+
20
+ .logo {
21
+ display: flex;
22
+ align-items: center;
23
+ gap: 0.75rem;
24
+ font-weight: 700;
25
+ font-size: 1.25rem;
26
+ color: #d946ef;
27
+ }
28
+
29
+ .logo-icon {
30
+ width: 2rem;
31
+ height: 2rem;
32
+ color: #d946ef;
33
+ }
34
+
35
+ .nav-links {
36
+ display: flex;
37
+ gap: 1.5rem;
38
+ }
39
+
40
+ .nav-link {
41
+ color: #9ca3af;
42
+ font-weight: 500;
43
+ transition: color 0.2s;
44
+ display: flex;
45
+ align-items: center;
46
+ gap: 0.5rem;
47
+ }
48
+
49
+ .nav-link:hover {
50
+ color: #d946ef;
51
+ }
52
+
53
+ .nav-link i {
54
+ width: 1rem;
55
+ height: 1rem;
56
+ }
57
+
58
+ .badge {
59
+ background-color: #f59e0b;
60
+ color: #1f2937;
61
+ font-size: 0.75rem;
62
+ padding: 0.25rem 0.5rem;
63
+ border-radius: 9999px;
64
+ margin-left: 0.5rem;
65
+ font-weight: 600;
66
+ }
67
+
68
+ @media (max-width: 768px) {
69
+ .container {
70
+ flex-direction: column;
71
+ gap: 1rem;
72
+ }
73
+
74
+ .nav-links {
75
+ width: 100%;
76
+ justify-content: space-around;
77
+ }
78
+ }
79
+ </style>
80
+
81
+ <nav>
82
+ <div class="container">
83
+ <a href="#" class="logo">
84
+ <svg class="logo-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
85
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
86
+ </svg>
87
+ Quantum Script Commander
88
+ </a>
89
+
90
+ <div class="nav-links">
91
+ <a href="#" class="nav-link">
92
+ <i data-feather="home"></i>
93
+ Dashboard
94
+ </a>
95
+ <a href="#" class="nav-link">
96
+ <i data-feather="settings"></i>
97
+ Settings
98
+ </a>
99
+ <a href="#" class="nav-link">
100
+ <i data-feather="help-circle"></i>
101
+ Help
102
+ <span class="badge">NEW</span>
103
+ </a>
104
+ </div>
105
+ </div>
106
+ </nav>
107
+ `;
108
+ }
109
+ }
110
+
111
+ customElements.define('custom-navbar', CustomNavbar);
index.html CHANGED
@@ -1,19 +1,240 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Quantum Script Commander 3000</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: {
18
+ 500: '#d946ef',
19
+ },
20
+ secondary: {
21
+ 500: '#f59e0b',
22
+ }
23
+ }
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ </head>
29
+ <body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">
30
+ <custom-navbar></custom-navbar>
31
+
32
+ <main class="flex-1 container mx-auto p-4">
33
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
34
+ <!-- QR Buttons Panel -->
35
+ <div class="lg:col-span-1 bg-gray-800 rounded-xl p-4 shadow-lg">
36
+ <div class="flex justify-between items-center mb-4">
37
+ <h2 class="text-xl font-bold text-primary-500">Quick Access</h2>
38
+ <div class="relative">
39
+ <select class="bg-gray-700 text-primary-500 px-3 py-1 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-500">
40
+ <option>Default Profile</option>
41
+ <option>HuggingFace</option>
42
+ <option>GitHub</option>
43
+ </select>
44
+ </div>
45
+ </div>
46
+
47
+ <div class="grid grid-cols-3 gap-3">
48
+ <!-- QR Buttons Q1-Q9 -->
49
+ <template x-for="i in 9" :key="i">
50
+ <button class="bg-gray-700 hover:bg-primary-500 text-white font-bold py-4 rounded-lg transition-all duration-200 flex flex-col items-center justify-center">
51
+ <span class="text-xs opacity-70">Q<span x-text="i"></span></span>
52
+ <span class="text-xs mt-1 truncate w-full px-1">Unassigned</span>
53
+ </button>
54
+ </template>
55
+ </div>
56
+
57
+ <div class="mt-4 grid grid-cols-3 gap-3">
58
+ <!-- QR Buttons Q10-Q18 -->
59
+ <template x-for="i in 9" :key="i">
60
+ <button class="bg-gray-700 hover:bg-secondary-500 text-white font-bold py-4 rounded-lg transition-all duration-200 flex flex-col items-center justify-center">
61
+ <span class="text-xs opacity-70">Q<span x-text="i+9"></span></span>
62
+ <span class="text-xs mt-1 truncate w-full px-1">Unassigned</span>
63
+ </button>
64
+ </template>
65
+ </div>
66
+ </div>
67
+
68
+ <!-- Main Content Area -->
69
+ <div class="lg:col-span-3 bg-gray-800 rounded-xl p-4 shadow-lg">
70
+ <!-- File Explorer Header -->
71
+ <div class="flex flex-wrap justify-between items-center mb-4 gap-2">
72
+ <h2 class="text-xl font-bold text-secondary-500">Script Explorer</h2>
73
+ <div class="flex gap-2">
74
+ <div class="relative">
75
+ <select class="bg-gray-700 text-secondary-500 px-3 py-1 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-secondary-500">
76
+ <option>Any Time</option>
77
+ <option>Last Day</option>
78
+ <option>Last Week</option>
79
+ <option>Last Month</option>
80
+ </select>
81
+ </div>
82
+ <div class="relative">
83
+ <select class="bg-gray-700 text-secondary-500 px-3 py-1 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-secondary-500">
84
+ <option>All Files</option>
85
+ <option>Python</option>
86
+ <option>Scripts</option>
87
+ <option>Media</option>
88
+ </select>
89
+ </div>
90
+ <div class="relative">
91
+ <select class="bg-gray-700 text-secondary-500 px-3 py-1 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-secondary-500">
92
+ <option>C:</option>
93
+ <option>D:</option>
94
+ <option>E:</option>
95
+ </select>
96
+ </div>
97
+ <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-1 rounded-lg flex items-center gap-1">
98
+ <i data-feather="search" class="w-4 h-4"></i>
99
+ Scan
100
+ </button>
101
+ <button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-1 rounded-lg flex items-center gap-1">
102
+ <i data-feather="stop-circle" class="w-4 h-4"></i>
103
+ Stop
104
+ </button>
105
+ </div>
106
+ </div>
107
+
108
+ <!-- File List and Preview -->
109
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
110
+ <!-- File List -->
111
+ <div class="lg:col-span-2 bg-gray-700 rounded-lg p-2">
112
+ <div class="h-96 overflow-y-auto">
113
+ <table class="w-full text-left">
114
+ <thead class="sticky top-0 bg-gray-800">
115
+ <tr>
116
+ <th class="px-4 py-2">Name</th>
117
+ <th class="px-4 py-2">Modified</th>
118
+ <th class="px-4 py-2">Size</th>
119
+ </tr>
120
+ </thead>
121
+ <tbody>
122
+ <!-- Sample files -->
123
+ <tr class="hover:bg-gray-600 cursor-pointer border-b border-gray-600">
124
+ <td class="px-4 py-2 flex items-center gap-2">
125
+ <i data-feather="file-text" class="w-4 h-4 text-primary-500"></i>
126
+ script1.py
127
+ </td>
128
+ <td class="px-4 py-2 text-sm">2023-10-15</td>
129
+ <td class="px-4 py-2 text-sm">24 KB</td>
130
+ </tr>
131
+ <tr class="hover:bg-gray-600 cursor-pointer border-b border-gray-600">
132
+ <td class="px-4 py-2 flex items-center gap-2">
133
+ <i data-feather="file-text" class="w-4 h-4 text-primary-500"></i>
134
+ utils.py
135
+ </td>
136
+ <td class="px-4 py-2 text-sm">2023-10-10</td>
137
+ <td class="px-4 py-2 text-sm">12 KB</td>
138
+ </tr>
139
+ <tr class="hover:bg-gray-600 cursor-pointer border-b border-gray-600">
140
+ <td class="px-4 py-2 flex items-center gap-2">
141
+ <i data-feather="file" class="w-4 h-4 text-secondary-500"></i>
142
+ config.json
143
+ </td>
144
+ <td class="px-4 py-2 text-sm">2023-10-05</td>
145
+ <td class="px-4 py-2 text-sm">4 KB</td>
146
+ </tr>
147
+ </tbody>
148
+ </table>
149
+ </div>
150
+ </div>
151
+
152
+ <!-- File Preview -->
153
+ <div class="bg-gray-700 rounded-lg p-4">
154
+ <h3 class="text-lg font-semibold mb-2">File Details</h3>
155
+ <div class="space-y-2">
156
+ <div>
157
+ <p class="text-sm text-gray-400">Name:</p>
158
+ <p class="text-white">script1.py</p>
159
+ </div>
160
+ <div>
161
+ <p class="text-sm text-gray-400">Path:</p>
162
+ <p class="text-white truncate">C:\Users\Quantum\scripts\script1.py</p>
163
+ </div>
164
+ <div>
165
+ <p class="text-sm text-gray-400">Size:</p>
166
+ <p class="text-white">24 KB</p>
167
+ </div>
168
+ <div>
169
+ <p class="text-sm text-gray-400">Modified:</p>
170
+ <p class="text-white">2023-10-15 14:30</p>
171
+ </div>
172
+ </div>
173
+
174
+ <div class="mt-6 space-y-2">
175
+ <button class="w-full bg-secondary-500 hover:bg-secondary-600 text-white py-2 rounded-lg flex items-center justify-center gap-2">
176
+ <i data-feather="play" class="w-4 h-4"></i>
177
+ Run Script
178
+ </button>
179
+ <button class="w-full bg-gray-600 hover:bg-gray-500 text-white py-2 rounded-lg flex items-center justify-center gap-2">
180
+ <i data-feather="copy" class="w-4 h-4"></i>
181
+ Copy Path
182
+ </button>
183
+ <button class="w-full bg-gray-600 hover:bg-gray-500 text-white py-2 rounded-lg flex items-center justify-center gap-2">
184
+ <i data-feather="folder" class="w-4 h-4"></i>
185
+ Open Location
186
+ </button>
187
+ <button class="w-full bg-primary-500 hover:bg-primary-600 text-white py-2 rounded-lg flex items-center justify-center gap-2">
188
+ <i data-feather="target" class="w-4 h-4"></i>
189
+ Assign to QR
190
+ </button>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ </div>
195
+ </div>
196
+
197
+ <!-- TTS Mini Panel (hidden by default) -->
198
+ <div id="tts-mini" class="fixed bottom-4 right-4 bg-gray-800 rounded-xl p-4 shadow-xl w-80 hidden">
199
+ <div class="flex justify-between items-center mb-2">
200
+ <h3 class="font-bold text-primary-500">Text to Speech</h3>
201
+ <button id="tts-close" class="text-gray-400 hover:text-white">
202
+ <i data-feather="x"></i>
203
+ </button>
204
+ </div>
205
+ <textarea class="w-full bg-gray-700 text-white p-2 rounded-lg h-24 mb-2" placeholder="Enter text to speak..."></textarea>
206
+ <div class="flex gap-2">
207
+ <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg flex-1 flex items-center justify-center gap-1">
208
+ <i data-feather="volume-2" class="w-4 h-4"></i>
209
+ Speak
210
+ </button>
211
+ <button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg">
212
+ <i data-feather="trash-2" class="w-4 h-4"></i>
213
+ </button>
214
+ </div>
215
+ </div>
216
+ </main>
217
+
218
+ <!-- Activity Log -->
219
+ <div class="bg-gray-800 border-t border-gray-700 p-4">
220
+ <div class="flex justify-between items-center mb-2">
221
+ <h3 class="font-semibold text-secondary-500">Activity Log</h3>
222
+ <button class="text-gray-400 hover:text-white">
223
+ <i data-feather="maximize-2" class="w-4 h-4"></i>
224
+ </button>
225
+ </div>
226
+ <div class="bg-gray-900 rounded-lg p-2 h-24 overflow-y-auto font-mono text-sm">
227
+ <div class="text-green-400">[12:30:45 INFO] Application started. Ready.</div>
228
+ <div class="text-yellow-400">[12:31:02 WARN] Scan stopped by user.</div>
229
+ <div class="text-white">[12:31:45 INFO] Scan complete. Found 42 files.</div>
230
+ </div>
231
+ </div>
232
+
233
+ <script src="components/navbar.js"></script>
234
+ <script src="script.js"></script>
235
+ <script>
236
+ feather.replace();
237
+ </script>
238
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
239
+ </body>
240
+ </html>
script.js ADDED
@@ -0,0 +1,107 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener('DOMContentLoaded', function() {
2
+ // Initialize tooltips
3
+ const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
4
+ tooltipTriggerList.map(function (tooltipTriggerEl) {
5
+ return new Tooltip(tooltipTriggerEl);
6
+ });
7
+
8
+ // Toggle TTS Mini Panel
9
+ const ttsMini = document.getElementById('tts-mini');
10
+ const ttsClose = document.getElementById('tts-close');
11
+
12
+ document.querySelector('[aria-label="TTS Mini"]').addEventListener('click', function() {
13
+ ttsMini.classList.toggle('hidden');
14
+ ttsMini.classList.add('fade-in');
15
+ });
16
+
17
+ ttsClose.addEventListener('click', function() {
18
+ ttsMini.classList.add('fade-out');
19
+ setTimeout(() => {
20
+ ttsMini.classList.add('hidden');
21
+ ttsMini.classList.remove('fade-out');
22
+ }, 300);
23
+ });
24
+
25
+ // Simulate file selection
26
+ const fileRows = document.querySelectorAll('tbody tr');
27
+ fileRows.forEach(row => {
28
+ row.addEventListener('click', function() {
29
+ fileRows.forEach(r => r.classList.remove('bg-gray-600'));
30
+ this.classList.add('bg-gray-600');
31
+ });
32
+ });
33
+
34
+ // QR button assignment simulation
35
+ const qrButtons = document.querySelectorAll('.grid button');
36
+ const assignButton = document.querySelector('[aria-label="Assign to QR"]');
37
+
38
+ let assignMode = false;
39
+
40
+ assignButton.addEventListener('click', function() {
41
+ assignMode = !assignMode;
42
+ if (assignMode) {
43
+ this.classList.add('pulse');
44
+ qrButtons.forEach(btn => {
45
+ btn.classList.add('ring-2', 'ring-primary-500');
46
+ });
47
+ } else {
48
+ this.classList.remove('pulse');
49
+ qrButtons.forEach(btn => {
50
+ btn.classList.remove('ring-2', 'ring-primary-500');
51
+ });
52
+ }
53
+ });
54
+
55
+ qrButtons.forEach(btn => {
56
+ btn.addEventListener('click', function() {
57
+ if (assignMode) {
58
+ this.classList.remove('bg-gray-700', 'hover:bg-primary-500', 'hover:bg-secondary-500');
59
+ this.classList.add('bg-primary-500');
60
+ this.querySelector('span:last-child').textContent = 'script1.py';
61
+ assignMode = false;
62
+ assignButton.classList.remove('pulse');
63
+ qrButtons.forEach(b => b.classList.remove('ring-2', 'ring-primary-500'));
64
+ }
65
+ });
66
+ });
67
+
68
+ // Context menu simulation
69
+ document.addEventListener('contextmenu', function(e) {
70
+ e.preventDefault();
71
+ const contextMenu = document.createElement('div');
72
+ contextMenu.className = 'context-menu';
73
+ contextMenu.style.left = `${e.pageX}px`;
74
+ contextMenu.style.top = `${e.pageY}px`;
75
+
76
+ const menuItems = [
77
+ { icon: 'volume-2', text: 'Voice Narration' },
78
+ { icon: 'copy', text: 'Copy Path' },
79
+ { divider: true },
80
+ { icon: 'target', text: 'Assign to QR' },
81
+ { icon: 'play', text: 'Run Script' }
82
+ ];
83
+
84
+ menuItems.forEach(item => {
85
+ if (item.divider) {
86
+ const divider = document.createElement('div');
87
+ divider.className = 'context-menu-divider';
88
+ contextMenu.appendChild(divider);
89
+ } else {
90
+ const menuItem = document.createElement('div');
91
+ menuItem.className = 'context-menu-item flex items-center gap-2';
92
+ menuItem.innerHTML = `<i data-feather="${item.icon}" class="w-4 h-4"></i> ${item.text}`;
93
+ contextMenu.appendChild(menuItem);
94
+ }
95
+ });
96
+
97
+ document.body.appendChild(contextMenu);
98
+ feather.replace();
99
+
100
+ const closeMenu = function() {
101
+ document.body.removeChild(contextMenu);
102
+ document.removeEventListener('click', closeMenu);
103
+ };
104
+
105
+ document.addEventListener('click', closeMenu);
106
+ });
107
+ });
style.css CHANGED
@@ -1,28 +1,98 @@
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
 
 
 
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
1
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
2
+
3
  body {
4
+ font-family: 'Inter', sans-serif;
5
+ }
6
+
7
+ /* Custom scrollbar */
8
+ ::-webkit-scrollbar {
9
+ width: 8px;
10
+ height: 8px;
11
+ }
12
+
13
+ ::-webkit-scrollbar-track {
14
+ background: #1f2937;
15
+ }
16
+
17
+ ::-webkit-scrollbar-thumb {
18
+ background: #4b5563;
19
+ border-radius: 4px;
20
+ }
21
+
22
+ ::-webkit-scrollbar-thumb:hover {
23
+ background: #6b7280;
24
+ }
25
+
26
+ /* Animation classes */
27
+ .fade-in {
28
+ animation: fadeIn 0.3s ease-in-out;
29
+ }
30
+
31
+ .fade-out {
32
+ animation: fadeOut 0.3s ease-in-out;
33
+ }
34
+
35
+ @keyframes fadeIn {
36
+ from { opacity: 0; transform: translateY(10px); }
37
+ to { opacity: 1; transform: translateY(0); }
38
+ }
39
+
40
+ @keyframes fadeOut {
41
+ from { opacity: 1; transform: translateY(0); }
42
+ to { opacity: 0; transform: translateY(10px); }
43
+ }
44
+
45
+ /* Pulse animation for active QR buttons */
46
+ .pulse {
47
+ animation: pulse 2s infinite;
48
+ }
49
+
50
+ @keyframes pulse {
51
+ 0% {
52
+ box-shadow: 0 0 0 0 rgba(217, 70, 239, 0.7);
53
+ }
54
+ 70% {
55
+ box-shadow: 0 0 0 10px rgba(217, 70, 239, 0);
56
+ }
57
+ 100% {
58
+ box-shadow: 0 0 0 0 rgba(217, 70, 239, 0);
59
+ }
60
  }
61
 
62
+ /* Glow effect for primary buttons */
63
+ .glow:hover {
64
+ filter: drop-shadow(0 0 6px rgba(217, 70, 239, 0.5));
65
  }
66
 
67
+ /* Transition for buttons */
68
+ button {
69
+ transition: all 0.2s ease-out;
 
 
70
  }
71
 
72
+ /* Custom context menu */
73
+ .context-menu {
74
+ position: absolute;
75
+ z-index: 1000;
76
+ width: 200px;
77
+ background: #374151;
78
+ border-radius: 0.5rem;
79
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
80
+ overflow: hidden;
81
  }
82
 
83
+ .context-menu-item {
84
+ padding: 0.5rem 1rem;
85
+ cursor: pointer;
86
+ font-size: 0.875rem;
87
+ color: #e5e7eb;
88
  }
89
+
90
+ .context-menu-item:hover {
91
+ background: #4b5563;
92
+ }
93
+
94
+ .context-menu-divider {
95
+ height: 1px;
96
+ background: #4b5563;
97
+ margin: 0.25rem 0;
98
+ }