-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathoptions.html
135 lines (134 loc) · 3.81 KB
/
options.html
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
<!DOCTYPE html>
<html>
<head>
<title>Summarizer Settings</title>
<style>
body {
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
max-width: 600px;
margin: 0 auto;
}
.container {
background-color: #fff;
padding: 24px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
h1 {
color: #202124;
margin-bottom: 24px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #202124;
}
.help-text {
font-size: 14px;
color: #5f6368;
margin-bottom: 8px;
}
input[type="text"] {
width: 100%;
padding: 8px;
border: 1px solid #dadce0;
border-radius: 4px;
font-size: 14px;
margin-bottom: 8px;
}
input[type="text"]:focus {
outline: none;
border-color: #4285f4;
}
button {
background-color: #4285f4;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
button:hover {
background-color: #3367d6;
}
#status {
margin-top: 16px;
padding: 8px;
border-radius: 4px;
display: none;
}
.success {
background-color: #e6f4ea;
color: #137333;
}
.error {
background-color: #fce8e6;
color: #c5221f;
}
.instructions {
margin-top: 24px;
padding: 16px;
background-color: #f8f9fa;
border-radius: 4px;
}
.instructions h2 {
margin-top: 0;
color: #202124;
}
.instructions ol {
margin: 0;
padding-left: 20px;
}
.instructions li {
margin-bottom: 8px;
color: #3c4043;
}
.footer {
margin-top: 30px;
text-align: center;
color: #666;
font-size: 12px;
}
.footer a {
color: #1a73e8;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>Summarizer Settings</h1>
<div class="form-group">
<label for="apiKey">Google Gemini API Key</label>
<div class="help-text">Enter your API key from Google AI Studio</div>
<input type="text" id="apiKey" placeholder="Enter your API key">
</div>
<button id="save">Save</button>
<div id="status"></div>
<div class="instructions">
<h2>How to get your API key:</h2>
<ol>
<li>Visit <a href="https://makersuite.google.com/app/apikey" target="_blank">Google AI Studio</a></li>
<li>Sign in with your Google account if needed</li>
<li>Click on "Get API key" or create a new one</li>
<li>Copy the API key and paste it above</li>
<li>Click Save to store your API key</li>
</ol>
</div>
<div class="footer">
Created by <a href="https://github.com/YOUR_GITHUB_USERNAME" target="_blank">YOUR_NAME</a> •
<a href="https://github.com/YOUR_GITHUB_USERNAME/summarizer/issues" target="_blank">Report Issue</a>
</div>
</div>
<script src="options.js"></script>
</body>
</html>