Hugging Face's logo

Spaces:
MedhaCodes
/
Question-answering-APP
Sleeping

App Files Community
MedhaCodes commited on
Commit
5f2e12b
·
verified ·
1 Parent(s): 0944dd7

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +57 -57
templates/index.html CHANGED
@@ -1,63 +1,63 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
- <title>QA Dashboard Pro</title>
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.3.3/dist/tailwind.min.css" rel="stylesheet">
8
- <link rel="stylesheet" href="/static/style.css">
 
9
  </head>
10
- <body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-all">
11
-
12
- <!-- Header -->
13
- <header class="flex justify-between items-center p-5 bg-indigo-600 text-white shadow-lg">
14
- <h1 class="text-2xl font-bold">⚡ QA Dashboard Pro</h1>
15
- <nav class="space-x-6 text-lg">
16
- <a href="#" class="hover:text-yellow-300">🏠 Home</a>
17
- <a href="#" class="hover:text-yellow-300">⚙️ Settings</a>
18
- <a href="#" class="hover:text-yellow-300">📄 About</a>
19
- <button id="dark-toggle" class="bg-indigo-800 px-3 py-1 rounded-lg hover:bg-indigo-700">🌙 Toggle Dark Mode</button>
20
- </nav>
21
- </header>
22
-
23
- <!-- Main Layout -->
24
- <main class="flex flex-col lg:flex-row gap-6 p-6">
25
-
26
- <!-- Left Panel: Input -->
27
- <section class="lg:w-2/3 bg-white dark:bg-gray-800 shadow-lg rounded-2xl p-6 space-y-5">
28
- <h2 class="text-2xl font-semibold mb-2">🧠 Ask a Question</h2>
29
-
30
- <label class="block font-medium">Context</label>
31
- <textarea id="context" rows="8" placeholder="Paste your context here..."
32
- class="w-full border rounded-lg p-3 dark:bg-gray-700 focus:ring-2 focus:ring-indigo-500"></textarea>
33
-
34
- <label class="block font-medium">Question(s)</label>
35
- <textarea id="question" rows="5" placeholder="Type your questions here (one per line)..."
36
- class="w-full border rounded-lg p-3 dark:bg-gray-700 focus:ring-2 focus:ring-indigo-500"></textarea>
37
-
38
- <button id="submit-btn" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-2 rounded-lg transition">
39
- 🚀 Get Answer
40
- </button>
41
- </section>
42
-
43
- <!-- Right Panel: Output -->
44
- <section class="lg:w-1/3 flex flex-col gap-6">
45
-
46
- <!-- Answer Box -->
47
- <div class="bg-indigo-50 dark:bg-gray-800 shadow-lg rounded-2xl p-5">
48
- <h3 class="text-xl font-bold mb-3">💡 Answer</h3>
49
- <div id="answer-box" class="space-y-3 text-gray-800 dark:text-gray-200"></div>
50
- </div>
51
-
52
- <!-- History -->
53
- <div class="bg-white dark:bg-gray-800 shadow-lg rounded-2xl p-5">
54
- <h3 class="text-xl font-bold mb-3">📜 History</h3>
55
- <ul id="history-list" class="space-y-2 text-gray-700 dark:text-gray-300 text-sm"></ul>
56
- </div>
57
- </section>
58
-
59
- </main>
60
-
61
- <script src="/static/script.js"></script>
62
  </body>
63
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
+ <title>QA Dashboard Pro</title>
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <!-- Tailwind CSS -->
8
+ <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.3.3/dist/tailwind.min.css" rel="stylesheet">
9
+ <link rel="stylesheet" href="/static/style.css">
10
  </head>
11
+ <body class="bg-gradient-to-r from-purple-100 via-indigo-100 to-pink-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 text-gray-900 dark:text-gray-100 transition-all">
12
+
13
+ <!-- Header -->
14
+ <header class="flex justify-between items-center p-5 bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-lg">
15
+ <h1 class="text-2xl font-bold">⚡ QA Dashboard Pro</h1>
16
+ <nav class="space-x-6 text-lg">
17
+ <a href="#" class="hover:text-yellow-300">🏠 Home</a>
18
+ <a href="#" class="hover:text-yellow-300">⚙️ Settings</a>
19
+ <a href="#" class="hover:text-yellow-300">📄 About</a>
20
+ <button id="dark-toggle" class="bg-indigo-800 px-3 py-1 rounded-lg hover:bg-indigo-700 transition">🌙 Toggle Dark Mode</button>
21
+ </nav>
22
+ </header>
23
+
24
+ <!-- Main Layout -->
25
+ <main class="flex flex-col lg:flex-row gap-6 p-6 h-[calc(100vh-80px)]">
26
+
27
+ <!-- Left Panel: Input -->
28
+ <section class="lg:w-2/3 bg-white dark:bg-gray-800 shadow-lg rounded-2xl p-6 space-y-5 flex flex-col">
29
+ <h2 class="text-2xl font-semibold mb-2 text-indigo-600">🧠 Ask a Question</h2>
30
+
31
+ <label class="block font-medium">Context</label>
32
+ <textarea id="context" rows="6" placeholder="Paste your context here..." class="w-full border rounded-lg p-3 dark:bg-gray-700 focus:ring-2 focus:ring-indigo-500 flex-grow"></textarea>
33
+
34
+ <label class="block font-medium">Question(s)</label>
35
+ <textarea id="question" rows="4" placeholder="Type your questions here (one per line)..." class="w-full border rounded-lg p-3 dark:bg-gray-700 focus:ring-2 focus:ring-indigo-500 flex-grow"></textarea>
36
+
37
+ <button id="submit-btn" class="w-full bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 text-white font-semibold py-3 rounded-xl transition">
38
+ 🚀 Get Answer
39
+ </button>
40
+ </section>
41
+
42
+ <!-- Right Panel: Output -->
43
+ <section class="lg:w-1/3 flex flex-col gap-6">
44
+
45
+ <!-- Answer Box -->
46
+ <div class="bg-white dark:bg-gray-800 shadow-lg rounded-2xl p-5 flex-grow overflow-y-auto">
47
+ <h3 class="text-xl font-bold mb-3 text-indigo-600">💡 Answer</h3>
48
+ <div id="answer-box" class="space-y-3 text-gray-800 dark:text-gray-200"></div>
49
+ </div>
50
+
51
+ <!-- History -->
52
+ <div class="bg-white dark:bg-gray-800 shadow-lg rounded-2xl p-5 flex-grow overflow-y-auto">
53
+ <h3 class="text-xl font-bold mb-3 text-indigo-600">📜 History</h3>
54
+ <ul id="history-list" class="space-y-2 text-gray-700 dark:text-gray-300 text-sm"></ul>
55
+ </div>
56
+
57
+ </section>
58
+
59
+ </main>
60
+
61
+ <script src="/static/script.js"></script>
 
62
  </body>
63
  </html>