Skip to content

Commit a781ed6

Browse files
KEN0421claude
KEN0421
and
claude
committed
feat: redesign all 89 support pages with rich dark theme
- Dark theme matching homepage design - App-specific hero with emoji, color, category - Key Features grid cards - Download links (Google Play + App Store) - Expanded FAQ with 6 common questions - Privacy & Data section - Responsive design with Inter font - Sticky navigation with SK APPS branding Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent edff28c commit a781ed6

89 files changed

Lines changed: 11134 additions & 3923 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎support/30sec-challenge/index.html‎

Lines changed: 125 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -3,61 +3,142 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>30sec Challenge – Support</title>
6+
<title>30sec Challenge – Support | SK APPS</title>
7+
<meta name="description" content="30sec Challenge support page. A fast-paced trivia game where you answer as many questions as possible in 30 seconds." />
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
710
<style>
8-
* { box-sizing: border-box; margin: 0; padding: 0; }
9-
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f5f5f7; color: #1d1d1f; }
10-
.header { background: linear-gradient(135deg, #00695C 0%, #00695Ccc 100%); color: #fff; text-align: center; padding: 48px 20px 40px; }
11-
.header h1 { font-size: 2rem; font-weight: 700; margin-bottom: 8px; }
12-
.header p { font-size: 1rem; opacity: 0.85; }
13-
.container { max-width: 640px; margin: 0 auto; padding: 32px 20px 60px; }
14-
.card { background: #fff; border-radius: 16px; padding: 28px; margin-bottom: 20px; box-shadow: 0 1px 8px rgba(0,0,0,0.08); }
15-
.card h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 14px; color: #00695C; }
16-
.card p, .card li { color: #444; line-height: 1.75; font-size: 0.95rem; }
17-
.card ul { padding-left: 20px; }
18-
.card li { margin-bottom: 6px; }
19-
.contact-email { display: inline-block; margin-top: 14px; background: #00695C; color: #fff; text-decoration: none; padding: 12px 24px; border-radius: 10px; font-weight: 600; font-size: 0.95rem; }
20-
.contact-email:hover { opacity: 0.9; }
21-
.footer { text-align: center; color: #999; font-size: 0.8rem; padding: 20px; }
22-
.footer a { color: #999; }
11+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
12+
:root { --c1: #ff6b6b; --c2: #ee5a24; }
13+
body { font-family: 'Inter', -apple-system, sans-serif; background: #0a0a1a; color: #e8eaf0; line-height: 1.6; }
14+
15+
/* Nav */
16+
nav { position: sticky; top: 0; z-index: 100; background: rgba(10,10,26,0.9); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(108,123,255,0.1); padding: 0 24px; }
17+
.nav-inner { max-width: 800px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 56px; }
18+
.nav-logo { font-size: 1.2rem; font-weight: 800; background: linear-gradient(135deg, #6c7bff, #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-decoration: none; }
19+
.nav-home { color: #9498b0; text-decoration: none; font-size: 0.85rem; font-weight: 500; transition: color 0.2s; }
20+
.nav-home:hover { color: #e8eaf0; }
21+
22+
/* Hero */
23+
.hero { background: linear-gradient(135deg, var(--c1), var(--c2)); text-align: center; padding: 56px 24px 48px; position: relative; overflow: hidden; }
24+
.hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(transparent, #0a0a1a); }
25+
.hero-emoji { font-size: 3.5rem; margin-bottom: 16px; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3)); }
26+
.hero h1 { font-size: 1.8rem; font-weight: 800; margin-bottom: 8px; text-shadow: 0 2px 8px rgba(0,0,0,0.2); }
27+
.hero-cat { display: inline-block; padding: 4px 14px; border-radius: 20px; background: rgba(255,255,255,0.2); font-size: 0.8rem; font-weight: 600; margin-bottom: 12px; }
28+
.hero p { font-size: 1rem; opacity: 0.9; max-width: 500px; margin: 0 auto; }
29+
30+
/* Content */
31+
.container { max-width: 700px; margin: 0 auto; padding: 32px 20px 60px; }
32+
33+
/* Cards */
34+
.card { background: #1a1a35; border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 28px; margin-bottom: 20px; transition: border-color 0.3s; }
35+
.card:hover { border-color: rgba(108,123,255,0.15); }
36+
.card h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 16px; color: var(--c1); display: flex; align-items: center; gap: 8px; }
37+
.card h2 .icon { font-size: 1.2rem; }
38+
.card p { color: #9498b0; font-size: 0.93rem; line-height: 1.8; }
39+
.card ul { padding-left: 20px; list-style: none; }
40+
.card li { color: #9498b0; font-size: 0.93rem; line-height: 1.8; margin-bottom: 8px; padding-left: 4px; }
41+
.card li::before { content: '→'; color: var(--c1); margin-right: 8px; font-weight: 600; }
42+
.card li strong { color: #e8eaf0; }
43+
44+
/* Features */
45+
.features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
46+
.feature { background: rgba(108,123,255,0.06); border-radius: 10px; padding: 14px 16px; font-size: 0.88rem; color: #b8bcd4; display: flex; align-items: center; gap: 8px; }
47+
.feature-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--c1), var(--c2)); flex-shrink: 0; }
48+
@media (max-width: 500px) { .features-grid { grid-template-columns: 1fr; } }
49+
50+
/* Download */
51+
.download-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
52+
.dl-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 10px; font-weight: 600; font-size: 0.88rem; text-decoration: none; transition: all 0.2s; }
53+
.dl-btn-play { background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; }
54+
.dl-btn-play:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
55+
.dl-btn-apple { background: #1a1a35; color: #e8eaf0; border: 1px solid rgba(255,255,255,0.1); }
56+
.dl-btn-apple:hover { background: #222245; transform: translateY(-2px); }
57+
58+
/* Contact button */
59+
.contact-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; text-decoration: none; padding: 12px 24px; border-radius: 10px; font-weight: 600; font-size: 0.93rem; transition: all 0.2s; }
60+
.contact-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
61+
62+
/* Footer */
63+
footer { border-top: 1px solid rgba(255,255,255,0.05); text-align: center; padding: 32px 20px; }
64+
footer a { color: #6c7bff; text-decoration: none; font-size: 0.88rem; font-weight: 500; }
65+
footer a:hover { color: #a29bfe; }
66+
.footer-links { display: flex; gap: 20px; justify-content: center; margin-bottom: 16px; flex-wrap: wrap; }
67+
.footer-copy { color: #9498b0; font-size: 0.75rem; opacity: 0.5; }
2368
</style>
2469
</head>
2570
<body>
26-
<nav style="background:#fff;border-bottom:1px solid #e0e0e0;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;max-width:100%;">
27-
<a href="/" style="text-decoration:none;font-weight:800;font-size:1.1rem;background:linear-gradient(135deg,#6c7bff,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">SK APPS</a>
28-
<a href="/" style="color:#6c7bff;text-decoration:none;font-size:0.9rem;font-weight:500;">← Home</a>
29-
</nav>
30-
<div class="header">
31-
<h1>📱 30sec Challenge Support</h1>
32-
<p>We&#39;re here to help — get answers and contact our team</p>
71+
72+
<nav>
73+
<div class="nav-inner">
74+
<a href="/" class="nav-logo">SK APPS</a>
75+
<a href="/" class="nav-home">&#8592; Home</a>
3376
</div>
34-
<div class="container">
77+
</nav>
3578

36-
<div class="card">
37-
<h2>Contact Us</h2>
38-
<p>Have a question, found a bug, or want to give feedback? Send us an email and we&#39;ll get back to you within 1–2 business days.</p>
39-
<a href="mailto:appdevelopsk@gmail.com" class="contact-email">✉ appdevelopsk@gmail.com</a>
40-
</div>
79+
<div class="hero">
80+
<div class="hero-emoji">⏱️</div>
81+
<div class="hero-cat">Game</div>
82+
<h1>30sec Challenge</h1>
83+
<p>A fast-paced trivia game where you answer as many questions as possible in 30 seconds.</p>
84+
</div>
4185

42-
<div class="card">
43-
<h2>Frequently Asked Questions</h2>
44-
<ul>
45-
<li><strong>How do I restore my purchase?</strong> — Open the app, go to Settings, and tap "Restore Purchases".</li>
46-
<li><strong>The app is crashing. What should I do?</strong> — Try force-closing the app and restarting it. If the issue persists, reinstall the app.</li>
47-
<li><strong>How do I cancel a subscription?</strong> — Go to iPhone Settings → Apple ID → Subscriptions, then select the app and cancel.</li>
48-
<li><strong>I have feedback or a feature request.</strong> — We'd love to hear from you! Send us an email at the address above.</li>
49-
</ul>
86+
<div class="container">
87+
88+
<div class="card">
89+
<h2><span class="icon">&#x2728;</span> Key Features</h2>
90+
<div class="features-grid">
91+
<div class="feature"><div class="feature-dot"></div>Multiple quiz categories</div><div class="feature"><div class="feature-dot"></div>Global leaderboards</div><div class="feature"><div class="feature-dot"></div>Daily challenges</div><div class="feature"><div class="feature-dot"></div>Score tracking and stats</div>
5092
</div>
93+
</div>
5194

52-
<div class="card">
53-
<h2>Privacy Policy</h2>
54-
<p>Read our <a href="https://appdevelopsk.github.io/privacy-policies/30sec-challenge/" style="color:#00695C">Privacy Policy</a> to learn how we handle your data.</p>
95+
<div class="card">
96+
<h2><span class="icon">&#x1F4F2;</span> Download</h2>
97+
<p>Available on both iOS and Android. Download for free and start using today.</p>
98+
<div class="download-btns">
99+
<a href="https://play.google.com/store/apps/dev?id=6428093678302702498" class="dl-btn dl-btn-play" target="_blank" rel="noopener">
100+
&#x25B6; Google Play
101+
</a>
102+
<a href="https://apps.apple.com/developer/ken-shimizu/id1751493498" class="dl-btn dl-btn-apple" target="_blank" rel="noopener">
103+
&#xF8FF; App Store
104+
</a>
55105
</div>
106+
</div>
107+
108+
<div class="card">
109+
<h2><span class="icon">&#x2753;</span> Frequently Asked Questions</h2>
110+
<ul>
111+
<li><strong>How do I restore my purchase?</strong><br/>Open the app, go to Settings, and tap "Restore Purchases".</li>
112+
<li><strong>The app is crashing. What should I do?</strong><br/>Try force-closing and restarting the app. Make sure you have the latest version installed. If the issue persists, reinstall the app.</li>
113+
<li><strong>How do I cancel a subscription?</strong><br/>Go to your device Settings &#8594; Apple ID &#8594; Subscriptions (iOS) or Google Play &#8594; Subscriptions (Android), then select the app and cancel.</li>
114+
<li><strong>Can I use the app offline?</strong><br/>Many features work offline. Some features that require an internet connection will show a notification.</li>
115+
<li><strong>What languages are supported?</strong><br/>30sec Challenge supports 17 languages: English, Japanese, Chinese (Simplified &amp; Traditional), Korean, Spanish, Portuguese, French, German, Italian, Russian, Arabic, Thai, Indonesian, Turkish, Dutch, and Vietnamese.</li>
116+
<li><strong>I have feedback or a feature request.</strong><br/>We'd love to hear from you! Send us an email at the address below.</li>
117+
</ul>
118+
</div>
56119

120+
<div class="card">
121+
<h2><span class="icon">&#x1F4E7;</span> Contact Us</h2>
122+
<p>Have a question, found a bug, or want to give feedback? We typically respond within 1&#8211;2 business days.</p>
123+
<a href="mailto:app.develop.sk@gmail.com" class="contact-btn">&#x2709; app.develop.sk@gmail.com</a>
57124
</div>
58-
<div class="footer">
59-
<p style="margin-bottom:8px;"><a href="/" style="color:#6c7bff;text-decoration:none;font-weight:500;">← Back to SK APPS</a></p>
60-
<p>&copy; 2025 App Develop SK · <a href="mailto:appdevelopsk@gmail.com">appdevelopsk@gmail.com</a></p>
125+
126+
<div class="card">
127+
<h2><span class="icon">&#x1F512;</span> Privacy &amp; Data</h2>
128+
<p>We take your privacy seriously. Read our <a href="https://appdevelopsk.github.io/privacy-policies/30sec-challenge/" style="color:var(--c1);font-weight:500;">Privacy Policy</a> to learn how we handle your data. We do not sell personal information to third parties.</p>
61129
</div>
130+
131+
</div>
132+
133+
<footer>
134+
<div class="footer-links">
135+
<a href="/">&#8592; Back to SK APPS</a>
136+
<a href="https://play.google.com/store/apps/dev?id=6428093678302702498" target="_blank" rel="noopener">Google Play</a>
137+
<a href="https://apps.apple.com/developer/ken-shimizu/id1751493498" target="_blank" rel="noopener">App Store</a>
138+
<a href="mailto:app.develop.sk@gmail.com">Contact</a>
139+
</div>
140+
<p class="footer-copy">&copy; 2026 SK APPS. All rights reserved.</p>
141+
</footer>
142+
62143
</body>
63-
</html>
144+
</html>

0 commit comments

Comments
 (0)