Skip to content

Commit 8de1f45

Browse files
CelloSerenityCelloSerenity
authored
Replace inline styles with external stylesheet link
Removed inline styles and added a link to an external stylesheet. Signed-off-by: CelloSerenity <195480169+CelloSerenity@users.noreply.github.com>
1 parent f8aff68 commit 8de1f45

1 file changed

Lines changed: 1 addition & 332 deletions

File tree

‎index.html‎

Lines changed: 1 addition & 332 deletions
Original file line numberDiff line numberDiff line change
@@ -43,338 +43,7 @@
4343
}
4444
</script>
4545

46-
<style>
47-
:root {
48-
--primary-color: #2997ff;
49-
--bg-color: #000000;
50-
--text-color: #f5f5f7;
51-
--secondary-text: #86868b;
52-
53-
--glass-bg: rgba(30, 30, 35, 0.65);
54-
--glass-border: rgba(255, 255, 255, 0.12);
55-
--glass-highlight: rgba(255, 255, 255, 0.08);
56-
--glass-blur: blur(25px);
57-
58-
--neutral-btn-bg: rgba(255, 255, 255, 0.15);
59-
--neutral-btn-hover: rgba(255, 255, 255, 0.25);
60-
61-
--safe-top: env(safe-area-inset-top, 0px);
62-
--safe-right: env(safe-area-inset-right, 0px);
63-
--safe-bottom: env(safe-area-inset-bottom, 0px);
64-
--safe-left: env(safe-area-inset-left, 0px);
65-
}
66-
67-
@media (prefers-color-scheme: light) {
68-
:root:not([data-theme="dark"]) {
69-
--bg-color: #f5f5f7;
70-
--text-color: #1d1d1f;
71-
--secondary-text: #86868b;
72-
73-
--glass-bg: rgba(255, 255, 255, 0.65);
74-
--glass-border: rgba(0, 0, 0, 0.1);
75-
--glass-highlight: rgba(255, 255, 255, 0.5);
76-
77-
--neutral-btn-bg: rgba(0, 0, 0, 0.05);
78-
--neutral-btn-hover: rgba(0, 0, 0, 0.1);
79-
}
80-
}
81-
82-
:root[data-theme="light"] {
83-
--bg-color: #f5f5f7;
84-
--text-color: #1d1d1f;
85-
--secondary-text: #86868b;
86-
87-
--glass-bg: rgba(255, 255, 255, 0.65);
88-
--glass-border: rgba(0, 0, 0, 0.1);
89-
--glass-highlight: rgba(255, 255, 255, 0.5);
90-
91-
--neutral-btn-bg: rgba(0, 0, 0, 0.05);
92-
--neutral-btn-hover: rgba(0, 0, 0, 0.1);
93-
}
94-
95-
.theme-toggle {
96-
position: fixed;
97-
top: calc(var(--safe-top) + 20px);
98-
right: calc(var(--safe-right) + 20px);
99-
width: 44px;
100-
height: 44px;
101-
border-radius: 50%;
102-
background: var(--neutral-btn-bg);
103-
border: 1px solid var(--glass-border);
104-
color: var(--text-color);
105-
display: flex;
106-
align-items: center;
107-
justify-content: center;
108-
cursor: pointer;
109-
backdrop-filter: var(--glass-blur);
110-
-webkit-backdrop-filter: var(--glass-blur);
111-
z-index: 100;
112-
padding: 0;
113-
-webkit-tap-highlight-color: transparent;
114-
}
115-
116-
.theme-toggle:hover {
117-
background: var(--neutral-btn-hover);
118-
transform: scale(1.05);
119-
}
120-
121-
.theme-toggle:active {
122-
transform: scale(0.95);
123-
}
124-
125-
html { height: 100%; margin: 0; padding: 0; }
126-
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
127-
128-
body { margin: 0; }
129-
130-
body {
131-
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
132-
background-color: var(--bg-color);
133-
color: var(--text-color);
134-
min-height: 100dvh;
135-
display: flex;
136-
flex-direction: column;
137-
align-items: center;
138-
padding: calc(var(--safe-top) + 20px) calc(var(--safe-right) + 20px) calc(var(--safe-bottom) + 20px) calc(var(--safe-left) + 20px);
139-
box-sizing: border-box;
140-
-webkit-font-smoothing: antialiased;
141-
transition: background-color 0.4s ease, color 0.4s ease;
142-
}
143-
144-
main {
145-
display: flex;
146-
flex-direction: column;
147-
align-items: center;
148-
width: 100%;
149-
margin: auto;
150-
}
151-
152-
.hero, .theme-toggle, .url-form, .url-input, .custom-button, .credit, .paste-button, .source-url-display {
153-
transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease, transform 0.2s ease, background 0.4s ease;
154-
}
155-
156-
.source-url-display {
157-
font-size: 0.85rem;
158-
color: var(--secondary-text);
159-
word-break: break-all;
160-
margin-bottom: 0;
161-
padding: 12px 20px;
162-
background: var(--glass-bg);
163-
border-radius: 14px;
164-
border: 1px solid var(--glass-border);
165-
width: 100%;
166-
box-sizing: border-box;
167-
backdrop-filter: var(--glass-blur);
168-
-webkit-backdrop-filter: var(--glass-blur);
169-
}
170-
171-
.hero {
172-
text-align: center;
173-
max-width: 600px;
174-
width: 100%;
175-
}
176-
177-
.app-icon {
178-
width: 100px;
179-
height: 100px;
180-
margin: 0 auto 24px;
181-
display: block;
182-
object-fit: contain;
183-
transition: transform 0.3s ease;
184-
}
185-
186-
.app-icon:hover {
187-
transform: scale(1.05);
188-
}
189-
190-
h1 {
191-
font-size: 3rem;
192-
margin: 0 0 12px;
193-
line-height: 1.1;
194-
font-weight: 800;
195-
letter-spacing: -1.5px;
196-
color: var(--text-color);
197-
}
198-
199-
h1 span {
200-
color: var(--primary-color);
201-
}
202-
203-
p.description {
204-
font-size: 1.2rem;
205-
color: var(--secondary-text);
206-
margin: 0 auto 32px;
207-
font-weight: 400;
208-
}
209-
210-
#tagline {
211-
transition: opacity 0.3s ease;
212-
}
213-
214-
#subtitle {
215-
font-size: 0.95rem;
216-
color: var(--secondary-text);
217-
margin-bottom: 20px;
218-
line-height: 1.5;
219-
display: none;
220-
}
221-
222-
#links-container {
223-
display: flex;
224-
flex-direction: column;
225-
align-items: center;
226-
gap: 12px;
227-
width: 100%;
228-
max-width: 420px;
229-
margin: 0 auto;
230-
}
231-
232-
.url-form-wrapper {
233-
width: 100%;
234-
max-width: 420px;
235-
margin-bottom: 24px;
236-
}
237-
238-
.url-form {
239-
display: flex;
240-
background: var(--glass-bg);
241-
padding: 8px;
242-
border-radius: 100px;
243-
border: 1px solid var(--glass-border);
244-
backdrop-filter: var(--glass-blur) saturate(180%);
245-
-webkit-backdrop-filter: var(--glass-blur) saturate(180%);
246-
gap: 8px;
247-
}
248-
249-
.url-input {
250-
flex: 1;
251-
background: transparent;
252-
border: none;
253-
color: var(--text-color);
254-
padding: 12px 20px;
255-
font-size: 17px;
256-
outline: none;
257-
min-width: 0;
258-
}
259-
260-
.submit-button {
261-
background: var(--primary-color);
262-
color: #fff;
263-
border: none;
264-
padding: 0 20px;
265-
border-radius: 100px;
266-
cursor: pointer;
267-
transition: opacity 0.2s, transform 0.1s;
268-
display: flex;
269-
align-items: center;
270-
justify-content: center;
271-
}
272-
273-
.submit-button:hover {
274-
opacity: 0.9;
275-
}
276-
277-
.submit-button:active {
278-
transform: scale(0.96);
279-
}
280-
281-
.paste-button {
282-
background: var(--neutral-btn-bg);
283-
color: var(--text-color);
284-
border: none;
285-
padding: 0 20px;
286-
border-radius: 100px;
287-
cursor: pointer;
288-
display: flex;
289-
align-items: center;
290-
justify-content: center;
291-
}
292-
293-
.paste-button:hover {
294-
background: var(--neutral-btn-hover);
295-
}
296-
297-
.custom-button {
298-
display: inline-flex;
299-
align-items: center;
300-
justify-content: center;
301-
width: 100%;
302-
height: 54px;
303-
color: #fff;
304-
text-decoration: none;
305-
border-radius: 18px;
306-
font-weight: 600;
307-
font-size: 1rem;
308-
cursor: pointer;
309-
border: 1px solid var(--glass-border);
310-
background: var(--glass-bg);
311-
backdrop-filter: var(--glass-blur);
312-
-webkit-backdrop-filter: var(--glass-blur);
313-
box-sizing: border-box;
314-
}
315-
316-
.custom-button:hover {
317-
transform: translateY(-2px);
318-
background: rgba(255, 255, 255, 0.12);
319-
border-color: rgba(255, 255, 255, 0.25);
320-
}
321-
322-
.custom-button:active {
323-
transform: translateY(0);
324-
}
325-
326-
.custom-button.sidestore { background-color: rgba(164, 5, 250, 0.6); border-color: rgba(164, 5, 250, 0.8); }
327-
.custom-button.sidestore:hover { background-color: rgba(164, 5, 250, 0.8); }
328-
329-
.custom-button.altstore { background-color: rgba(1, 128, 132, 0.6); border-color: rgba(1, 128, 132, 0.8); }
330-
.custom-button.altstore:hover { background-color: rgba(1, 128, 132, 0.8); }
331-
332-
.custom-button.stikstore { background-color: rgba(59, 134, 247, 0.6); border-color: rgba(59, 134, 247, 0.8); }
333-
.custom-button.stikstore:hover { background-color: rgba(59, 134, 247, 0.8); }
334-
335-
.custom-button.livecontainer { background-color: rgba(7, 132, 252, 0.6); border-color: rgba(7, 132, 252, 0.8); }
336-
.custom-button.livecontainer:hover { background-color: rgba(7, 132, 252, 0.8); }
337-
338-
.custom-button.feather { background-color: rgba(132, 142, 249, 0.6); border-color: rgba(132, 142, 249, 0.8); }
339-
.custom-button.feather:hover { background-color: rgba(132, 142, 249, 0.8); }
340-
341-
.custom-button.neutral { background-color: var(--neutral-btn-bg); color: var(--text-color); }
342-
.custom-button.neutral:hover { background-color: var(--neutral-btn-hover); }
343-
344-
.error {
345-
color: #ff453a;
346-
font-size: 0.9rem;
347-
margin-top: 12px;
348-
background: rgba(255, 69, 58, 0.1);
349-
padding: 8px 16px;
350-
border-radius: 12px;
351-
border: 1px solid rgba(255, 69, 58, 0.2);
352-
}
353-
354-
.credit {
355-
margin-top: 20px;
356-
font-size: 12px;
357-
color: var(--secondary-text);
358-
background: var(--glass-bg);
359-
padding: 8px 12px;
360-
border-radius: 12px;
361-
backdrop-filter: var(--glass-blur);
362-
-webkit-backdrop-filter: var(--glass-blur);
363-
border: 1px solid var(--glass-border);
364-
}
365-
366-
.credit a {
367-
color: var(--text-color);
368-
text-decoration: none;
369-
opacity: 0.8;
370-
transition: opacity 0.2s;
371-
}
372-
373-
.credit a:hover {
374-
opacity: 1;
375-
text-decoration: underline;
376-
}
377-
</style>
46+
<link rel="stylesheet" href="styles.css">
37847
</head>
37948
<body>
38049
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle Theme"></button>

0 commit comments

Comments
 (0)