Hugging Face's logo

Spaces:
Holycanolies123
/
E
Running

App Files Community
Holycanolies123 commited on
Commit
de1acec
·
verified ·
1 Parent(s): 18a15b1

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +253 -19
index.html CHANGED
@@ -1,19 +1,253 @@
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">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Brand Detail View - Abyssal Nexus</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
8
+ <style>
9
+ :root {
10
+ --bg-dark: #0A0A0F;
11
+ --card-bg: #1A1A22;
12
+ --purple-dark: #300030;
13
+ --purple-medium: #600060;
14
+ --purple-light: #900090;
15
+ --text-light: #E0E0E0;
16
+ --text-subdued: #A0A0A0;
17
+ --border-light: rgba(224, 224, 224, 0.1);
18
+ --shadow-color: rgba(0, 0, 0, 0.4);
19
+ --gradient-blue: #000030;
20
+ --gradient-orange: #301000;
21
+ }
22
+
23
+ body {
24
+ margin: 0;
25
+ font-family: 'Roboto', sans-serif;
26
+ color: var(--text-light);
27
+ background-color: var(--bg-dark);
28
+ overflow: hidden; /* Prevent scrollbar from background animation */
29
+ display: flex;
30
+ justify-content: center;
31
+ align-items: center;
32
+ min-height: 100vh;
33
+ position: relative;
34
+ }
35
+
36
+ .background-container {
37
+ position: absolute;
38
+ top: 0;
39
+ left: 0;
40
+ width: 100%;
41
+ height: 100%;
42
+ background:
43
+ radial-gradient(circle at 20% 80%, var(--purple-dark) 0%, transparent 30%),
44
+ radial-gradient(circle at 80% 20%, var(--gradient-blue) 0%, transparent 30%),
45
+ radial-gradient(circle at 50% 50%, var(--gradient-orange) 0%, transparent 40%),
46
+ linear-gradient(135deg, var(--bg-dark) 0%, #000000 100%);
47
+ background-size: 200% 200%;
48
+ animation: cosmic-pan 30s infinite alternate ease-in-out;
49
+ z-index: -2;
50
+ }
51
+
52
+ .background-overlay {
53
+ position: absolute;
54
+ top: 0;
55
+ left: 0;
56
+ width: 100%;
57
+ height: 100%;
58
+ background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.4) 100%);
59
+ z-index: -1;
60
+ }
61
+
62
+ @keyframes cosmic-pan {
63
+ 0% { background-position: 0% 0%; }
64
+ 100% { background-position: 100% 100%; }
65
+ }
66
+
67
+ .star-field {
68
+ position: absolute;
69
+ top: 0;
70
+ left: 0;
71
+ width: 100%;
72
+ height: 100%;
73
+ background-image: radial-gradient(circle, rgba(255, 255, 255, 0.8) 1px, transparent 1px);
74
+ background-size: 200px 200px;
75
+ opacity: 0.3;
76
+ z-index: -1;
77
+ }
78
+
79
+ .container {
80
+ max-width: 400px;
81
+ width: 90%;
82
+ padding: 30px;
83
+ background: rgba(0, 0, 0, 0.1);
84
+ border-radius: 15px;
85
+ box-shadow: 0 10px 30px var(--shadow-color);
86
+ backdrop-filter: blur(5px);
87
+ position: relative;
88
+ z-index: 1;
89
+ border: 1px solid rgba(255, 255, 255, 0.05);
90
+ }
91
+
92
+ .title {
93
+ font-family: 'Orbitron', sans-serif;
94
+ font-size: 2.5em;
95
+ font-weight: 700;
96
+ margin-bottom: 20px;
97
+ text-align: left;
98
+ color: var(--text-light);
99
+ text-shadow: 0 0 10px var(--purple-medium);
100
+ }
101
+
102
+ .brand-header {
103
+ margin-bottom: 30px;
104
+ }
105
+
106
+ .brand-name {
107
+ font-family: 'Orbitron', sans-serif;
108
+ font-size: 3em;
109
+ font-weight: 700;
110
+ color: var(--text-light);
111
+ margin-bottom: 5px;
112
+ text-shadow: 0 0 15px var(--purple-light);
113
+ }
114
+
115
+ .parent-company-value {
116
+ font-size: 1em;
117
+ color: var(--text-subdued);
118
+ font-weight: 300;
119
+ }
120
+
121
+ .details-card {
122
+ background-color: var(--card-bg);
123
+ border-radius: 10px;
124
+ padding: 20px;
125
+ box-shadow: 0 5px 20px var(--shadow-color);
126
+ margin-bottom: 30px;
127
+ border: 1px solid rgba(255, 255, 255, 0.08);
128
+ }
129
+
130
+ .detail-row {
131
+ display: flex;
132
+ justify-content: space-between;
133
+ align-items: center;
134
+ padding: 12px 0;
135
+ border-bottom: 1px solid var(--border-light);
136
+ }
137
+
138
+ .detail-row:last-child {
139
+ border-bottom: none;
140
+ }
141
+
142
+ .detail-label {
143
+ font-size: 0.95em;
144
+ color: var(--text-subdued);
145
+ font-weight: 300;
146
+ }
147
+
148
+ .detail-value {
149
+ font-size: 1em;
150
+ font-weight: 700;
151
+ color: var(--text-light);
152
+ text-align: right;
153
+ }
154
+
155
+ .status-pills {
156
+ display: flex;
157
+ gap: 10px;
158
+ }
159
+
160
+ .status-pill {
161
+ padding: 6px 12px;
162
+ border-radius: 20px;
163
+ font-size: 0.85em;
164
+ font-weight: 700;
165
+ border: 1px solid transparent;
166
+ transition: all 0.3s ease;
167
+ }
168
+
169
+ .status-pill.active {
170
+ background-color: var(--purple-medium);
171
+ color: var(--text-light);
172
+ border-color: var(--purple-light);
173
+ box-shadow: 0 0 8px rgba(144, 0, 144, 0.5);
174
+ }
175
+
176
+ .status-pill.inactive {
177
+ background-color: transparent;
178
+ color: var(--text-subdued);
179
+ border-color: var(--border-light);
180
+ }
181
+
182
+ .view-button {
183
+ width: 100%;
184
+ padding: 18px 25px;
185
+ background-color: var(--purple-medium);
186
+ color: var(--text-light);
187
+ border: none;
188
+ border-radius: 10px;
189
+ font-family: 'Orbitron', sans-serif;
190
+ font-size: 1.2em;
191
+ font-weight: 700;
192
+ cursor: pointer;
193
+ box-shadow: 0 8px 20px var(--shadow-color), 0 0 15px var(--purple-light);
194
+ transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
195
+ text-transform: uppercase;
196
+ letter-spacing: 1px;
197
+ }
198
+
199
+ .view-button:hover {
200
+ background-color: var(--purple-light);
201
+ transform: translateY(-2px);
202
+ box-shadow: 0 12px 25px var(--shadow-color), 0 0 20px var(--purple-light);
203
+ }
204
+
205
+ .view-button:active {
206
+ transform: translateY(0);
207
+ box-shadow: 0 5px 15px var(--shadow-color), 0 0 10px var(--purple-light);
208
+ }
209
+ </style>
210
+ </head>
211
+ <body>
212
+ <div class="background-container"></div>
213
+ <div class="background-overlay"></div>
214
+ <div class="star-field"></div>
215
+
216
+ <div class="container">
217
+ <h1 class="title">Brand Details</h1>
218
+
219
+ <div class="brand-header">
220
+ <div class="brand-name">Brand</div>
221
+ <div class="parent-company-value">Parent Company: $12,000.00</div>
222
+ </div>
223
+
224
+ <div class="details-card">
225
+ <div class="detail-row">
226
+ <div class="detail-label">Brand Status</div>
227
+ <div class="detail-value status-pills">
228
+ <span class="status-pill active">Active</span>
229
+ <span class="status-pill inactive">Inactive</span>
230
+ </div>
231
+ </div>
232
+ <div class="detail-row">
233
+ <div class="detail-label">Engagement Score</div>
234
+ <div class="detail-value">8.5</div>
235
+ </div>
236
+ <div class="detail-row">
237
+ <div class="detail-label">Subsidiary Brands</div>
238
+ <div class="detail-value">12</div>
239
+ </div>
240
+ <div class="detail-row">
241
+ <div class="detail-label">Parent Company</div>
242
+ <div class="detail-value">XYZ Corp</div>
243
+ </div>
244
+ <div class="detail-row">
245
+ <div class="detail-label">Nexus Core</div>
246
+ <div class="detail-value">$500,000.00</div>
247
+ </div>
248
+ </div>
249
+
250
+ <button class="view-button">View Nexus Core</button>
251
+ </div>
252
+ </body>
253
+ </html>