Skip to content

Commit 6ed791e

Browse files
KEN0421claude
KEN0421
and
claude
committed
feat: add TaleTime support page
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 4804ae9 commit 6ed791e

1 file changed

Lines changed: 132 additions & 0 deletions

File tree

‎support/taletime/index.html‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
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>TaleTime – Support | SK APPS</title>
7+
<meta name="description" content="TaleTime - Create stories together with your child using AI. Support page for TaleTime app."/>
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:#7c3aed;--c2:#4f46e5;--bg:#0a0a1a;--bg2:#111128;--card:#1a1a35;--t1:#e8eaf0;--t2:#9498b0;--accent:#7c3aed}
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(124,58,237,.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,#7c3aed,#4f46e5);-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(124,58,237,.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(124,58,237,.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">Family Story App</div>
63+
<h1>TaleTime Support</h1>
64+
<p>Create magical AI-powered stories together with your child.</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>Parent-child co-creation</div>
73+
<div class="feature"><div class="feature-dot"></div>AI story generation</div>
74+
<div class="feature"><div class="feature-dot"></div>6 story themes</div>
75+
<div class="feature"><div class="feature-dot"></div>6 hero types</div>
76+
<div class="feature"><div class="feature-dot"></div>Custom hero names</div>
77+
<div class="feature"><div class="feature-dot"></div>Save &amp; revisit stories</div>
78+
<div class="feature"><div class="feature-dot"></div>Family profiles</div>
79+
<div class="feature"><div class="feature-dot"></div>17 languages</div>
80+
</div>
81+
</div>
82+
83+
<div class="card">
84+
<h2>How It Works</h2>
85+
<ul>
86+
<li><strong>Choose a theme:</strong> Adventure, Fantasy, Science, Animals, Friendship, or Magic.</li>
87+
<li><strong>Name your hero</strong> and choose a hero type (child, cat, dragon, robot, princess, or wizard).</li>
88+
<li><strong>Take turns:</strong> Parent starts the story, child continues — the AI weaves magic between each turn.</li>
89+
<li><strong>Finish the story</strong> to get a complete tale you can read together again.</li>
90+
</ul>
91+
</div>
92+
93+
<div class="card">
94+
<h2>Frequently Asked Questions</h2>
95+
<ul>
96+
<li><strong>How do I start a story?</strong> Tap the "New Story" button on the home screen, choose your settings, and tap "Start Story!"</li>
97+
<li><strong>Who goes first?</strong> The parent always starts the story with the first turn.</li>
98+
<li><strong>How many stories can I create?</strong> Free accounts can create a limited number of stories. Premium unlocks unlimited stories.</li>
99+
<li><strong>How do I restore my purchase?</strong> Open Settings → Premium and tap "Subscribe" — your previous purchase will be restored automatically.</li>
100+
<li><strong>How do I add a child profile?</strong> Go to Settings → Family Profiles → Add Child.</li>
101+
<li><strong>How do I delete my account?</strong> Go to Settings → Delete Account. All your stories and data will be permanently removed.</li>
102+
</ul>
103+
</div>
104+
105+
<div class="card">
106+
<h2>Premium Subscription</h2>
107+
<p>TaleTime Premium is available as a monthly or yearly subscription. Unlock unlimited AI-powered stories for the whole family. Your subscription automatically renews unless cancelled at least 24 hours before the end of the current period. Manage or cancel your subscription in your App Store or Google Play account settings.</p>
108+
</div>
109+
110+
<div class="card">
111+
<h2>Privacy &amp; Account</h2>
112+
<ul>
113+
<li><strong>Account deletion:</strong> Go to Settings → Delete Account. This permanently removes your account and all associated stories.</li>
114+
<li><strong>Data stored:</strong> We store your stories, family profiles, and account information to sync across sessions.</li>
115+
<li><strong>Children's privacy:</strong> We do not collect personal data from children. Story content is associated with the parent account only.</li>
116+
</ul>
117+
</div>
118+
119+
<div class="card">
120+
<h2>Contact Support</h2>
121+
<p>Having trouble? We're here to help.</p>
122+
<a href="mailto:support@appdevelopsk.com" class="contact-btn">Email Support</a>
123+
</div>
124+
125+
</div>
126+
127+
<div class="footer">
128+
<p>&copy; 2025 SK APPS &nbsp;|&nbsp; <a href="/privacy-policy/taletime/">Privacy Policy</a></p>
129+
</div>
130+
131+
</body>
132+
</html>

0 commit comments

Comments
 (0)