Mod/sidepanel.html at main · DanielVisca/Mod · 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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Mod</title>
  <link rel="stylesheet" href="sidepanel.css">
</head>
<body>
  <div id="app">
    <div id="header">
      <h1>Mod</h1>
      <div id="header-actions">
        <button id="btn-select" title="Select an element on the page">Select</button>
        <button id="btn-mods" title="View saved mods for this site">Mods</button>
        <button id="btn-settings" title="Settings">Settings</button>
      </div>
    </div>

    <div id="page-info">
      <span id="page-hostname">—</span>
      <span id="mod-count"></span>
      <label id="mods-toggle-wrap" class="mods-toggle">
        <input type="checkbox" id="mods-enabled-toggle" checked>
        <span id="mods-toggle-label">Mods on</span>
      </label>
      <button id="btn-set-goal" type="button" class="btn-set-goal" title="Set a conversation goal">Set goal</button>
    </div>
    <div id="goal-bar" class="goal-bar hidden">
      <span id="goal-label">Goal:</span>
      <span id="goal-text"></span>
      <button id="btn-clear-goal" type="button">Clear goal</button>
    </div>

    <div id="chat-view" class="view active">
      <div id="messages"></div>
      <div id="input-area">
        <textarea id="user-input" placeholder="Describe what you want to change..." rows="2"></textarea>
        <button id="btn-send">Send</button>
      </div>
    </div>

    <div id="mods-view" class="view">
      <div id="mods-list-wrap">
        <div id="mods-list"></div>
        <div id="import-mod-section" class="import-section">
        <label>Import a shared mod</label>
        <textarea id="import-mod-input" placeholder="Paste mod link (mod:...) or JSON here" rows="2"></textarea>
        <button id="btn-import-mod">Add to this site</button>
        <p id="import-mod-feedback" class="import-feedback" aria-live="polite"></p>
      </div>
      </div>
      <div id="mod-detail-view" class="mod-detail-view hidden">
        <div id="mod-detail-back" class="back-btn">Back to list</div>
        <h2 id="mod-detail-title" class="mod-detail-title"></h2>
        <div id="mod-detail-type" class="mod-detail-meta"></div>
        <p id="mod-detail-what" class="mod-detail-what"></p>
        <p id="mod-detail-affects" class="mod-detail-affects"></p>
        <div id="mod-detail-dates" class="mod-detail-dates"></div>
        <div id="mod-detail-revisions" class="mod-detail-revisions hidden"></div>
        <details class="mod-detail-code-details">
          <summary id="mod-detail-code-summary" class="mod-detail-code-summary">View actual code</summary>
          <p id="mod-detail-code-note" class="mod-code-note hidden"></p>
          <pre id="mod-detail-code-pre" class="mod-detail-code-pre"></pre>
        </details>
        <details id="mod-detail-full-json-wrap" class="mod-detail-code-details mod-full-json-details">
          <summary class="mod-detail-code-summary">Full mod (JSON)</summary>
          <pre id="mod-detail-full-json-pre" class="mod-detail-code-pre"></pre>
        </details>
        <div class="mod-detail-actions">
          <button id="mod-detail-refine" class="btn-detail-action">Refine this mod</button>
          <button id="mod-detail-revert" class="btn-detail-action" title="Restore the previous version (before the last refinement)">Revert to previous</button>
          <button id="mod-detail-preview" class="btn-detail-action">Preview only this mod</button>
          <button id="mod-detail-stop-preview" class="btn-detail-action hidden">Stop preview</button>
        </div>
      </div>
      <button id="btn-back-chat" class="back-btn">Back to chat</button>
    </div>

    <div id="settings-view" class="view">
      <label>
        Claude API Key
        <input type="password" id="api-key-input" placeholder="sk-ant-...">
      </label>
      <p class="hint">Your key is stored locally and never sent anywhere except api.anthropic.com</p>
      <button id="btn-save-settings">Save</button>
      <button id="btn-back-chat-2" class="back-btn">Back to chat</button>
    </div>

    <div id="selecting-indicator" class="hidden">
      Click any element on the page... (Esc to cancel)
    </div>

    <div id="sidepanel-toast" class="sidepanel-toast" role="status" aria-live="polite" aria-atomic="true"></div>
  </div>

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