-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathhelp.html
More file actions
252 lines (226 loc) · 15.5 KB
/
help.html
File metadata and controls
252 lines (226 loc) · 15.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gemna Chat - Help Center</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #0a0a0a;
color: #e2e8f0;
}
#particles-js {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
.content-section {
background-color: rgba(17, 24, 39, 0.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(55, 65, 81, 0.5);
}
.prose-dark {
color: #9ca3af;
}
.prose-dark h1, .prose-dark h2, .prose-dark h3 {
color: #f3f4f6;
}
.prose-dark a {
color: #60a5fa;
}
.prose-dark strong {
color: #e5e7eb;
}
.prose-dark code {
color: #f3f4f6;
background-color: #374151;
padding: 0.2em 0.4em;
margin: 0;
font-size: 85%;
border-radius: 6px;
}
.prose-dark ul > li::before {
background-color: #60a5fa;
}
.nav-link {
transition: all 0.2s ease-in-out;
}
.nav-link.active, .nav-link:hover {
color: #ffffff;
background-color: rgba(59, 130, 246, 0.2);
border-left-color: #3b82f6;
}
</style>
</head>
<body class="antialiased">
<div id="particles-js"></div>
<div class="relative min-h-screen lg:grid lg:grid-cols-12">
<aside class="fixed top-0 left-0 h-full w-64 py-10 px-4 border-r border-gray-800 hidden lg:block col-span-3">
<div class="text-center mb-10">
<a href="#" class="text-2xl font-bold text-white flex items-center justify-center gap-2">
<img src="favicon.svg" class="h-8 w-8" alt="Gemna Chat Logo">
<span>Gemna Chat</span>
</a>
<p class="text-sm text-gray-400 mt-1">Help & Guide</p>
</div>
<nav id="desktop-nav" class="flex flex-col space-y-2">
<a href="#how-to-use" class="nav-link text-gray-400 py-2 px-4 border-l-2 border-transparent">How to Use</a>
<a href="#ai-models" class="nav-link text-gray-400 py-2 px-4 border-l-2 border-transparent">AI Models & APIs</a>
<a href="#privacy" class="nav-link text-gray-400 py-2 px-4 border-l-2 border-transparent">Privacy & Encryption</a>
<a href="#terms" class="nav-link text-gray-400 py-2 px-4 border-l-2 border-transparent">Terms of Service</a>
</nav>
</aside>
<main class="lg:col-span-9 lg:col-start-4 p-4 sm:p-6 md:p-10">
<header class="lg:hidden flex items-center justify-between mb-8">
<a href="#" class="text-xl font-bold text-white flex items-center gap-2">
<img src="favicon.svg" class="h-8 w-8" alt="Gemna Chat Logo">
<span>Gemna Chat Help</span>
</a>
<button id="mobile-menu-button" class="p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-800">
<svg data-lucide="menu" class="h-6 w-6"></svg>
</button>
</header>
<div id="mobile-nav" class="hidden lg:hidden mb-8">
<nav class="flex flex-col space-y-2 bg-gray-900 p-4 rounded-lg">
<a href="#how-to-use" class="nav-link text-gray-400 py-2 px-4 border-l-2 border-transparent">How to Use</a>
<a href="#ai-models" class="nav-link text-gray-400 py-2 px-4 border-l-2 border-transparent">AI Models & APIs</a>
<a href="#privacy" class="nav-link text-gray-400 py-2 px-4 border-l-2 border-transparent">Privacy & Encryption</a>
<a href="#terms" class="nav-link text-gray-400 py-2 px-4 border-l-2 border-transparent">Terms of Service</a>
</nav>
</div>
<div class="space-y-16">
<section id="how-to-use" class="content-section rounded-2xl p-6 md:p-8 prose prose-dark max-w-none">
<h1 class="text-3xl font-extrabold tracking-tight">How to Use Gemna Chat</h1>
<p>Welcome to Gemna Chat! This guide will walk you through the main features of the app.</p>
<h2><i data-lucide="users" class="inline-block mr-2"></i>Creating Characters & Groups</h2>
<p>You can create individual AI characters or group chats with multiple characters.</p>
<ul>
<li><strong>Add a Character:</strong> Click the <code class="font-mono">+ Person</code> icon in the sidebar. Fill in the details like name, persona, and texting style. You can even use AI to enhance the persona for you!</li>
<li><strong>Create a Group:</strong> Click the <code class="font-mono">+ Group</code> icon. Give your group a name and select the characters you want to include from your existing character list.</li>
</ul>
<h2><i data-lucide="message-circle" class="inline-block mr-2"></i>Chatting with AI</h2>
<p>The chat interface is designed to be intuitive and powerful.</p>
<ul>
<li><strong>Sending Messages:</strong> Simply type your message in the input box at the bottom and press Enter or the send button.</li>
<li><strong>Image Support:</strong> With Gemini models, you can upload images to discuss them with the AI. Click the paperclip or camera icon to attach an image.</li>
<li><strong>Chat Sync:</strong> Sign in with your Google account to sync your characters, chat history, and settings across all your devices.</li>
</ul>
<h2><i data-lucide="settings" class="inline-block mr-2"></i>Customizing Your Experience</h2>
<p>Click the <strong>Settings</strong> icon in the chat header to personalize your app.</p>
<ul>
<li><strong>Appearance:</strong> Switch between light and dark mode, and choose from various messaging app themes like iMessage, WhatsApp, and more.</li>
<li><strong>API & Models:</strong> Select your preferred AI provider and model. This is where you'll enter your API keys.</li>
<li><strong>Data Management:</strong> Import and export character data (including chat history) as JSON files.</li>
</ul>
</section>
<section id="ai-models" class="content-section rounded-2xl p-6 md:p-8 prose prose-dark max-w-none">
<h1 class="text-3xl font-extrabold tracking-tight">AI Models & APIs</h1>
<p>Gemna Chat supports multiple AI providers to give you flexibility and power.</p>
<h2><i data-lucide="sparkles" class="inline-block mr-2"></i>Supported Providers</h2>
<ul>
<li><strong>Google Gemini:</strong> A powerful family of models from Google. Supports text, image input, and TTS (Text-to-Speech). Requires a Gemini API key from <a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noopener noreferrer">Google AI Studio</a>.</li>
<li><strong>Groq:</strong> Known for its incredible speed. Ideal for fast-paced conversations. Requires a Groq API key from <a href="https://console.groq.com/keys" target="_blank" rel="noopener noreferrer">GroqCloud</a>.</li>
<li><strong>OpenRouter:</strong> A service that gives you access to a wide variety of models from different developers, including open-source options. Requires an OpenRouter API key from <a href="https://openrouter.ai/keys" target="_blank" rel="noopener noreferrer">OpenRouter.ai</a>.</li>
</ul>
<h2><i data-lucide="key-round" class="inline-block mr-2"></i>API Key Management</h2>
<p>Your API keys are stored securely on your device and are never shared with our servers. To use a provider, you must obtain an API key from their respective website and enter it in the <strong>Settings -> API & Model</strong> section of the app.</p>
</section>
<section id="privacy" class="content-section rounded-2xl p-6 md:p-8 prose prose-dark max-w-none">
<h1 class="text-3xl font-extrabold tracking-tight">Privacy & Encryption</h1>
<p>We take your privacy very seriously. Our goal is to provide a secure and private environment for your conversations.</p>
<h2><i data-lucide="lock" class="inline-block mr-2"></i>End-to-End Encryption</h2>
<p>All your chat messages, character personas, and user personas are <strong>end-to-end encrypted</strong> using the AES-256 standard. An encryption key is generated on your device and is used to encrypt your data before it's saved.</p>
<ul>
<li><strong>Local Storage:</strong> When you're not signed in, your encrypted data is stored only in your browser's local storage.</li>
<li><strong>Cloud Sync:</strong> When you sign in, your encrypted data is synced to our secure cloud database. We cannot read your messages, as only your device holds the key to decrypt them.</li>
</ul>
<h2><i data-lucide="shield-off" class="inline-block mr-2"></i>Data We Don't Collect</h2>
<p>We do not collect or store any personal information beyond what is necessary for account authentication (i.e., your email address if you sign up). We do not have access to your API keys or the content of your conversations.</p>
</section>
<section id="terms" class="content-section rounded-2xl p-6 md:p-8 prose prose-dark max-w-none">
<h1 class="text-3xl font-extrabold tracking-tight">Terms of Service</h1>
<p>By using Gemna Chat ("the Service"), you agree to these terms.</p>
<h2><i data-lucide="gavel" class="inline-block mr-2"></i>Use of Service</h2>
<p>You are responsible for your use of the Service and for any content you provide, including compliance with applicable laws, rules, and regulations. You are responsible for managing and securing your own API keys.</p>
<h2><i data-lucide="shield-alert" class="inline-block mr-2"></i>Disclaimer of Warranty</h2>
<p>The Service is provided "as is" without any warranties of any kind. We do not guarantee that the service will be uninterrupted, secure, or error-free. The responses generated by the AI models are not affiliated with us and we are not responsible for their accuracy, safety, or content.</p>
<h2><i data-lucide="circle-slash" class="inline-block mr-2"></i>Limitation of Liability</h2>
<p>In no event shall Gemna Chat or its developers be liable for any indirect, incidental, special, consequential or punitive damages, or any loss of profits or revenues, whether incurred directly or indirectly, or any loss of data, use, good-will, or other intangible losses, resulting from (i) your access to or use of or inability to access or use the service; (ii) any conduct or content of any third party on the service, including without limitation, any defamatory, offensive or illegal conduct of other users or third parties; (iii) any content obtained from the service; or (iv) unauthorized access, use or alteration of your transmissions or content.</p>
</section>
<footer class="text-center py-10">
<p class="text-gray-500">© 2025 Gemna Chat. All Rights Reserved.</p>
</footer>
</div>
</main>
</div>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
// Initialize Lucide icons
lucide.createIcons();
// Interactive background
particlesJS('particles-js', {
"particles": {
"number": { "value": 60, "density": { "enable": true, "value_area": 800 } },
"color": { "value": "#374151" },
"shape": { "type": "circle" },
"opacity": { "value": 0.5, "random": true },
"size": { "value": 3, "random": true },
"line_linked": { "enable": true, "distance": 150, "color": "#4b5563", "opacity": 0.4, "width": 1 },
"move": { "enable": true, "speed": 1, "direction": "none", "random": false, "straight": false, "out_mode": "out", "bounce": false }
},
"interactivity": {
"detect_on": "canvas",
"events": { "onhover": { "enable": true, "mode": "repulse" }, "onclick": { "enable": true, "mode": "push" }, "resize": true },
"modes": { "repulse": { "distance": 100, "duration": 0.4 }, "push": { "particles_nb": 4 } }
},
"retina_detect": true
});
// Smooth scrolling and active nav link highlighting
document.addEventListener('DOMContentLoaded', () => {
const sections = document.querySelectorAll('section');
const navLinks = document.querySelectorAll('.nav-link');
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileNav = document.getElementById('mobile-nav');
mobileMenuButton.addEventListener('click', () => {
mobileNav.classList.toggle('hidden');
});
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href').substring(1) === entry.target.id) {
link.classList.add('active');
}
});
}
});
}, { threshold: 0.5 });
sections.forEach(section => {
observer.observe(section);
});
navLinks.forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
if(mobileNav.classList.contains('hidden') === false){
mobileNav.classList.add('hidden');
}
});
});
});
</script>
</body>
</html>