Skip to content

Commit 4e47b92

Browse files
KEN0421KEN0421
committed
feat: add support page for StoryVerse app
1 parent 330d101 commit 4e47b92

1 file changed

Lines changed: 122 additions & 0 deletions

File tree

‎support/story-verse/index.html‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
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>StoryVerse – Support | SK APPS</title>
7+
<meta name="description" content="StoryVerse - Immerse yourself in thousands of stories. Web novels, light novels, and serialized fiction at your fingertips."/>
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">
10+
<style>
11+
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
12+
:root{--c1:#a78bfa;--c2:#7c3aed;--bg:#0a0a1a;--bg2:#111128;--card:#1a1a35;--t1:#e8eaf0;--t2:#9498b0;--accent:#a78bfa}
13+
body{font-family:'Inter',-apple-system,sans-serif;background:var(--bg);color:var(--t1);line-height:1.6}
14+
nav{position:sticky;top:0;z-index:100;background:rgba(10,10,26,.9);backdrop-filter:blur(20px);border-bottom:1px solid rgba(167,139,250,.1);padding:0 24px}
15+
.nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:64px}
16+
.nav-logo{font-size:1.3rem;font-weight:800;background:linear-gradient(135deg,#a78bfa,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-decoration:none}
17+
.nav-right{display:flex;align-items:center;gap:24px}
18+
.nav-links{display:flex;gap:24px;list-style:none}
19+
.nav-links a{color:var(--t2);text-decoration:none;font-size:.9rem;font-weight:500;transition:color .2s}
20+
.nav-links a:hover{color:var(--t1)}
21+
.hero{background:linear-gradient(135deg,var(--c1),var(--c2));text-align:center;padding:56px 24px 48px;position:relative;overflow:hidden}
22+
.hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(transparent,var(--bg))}
23+
.hero-emoji{font-size:3.5rem;margin-bottom:16px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3))}
24+
.hero h1{font-size:clamp(1.5rem,4vw,2rem);font-weight:800;margin-bottom:8px;color:#fff}
25+
.hero-cat{display:inline-block;padding:4px 14px;border-radius:20px;background:rgba(255,255,255,.2);font-size:.8rem;font-weight:600;margin-bottom:12px;color:#fff}
26+
.hero p{font-size:1rem;opacity:.9;max-width:500px;margin:0 auto;color:#fff}
27+
.container{max-width:700px;margin:0 auto;padding:32px 20px 60px}
28+
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:28px;margin-bottom:20px;transition:border-color .3s}
29+
.card:hover{border-color:rgba(167,139,250,.15)}
30+
.card h2{font-size:1.1rem;font-weight:700;margin-bottom:16px;color:var(--c1)}
31+
.card p{color:var(--t2);font-size:.93rem;line-height:1.8}
32+
.card ul{padding-left:0;list-style:none}
33+
.card li{color:var(--t2);font-size:.93rem;line-height:1.8;margin-bottom:10px;padding-left:20px;position:relative}
34+
.card li::before{content:"\2192";color:var(--c1);position:absolute;left:0;font-weight:600}
35+
.card li strong{color:var(--t1)}
36+
.features-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
37+
.feature{background:rgba(167,139,250,.06);border-radius:10px;padding:14px 16px;font-size:.88rem;color:#b8bcd4;display:flex;align-items:center;gap:8px}
38+
.feature-dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--c1),var(--c2));flex-shrink:0}
39+
@media(max-width:500px){.features-grid{grid-template-columns:1fr}.nav-links{display:none}}
40+
.contact-btn{display:inline-block;background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;padding:12px 28px;border-radius:12px;font-weight:700;font-size:.95rem;text-decoration:none;margin-top:8px;transition:opacity .2s}
41+
.contact-btn:hover{opacity:.85}
42+
.footer{text-align:center;padding:32px 20px;color:var(--t2);font-size:.85rem;border-top:1px solid rgba(255,255,255,.06)}
43+
.footer a{color:var(--accent);text-decoration:none}
44+
</style>
45+
</head>
46+
<body>
47+
48+
<nav>
49+
<div class="nav-inner">
50+
<a class="nav-logo" href="/">SK APPS</a>
51+
<div class="nav-right">
52+
<ul class="nav-links">
53+
<li><a href="/">Home</a></li>
54+
<li><a href="mailto:support@appdevelopsk.com">Contact</a></li>
55+
</ul>
56+
</div>
57+
</div>
58+
</nav>
59+
60+
<div class="hero">
61+
<div class="hero-emoji">📖</div>
62+
<div class="hero-cat">Reading App</div>
63+
<h1>StoryVerse Support</h1>
64+
<p>Immerse yourself in thousands of stories. Web novels, light novels, and serialized fiction.</p>
65+
</div>
66+
67+
<div class="container">
68+
69+
<div class="card">
70+
<h2>Features</h2>
71+
<div class="features-grid">
72+
<div class="feature"><div class="feature-dot"></div>Thousands of stories</div>
73+
<div class="feature"><div class="feature-dot"></div>Offline reading</div>
74+
<div class="feature"><div class="feature-dot"></div>Customizable reader</div>
75+
<div class="feature"><div class="feature-dot"></div>Bookmarks &amp; history</div>
76+
<div class="feature"><div class="feature-dot"></div>Genre browsing</div>
77+
<div class="feature"><div class="feature-dot"></div>Rankings &amp; trending</div>
78+
<div class="feature"><div class="feature-dot"></div>Daily notifications</div>
79+
<div class="feature"><div class="feature-dot"></div>Premium content</div>
80+
</div>
81+
</div>
82+
83+
<div class="card">
84+
<h2>Frequently Asked Questions</h2>
85+
<ul>
86+
<li><strong>How do I read offline?</strong> Episodes you've previously loaded are cached automatically for offline reading.</li>
87+
<li><strong>How do I customize the reader?</strong> Tap the settings icon in the reader to adjust font size, line height, and theme.</li>
88+
<li><strong>What is Premium?</strong> Premium unlocks all chapters, removes ads, and provides early access to new stories.</li>
89+
<li><strong>How do I restore my purchase?</strong> Open the Premium screen and tap "Restore Purchase."</li>
90+
<li><strong>How do I add to Favorites?</strong> Tap the heart icon on any work's detail page.</li>
91+
<li><strong>How do I delete my account?</strong> Go to My Page → Delete Account. All data will be permanently removed.</li>
92+
</ul>
93+
</div>
94+
95+
<div class="card">
96+
<h2>Premium Subscription</h2>
97+
<p>StoryVerse Premium is available as a monthly or yearly subscription. Your subscription automatically renews unless cancelled at least 24 hours before the end of the current period. You can manage or cancel your subscription in your App Store account settings.</p>
98+
</div>
99+
100+
<div class="card">
101+
<h2>Privacy &amp; Account</h2>
102+
<ul>
103+
<li><strong>Account deletion:</strong> You can permanently delete your account from My Page. This removes all your data from our servers.</li>
104+
<li><strong>Guest mode:</strong> Use the app without an account. Your reading history is stored locally.</li>
105+
<li><strong>Data:</strong> We store your reading history, bookmarks, and favorites to sync across sessions.</li>
106+
</ul>
107+
</div>
108+
109+
<div class="card">
110+
<h2>Contact Support</h2>
111+
<p>Having trouble? We're here to help.</p>
112+
<a href="mailto:support@appdevelopsk.com" class="contact-btn">Email Support</a>
113+
</div>
114+
115+
</div>
116+
117+
<div class="footer">
118+
<p>&copy; 2024 SK APPS &nbsp;|&nbsp; <a href="/privacy-policies/story-verse/">Privacy Policy</a></p>
119+
</div>
120+
121+
</body>
122+
</html>

0 commit comments

Comments
 (0)