Skip to content

Commit 2bffd16

Browse files
melvincarvalhomelvincarvalho
committed
Add landing page for app directory
1 parent 64b7064 commit 2bffd16

1 file changed

Lines changed: 137 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
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">
6+
<title>remoteStorage Apps</title>
7+
<style>
8+
* { box-sizing: border-box; margin: 0; padding: 0; }
9+
body { font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; background: #f8f9fa; color: #333; min-height: 100vh; }
10+
11+
.hero {
12+
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
13+
color: white;
14+
padding: 4rem 2rem 3rem;
15+
text-align: center;
16+
}
17+
.hero h1 { font-size: 2.2rem; font-weight: 700; margin-bottom: 0.5rem; letter-spacing: -0.02em; }
18+
.hero p { font-size: 1.1rem; opacity: 0.8; max-width: 500px; margin: 0 auto; line-height: 1.5; }
19+
.hero .badge {
20+
display: inline-block;
21+
margin-top: 1.5rem;
22+
padding: 0.3rem 0.8rem;
23+
background: rgba(255,255,255,0.12);
24+
border: 1px solid rgba(255,255,255,0.2);
25+
border-radius: 20px;
26+
font-size: 0.8rem;
27+
opacity: 0.7;
28+
}
29+
30+
.apps {
31+
max-width: 720px;
32+
margin: -2rem auto 0;
33+
padding: 0 1.5rem 3rem;
34+
display: grid;
35+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
36+
gap: 1.5rem;
37+
}
38+
39+
.card {
40+
background: white;
41+
border-radius: 12px;
42+
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
43+
overflow: hidden;
44+
transition: transform 0.15s ease, box-shadow 0.15s ease;
45+
text-decoration: none;
46+
color: inherit;
47+
display: flex;
48+
flex-direction: column;
49+
}
50+
.card:hover {
51+
transform: translateY(-3px);
52+
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
53+
}
54+
55+
.card-icon {
56+
padding: 2rem 1.5rem 1rem;
57+
text-align: center;
58+
font-size: 3rem;
59+
}
60+
.card-notes .card-icon { background: linear-gradient(135deg, #fff3e0, #ffe0b2); }
61+
.card-editor .card-icon { background: linear-gradient(135deg, #e3f2fd, #bbdefb); }
62+
63+
.card-body { padding: 1.25rem 1.5rem 1.5rem; flex: 1; }
64+
.card-body h2 { font-size: 1.25rem; margin-bottom: 0.4rem; }
65+
.card-body p { font-size: 0.9rem; color: #666; line-height: 1.5; }
66+
67+
.card-footer {
68+
padding: 0 1.5rem 1.25rem;
69+
display: flex;
70+
gap: 0.5rem;
71+
}
72+
.tag {
73+
font-size: 0.7rem;
74+
padding: 0.2rem 0.5rem;
75+
background: #f0f0f0;
76+
border-radius: 4px;
77+
color: #888;
78+
text-transform: uppercase;
79+
letter-spacing: 0.03em;
80+
}
81+
82+
footer {
83+
text-align: center;
84+
padding: 2rem;
85+
font-size: 0.85rem;
86+
color: #999;
87+
}
88+
footer a { color: #4a9eff; text-decoration: none; }
89+
footer a:hover { text-decoration: underline; }
90+
91+
@media (max-width: 600px) {
92+
.hero { padding: 3rem 1.5rem 2.5rem; }
93+
.hero h1 { font-size: 1.6rem; }
94+
.apps { margin-top: -1.5rem; }
95+
}
96+
</style>
97+
</head>
98+
<body>
99+
<div class="hero">
100+
<h1>remoteStorage Apps</h1>
101+
<p>Simple apps that sync to your personal storage. No accounts, no cloud lock-in. Your data stays yours.</p>
102+
<span class="badge">Works with any remoteStorage server</span>
103+
</div>
104+
105+
<div class="apps">
106+
<a href="notes/" class="card card-notes">
107+
<div class="card-icon">&#128221;</div>
108+
<div class="card-body">
109+
<h2>Notes</h2>
110+
<p>Quick note-taking. Add, view, and delete plain-text notes synced to your storage in real time.</p>
111+
</div>
112+
<div class="card-footer">
113+
<span class="tag">Single file</span>
114+
<span class="tag">No build step</span>
115+
</div>
116+
</a>
117+
118+
<a href="editor/" class="card card-editor">
119+
<div class="card-icon">&#9998;</div>
120+
<div class="card-body">
121+
<h2>Editor</h2>
122+
<p>Minimal text editor with sidebar navigation, auto-save, and a distraction-free writing experience.</p>
123+
</div>
124+
<div class="card-footer">
125+
<span class="tag">Single file</span>
126+
<span class="tag">Auto-save</span>
127+
</div>
128+
</a>
129+
</div>
130+
131+
<footer>
132+
Built for <a href="https://remotestorage.io">remoteStorage</a> &middot;
133+
<a href="https://github.com/JavaScriptSolidServer/remotestorage">Source</a> &middot;
134+
Powered by <a href="https://github.com/JavaScriptSolidServer/JavaScriptSolidServer">JSS</a>
135+
</footer>
136+
</body>
137+
</html>

0 commit comments

Comments
 (0)