classMateAI/index.html at master · Alex2099v1/classMateAI · GitHub

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
<!DOCTYPE html>
<html lang="en" class="light">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Educational Document Uploader</title>

  <!-- Tailwind CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class'
    };
  </script>

  <!-- Inter Font -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

  <!-- Custom Styles -->
  <link rel="stylesheet" href="styles.css" />
  <style>
    .modal {
      background-color: rgba(0, 0, 0, 0.5);
    }
  </style>
</head>
<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-inter">
  <div class="container mx-auto px-4 py-12 max-w-3xl">
    <!-- Header -->
    <header class="mb-10 text-center">
      <div class="flex justify-between items-center mb-4">
        <h1 class="text-4xl font-bold">Educational Document Uploader</h1>
        <button id="themeToggle" class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 px-3 py-1 rounded-lg shadow text-sm">Toggle Mode</button>
      </div>
      <p class="text-gray-600 dark:text-gray-300 text-lg">Upload your lectures, homework, or notes for review</p>
    </header>

    <!-- Main Content -->
    <main class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 md:p-10">
      <!-- Trigger Button -->
      <div class="mb-6 text-center">
        <button id="openUploadModal" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-xl shadow">Choose File</button>
      </div>

      <!-- Upload Modal -->
      <div id="uploadModal" class="fixed inset-0 hidden modal z-50 flex items-center justify-center">
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 w-full max-w-lg relative">
          <!-- Close Button -->
          <button id="closeUploadModal" class="absolute top-3 right-3 text-gray-400 hover:text-gray-200 text-2xl font-bold">&times;</button>

          <h2 class="text-xl font-semibold mb-4">Upload a Document</h2>
          <form id="uploadForm" class="space-y-6">
            <!-- Document Type -->
            <div>
              <label for="docType" class="block text-sm font-medium mb-1">Document Category:</label>
              <select id="docType" name="docType" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-xl shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 dark:bg-gray-700 dark:text-gray-100">
                <option value="pdf">Lectures</option>
                <option value="docx">Exam</option>
                <option value="image">Notes</option>
              </select>
            </div>

            <!-- File Upload -->
            <div>
              <label for="fileUpload" class="block text-sm font-medium mb-1">Select File:</label>
              <div id="dropZone" class="drop-zone rounded-xl dark:border-gray-500">
                <div class="flex flex-col items-center justify-center space-y-3">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
                  </svg>
                  <p class="text-gray-500 dark:text-gray-300">Drag and drop your file here, or click to select</p>
                  <p class="text-xs text-gray-400">Supported formats: PDF, DOCX, TXT, PNG, JPG</p>
                  <span id="fileNameDisplay" class="text-sm font-medium text-blue-600 hidden"></span>
                </div>
                <input type="file" id="fileUpload" name="file" class="file-input" accept=".pdf,.docx,.txt,image/*">
              </div>
            </div>

            <!-- Gemini API Key Input -->
                <div>
                  <label for="apiKey" class="block text-sm font-medium mb-1">Gemini API Key:</label>
                  <input type="password" id="apiKey" name="apiKey" placeholder="Enter your Gemini API key"
                        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-xl shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 dark:bg-gray-700 dark:text-gray-100"
                        required>
                </div>


            <!-- Submit Button -->
            <div class="flex justify-end">
              <button type="submit" id="submitBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-xl shadow transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Upload & Process</button>
            </div>
          </form>

          <!-- Status Message -->
          <div id="statusMessage" class="mt-6 p-4 rounded-xl hidden"></div>
        </div>
      </div>

      <!-- Dashboard Button -->
      <div class="text-center mt-6">
        <a href="dashboard.html" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-xl shadow transition">Open Dashboard</a>
      </div>

      <!-- Recent Uploads -->
      <div class="mt-10 border-t pt-6">
        <h2 class="text-lg font-semibold mb-4">Recent Uploads</h2>
        <div id="recentUploads" class="space-y-3">
          <p class="text-gray-500 text-sm italic">No recent uploads</p>
        </div>
      </div>
    </main>

    <!-- Footer -->
    <footer class="mt-10 text-center text-sm text-gray-500 dark:text-gray-400">
      <p>Securely upload your educational documents for processing</p>
      <p class="mt-1">All uploads are encrypted and processed privately</p>
    </footer>
  </div>

  <!-- JavaScript -->
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const modal = document.getElementById('uploadModal');
      const openBtn = document.getElementById('openUploadModal');
      const closeBtn = document.getElementById('closeUploadModal');
      const htmlTag = document.documentElement;
      const themeToggle = document.getElementById('themeToggle');

      // Restore theme from localStorage
      const savedTheme = localStorage.getItem('theme');
      if (savedTheme === 'dark') {
        htmlTag.classList.add('dark');
        htmlTag.classList.remove('light');
      } else {
        htmlTag.classList.add('light');
        htmlTag.classList.remove('dark');
      }

      openBtn.addEventListener('click', () => modal.classList.remove('hidden'));
      closeBtn.addEventListener('click', () => modal.classList.add('hidden'));

      themeToggle.addEventListener('click', () => {
        const isDark = htmlTag.classList.contains('dark');
        htmlTag.classList.toggle('dark');
        htmlTag.classList.toggle('light');
        localStorage.setItem('theme', isDark ? 'light' : 'dark');
      });
    });
  </script>
  <script src="script.js"></script>
</body>
</html>