Base64-Encoder-Decoder/popup.html at main · ejcenteno/Base64-Encoder-Decoder · 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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Base64 Encoder / Decoder</title>
  <link rel="stylesheet" href="popup.css" />
</head>
<body>

  <header class="header">
    <div class="header__left">
      <img src="icons/icon32.png" alt="" class="header__icon" aria-hidden="true" />
      <span class="header__title">Base64</span>
    </div>
    <div class="header__controls">
      <button id="themeToggle" class="btn-icon" aria-label="Toggle dark mode" title="Toggle dark mode">🌙</button>
    </div>
  </header>

  <!-- ── Options bar ──────────────────────────────────────────── -->
  <div class="options-bar">
    <label class="toggle-label">
      <input type="checkbox" id="urlSafeToggle" />
      <span>URL-safe</span>
    </label>
    <label class="toggle-label">
      <input type="checkbox" id="wrapToggle" />
      <span>Wrap at 76</span>
    </label>
    <label class="toggle-label">
      <input type="checkbox" id="autoToggle" checked />
      <span>Auto-detect</span>
    </label>
  </div>

  <!-- ── Mode tabs ─────────────────────────────────────────────── -->
  <div class="tabs" role="tablist" aria-label="Input mode">
    <button class="tab tab--active" id="tabText" role="tab" aria-selected="true"  aria-controls="panelText">Text</button>
    <button class="tab"             id="tabFile" role="tab" aria-selected="false" aria-controls="panelFile">File</button>
  </div>

  <!-- ── Text panel ────────────────────────────────────────────── -->
  <div id="panelText" class="panel" role="tabpanel" aria-labelledby="tabText">

    <div class="pane">
      <div class="pane__header">
        <span class="pane__label" id="inputLabel">Input</span>
        <div class="pane__actions">
          <button class="btn-small" id="clearInputBtn" aria-label="Clear input">Clear</button>
          <button class="btn-small" id="pasteBtn" aria-label="Paste from clipboard">Paste</button>
        </div>
      </div>
      <div class="textarea-wrap">
        <textarea
          id="inputEl"
          class="textarea"
          rows="5"
          spellcheck="false"
          autocorrect="off"
          autocapitalize="off"
          placeholder="Type or paste text / Base64…"
          aria-labelledby="inputLabel"
        ></textarea>
        <span id="charCount" class="char-count" aria-live="polite"></span>
      </div>
    </div>

    <!-- ── Action buttons ─────────────────────────────────────── -->
    <div class="actions">
      <button class="btn btn--primary" id="encodeBtn">Encode →</button>
      <button class="btn btn--swap"    id="swapBtn"   aria-label="Swap input and output">⇅</button>
      <button class="btn btn--primary" id="decodeBtn">← Decode</button>
    </div>

    <div class="pane">
      <div class="pane__header">
        <span class="pane__label" id="outputLabel">Output</span>
        <div class="pane__actions">
          <button class="btn-small" id="copyOutputBtn" aria-label="Copy output">Copy</button>
          <button class="btn-small" id="downloadTxtBtn" aria-label="Download as .txt">↓ .txt</button>
        </div>
      </div>
      <div class="textarea-wrap">
        <textarea
          id="outputEl"
          class="textarea textarea--output"
          rows="5"
          spellcheck="false"
          autocorrect="off"
          readonly
          placeholder="Result will appear here…"
          aria-labelledby="outputLabel"
          aria-live="polite"
        ></textarea>
      </div>
    </div>

    <!-- ── Inline error / info ─────────────────────────────────── -->
    <div id="statusBar" class="status-bar" role="alert" aria-live="assertive"></div>

  </div><!-- /panelText -->

  <!-- ── File panel ────────────────────────────────────────────── -->
  <div id="panelFile" class="panel panel--hidden" role="tabpanel" aria-labelledby="tabFile">

    <div
      id="dropZone"
      class="drop-zone"
      role="button"
      tabindex="0"
      aria-label="Drop a file here or click to browse"
    >
      <span class="drop-zone__icon" aria-hidden="true">📂</span>
      <span class="drop-zone__text">Drop a file here<br/>or <u>click to browse</u></span>
      <input type="file" id="fileInput" class="file-input" aria-hidden="true" tabindex="-1" />
    </div>

    <div id="fileInfo" class="file-info" hidden>
      <span id="fileName" class="file-info__name"></span>
      <span id="fileSize" class="file-info__size"></span>
    </div>

    <div class="actions actions--file">
      <button class="btn btn--primary btn--full" id="encodeFileBtn" disabled>Encode File → Base64</button>
    </div>

    <div class="pane">
      <div class="pane__header">
        <span class="pane__label">Base64 Output</span>
        <div class="pane__actions">
          <button class="btn-small" id="copyFileOutputBtn" aria-label="Copy file output">Copy</button>
          <button class="btn-small" id="downloadFileTxtBtn" aria-label="Download as .txt">↓ .txt</button>
        </div>
      </div>
      <div class="textarea-wrap">
        <textarea
          id="fileOutputEl"
          class="textarea textarea--output"
          rows="5"
          spellcheck="false"
          readonly
          placeholder="Encoded file will appear here…"
          aria-live="polite"
        ></textarea>
      </div>
    </div>

    <div id="fileStatusBar" class="status-bar" role="alert" aria-live="assertive"></div>

  </div><!-- /panelFile -->

  <!-- ── Footer ────────────────────────────────────────────────── -->
  <footer class="footer">
    <span class="footer__name">Base64 Encoder / Decoder v1.0.0</span>
    <a
      class="footer__cta"
      href="https://buymeacoffee.com/ejcenteno"
      target="_blank"
      rel="noopener noreferrer"
      title="Support the developer"
    >☕ Buy me a coffee</a>
  </footer>

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