Summarize_Articles_Chrome_Extension/options.html at master · Jeffrin2005/Summarize_Articles_Chrome_Extension · 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
<!DOCTYPE html>
<html>
  <head>
    <title>AI Summary Settings</title>
    <link rel="stylesheet" href="styles/tailwind.css" />
  </head>
  <body class="bg-gray-50 text-gray-900 p-6">
    <h1 class="text-2xl font-semibold text-gray-800 mb-4">AI Summary Settings</h1>

    <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-5 max-w-xl">
      <div class="space-y-1">
        <label for="api-key" class="block text-sm font-medium text-gray-700">Gemini API Key</label>
        <input
          type="text"
          id="api-key"
          placeholder="Enter your Gemini API key"
          class="mt-1 border border-gray-300 bg-white text-gray-900 rounded px-3 py-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        />
        <p class="text-xs text-gray-500">
          You can create an API key in
          <a class="text-blue-600 hover:underline" href="https://makersuite.google.com/app/apikey" target="_blank">Google AI Studio</a>.
        </p>
      </div>

      <div class="mt-4 flex items-center justify-between">
        <button id="save-button" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500">Save Settings</button>
        <span id="success-message" class="success-message text-green-600 text-sm hidden">Saved.</span>
      </div>
    </div>

    <script src="options.js"></script>
  </body>
</html>