Hugging Face's logo

Spaces:
MedhaCodes
/
Question-answering-APP
Sleeping

App Files Community
MedhaCodes commited on
Commit
072b65f
·
verified ·
1 Parent(s): 65e3af8

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +57 -47
templates/index.html CHANGED
@@ -1,61 +1,71 @@
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-50 via-indigo-50 to-pink-50 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-xl rounded-2xl p-6 flex flex-col">
29
- <h2 class="text-2xl font-bold mb-4 text-indigo-600">🧠 Ask a Question</h2>
 
 
 
 
 
30
 
31
- <label class="block font-semibold mb-1">Context</label>
32
- <textarea id="context" placeholder="Paste your context here..." class="w-full flex-grow border rounded-xl p-4 mb-4 dark:bg-gray-700 focus:ring-2 focus:ring-indigo-500 min-h-[180px] max-h-[300px] resize-y"></textarea>
 
 
 
 
 
 
 
33
 
34
- <label class="block font-semibold mb-1">Question(s)</label>
35
- <textarea id="question" placeholder="Type your questions here (one per line)..." class="w-full flex-grow border rounded-xl p-4 mb-4 dark:bg-gray-700 focus:ring-2 focus:ring-indigo-500 min-h-[120px] max-h-[250px] resize-y"></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">🚀 Get Answer</button>
38
- </section>
 
 
 
39
 
40
- <!-- Right Panel: Output -->
41
- <section class="lg:w-1/3 flex flex-col gap-6 h-full">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
42
 
43
- <!-- Answer Box -->
44
- <div class="bg-white dark:bg-gray-800 shadow-xl rounded-2xl p-5 flex-1 overflow-y-auto">
45
- <h3 class="text-xl font-bold mb-3 text-indigo-600">💡 Answer</h3>
46
- <div id="answer-box" class="space-y-3 text-gray-800 dark:text-gray-200"></div>
47
- </div>
48
-
49
- <!-- History -->
50
- <div class="bg-white dark:bg-gray-800 shadow-xl rounded-2xl p-5 flex-1 overflow-y-auto">
51
- <h3 class="text-xl font-bold mb-3 text-indigo-600">📜 History</h3>
52
- <ul id="history-list" class="space-y-2 text-gray-700 dark:text-gray-300 text-sm"></ul>
53
- </div>
54
-
55
- </section>
56
-
57
- </main>
58
-
59
- <script src="/static/script.js"></script>
60
  </body>
61
  </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
+ <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
 
11
+ <body class="bg-gradient-to-b from-blue-600 via-blue-500 to-blue-400 min-h-screen flex flex-col justify-between font-sans text-gray-900">
 
 
 
 
 
 
 
 
 
12
 
13
+ <!-- Header -->
14
+ <header class="text-center mt-6">
15
+ <h1 class="text-white text-2xl font-semibold">Ask your Doubts<br>with Other Users</h1>
16
+ </header>
17
 
18
+ <!-- Main Card -->
19
+ <main class="flex-grow flex justify-center items-center">
20
+ <div class="bg-white w-11/12 max-w-sm rounded-3xl shadow-xl p-5 flex flex-col space-y-4">
21
+
22
+ <!-- Question Box -->
23
+ <textarea id="context"
24
+ placeholder="Paste your question or context here..."
25
+ class="border border-gray-200 rounded-2xl p-3 text-gray-700 text-sm focus:ring-2 focus:ring-blue-400 min-h-[90px] resize-none"></textarea>
26
 
27
+ <!-- Category Selector -->
28
+ <select id="category"
29
+ class="border border-gray-200 rounded-2xl p-3 text-gray-700 text-sm focus:ring-2 focus:ring-blue-400">
30
+ <option>Choose Subject</option>
31
+ <option>Mathematics</option>
32
+ <option>Science</option>
33
+ <option>English</option>
34
+ <option>General Knowledge</option>
35
+ </select>
36
 
37
+ <!-- Ask Button -->
38
+ <button id="submit-btn"
39
+ class="bg-gradient-to-r from-blue-600 to-indigo-500 hover:from-blue-500 hover:to-indigo-400 text-white font-semibold py-3 rounded-2xl shadow-md transition">
40
+ Ask Question
41
+ </button>
42
 
43
+ <!-- Answer Section -->
44
+ <div id="answer-box"
45
+ class="bg-blue-50 border border-blue-100 rounded-2xl p-3 text-gray-800 text-sm min-h-[80px] overflow-y-auto"></div>
46
+ </div>
47
+ </main>
48
 
49
+ <!-- Bottom Navigation Bar -->
50
+ <nav class="bg-white shadow-inner border-t border-blue-100 flex justify-around py-3 text-blue-600 text-xs fixed bottom-0 left-0 right-0">
51
+ <button class="flex flex-col items-center hover:text-blue-800">
52
+ <span class="text-lg">🏠</span>
53
+ Home
54
+ </button>
55
+ <button class="flex flex-col items-center hover:text-blue-800">
56
+ <span class="text-lg">📚</span>
57
+ Subjects
58
+ </button>
59
+ <button class="flex flex-col items-center text-blue-700 font-bold">
60
+ <span class="text-lg">❓</span>
61
+ Ask
62
+ </button>
63
+ <button class="flex flex-col items-center hover:text-blue-800">
64
+ <span class="text-lg">👤</span>
65
+ Profile
66
+ </button>
67
+ </nav>
68
 
69
+ <script src="/static/script.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
70
  </body>
71
  </html>