Hugging Face's logo

Spaces:
ufocoder
/
serenecampus-haven
Running

App Files Community
ufocoder commited on
Commit
08fe009
·
verified ·
1 Parent(s): 02b78ca

the primary color (from the logo) should be rgb(170, 167, 236)

Browse files
Files changed (4) hide show
  1. README.md +7 -4
  2. index.html +181 -19
  3. script.js +20 -0
  4. style.css +46 -23
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Serenecampus Haven
3
- emoji: 😻
4
- colorFrom: yellow
5
  colorTo: red
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: 💜 SereneCampus Haven 🌸
3
+ colorFrom: purple
 
4
  colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
index.html CHANGED
@@ -1,19 +1,181 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>CampusMind — A quiet place for busy minds</title>
7
+ <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💜</text></svg>">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ </head>
13
+ <body class="bg-slate-50 text-slate-800">
14
+ <!-- NAV -->
15
+ <nav class="fixed top-0 left-0 right-0 bg-white/80 backdrop-blur z-50 border-b border-slate-100">
16
+ <div class="max-w-6xl mx-auto px-6 h-20 flex items-center justify-between">
17
+ <a class="flex items-center gap-2 font-bold text-indigo-600 text-lg" href="#">
18
+ <i data-feather="cloud" class="w-5 h-5"></i>CampusMind
19
+ </a>
20
+ <a class="btn-primary" href="#waitlist">Join waitlist</a>
21
+ </div>
22
+ </nav>
23
+
24
+ <!-- HERO -->
25
+ <header class="relative pt-32 pb-20 text-center overflow-hidden">
26
+ <div class="absolute -top-20 -left-20 w-64 h-64 bg-indigo-100 rounded-full opacity-50 blur-3xl"></div>
27
+ <div class="absolute bottom-0 right-0 w-80 h-80 bg-teal-100 rounded-full opacity-50 blur-3xl"></div>
28
+ <div class="max-w-4xl mx-auto px-6">
29
+ <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight text-slate-900">
30
+ University is tough.<br>
31
+ <span class="text-indigo-600">You don’t have to be.</span>
32
+ </h1>
33
+ <p class="mt-6 text-lg md:text-xl text-slate-600 max-w-2xl mx-auto">
34
+ A calm, anonymous space built for Narxoz students to breathe, share, and feel less alone.
35
+ </p>
36
+ <div class="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
37
+ <a class="btn-primary" href="#waitlist">Join the waitlist</a>
38
+ <button id="playBtn" class="btn-secondary">
39
+ <i data-feather="play-circle" class="w-5 h-5"></i>Watch 30-sec demo
40
+ </button>
41
+ </div>
42
+ </div>
43
+ </header>
44
+
45
+ <!-- DEMO MODAL -->
46
+ <div id="demoModal" class="fixed inset-0 bg-black/60 backdrop-blur hidden place-items-center z-60">
47
+ <div class="bg-white rounded-2xl p-6 max-w-2xl w-full mx-6">
48
+ <div class="flex items-center justify-between mb-4">
49
+ <h3 class="font-semibold text-slate-900">Quick demo</h3>
50
+ <button id="closeModal" class="text-slate-400 hover:text-slate-800"><i data-feather="x"></i></button>
51
+ </div>
52
+ <video controls class="w-full rounded-xl" poster="http://static.photos/people/640x360/42">
53
+ <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
54
+ Your browser does not support the video tag.
55
+ </video>
56
+ </div>
57
+ </div>
58
+
59
+ <!-- PROBLEM -->
60
+ <section class="py-20 bg-white">
61
+ <div class="max-w-5xl mx-auto px-6">
62
+ <div class="grid md:grid-cols-2 gap-10 items-center">
63
+ <div>
64
+ <h2 class="text-3xl font-bold text-slate-900">Burnout, all-nighters, and the quiet ache of “I’m the only one.”</h2>
65
+ <p class="mt-4 text-slate-600">
66
+ Deadlines, group chats, part-time jobs, family expectations—student life stacks up. When everyone seems to be coping, admitting you’re not feels risky.
67
+ </p>
68
+ <p class="mt-4 text-slate-600">
69
+ So the stress stays silent. And silence grows heavy.
70
+ </p>
71
+ </div>
72
+ <img src="http://static.photos/studio/640x360/11" alt="Tired student" class="rounded-2xl shadow-xl">
73
+ </div>
74
+ </div>
75
+ </section>
76
+
77
+ <!-- SOLUTION / HOW IT WORKS -->
78
+ <section class="py-20">
79
+ <div class="max-w-5xl mx-auto px-6 text-center">
80
+ <span class="text-sm uppercase tracking-widest text-indigo-600">How CampusMind works</span>
81
+ <h2 class="mt-2 text-3xl md:text-4xl font-bold text-slate-900">Three small steps to lighter days</h2>
82
+ <div class="mt-12 grid sm:grid-cols-3 gap-8">
83
+ <div class="card-feature">
84
+ <div class="icon-box bg-indigo-100"><i data-feather="message-circle" class="text-indigo-600"></i></div>
85
+ <h3 class="mt-4 font-semibold text-slate-900">1. Whisper, anonymously</h3>
86
+ <p class="text-sm text-slate-600">Chat with peers who get it—no names, no pressure.</p>
87
+ </div>
88
+ <div class="card-feature">
89
+ <div class="icon-box bg-teal-100"><i data-feather="cloud-lightning" class="text-teal-600"></i></div>
90
+ <h3 class="mt-4 font-semibold text-slate-900">2. AI gentle nudge</h3>
91
+ <p class="text-sm text-slate-600">24/7 assistant that listens, reflects, never judges.</p>
92
+ </div>
93
+ <div class="card-feature">
94
+ <div class="icon-box bg-rose-100"><i data-feather="heart" class="text-rose-500"></i></div>
95
+ <h3 class="mt-4 font-semibold text-slate-900">3. Real help, when you choose</h3>
96
+ <p class="text-sm text-slate-600">One click to Narxoz counselors—confidential and kind.</p>
97
+ </div>
98
+ </div>
99
+ </div>
100
+ </section>
101
+
102
+ <!-- BENEFITS / FEELING -->
103
+ <section class="py-20 bg-indigo-50">
104
+ <div class="max-w-4xl mx-auto px-6 text-center">
105
+ <h2 class="text-3xl font-bold text-slate-900">Feel seen, heard, and a little more hopeful</h2>
106
+ <p class="mt-4 text-slate-600">We built CampusMind to create tiny moments of relief—small conversations that remind you you’re not broken, just human.</p>
107
+ <div class="mt-10 grid sm:grid-cols-3 gap-6 text-left">
108
+ <div class="p-4"><i data-feather="sunrise" class="inline w-5 h-5 text-indigo-600 mr-2"></i>Wake up lighter</div>
109
+ <div class="p-4"><i data-feather="users" class="inline w-5 h-5 text-indigo-600 mr-2"></i>Find your people</div>
110
+ <div class="p-4"><i data-feather="shield" class="inline w-5 h-5 text-indigo-600 mr-2"></i>Private & safe</div>
111
+ </div>
112
+ </div>
113
+ </section>
114
+
115
+ <!-- SAFETY / TRUST -->
116
+ <section class="py-20 bg-white">
117
+ <div class="max-w-4xl mx-auto px-6">
118
+ <div class="grid md:grid-cols-2 gap-10 items-center">
119
+ <img src="http://static.photos/workspace/640x360/77" alt="Safe space" class="rounded-2xl shadow-xl">
120
+ <div>
121
+ <h2 class="text-2xl md:text-3xl font-bold text-slate-900">Your story stays yours</h2>
122
+ <ul class="mt-4 space-y-3 text-slate-700">
123
+ <li class="flex items-start gap-3"><i data-feather="check-circle" class="text-teal-500 w-5 mt-1"></i>No phone number, no email—just a nickname.</li>
124
+ <li class="flex items-start gap-3"><i data-feather="check-circle" class="text-teal-500 w-5 mt-1"></i>End-to-end encrypted chats.</li>
125
+ <li class="flex items-start gap-3"><i data-feather="check-circle" class="text-teal-500 w-5 mt-1"></i>Zero ads, zero data sold.</li>
126
+ <li class="flex items-start gap-3"><i data-feather="check-circle" class="text-teal-500 w-5 mt-1"></i>Kindness strictly enforced (real humans review reports).</li>
127
+ </ul>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ </section>
132
+
133
+ <!-- TESTIMONIALS (STUDENT VOICES) -->
134
+ <section class="py-20">
135
+ <div class="max-w-6xl mx-auto px-6">
136
+ <h2 class="text-center text-3xl font-bold text-slate-900">First voices from Narxoz</h2>
137
+ <p class="text-center text-slate-600">Pre-launch testers shared anonymous feedback.</p>
138
+ <div class="mt-10 grid md:grid-cols-3 gap-6">
139
+ <blockquote class="card-testi"><p class="text-sm text-slate-700">“I could finally say I’m drowning without worrying someone would screenshot it.”</p><span class="text-xs text-slate-500 mt-3 block">— 2nd-year Finance</span></blockquote>
140
+ <blockquote class="card-testi"><p class="text-sm text-slate-700">“The AI asked how my day <em>really</em> was. Weirdly healing.”</p><span class="text-xs text-slate-500 mt-3 block">— 1st-year CS</span></blockquote>
141
+ <blockquote class="card-testi"><p class="text-sm text-slate-700">“Booked a counselor in two clicks, no awkward phone calls.”</p><span class="text-xs text-slate-500 mt-3 block">— 3rd-year IBS</span></blockquote>
142
+ </div>
143
+ </div>
144
+ </section>
145
+
146
+ <!-- WAITLIST CTA -->
147
+ <section id="waitlist" class="py-24 bg-gradient-to-br from-indigo-600 to-teal-500 text-white">
148
+ <div class="max-w-2xl mx-auto px-6 text-center">
149
+ <h2 class="text-3xl md:text-4xl font-bold">Be first in when we open the doors</h2>
150
+ <p class="mt-4 opacity-90">Only 500 early spots for Narxoz students—so we can keep things kind and close-knit.</p>
151
+ <form id="waitlistForm" class="mt-8 flex flex-col sm:flex-row gap-3 max-w-md mx-auto">
152
+ <input type="email" placeholder="your@stu.narxoz.kz" required class="flex-1 px-4 py-3 rounded-lg text-slate-900 focus:outline-none focus:ring-2 focus:ring-white/70">
153
+ <button type="submit" class="bg-white text-indigo-600 font-semibold px-5 py-3 rounded-lg hover:bg-slate-50 transition">Join waitlist</button>
154
+ </form>
155
+ <p class="text-xs mt-3 opacity-80">Free forever for students. No spam, unsubscribe any time.</p>
156
+ </div>
157
+ </section>
158
+
159
+ <!-- FOOTER -->
160
+ <footer class="bg-slate-900 text-slate-200">
161
+ <div class="max-w-6xl mx-auto px-6 py-12">
162
+ <div class="flex flex-col md:flex-row items-center justify-between gap-6">
163
+ <div class="flex items-center gap-2 font-bold text-lg">
164
+ <i data-feather="cloud" class="w-5 h-5"></i>CampusMind
165
+ </div>
166
+ <div class="flex items-center gap-4">
167
+ <a href="mailto:hello@campusmind.me" class="hover:text-white"><i data-feather="mail"></i></a>
168
+ <a href="https://t.me/campusmind" target="_blank" class="hover:text-white"><i data-feather="send"></i></a>
169
+ <a href="https://instagram.com/campusmind" target="_blank" class="hover:text-white"><i data-feather="instagram"></i></a>
170
+ </div>
171
+ </div>
172
+ <div class="mt-6 text-xs text-slate-400">© <span id="year"></span> CampusMind. Made with ❤️ for Narxoz students.</div>
173
+ </div>
174
+ </footer>
175
+
176
+ <!-- SCRIPTS -->
177
+ <script src="script.js"></script>
178
+ <script>feather.replace();</script>
179
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
180
+ </body>
181
+ </html>
script.js ADDED
@@ -0,0 +1,20 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // YEAR IN FOOTER
2
+ document.getElementById('year').textContent = new Date().getFullYear();
3
+
4
+ // DEMO MODAL
5
+ const playBtn = document.getElementById('playBtn');
6
+ const modal = document.getElementById('demoModal');
7
+ const closeModal = document.getElementById('closeModal');
8
+ playBtn?.addEventListener('click', () => modal.classList.remove('hidden'));
9
+ closeModal?.addEventListener('click', () => modal.classList.add('hidden'));
10
+ modal?.addEventListener('click', e => {
11
+ if (e.target === modal) modal.classList.add('hidden');
12
+ });
13
+
14
+ // WAITLIST FORM FAKE SUBMIT
15
+ document.getElementById('waitlistForm')?.addEventListener('submit', e => {
16
+ e.preventDefault();
17
+ const email = e.target.email.value;
18
+ alert(`🙌 Thanks! We saved ${email}. We'll ping you when CampusMind doors open.`);
19
+ e.target.reset();
20
+ });
style.css CHANGED
@@ -1,28 +1,51 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
- }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
 
 
 
9
  }
10
-
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
-
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
 
 
24
  }
25
-
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
1
 
2
+ /* Tailwind will cover utilities, we add small theme helpers */
3
+ .btn-primary {
4
+ display: inline-flex;
5
+ align-items: center;
6
+ gap: 0.5rem;
7
+ background-color: rgb(170, 167, 236); /* soft lavender */
8
+ color: #fff;
9
+ padding: 0.6rem 1.25rem;
10
+ border-radius: 0.5rem;
11
+ font-weight: 600;
12
+ transition: background 0.2s;
13
  }
14
+ .btn-primary:hover {
15
+ background-color: rgb(152, 149, 220); /* slightly deeper lavender */
 
 
 
 
16
  }
17
+ .btn-secondary {
18
+ display: inline-flex;
19
+ align-items: center;
20
+ gap: 0.5rem;
21
+ border: 1px solid #cbd5e1; /* slate-300 */
22
+ padding: 0.6rem 1.25rem;
23
+ border-radius: 0.5rem;
24
+ color: #334155; /* slate-700 */
25
+ transition: 0.2s;
26
  }
27
+ .btn-secondary:hover {
28
+ background-color: #f1f5f9; /* slate-100 */
29
+ }
30
+ .card-feature {
31
+ background: #fff;
32
+ padding: 2rem 1rem;
33
+ border-radius: 1rem;
34
+ box-shadow: 0 4px 14px rgba(0,0,0,.05);
35
+ border: 1px solid #f1f5f9;
36
+ }
37
+ .icon-box {
38
+ display: inline-flex;
39
+ align-items: center;
40
+ justify-content: center;
41
+ width: 48px;
42
+ height: 48px;
43
+ border-radius: 12px;
44
  }
45
+ .card-testi {
46
+ background: #fff;
47
+ padding: 1.25rem;
48
+ border-radius: 1rem;
49
+ box-shadow: 0 4px 10px rgba(0,0,0,.04);
50
+ border-left: 4px solid #2dd4bf; /* teal-400 */
51
+ }