Hugging Face's logo

Spaces:
MedhaCodes
/
Question-answering-APP
Sleeping

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

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +34 -58
templates/index.html CHANGED
@@ -1,71 +1,47 @@
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>
 
1
+ <body class="bg-gradient-to-b from-blue-100 via-blue-200 to-blue-300 min-h-screen flex flex-col items-center justify-center p-4">
 
 
 
 
 
 
 
 
2
 
3
+ <div class="bg-white w-full max-w-md md:max-w-lg rounded-3xl shadow-2xl p-6 space-y-5">
4
 
5
+ <!-- Title -->
6
+ <h1 class="text-center text-2xl md:text-3xl font-bold text-blue-700">💬 Ask Your Doubts</h1>
 
 
7
 
8
+ <!-- Context Box -->
9
+ <div>
10
+ <label for="context" class="block text-gray-600 font-semibold mb-1">Context</label>
 
 
11
  <textarea id="context"
12
+ placeholder="Paste your passage or background information here..."
13
+ class="w-full border border-gray-200 rounded-2xl p-4 text-gray-700 text-sm focus:ring-2 focus:ring-blue-400 min-h-[130px] resize-y shadow-sm"></textarea>
14
+ </div>
15
 
16
+ <!-- Question Box -->
17
+ <div>
18
+ <label for="question" class="block text-gray-600 font-semibold mb-1">Question(s)</label>
19
+ <textarea id="question"
20
+ placeholder="Write one or more questions (each on a new line)..."
21
+ class="w-full border border-gray-200 rounded-2xl p-4 text-gray-700 text-sm focus:ring-2 focus:ring-blue-400 min-h-[100px] resize-y shadow-sm"></textarea>
22
+ </div>
 
 
23
 
24
+ <!-- Ask Button -->
25
+ <button id="submit-btn"
26
+ class="w-full 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 transform hover:scale-[1.02]">
27
+ 🚀 Ask Question
28
+ </button>
29
 
30
+ <!-- Answer Section -->
31
+ <div class="mt-5">
32
+ <h2 class="text-lg font-semibold text-blue-700 mb-2">💡 Answers</h2>
33
  <div id="answer-box"
34
+ class="bg-blue-50 border border-blue-100 rounded-2xl p-4 text-gray-800 text-sm min-h-[120px] max-h-[400px] overflow-y-auto shadow-inner"></div>
35
  </div>
 
36
 
37
+ <!-- History Section -->
38
+ <div class="mt-5">
39
+ <h2 class="text-lg font-semibold text-blue-700 mb-2">📜 History</h2>
40
+ <ul id="history-list"
41
+ class="space-y-2 text-gray-700 text-sm max-h-[200px] overflow-y-auto"></ul>
42
+ </div>
43
+
44
+ </div>
 
 
 
 
 
 
 
 
 
 
 
45
 
46
  <script src="/static/script.js"></script>
47
  </body>