Hugging Face's logo

Spaces:
OrbitMC
/
web
Running

App Files Community
OrbitMC commited on
Commit
dc45241
·
verified ·
1 Parent(s): af1da4c

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +181 -19
index.html CHANGED
@@ -1,19 +1,181 @@
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>Server Shop</title>
7
+ <style>
8
+ :root {
9
+ --bg-main: #0f1115;
10
+ --bg-card: #181c25;
11
+ --accent: #5865F2; /* Discord Blurple */
12
+ --accent-hover: #4752C4;
13
+ --text-main: #f3f4f6;
14
+ --text-muted: #9ca3af;
15
+ --border: #262c3a;
16
+ }
17
+
18
+ * {
19
+ margin: 0;
20
+ padding: 0;
21
+ box-sizing: border-box;
22
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
23
+ }
24
+
25
+ body {
26
+ background-color: var(--bg-main);
27
+ color: var(--text-main);
28
+ line-height: 1.5;
29
+ padding: 2rem 1rem;
30
+ }
31
+
32
+ .container {
33
+ max-width: 1100px;
34
+ margin: 0 auto;
35
+ }
36
+
37
+ /* Header */
38
+ header {
39
+ text-align: center;
40
+ margin-bottom: 3rem;
41
+ }
42
+
43
+ header h1 {
44
+ font-size: 2.5rem;
45
+ font-weight: 800;
46
+ letter-spacing: -0.05em;
47
+ margin-bottom: 0.5rem;
48
+ }
49
+
50
+ header p {
51
+ color: var(--text-muted);
52
+ font-size: 1.1rem;
53
+ }
54
+
55
+ /* Grid */
56
+ .shop-grid {
57
+ display: grid;
58
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
59
+ gap: 1.5rem;
60
+ }
61
+
62
+ /* Card */
63
+ .product-card {
64
+ background: var(--bg-card);
65
+ border: 1px solid var(--border);
66
+ border-radius: 12px;
67
+ padding: 1.5rem;
68
+ display: flex;
69
+ flex-direction: column;
70
+ justify-content: space-between;
71
+ transition: transform 0.2s ease, border-color 0.2s ease;
72
+ }
73
+
74
+ .product-card:hover {
75
+ transform: translateY(-4px);
76
+ border-color: var(--accent);
77
+ }
78
+
79
+ .badge {
80
+ align-self: flex-start;
81
+ background: rgba(88, 101, 242, 0.1);
82
+ color: var(--accent);
83
+ font-size: 0.75rem;
84
+ font-weight: 700;
85
+ text-transform: uppercase;
86
+ padding: 0.25rem 0.75rem;
87
+ border-radius: 9999px;
88
+ margin-bottom: 1rem;
89
+ letter-spacing: 0.05em;
90
+ }
91
+
92
+ .product-title {
93
+ font-size: 1.25rem;
94
+ font-weight: 700;
95
+ margin-bottom: 0.5rem;
96
+ }
97
+
98
+ .product-desc {
99
+ color: var(--text-muted);
100
+ font-size: 0.9rem;
101
+ margin-bottom: 1.5rem;
102
+ flex-grow: 1;
103
+ }
104
+
105
+ .product-footer {
106
+ display: flex;
107
+ align-items: center;
108
+ justify-content: space-between;
109
+ margin-top: auto;
110
+ }
111
+
112
+ .price {
113
+ font-size: 1.5rem;
114
+ font-weight: 800;
115
+ }
116
+
117
+ .buy-btn {
118
+ background-color: var(--accent);
119
+ color: #fff;
120
+ text-decoration: none;
121
+ padding: 0.6rem 1.2rem;
122
+ border-radius: 6px;
123
+ font-size: 0.9rem;
124
+ font-weight: 600;
125
+ transition: background 0.2s ease;
126
+ }
127
+
128
+ .buy-btn:hover {
129
+ background-color: var(--accent-hover);
130
+ }
131
+ </style>
132
+ </head>
133
+ <body>
134
+
135
+ <div class="container">
136
+ <header>
137
+ <h1>Server Marketplace</h1>
138
+ <p>Upgrade your experience with digital goods and perks</p>
139
+ </header>
140
+
141
+ <main class="shop-grid">
142
+ <div class="product-card">
143
+ <span class="badge">Roles</span>
144
+ <div>
145
+ <h2 class="product-title">VIP Rank</h2>
146
+ <p class="product-desc">Get a shiny neon role, access to exclusive private lounges, and image permissions in general chat.</p>
147
+ </div>
148
+ <div class="product-footer">
149
+ <span class="price">$4.99</span>
150
+ <a href="#" class="buy-btn">Purchase</a>
151
+ </div>
152
+ </div>
153
+
154
+ <div class="product-card">
155
+ <span class="badge">In-Game</span>
156
+ <div>
157
+ <h2 class="product-title">1,000 Coins</h2>
158
+ <p class="product-desc">Boost your balance instantly to buy crates, cosmetics, and custom cosmetics inside our server economy.</p>
159
+ </div>
160
+ <div class="product-footer">
161
+ <span class="price">$9.99</span>
162
+ <a href="#" class="buy-btn">Purchase</a>
163
+ </div>
164
+ </div>
165
+
166
+ <div class="product-card">
167
+ <span class="badge">Custom</span>
168
+ <div>
169
+ <h2 class="product-title">Custom Icon</h2>
170
+ <p class="product-desc">Work with our design team to create a custom role icon next to your name visible to everyone.</p>
171
+ </div>
172
+ <div class="product-footer">
173
+ <span class="price">$14.99</span>
174
+ <a href="#" class="buy-btn">Purchase</a>
175
+ </div>
176
+ </div>
177
+ </main>
178
+ </div>
179
+
180
+ </body>
181
+ </html>