-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
268 lines (255 loc) · 17.9 KB
/
Copy pathindex.html
File metadata and controls
268 lines (255 loc) · 17.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
<!DOCTYPE html>
<html lang="en" class="wizard-app">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="description" content="Build your own Discord server in just a few clicks. Instantly get custom channels, roles, and layouts tailored to you. You design it, we deliver it fast. Stay tuned!" />
<meta name="theme-color" content="#5865F2" />
<meta name="color-scheme" content="light" />
<title>Serverly: Build your Discord server</title>
<link rel="icon" type="image/png" href="https://github.com/Delexoo/Serverly/blob/main/D.png?raw=true" />
<link rel="apple-touch-icon" href="https://github.com/Delexoo/Serverly/blob/main/D.png?raw=true" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Instrument+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="styles.css" />
</head>
<body class="wizard-app">
<a class="skip-link" href="#main-content">Skip to main content</a>
<header class="site-header site-header--wizard lab-header">
<div class="site-header-shell lab-header-shell">
<div class="site-header-inner lab-header-inner">
<div class="site-header-top lab-bar">
<button type="button" class="logo logo-btn lab-logo-btn" id="wizard-home" aria-label="Restart from beginning">
<span class="logo-mark" aria-hidden="true">✎</span>
<span class="logo-wordmark">Serverly</span>
</button>
<div class="site-header-progress-inline">
<div class="wizard-progress" id="wizard-progress" role="status" aria-live="polite">
<span class="progress-label" id="progress-label">Step 0 of 5</span>
<div class="progress-track" aria-hidden="true">
<div class="progress-fill" id="progress-fill"></div>
</div>
</div>
</div>
<div class="site-header-tools">
<button type="button" class="btn btn-back-wizard wizard-btn-ghost-subtle" id="wizard-back" hidden>
<span class="btn-back-wizard-icon" aria-hidden="true">←</span>
Back
</button>
</div>
</div>
</div>
</div>
</header>
<main class="wizard-main" id="main-content">
<div class="wizard-pages" id="wizard-pages">
<div class="wizard-page is-active" data-step="0" id="step-welcome" aria-label="Welcome">
<section class="hero hero-wizard hero-welcome-centered hero-wizard-mono">
<p class="visually-hidden" id="hero-value-sr-summary">
Highlights: Monetize, paid-access ready channels and roles. Growth, scalable structure without chaos. Simple, one price at $9.99. Optimal, layouts tuned for engagement. Easy, quick flow on the website with a live demo.
</p>
<h1 class="hero-title hero-title-mono">
<span class="hero-title-primary">Build your Discord server.</span>
</h1>
<p class="hero-kicker hero-kicker-below-title">Design it. Claim it. Done.</p>
<div class="hero-cta hero-cta-mono">
<button type="button" class="btn btn-primary btn-lg wizard-btn-get-started" data-wizard-next>Get started</button>
<a href="#welcome-faq" class="btn btn-outline btn-lg wizard-btn-ghost">Learn more</a>
</div>
</section>
<section id="welcome-faq" class="section welcome-section-below faq-mono">
<h2 class="section-title section-title-mono">Frequently asked questions</h2>
<div class="faq-list faq-list-mono">
<details class="faq-item faq-item-mono">
<summary>What exactly do I get?</summary>
<p>A complete Discord server layout—channels, roles, naming styles, category structure, and written guidance (welcome flows, monetization notes). You apply it to a new or reset server.</p>
</details>
<details class="faq-item faq-item-mono">
<summary>Do you log into my Discord?</summary>
<p>No. By default we deliver a template you apply yourself. Hands-on setup inside your server is a separate option.</p>
</details>
<details class="faq-item faq-item-mono">
<summary>Does this work for my existing server?</summary>
<p>Layouts are built for a <strong>new server</strong> or a <strong>full reset</strong>. Fixing a live server in-place is <strong>coming soon</strong> and not bookable yet.</p>
</details>
<details class="faq-item faq-item-mono">
<summary>Why pay vs free templates?</summary>
<p>Free lists rarely tie <strong>structure, engagement, and monetization</strong> together. We bundle naming, roles, flows, and growth patterns into one clear deliverable.</p>
</details>
<details class="faq-item faq-item-mono">
<summary>How does checkout work?</summary>
<p>You pay <strong>$9.99</strong> through Stripe on their secure page. We email an order summary that matches what you picked on the website.</p>
</details>
</div>
</section>
<section class="section welcome-section-below welcome-contact welcome-mono-card">
<h2 class="section-title section-title-mono">Questions first?</h2>
<p class="section-lead section-lead-compact">Prefer to talk before paying? Email us—we’ll get back to you.</p>
<a href="mailto:teambrilliantt@hotmail.com" class="btn btn-outline btn-lg wizard-btn-ghost btn-label-launch"><span>Email Us</span><svg class="launch-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M15 3h6v6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 14 21 3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
</section>
</div>
<div class="wizard-page" data-step="1" id="step-server-mode" aria-label="Server setup type">
<div class="wizard-inner wizard-inner-centered server-mode-step wizard-step-mono">
<p class="wizard-step-hint wizard-step-hint-mono">Step 1 of 5</p>
<h2 class="wizard-question wizard-question-tight wizard-question-mono">What do you need?</h2>
<div class="choice-grid choice-grid-server-mode server-bento-rail">
<button type="button" class="choice-card choice-card--goal server-bento-card server-bento-card--fresh" data-choice-key="serverMode" data-choice-value="fresh">
<span class="choice-icon-wrap server-bento-icon" aria-hidden="true"><svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect x="5" y="3" width="14" height="18" rx="2" fill="currentColor" opacity="0.15"/><rect x="7" y="5" width="10" height="12" rx="1" stroke="currentColor" stroke-width="1.5" fill="none"/><path d="M9 9h6M9 12h4M9 15h5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="12" cy="19" r="1.25" fill="currentColor"/></svg></span>
<span class="choice-title">New server template</span>
<span class="choice-tagline"></span>
</button>
<div
class="choice-card choice-card--goal choice-card--disabled server-bento-card server-bento-card--disabled"
role="group"
aria-label="Fix my current server. Coming soon, not available yet."
>
<span class="choice-icon-wrap server-bento-icon" aria-hidden="true"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><circle cx="8.5" cy="8.5" r="2" fill="currentColor" opacity="0.35"/></svg></span>
<span class="choice-title">Fix my current server</span>
<span class="choice-tagline"></span>
<span class="choice-soon-badge">Coming soon</span>
</div>
</div>
</div>
</div>
<div class="wizard-page" data-step="2" id="step-layout-type" aria-label="Choose layout type">
<div class="wizard-inner wizard-inner-centered server-mode-step wizard-step-mono">
<p class="wizard-step-hint wizard-step-hint-mono">Step 2 of 5</p>
<h2 class="wizard-question wizard-question-tight wizard-question-mono">What template are you looking for?</h2>
<div class="choice-grid choice-grid-server-mode layout-bento-grid">
<button type="button" class="choice-card choice-card--goal layout-bento-card layout-bento-feature" data-choice-key="layoutType" data-choice-value="private">
<span class="layout-card-row">
<span class="choice-icon-wrap layout-bento-icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M12 3l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V7l8-4z" stroke="currentColor" stroke-width="1.5" fill="currentColor" fill-opacity="0.12" stroke-linejoin="round"/><path d="M9 12l2 2 4-5" stroke="currentColor" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
<span class="layout-card-copy">
<span class="choice-title">Private servers</span>
<span class="choice-tagline">Member gates, VIP lanes, and trusted access</span>
</span>
</span>
</button>
<button type="button" class="choice-card choice-card--goal layout-bento-card" data-choice-key="layoutType" data-choice-value="business">
<span class="layout-card-row">
<span class="choice-icon-wrap layout-bento-icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M12 4L4 8v8l8 4 8-4V8l-8-4z" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linejoin="round"/><circle cx="12" cy="8" r="2" fill="currentColor"/><circle cx="7" cy="14" r="2" fill="currentColor" opacity="0.65"/><circle cx="17" cy="14" r="2" fill="currentColor" opacity="0.65"/><path d="M12 10v4M10.2 13.2l3.6 2.1M13.8 13.2l-3.6 2.1" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg></span>
<span class="layout-card-copy">
<span class="choice-title">Businesses</span>
<span class="choice-tagline">Client lanes, support flow, and clean handoffs</span>
</span>
</span>
</button>
<button type="button" class="choice-card choice-card--goal layout-bento-card" data-choice-key="layoutType" data-choice-value="education">
<span class="layout-card-row">
<span class="choice-icon-wrap layout-bento-icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M5 4h8a3 3 0 0 1 3 3v13l-5-3-5 3V7a3 3 0 0 0-3-3z" fill="currentColor" opacity="0.18"/><path d="M5 4h8a3 3 0 0 1 3 3v13l-5-3-5 3V7a3 3 0 0 0-3-3z" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linejoin="round"/><path d="M9 8h5M9 11h4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg></span>
<span class="layout-card-copy">
<span class="choice-title">Education</span>
<span class="choice-tagline">Classes, resources, Q&A, and discussion rhythm</span>
</span>
</span>
</button>
<button type="button" class="choice-card choice-card--goal layout-bento-card layout-bento-feature" data-choice-key="layoutType" data-choice-value="content_creator">
<span class="layout-card-row">
<span class="choice-icon-wrap layout-bento-icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><rect x="2" y="6" width="14" height="12" rx="2" fill="currentColor" opacity="0.2"/><rect x="2" y="6" width="14" height="12" rx="2" stroke="currentColor" stroke-width="1.5" fill="none"/><circle cx="8" cy="12" r="2.5" fill="currentColor"/><path d="M16 10l6-3v10l-6-3v-4z" fill="currentColor" opacity="0.85"/></svg></span>
<span class="layout-card-copy">
<span class="choice-title">Content creator</span>
<span class="choice-tagline">Loops, clips, announcements—broadcast-ready structure</span>
</span>
</span>
</button>
<button type="button" class="choice-card choice-card--goal layout-bento-card layout-bento-feature" data-choice-key="layoutType" data-choice-value="startup">
<span class="layout-card-row">
<span class="choice-icon-wrap layout-bento-icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M13 2 4 15h6.5L9 22l11-13h-6.5L13 2z" fill="currentColor"/></svg></span>
<span class="layout-card-copy">
<span class="choice-title">Startup workspace</span>
<span class="choice-tagline">Ship fast: ops, standups, and execution channels</span>
</span>
</span>
</button>
<div
class="choice-card choice-card--goal choice-card--disabled layout-bento-card layout-bento-card--disabled"
role="group"
aria-label="Custom layout. Coming soon, not available yet."
>
<span class="layout-card-row">
<span class="choice-icon-wrap layout-bento-icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M4 14h2.5a2 2 0 0 0 3.9 0H20" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"/><circle cx="11" cy="14" r="1.75" fill="currentColor"/><path d="M4 10h9.5a2 2 0 0 0 3.9 0H20" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"/><circle cx="15" cy="10" r="1.75" fill="currentColor"/><path d="M4 6h5.5a2 2 0 0 0 3.9 0H20" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"/><circle cx="10" cy="6" r="1.75" fill="currentColor"/></svg></span>
<span class="layout-card-copy">
<span class="choice-title">Custom</span>
<span class="choice-tagline">Your own categories and channels—booking opens later.</span>
</span>
</span>
<span class="choice-soon-badge">Coming soon</span>
</div>
</div>
<section class="layout-examples" id="layout-examples" aria-labelledby="layout-examples-heading">
<h2 id="layout-examples-heading" class="layout-examples-title">Layout previews</h2>
<div class="layout-examples-grid" id="layout-examples-mount"></div>
</section>
</div>
</div>
<div class="wizard-page" data-step="3" id="step-finish" aria-label="Channel style and checkout">
<div class="wizard-inner wizard-inner-wide wizard-step-mono">
<div class="finish-step-head">
<p class="wizard-step-hint wizard-step-hint-mono">Step 3 of 5</p>
<h2 class="wizard-question wizard-question-tight wizard-question-mono">Choose a channel style.</h2>
<p class="wizard-sub wizard-sub-tight" id="finish-step-lead" aria-live="polite"></p>
</div>
<div class="checkout-flash summary-card" id="checkout-flash" role="status" aria-live="polite" hidden></div>
<div class="summary-card summary-card-rich" id="wizard-summary" aria-live="polite">
<p class="summary-placeholder">Go through the steps above to generate your recap and preview.</p>
</div>
</div>
</div>
</div>
</main>
<!-- Fixed to viewport (outside .wizard-page: page transform would break position:fixed while scrolling) -->
<div class="issue-speech-bubble-wrap" id="issue-speech-bubble-mount" aria-hidden="false">
<a
href="issue-feedback.html"
class="issue-speech-bubble"
id="issue-speech-bubble"
title="Tell us what went wrong—we’ll pre-fill an email for you"
aria-label="Report an issue—opens a short survey, then your email app"
>
<span class="issue-speech-bubble-text">Issue?</span>
</a>
</div>
<div
class="checkout-sticky-bar"
id="checkout-sticky-bar"
role="region"
aria-label="Checkout"
aria-hidden="true"
hidden
>
<div class="checkout-sticky-bar-shell">
<p class="checkout-sticky-hint" id="checkout-sticky-hint" hidden aria-hidden="true">
Enter your email, then tap <strong>Pay on Stripe</strong> to complete your order.
</p>
<div class="checkout-sticky-bar-inner">
<div class="checkout-sticky-widget">
<label class="checkout-sticky-email-label" for="sticky-checkout-email">Email</label>
<input
type="email"
id="sticky-checkout-email"
class="checkout-sticky-email"
name="sticky-checkout-email"
autocomplete="email"
placeholder="you@example.com"
inputmode="email"
/>
</div>
<button type="button" class="btn btn-primary btn-lg checkout-sticky-pay" id="summary-open-checkout">
Pay on Stripe
</button>
</div>
</div>
</div>
<nav class="site-fineprint-row" aria-label="Legal notices">
<a href="discord-disclaimer.html" class="site-fineprint-link">Not affiliated with Discord Inc.</a>
<a href="legal.html" class="site-fineprint-link">Legal</a>
</nav>
<!-- Public API base only. Secret keys and prices live on the server; checkout cannot be completed without paying Stripe. -->
<script>
window.STRIPE_CHECKOUT_API = "https://serverly-mzwf.onrender.com";
</script>
<script src="layout-channel-trees.js"></script>
<script src="script.js"></script>
</body>
</html>