csv-everything/options.html at main · matsonj/csv-everything · 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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSV Everything Settings</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      max-width: 600px;
      margin: 0 auto;
      padding: 40px 20px;
      background: #f8f9fa;
    }

    .container {
      background: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    h1 {
      color: #333;
      margin-bottom: 30px;
      font-size: 24px;
    }

    .form-group {
      margin-bottom: 25px;
    }

    label {
      display: block;
      margin-bottom: 8px;
      font-weight: 500;
      color: #555;
    }

    input[type="text"], input[type="password"], textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 14px;
      box-sizing: border-box;
    }

    input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
      outline: none;
      border-color: #4285f4;
    }

    textarea {
      height: 100px;
      resize: vertical;
      font-family: inherit;
    }

    .help-text {
      font-size: 12px;
      color: #666;
      margin-top: 5px;
    }

    .save-btn {
      background: #4285f4;
      color: white;
      border: none;
      padding: 12px 24px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
    }

    .save-btn:hover {
      background: #3367d6;
    }

    .notification {
      padding: 12px;
      border-radius: 4px;
      margin-bottom: 20px;
      display: none;
    }

    .notification.success {
      background: #e8f5e8;
      border: 1px solid #c8e6c9;
      color: #2e7d32;
    }

    .required {
      color: #d32f2f;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>CSV Everything Settings</h1>

    <div id="notification" class="notification">
      Settings saved successfully!
    </div>

    <form id="settingsForm">
      <div class="form-group">
        <label for="apiKey">OpenRouter API Key <span class="required">*</span></label>
        <input type="password" id="apiKey" required>
        <div class="help-text">Get your API key from <a href="https://openrouter.ai/keys" target="_blank">OpenRouter</a></div>
      </div>

      <div class="form-group">
        <label for="model">Model String</label>
        <input type="text" id="model" placeholder="google/gemini-2.5-flash">
        <div class="help-text">Specify which OpenRouter model to use (optional)</div>
      </div>

      <div class="form-group">
        <label for="prompt">Custom Prompt</label>
        <textarea id="prompt" placeholder="turn the image into a csv. only return a csv."></textarea>
        <div class="help-text">Customize the prompt sent to the model (optional)</div>
      </div>

      <div class="form-group">
        <label>
          <input type="checkbox" id="debugMode"> Enable Debug Mode
        </label>
        <div class="help-text">Log full API responses to browser console for troubleshooting</div>
      </div>

      <button type="submit" class="save-btn">Save Settings</button>
    </form>
  </div>

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