Hugging Face's logo

Spaces:
xvadur
/
Aethero_github
Configuration error

App Files Community
xvadur commited on
Commit
a3ec448
·
1 Parent(s): b93b1ee

🕷️ Spider-Man Edition: Added Spider-Man 3 corner image, centralized layout, large hero header with background image, responsive design

Browse files
Files changed (2) hide show
  1. dashboard/public/index.html +22 -15
  2. dashboard/public/styles.css +139 -8
dashboard/public/index.html CHANGED
@@ -3,20 +3,24 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Aethero Dashboard</title>
7
  <link rel="stylesheet" href="styles.css">
8
  </head>
9
  <body>
10
- <header>
11
- <h1>Aethero Introspective Dashboard</h1>
12
- <nav>
13
- <ul>
14
- <li><a href="#parser-logs">Parser Logs</a></li>
15
- <li><a href="#test-results">Test Results</a></li>
16
- <li><a href="#feedback">Feedback</a></li>
17
- </ul>
18
- </nav>
19
- </header>
 
 
 
 
20
  <main>
21
  <section id="introspective-space">
22
  <h2>Introspective Space</h2>
@@ -34,10 +38,13 @@
34
  <h2>Feedback</h2>
35
  <div id="feedback-container">Loading feedback...</div>
36
  </section>
37
- </main>
38
- <footer>
39
- <p>&copy; 2025 Aethero Systems</p>
40
- </footer>
 
 
 
41
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
42
  <script src="script.js"></script>
43
  </body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Aethero Dashboard - Spider-Man Edition</title>
7
  <link rel="stylesheet" href="styles.css">
8
  </head>
9
  <body>
10
+ <!-- Spider-Man corner image -->
11
+ <div class="spiderman-corner" title="Spider-Man 3 - Web Slinger"></div>
12
+
13
+ <div class="container">
14
+ <header>
15
+ <h1>🕷️ AETHERO INTROSPECTIVE DASHBOARD 🕷️</h1>
16
+ <nav>
17
+ <ul>
18
+ <li><a href="#parser-logs">Parser Logs</a></li>
19
+ <li><a href="#test-results">Test Results</a></li>
20
+ <li><a href="#feedback">Feedback</a></li>
21
+ </ul>
22
+ </nav>
23
+ </header>
24
  <main>
25
  <section id="introspective-space">
26
  <h2>Introspective Space</h2>
 
38
  <h2>Feedback</h2>
39
  <div id="feedback-container">Loading feedback...</div>
40
  </section>
41
+ </main>
42
+
43
+ <footer>
44
+ <p>&copy; 2025 Aethero Systems - Enhanced with Spider-Man Power 🕷️</p>
45
+ </footer>
46
+ </div>
47
+
48
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
49
  <script src="script.js"></script>
50
  </body>
dashboard/public/styles.css CHANGED
@@ -4,13 +4,83 @@ body {
4
  padding: 0;
5
  background-color: #DC143C;
6
  color: #333;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7
  }
8
 
9
  header {
10
- background-color: #4CAF50;
 
 
 
 
11
  color: white;
12
- padding: 1rem;
13
  text-align: center;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14
  }
15
 
16
  header nav ul {
@@ -29,19 +99,80 @@ header nav ul li a {
29
 
30
  main {
31
  padding: 2rem;
 
 
 
 
 
32
  }
33
 
34
  section {
35
  margin-bottom: 2rem;
36
- padding: 1rem;
37
- background: white;
38
- border-radius: 8px;
39
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
40
  }
41
 
42
  footer {
43
  text-align: center;
44
- padding: 1rem;
45
- background-color: #333;
46
  color: white;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
47
  }
 
4
  padding: 0;
5
  background-color: #DC143C;
6
  color: #333;
7
+ display: flex;
8
+ flex-direction: column;
9
+ min-height: 100vh;
10
+ }
11
+
12
+ .container {
13
+ max-width: 1200px;
14
+ margin: 0 auto;
15
+ padding: 0 20px;
16
+ width: 100%;
17
+ display: flex;
18
+ flex-direction: column;
19
+ align-items: center;
20
+ }
21
+
22
+ .spiderman-corner {
23
+ position: fixed;
24
+ top: 20px;
25
+ left: 20px;
26
+ width: 150px;
27
+ height: 150px;
28
+ background-image: url('https://images.unsplash.com/photo-1635805737707-575885ab0820?w=300&h=300&fit=crop&crop=center');
29
+ background-size: cover;
30
+ background-position: center;
31
+ border-radius: 50%;
32
+ border: 4px solid #fff;
33
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
34
+ z-index: 1000;
35
+ transition: transform 0.3s ease;
36
+ }
37
+
38
+ .spiderman-corner:hover {
39
+ transform: scale(1.1);
40
  }
41
 
42
  header {
43
+ background: linear-gradient(135deg, #4CAF50, #2E7D32);
44
+ background-image: url('https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=1200&h=400&fit=crop&crop=center');
45
+ background-size: cover;
46
+ background-position: center;
47
+ background-blend-mode: overlay;
48
  color: white;
49
+ padding: 4rem 1rem;
50
  text-align: center;
51
+ width: 100%;
52
+ position: relative;
53
+ margin-left: 170px; /* Space for Spider-Man image */
54
+ }
55
+
56
+ header::before {
57
+ content: '';
58
+ position: absolute;
59
+ top: 0;
60
+ left: 0;
61
+ right: 0;
62
+ bottom: 0;
63
+ background: rgba(76, 175, 80, 0.7);
64
+ z-index: 1;
65
+ }
66
+
67
+ header h1 {
68
+ font-size: 4rem;
69
+ font-weight: bold;
70
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
71
+ margin: 0;
72
+ position: relative;
73
+ z-index: 2;
74
+ background: linear-gradient(45deg, #fff, #ffeb3b);
75
+ -webkit-background-clip: text;
76
+ -webkit-text-fill-color: transparent;
77
+ background-clip: text;
78
+ }
79
+
80
+ header nav {
81
+ position: relative;
82
+ z-index: 2;
83
+ margin-top: 2rem;
84
  }
85
 
86
  header nav ul {
 
99
 
100
  main {
101
  padding: 2rem;
102
+ flex: 1;
103
+ width: 100%;
104
+ max-width: 1000px;
105
+ margin: 0 auto;
106
+ margin-left: 170px; /* Space for Spider-Man image */
107
  }
108
 
109
  section {
110
  margin-bottom: 2rem;
111
+ padding: 2rem;
112
+ background: rgba(255, 255, 255, 0.95);
113
+ border-radius: 15px;
114
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
115
+ backdrop-filter: blur(10px);
116
+ border: 1px solid rgba(255, 255, 255, 0.3);
117
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
118
+ }
119
+
120
+ section:hover {
121
+ transform: translateY(-5px);
122
+ box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
123
+ }
124
+
125
+ section h2 {
126
+ color: #2E7D32;
127
+ font-size: 2rem;
128
+ margin-bottom: 1rem;
129
+ border-bottom: 3px solid #4CAF50;
130
+ padding-bottom: 0.5rem;
131
  }
132
 
133
  footer {
134
  text-align: center;
135
+ padding: 2rem;
136
+ background: linear-gradient(135deg, #333, #1a1a1a);
137
  color: white;
138
+ width: 100%;
139
+ margin-top: auto;
140
+ margin-left: 170px; /* Space for Spider-Man image */
141
+ }
142
+
143
+ /* Responsive design */
144
+ @media (max-width: 768px) {
145
+ .spiderman-corner {
146
+ width: 100px;
147
+ height: 100px;
148
+ top: 10px;
149
+ left: 10px;
150
+ }
151
+
152
+ header, main, footer {
153
+ margin-left: 120px;
154
+ }
155
+
156
+ header h1 {
157
+ font-size: 2.5rem;
158
+ }
159
+
160
+ header {
161
+ padding: 2rem 1rem;
162
+ }
163
+ }
164
+
165
+ @media (max-width: 480px) {
166
+ .spiderman-corner {
167
+ width: 80px;
168
+ height: 80px;
169
+ }
170
+
171
+ header, main, footer {
172
+ margin-left: 100px;
173
+ }
174
+
175
+ header h1 {
176
+ font-size: 2rem;
177
+ }
178
  }