Skip to content

Commit 001a367

Browse files
DevasyDevasy
authored
Refactor code structure for improved readability and maintainability (#15)
* Refactor code structure for improved readability and maintainability * feat: Enhance theme and mode functionality with improved event delegation and performance optimizations * feat: Enhance dark mode functionality with improved icon visibility and event delegation
1 parent 1ec9a37 commit 001a367

File tree

4 files changed

+1398
-511
lines changed

4 files changed

+1398
-511
lines changed

‎src/frontend/index.html‎

Lines changed: 44 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" data-theme="professional">
33

44
<head>
55
<meta charset="UTF-8">
@@ -8,62 +8,70 @@
88
<link rel="icon" href="favicon.svg" type="image/svg+xml">
99
<link rel="preconnect" href="https://fonts.googleapis.com">
1010
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
12-
<link rel="stylesheet" href="style.css">
11+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;800&family=Space+Grotesk:wght@300;400;500;700&display=swap" rel="stylesheet">
12+
<link rel="stylesheet" href="style.css?v=4.2">
1313
</head>
1414

1515
<body>
16+
<!-- Gen Z Marquee Bar -->
17+
<div class="marquee-container">
18+
<div class="marquee-content">
19+
AI POWERED TEST AUTOMATION • GENERATE CODE IN SECONDS • NO CODE KNOWLEDGE REQUIRED • AI AGENTS AT WORK • FUTURE IS NOW • AUTOMATE EVERYTHING •
20+
AI POWERED TEST AUTOMATION • GENERATE CODE IN SECONDS • NO CODE KNOWLEDGE REQUIRED • AI AGENTS AT WORK • FUTURE IS NOW • AUTOMATE EVERYTHING •
21+
</div>
22+
</div>
23+
1624
<nav class="navbar">
1725
<div class="nav-container">
1826
<div class="logo">
1927
<div class="logo-icon">M1</div>
20-
<div class="logo-text">Mark 1</div>
28+
<div class="logo-text glitch" data-text="MARK 1">Mark 1</div>
2129
</div>
22-
<div class="nav-info">
23-
<div class="status-dot"></div>
24-
<span>AI System Online</span>
25-
<span>•</span>
26-
<span>Multi-Agent Pipeline</span>
30+
31+
<div class="controls">
32+
<!-- Theme Switcher -->
33+
<div class="theme-toggle-group" title="Change Theme">
34+
<button class="control-btn active" data-theme="professional" title="Professional">
35+
<svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path></svg>
36+
</button>
37+
<button class="control-btn" data-theme="neobrutalism" title="Neobrutalism (Gen Z)">
38+
<svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
39+
</button>
40+
</div>
41+
42+
<!-- Dark Mode Toggle -->
43+
<div class="mode-toggle">
44+
<button class="control-btn" id="mode-btn" data-action="toggle-dark-mode" title="Toggle Dark Mode">
45+
<svg id="moon-icon" width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
46+
<svg id="sun-icon" width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
47+
</button>
48+
</div>
49+
50+
<!-- Metrics Link -->
51+
<a href="/metrics.html" class="control-btn metrics-link" title="View Metrics">
52+
<svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
53+
</a>
2754
</div>
2855
</div>
2956
</nav>
3057

3158
<main class="main-content">
3259
<div class="hero">
33-
<h1>AI Test Automation Platform</h1>
34-
<p>Transform natural language descriptions into executable Robot Framework tests using our advanced
35-
multi-agent AI system.</p>
60+
<h1 class="glitch" data-text="AI TEST AUTOMATION">AI TEST AUTOMATION</h1>
61+
<p>Transform descriptions into Robot Framework tests. Fast. Reliable. Automated.</p>
3662

3763
<div class="capabilities">
3864
<div class="capability">
39-
<svg class="capability-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
40-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
41-
d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z">
42-
</path>
43-
</svg>
44-
<span>Intelligent Code Generation</span>
45-
</div>
46-
<div class="capability">
47-
<svg class="capability-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
48-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
49-
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15">
50-
</path>
51-
</svg>
52-
<span>Self-Correcting Validation</span>
65+
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="margin-right:6px"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
66+
<span>CODE GEN</span>
5367
</div>
5468
<div class="capability">
55-
<svg class="capability-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
56-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
57-
d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M9 9h6"></path>
58-
</svg>
59-
<span>Containerized Execution</span>
69+
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="margin-right:6px"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
70+
<span>AUTO VALIDATION</span>
6071
</div>
6172
<div class="capability">
62-
<svg class="capability-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
63-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
64-
d="M13 10V3L4 14h7v7l9-11h-7z"></path>
65-
</svg>
66-
<span>Real-time Results</span>
73+
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="margin-right:6px"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path></svg>
74+
<span>CONTAINERIZED</span>
6775
</div>
6876
</div>
6977
</div>

0 commit comments

Comments
 (0)