Hugging Face's logo

Spaces:
arcana-ad
/
arcana-in-action
Running

App Files Community
dexter2389 commited on
Commit
bc1b5fc
·
1 Parent(s): d554492

Run 'tailwind-sorter'

Browse files
Files changed (2) hide show
  1. app/static/index.html +41 -41
  2. app/static/login.html +23 -23
app/static/index.html CHANGED
@@ -32,13 +32,13 @@
32
  rel="stylesheet" />
33
  </head>
34
 
35
- <body class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 font-['Inter'] transition-colors duration-200">
36
  <main class="flex flex-col h-screen">
37
  <!-- Header -->
38
- <header class="border-b border-gray-200 dark:border-gray-700 p-4 bg-white dark:bg-gray-800">
39
- <div class="max-w-screen-xl mx-auto flex items-center justify-between">
40
  <div class="flex items-center">
41
- <h1 class="text-xl font-medium">
42
  OpenGPT with
43
  <svg style="
44
  display: inline-block;
@@ -89,9 +89,9 @@
89
  width="158" />
90
  </a>
91
  <a href="https://arcana.ad/"
92
- class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium">Home</a>
93
  <button id="logout-button"
94
- class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium">
95
  Logout
96
  </button>
97
  </nav>
@@ -99,11 +99,11 @@
99
  </header>
100
 
101
  <!-- Model selector -->
102
- <div class="border-b border-gray-200 dark:border-gray-700 py-3 px-4 bg-gray-50 dark:bg-gray-800">
103
- <div class="max-w-screen-xl mx-auto flex items-center">
104
  <div class="relative" id="model-selector-container">
105
  <button id="model-dropdown-button"
106
- class="flex items-center justify-between w-64 px-4 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
107
  <span id="selected-model-text" class="text-gray-800 dark:text-gray-200">Select a model</span>
108
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
109
  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
@@ -112,39 +112,39 @@
112
  </svg>
113
  </button>
114
  <div id="model-dropdown"
115
- class="absolute z-10 w-full mt-1 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-lg hidden">
116
  <ul class="py-1">
117
- <li class="model-option px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 cursor-pointer text-gray-800 dark:text-gray-200"
118
  data-value="gemma2">
119
  Gemma2
120
  </li>
121
  </ul>
122
  <ul class="py-1">
123
- <li class="model-option px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 cursor-pointer text-gray-800 dark:text-gray-200"
124
  data-value="llama3_1">
125
  Llama3.1
126
  </li>
127
  </ul>
128
  <ul class="py-1">
129
- <li class="model-option px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 cursor-pointer text-gray-800 dark:text-gray-200"
130
  data-value="llama3_3">
131
  Llama3.3
132
  </li>
133
  </ul>
134
  <ul class="py-1">
135
- <li class="model-option px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 cursor-pointer text-gray-800 dark:text-gray-200"
136
  data-value="qwen2_5">
137
  Qwen2.5
138
  </li>
139
  </ul>
140
  <ul class="py-1">
141
- <li class="model-option px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 cursor-pointer text-gray-800 dark:text-gray-200"
142
  data-value="deepseek_r1">
143
  Deepseek_R1
144
  </li>
145
  </ul>
146
  <ul class="py-1">
147
- <li class="model-option px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 cursor-pointer text-gray-800 dark:text-gray-200"
148
  data-value="gemma3">
149
  Gemma3
150
  </li>
@@ -155,15 +155,15 @@
155
  </div>
156
 
157
  <!-- Chat container -->
158
- <div id="chat-container" class="flex-1 overflow-y-auto py-4 px-4 md:px-0 bg-white dark:bg-gray-900">
159
- <div class="max-w-screen-md mx-auto">
160
  <!-- Initial welcome message -->
161
- <div class="flex flex-col items-center justify-center mt-16 mb-8">
162
  <div
163
- class="w-16 h-16 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-2xl font-semibold mb-4">
164
  AR
165
  </div>
166
- <h2 class="text-2xl font-semibold text-center">Hello, User</h2>
167
  <p class="text-2xl text-center">How can I help you today?</p>
168
  </div>
169
 
@@ -173,13 +173,13 @@
173
 
174
  <!-- Loading indicator -->
175
  <div id="loading" class="hidden">
176
- <div class="max-w-screen-md mx-auto">
177
  <div class="flex items-start mb-4">
178
  <div
179
- class="w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center mr-2">
180
  <span class="font-semibold text-sm">AR</span>
181
  </div>
182
- <div class="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg">
183
  <div class="typing-indicator">
184
  <span class="dot"></span>
185
  <span class="dot"></span>
@@ -191,30 +191,30 @@
191
  </div>
192
 
193
  <!-- Suggestion buttons -->
194
- <div class="max-w-screen-md mx-auto px-4 md:px-0 mb-6 grid grid-cols-1 md:grid-cols-2 gap-3">
195
  <button
196
- class="text-left bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 p-4 rounded-xl transition-colors">
197
  <div class="font-medium">Create a short 3 scene video script</div>
198
  <div class="text-gray-500 text-sm">
199
  set in a cyberpunk world run by AI
200
  </div>
201
  </button>
202
  <button
203
- class="text-left bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 p-4 rounded-xl transition-colors">
204
  <div class="font-medium">Write a python code</div>
205
  <div class="text-gray-500 text-sm">
206
  for a simple, functional web app
207
  </div>
208
  </button>
209
  <button
210
- class="text-left bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 p-4 rounded-xl transition-colors">
211
  <div class="font-medium">Help me study</div>
212
  <div class="text-gray-500 text-sm">
213
  vocabulary for a college entrance exam
214
  </div>
215
  </button>
216
  <button
217
- class="text-left bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 p-4 rounded-xl transition-colors">
218
  <div class="font-medium">Give me ideas</div>
219
  <div class="text-gray-500 text-sm">
220
  for a LinkedIn post for my recent promotion
@@ -223,11 +223,11 @@
223
  </div>
224
 
225
  <!-- Input area -->
226
- <div class="border-t border-gray-200 dark:border-gray-700 px-4 pt-4 bg-white dark:bg-gray-800">
227
- <div class="max-w-screen-md mx-auto">
228
  <form id="chat-form" class="relative">
229
  <div
230
- class="flex items-center bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-full shadow-sm">
231
  <button type="button"
232
  class="p-3 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300">
233
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
@@ -238,7 +238,7 @@
238
  </svg>
239
  </button>
240
  <input type="text" id="user-input"
241
- class="flex-1 py-3 px-2 bg-transparent focus:outline-none text-gray-800 dark:text-gray-200"
242
  placeholder="Send a Message" autocomplete="off" />
243
  <button type="button"
244
  class="p-3 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300">
@@ -264,8 +264,8 @@
264
  </div>
265
  </div>
266
 
267
- <footer class="text-center p-4 text-gray-500 dark:text-gray-400 dark:bg-gray-800 text-sm">
268
- <p class="text-gray-400 dark:text-gray-500 p-1">
269
  LLMs can make mistakes. Verify important information.
270
  </p>
271
  <p class="p-1">© 2025 Arcana Inc. All rights reserved.</p>
@@ -566,7 +566,7 @@
566
  codeBlocks.forEach((codeBlock, i) => {
567
  text = text.replace(
568
  `__CODE_BLOCK_${i}__`,
569
- `<pre><code class="${escapeHtml(codeBlock.lang) ?? "plaintext"
570
  }">${escapeHtml(codeBlock.code)}</code></pre>`
571
  );
572
  });
@@ -620,24 +620,24 @@
620
  const formattedContent = isUser ? content : formatMessage(content);
621
 
622
  const html = `
623
- <div class="flex items-start ${isUser ? "justify-end" : ""}">
624
  ${!isUser
625
  ? `
626
- <div class="w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center mr-2">
627
  <span class="font-semibold text-sm">AR</span>
628
  </div>
629
  `
630
  : ""
631
  }
632
  <div class="${isUser
633
- ? "bg-blue-50 dark:bg-blue-900/30 text-blue-800 dark:text-blue-100"
634
- : "bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200"
635
  } p-3 rounded-lg max-w-[80%] message-content">
636
  ${formattedContent}
637
  </div>
638
  ${isUser
639
  ? `
640
- <div class="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center text-blue-800 dark:text-blue-200 ml-2">
641
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user"><circle cx="12" cy="8" r="5"/><path d="M20 21a8 8 0 0 0-16 0"/></svg>
642
  </div>
643
  `
 
32
  rel="stylesheet" />
33
  </head>
34
 
35
+ <body class="font-['Inter'] text-gray-800 bg-white transition-colors duration-200 dark:text-gray-200 dark:bg-gray-900">
36
  <main class="flex flex-col h-screen">
37
  <!-- Header -->
38
+ <header class="p-4 bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
39
+ <div class="flex justify-between items-center mx-auto max-w-screen-xl">
40
  <div class="flex items-center">
41
+ <h1 class="font-medium text-xl">
42
  OpenGPT with
43
  <svg style="
44
  display: inline-block;
 
89
  width="158" />
90
  </a>
91
  <a href="https://arcana.ad/"
92
+ class="font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Home</a>
93
  <button id="logout-button"
94
+ class="font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
95
  Logout
96
  </button>
97
  </nav>
 
99
  </header>
100
 
101
  <!-- Model selector -->
102
+ <div class="px-4 py-3 bg-gray-50 border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
103
+ <div class="flex items-center mx-auto max-w-screen-xl">
104
  <div class="relative" id="model-selector-container">
105
  <button id="model-dropdown-button"
106
+ class="flex justify-between items-center px-4 py-2 w-64 bg-white rounded-md border border-gray-300 shadow-sm dark:bg-gray-700 dark:border-gray-600 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:hover:bg-gray-600">
107
  <span id="selected-model-text" class="text-gray-800 dark:text-gray-200">Select a model</span>
108
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
109
  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
 
112
  </svg>
113
  </button>
114
  <div id="model-dropdown"
115
+ class="hidden absolute z-10 mt-1 w-full bg-white rounded-md border border-gray-300 shadow-lg dark:bg-gray-700 dark:border-gray-600">
116
  <ul class="py-1">
117
+ <li class="px-4 py-2 text-gray-800 cursor-pointer model-option dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
118
  data-value="gemma2">
119
  Gemma2
120
  </li>
121
  </ul>
122
  <ul class="py-1">
123
+ <li class="px-4 py-2 text-gray-800 cursor-pointer model-option dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
124
  data-value="llama3_1">
125
  Llama3.1
126
  </li>
127
  </ul>
128
  <ul class="py-1">
129
+ <li class="px-4 py-2 text-gray-800 cursor-pointer model-option dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
130
  data-value="llama3_3">
131
  Llama3.3
132
  </li>
133
  </ul>
134
  <ul class="py-1">
135
+ <li class="px-4 py-2 text-gray-800 cursor-pointer model-option dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
136
  data-value="qwen2_5">
137
  Qwen2.5
138
  </li>
139
  </ul>
140
  <ul class="py-1">
141
+ <li class="px-4 py-2 text-gray-800 cursor-pointer model-option dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
142
  data-value="deepseek_r1">
143
  Deepseek_R1
144
  </li>
145
  </ul>
146
  <ul class="py-1">
147
+ <li class="px-4 py-2 text-gray-800 cursor-pointer model-option dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
148
  data-value="gemma3">
149
  Gemma3
150
  </li>
 
155
  </div>
156
 
157
  <!-- Chat container -->
158
+ <div id="chat-container" class="flex-1 overflow-y-auto px-4 py-4 bg-white md:px-0 dark:bg-gray-900">
159
+ <div class="mx-auto max-w-screen-md">
160
  <!-- Initial welcome message -->
161
+ <div class="flex flex-col justify-center items-center mt-16 mb-8">
162
  <div
163
+ class="flex justify-center items-center mb-4 w-16 h-16 font-semibold text-2xl bg-gray-100 rounded-full dark:bg-gray-700">
164
  AR
165
  </div>
166
+ <h2 class="font-semibold text-2xl text-center">Hello, User</h2>
167
  <p class="text-2xl text-center">How can I help you today?</p>
168
  </div>
169
 
 
173
 
174
  <!-- Loading indicator -->
175
  <div id="loading" class="hidden">
176
+ <div class="mx-auto max-w-screen-md">
177
  <div class="flex items-start mb-4">
178
  <div
179
+ class="flex justify-center items-center mr-2 w-8 h-8 bg-gray-100 rounded-full dark:bg-gray-700">
180
  <span class="font-semibold text-sm">AR</span>
181
  </div>
182
+ <div class="p-3 bg-gray-100 rounded-lg dark:bg-gray-700">
183
  <div class="typing-indicator">
184
  <span class="dot"></span>
185
  <span class="dot"></span>
 
191
  </div>
192
 
193
  <!-- Suggestion buttons -->
194
+ <div class="grid grid-cols-1 gap-3 px-4 mx-auto mb-6 max-w-screen-md md:grid-cols-2 md:px-0">
195
  <button
196
+ class="p-4 text-left bg-gray-50 rounded-xl transition-colors dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700">
197
  <div class="font-medium">Create a short 3 scene video script</div>
198
  <div class="text-gray-500 text-sm">
199
  set in a cyberpunk world run by AI
200
  </div>
201
  </button>
202
  <button
203
+ class="p-4 text-left bg-gray-50 rounded-xl transition-colors dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700">
204
  <div class="font-medium">Write a python code</div>
205
  <div class="text-gray-500 text-sm">
206
  for a simple, functional web app
207
  </div>
208
  </button>
209
  <button
210
+ class="p-4 text-left bg-gray-50 rounded-xl transition-colors dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700">
211
  <div class="font-medium">Help me study</div>
212
  <div class="text-gray-500 text-sm">
213
  vocabulary for a college entrance exam
214
  </div>
215
  </button>
216
  <button
217
+ class="p-4 text-left bg-gray-50 rounded-xl transition-colors dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700">
218
  <div class="font-medium">Give me ideas</div>
219
  <div class="text-gray-500 text-sm">
220
  for a LinkedIn post for my recent promotion
 
223
  </div>
224
 
225
  <!-- Input area -->
226
+ <div class="px-4 pt-4 bg-white border-t border-gray-200 dark:bg-gray-800 dark:border-gray-700">
227
+ <div class="mx-auto max-w-screen-md">
228
  <form id="chat-form" class="relative">
229
  <div
230
+ class="flex items-center bg-white rounded-full border border-gray-300 shadow-sm dark:bg-gray-700 dark:border-gray-600">
231
  <button type="button"
232
  class="p-3 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300">
233
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
 
238
  </svg>
239
  </button>
240
  <input type="text" id="user-input"
241
+ class="flex-1 px-2 py-3 text-gray-800 bg-transparent dark:text-gray-200 focus:outline-none"
242
  placeholder="Send a Message" autocomplete="off" />
243
  <button type="button"
244
  class="p-3 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300">
 
264
  </div>
265
  </div>
266
 
267
+ <footer class="p-4 text-center text-gray-500 text-sm dark:text-gray-400 dark:bg-gray-800">
268
+ <p class="p-1 text-gray-400 dark:text-gray-500">
269
  LLMs can make mistakes. Verify important information.
270
  </p>
271
  <p class="p-1">© 2025 Arcana Inc. All rights reserved.</p>
 
566
  codeBlocks.forEach((codeBlock, i) => {
567
  text = text.replace(
568
  `__CODE_BLOCK_${i}__`,
569
+ `<pre><code class="${escapeHtml(codeBlock.lang) ?? 'plaintext'
570
  }">${escapeHtml(codeBlock.code)}</code></pre>`
571
  );
572
  });
 
620
  const formattedContent = isUser ? content : formatMessage(content);
621
 
622
  const html = `
623
+ <div class="flex items-start ${isUser ? 'justify-end' : ''}">
624
  ${!isUser
625
  ? `
626
+ <div class="flex justify-center items-center mr-2 w-8 h-8 bg-gray-100 rounded-full dark:bg-gray-700">
627
  <span class="font-semibold text-sm">AR</span>
628
  </div>
629
  `
630
  : ""
631
  }
632
  <div class="${isUser
633
+ ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-800 dark:text-blue-100'
634
+ : 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200'
635
  } p-3 rounded-lg max-w-[80%] message-content">
636
  ${formattedContent}
637
  </div>
638
  ${isUser
639
  ? `
640
+ <div class="flex justify-center items-center ml-2 w-8 h-8 text-blue-800 bg-blue-100 rounded-full dark:text-blue-200 dark:bg-blue-900/50">
641
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user"><circle cx="12" cy="8" r="5"/><path d="M20 21a8 8 0 0 0-16 0"/></svg>
642
  </div>
643
  `
app/static/login.html CHANGED
@@ -32,12 +32,12 @@
32
  rel="stylesheet" />
33
  </head>
34
 
35
- <body class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 font-['Inter'] transition-colors duration-200">
36
  <!-- Header -->
37
- <header class="border-b border-gray-200 dark:border-gray-700 p-4 bg-white dark:bg-gray-800">
38
- <div class="max-w-screen-xl mx-auto flex items-center justify-between">
39
  <div class="flex items-center">
40
- <h1 class="text-xl font-medium">
41
  OpenGPT with
42
  <svg style="
43
  display: inline-block;
@@ -86,21 +86,21 @@
86
  alt="Arcana - AI&#0045;Powered&#0032;Monetization&#0058;&#0032;Native&#0032;GenAI&#0032;Ads&#0032;for&#0032;GenAI&#0032;apps | Product Hunt"
87
  width="158" />
88
  </a>
89
- <a href="https://arcana.ad/" class="text-gray-600 hover:text-gray-900 font-medium">Home</a>
90
  </nav>
91
  </div>
92
  </header>
93
 
94
- <main class="flex flex-col items-center justify-center h-screen">
95
- <div class="w-full max-w-md p-4">
96
- <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md dark:shadow-gray-700/30 p-5 sm:p-8">
97
- <div class="text-center mb-6">
98
  <div
99
- class="w-16 h-16 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center text-2xl font-semibold mb-4 mx-auto">
100
  AR
101
  </div>
102
- <h2 class="text-xl sm:text-2xl font-semibold">Welcome</h2>
103
- <p class="text-gray-500 dark:text-gray-400 text-sm sm:text-base">
104
  Sign in to access the
105
  <span class="font-semibold" style="color: #067ff3">Ar</span><span class="font-semibold"
106
  style="color: #f9800c">ca</span><span class="font-semibold" style="color: #07b682">na</span>
@@ -111,37 +111,37 @@
111
 
112
  <form id="login-form" class="space-y-4">
113
  <div id="error-message"
114
- class="hidden bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-400 p-3 rounded-md text-sm">
115
  </div>
116
 
117
  <div>
118
- <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email
119
  ID</label>
120
  <input type="email" id="email" name="email_id"
121
- class="w-full px-3 py-2 sm:px-4 sm:py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-base bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
122
  placeholder="Enter your email" required />
123
  </div>
124
 
125
  <div>
126
  <label for="access-key"
127
- class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Access Key</label>
128
  <input type="password" id="access-key" name="access_key"
129
- class="w-full px-3 py-2 sm:px-4 sm:py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-base bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
130
  placeholder="Enter your access key" required />
131
  </div>
132
 
133
  <button type="submit" id="login-button"
134
- class="w-full bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 text-white py-2.5 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors text-base font-medium mt-2">
135
  Sign In
136
  </button>
137
  </form>
138
 
139
- <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
140
- <p class="text-gray-600 dark:text-gray-400 mb-3 text-center text-sm sm:text-base">
141
  Don't have an access key?
142
  </p>
143
  <a href="https://forms.gle/Xzv6Qsh2GUbd9EZc6" id="request-access-button"
144
- class="flex items-center justify-center w-full bg-gradient-to-r from-indigo-50 to-blue-50 dark:from-indigo-900/30 dark:to-blue-900/30 text-blue-600 dark:text-blue-400 py-2.5 px-4 rounded-md hover:from-indigo-100 hover:to-blue-100 dark:hover:from-indigo-900/50 dark:hover:to-blue-900/50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-all duration-200 border border-blue-200 dark:border-blue-800 shadow-sm text-sm sm:text-base font-medium"
145
  target="_blank">
146
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
147
  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
@@ -157,8 +157,8 @@
157
  </div>
158
  </div>
159
 
160
- <footer class="text-center p-4 text-gray-500 dark:text-gray-400 dark:bg-gray-800 text-sm">
161
- <p class="text-gray-400 dark:text-gray-500 p-1">
162
  LLMs can make mistakes. Verify important information.
163
  </p>
164
  <p class="p-1">© 2025 Arcana Inc. All rights reserved.</p>
 
32
  rel="stylesheet" />
33
  </head>
34
 
35
+ <body class="font-['Inter'] text-gray-800 bg-white transition-colors duration-200 dark:text-gray-200 dark:bg-gray-900">
36
  <!-- Header -->
37
+ <header class="p-4 bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
38
+ <div class="flex justify-between items-center mx-auto max-w-screen-xl">
39
  <div class="flex items-center">
40
+ <h1 class="font-medium text-xl">
41
  OpenGPT with
42
  <svg style="
43
  display: inline-block;
 
86
  alt="Arcana - AI&#0045;Powered&#0032;Monetization&#0058;&#0032;Native&#0032;GenAI&#0032;Ads&#0032;for&#0032;GenAI&#0032;apps | Product Hunt"
87
  width="158" />
88
  </a>
89
+ <a href="https://arcana.ad/" class="font-medium text-gray-600 hover:text-gray-900">Home</a>
90
  </nav>
91
  </div>
92
  </header>
93
 
94
+ <main class="flex flex-col justify-center items-center h-screen">
95
+ <div class="p-4 w-full max-w-md">
96
+ <div class="p-5 bg-white rounded-lg shadow-md sm:p-8 dark:bg-gray-800 dark:shadow-gray-700/30">
97
+ <div class="mb-6 text-center">
98
  <div
99
+ class="flex justify-center items-center mx-auto mb-4 w-16 h-16 font-semibold text-2xl bg-blue-100 rounded-full dark:bg-blue-900">
100
  AR
101
  </div>
102
+ <h2 class="font-semibold text-xl sm:text-2xl">Welcome</h2>
103
+ <p class="text-gray-500 text-sm sm:text-base dark:text-gray-400">
104
  Sign in to access the
105
  <span class="font-semibold" style="color: #067ff3">Ar</span><span class="font-semibold"
106
  style="color: #f9800c">ca</span><span class="font-semibold" style="color: #07b682">na</span>
 
111
 
112
  <form id="login-form" class="space-y-4">
113
  <div id="error-message"
114
+ class="hidden p-3 text-red-700 text-sm bg-red-50 rounded-md dark:text-red-400 dark:bg-red-900/30">
115
  </div>
116
 
117
  <div>
118
+ <label for="email" class="block mb-1 font-medium text-sm text-gray-700 dark:text-gray-300">Email
119
  ID</label>
120
  <input type="email" id="email" name="email_id"
121
+ class="px-3 py-2 w-full text-base text-gray-900 bg-white rounded-md border border-gray-300 sm:px-4 sm:py-2 dark:text-gray-100 dark:bg-gray-700 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
122
  placeholder="Enter your email" required />
123
  </div>
124
 
125
  <div>
126
  <label for="access-key"
127
+ class="block mb-1 font-medium text-sm text-gray-700 dark:text-gray-300">Access Key</label>
128
  <input type="password" id="access-key" name="access_key"
129
+ class="px-3 py-2 w-full text-base text-gray-900 bg-white rounded-md border border-gray-300 sm:px-4 sm:py-2 dark:text-gray-100 dark:bg-gray-700 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
130
  placeholder="Enter your access key" required />
131
  </div>
132
 
133
  <button type="submit" id="login-button"
134
+ class="px-4 py-2.5 mt-2 w-full font-medium text-white text-base bg-blue-600 rounded-md transition-colors dark:bg-blue-700 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:hover:bg-blue-800 dark:focus:ring-offset-gray-800">
135
  Sign In
136
  </button>
137
  </form>
138
 
139
+ <div class="pt-6 mt-8 border-t border-gray-200 dark:border-gray-700">
140
+ <p class="mb-3 text-gray-600 text-center text-sm sm:text-base dark:text-gray-400">
141
  Don't have an access key?
142
  </p>
143
  <a href="https://forms.gle/Xzv6Qsh2GUbd9EZc6" id="request-access-button"
144
+ class="flex justify-center items-center px-4 py-2.5 w-full font-medium text-blue-600 text-sm bg-gradient-to-r from-indigo-50 to-blue-50 rounded-md border border-blue-200 shadow-sm transition-all duration-200 sm:text-base dark:text-blue-400 dark:from-indigo-900/30 dark:to-blue-900/30 dark:border-blue-800 hover:from-indigo-100 hover:to-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:hover:from-indigo-900/50 dark:hover:to-blue-900/50 dark:focus:ring-offset-gray-800"
145
  target="_blank">
146
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
147
  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
 
157
  </div>
158
  </div>
159
 
160
+ <footer class="p-4 text-center text-gray-500 text-sm dark:text-gray-400 dark:bg-gray-800">
161
+ <p class="p-1 text-gray-400 dark:text-gray-500">
162
  LLMs can make mistakes. Verify important information.
163
  </p>
164
  <p class="p-1">© 2025 Arcana Inc. All rights reserved.</p>