GeoCoach/sidepanel.html at master · TunaDev0/GeoCoach · 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
<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 10px; background: #222; color: #fff; }
    .location {
        background: #333;
        padding: 8px;
        margin-bottom: 5px;
        border-radius: 4px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .location span { font-size: 12px; }
    button {
        background: #4CAF50;
        border: none;
        color: white;
        padding: 5px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
        cursor: pointer;
        border-radius: 3px;
    }
    #logs {
        margin-top: 20px;
        font-family: monospace;
        font-size: 10px;
        color: #aaa;
        max-height: 200px;
        overflow-y: auto;
        border-top: 1px solid #444;
        padding-top: 5px;
    }
    .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
  </style>
</head>
<body>
  <div class="header">
    <h3>GeoCoach</h3>
    <button id="clearBtn">Clear</button>
  </div>

  <div id="controls">
      <button id="showPinsBtn" style="width:100%; margin-bottom: 10px;">Show Pins on Game Map</button>
      <button id="settingsToggleBtn" style="width:100%; margin-bottom: 10px; background: #333;">Settings (AI Key)</button>
  </div>

  <div id="settingsPanel" style="display:none; background: #333; padding: 10px; border-radius: 4px; margin-bottom: 10px;">
      <label style="display:block; margin-bottom: 5px; font-size: 11px;">AI Provider:</label>
      <select id="apiProvider" style="width:100%; margin-bottom: 10px; background: #222; color: #fff; border: 1px solid #444; padding: 5px;">
          <option value="openai">OpenAI (GPT-4o)</option>
          <option value="anthropic">Anthropic (Claude 3.5)</option>
          <option value="gemini">Google Gemini (1.5 Flash)</option>
          <option value="groq">Groq (Llama 3.2 Vision)</option>
          <option value="openrouter">OpenRouter (Free Models)</option>
      </select>

      <div id="modelNameContainer" style="display:none;">
          <label style="display:block; margin-bottom: 5px; font-size: 11px;">Model Name (Optional):</label>
          <input type="text" id="modelName" list="freeModels" style="width:95%; margin-bottom: 10px; background: #222; color: #fff; border: 1px solid #444; padding: 5px;" placeholder="Select or type model ID...">
          <datalist id="freeModels">
              <option value="google/gemini-2.0-flash-lite-preview-02-05:free">Google Gemini 2.0 Flash Lite (Best Overall)</option>
              <option value="google/gemma-3-4b-it:free">Google Gemma 3 4B (Fast & Multimodal)</option>
              <option value="google/gemma-3-27b-it:free">Google Gemma 3 27B (More Intelligent)</option>
              <option value="meta-llama/llama-3.2-11b-vision-instruct:free">Meta Llama 3.2 11B Vision</option>
              <option value="qwen/qwen-2-vl-7b-instruct:free">Qwen 2 VL 7B (Good for Text/Signs)</option>
              <option value="llama-3.2-11b-vision-preview">Groq: Llama 3.2 11B Vision (Fast)</option>
              <option value="llama-3.2-90b-vision-preview">Groq: Llama 3.2 90B Vision (Powerful)</option>
              <option value="meta-llama/llama-4-maverick-17b-128e-instruct">Groq/Meta: Llama 4 Maverick 17B (Preview)</option>
              <option value="meta-llama/llama-4-scout-17b-16e-instruct">Groq/Meta: Llama 4 Scout 17B (Preview)</option>
          </datalist>
      </div>

      <label style="display:block; margin-bottom: 5px; font-size: 11px;">API Key:</label>
      <input type="password" id="apiKey" style="width:95%; margin-bottom: 10px; background: #222; color: #fff; border: 1px solid #444; padding: 5px;" placeholder="sk-...">

      <button id="saveSettingsBtn" style="width:100%;">Save Settings</button>

      <hr style="border-color: #444; margin: 15px 0;">

      <h4 style="margin: 0 0 10px 0; font-size: 13px;">Coach Preferences</h4>

      <label style="display:block; margin-bottom: 5px; font-size: 11px;">Language:</label>
      <select id="coachLanguage" style="width:100%; margin-bottom: 10px; background: #222; color: #fff; border: 1px solid #444; padding: 5px;">
          <option value="English">English</option>
          <option value="Italian">Italian</option>
          <option value="Spanish">Spanish</option>
          <option value="French">French</option>
          <option value="German">German</option>
      </select>

      <label style="display:flex; align-items: center; margin-bottom: 8px; font-size: 11px;">
          <input type="checkbox" id="showKeyHint" checked style="margin-right: 8px;"> Show Key Hint
      </label>
      <label style="display:flex; align-items: center; margin-bottom: 8px; font-size: 11px;">
          <input type="checkbox" id="showCoachAnalysis" checked style="margin-right: 8px;"> Show Coach Analysis
      </label>
      <label style="display:flex; align-items: center; margin-bottom: 8px; font-size: 11px;">
          <input type="checkbox" id="showVisualClues" checked style="margin-right: 8px;"> Show Visual Clues
      </label>
      <label style="display:flex; align-items: center; margin-bottom: 8px; font-size: 11px;">
          <input type="checkbox" id="autoClear" style="margin-right: 8px;"> Auto-Clear on New Location
      </label>

      <button id="savePreferencesBtn" style="width:100%; background: #2196F3; margin-top: 5px;">Save Preferences</button>
  </div>

  <div id="locations"></div>

  <div id="logs">Logs...</div>

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