prowebtools/base64-encoder-decoder.html at main · crb2/prowebtools · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FYPXXL7J8"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-2FYPXXL7J8');
</script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Base64 Encoder and Decoder Online Free | Pro Web Tools</title>
    <meta name="description" content="Encode and decode Base64 text in your browser with UTF-8 support.">
    <link rel="icon" type="image/svg+xml" href="favicon-base64-encoder-decoder.svg">
    <link rel="stylesheet" href="style-win7.css">
    <style>
        body:not(.dark-mode) .theme-switch { border-color:#9fc0e2; background:linear-gradient(180deg,var(--nav-pill-1) 0%,var(--nav-pill-2) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(116,158,205,.45),0 2px 8px rgba(40,89,149,.16); }
        body:not(.dark-mode) .theme-track { background:#6f95c1; box-shadow:inset 0 1px 2px rgba(0,0,0,.2); }
        body:not(.dark-mode) .theme-thumb { background:linear-gradient(180deg,#fff 0%,#e8edf4 100%); }
        .b64-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
        .b64-grid textarea{min-height:220px;resize:vertical}
        @media (max-width:900px){.b64-grid{grid-template-columns:1fr}}
    </style>
</head>
<body>
<main class="app">
    <div class="headline-bar">
        <h1>Base64 Encoder Decoder</h1>
        <div class="tools-group">
            <button type="button" class="theme-switch" data-theme-toggle aria-label="Toggle theme"><span class="theme-icon sun" aria-hidden="true">&#9728;</span><span class="theme-track" aria-hidden="true"><span class="theme-thumb"></span></span><span class="theme-icon moon" aria-hidden="true">&#127769;</span></button>
            <details class="tools-menu"><summary class="tools-menu-trigger">All Tools</summary><div class="tools-menu-panel"></div></details>
        </div>
    </div>
    <p class="subtitle">Encode UTF-8 text to Base64 or decode Base64 back to text.</p>
    <section class="card">
        <div class="convert-actions">
            <button id="b64Encode" type="button">Encode</button>
            <button id="b64Decode" type="button" class="download-btn">Decode</button>
            <button id="b64Swap" type="button" class="download-btn">Swap</button>
            <button id="b64Copy" type="button" class="download-btn">Copy Output</button>
        </div>
        <div class="b64-grid">
            <div>
                <label for="b64Input">Input</label>
                <textarea id="b64Input" placeholder="Enter text or Base64"></textarea>
            </div>
            <div>
                <label for="b64Output">Output</label>
                <textarea id="b64Output" readonly placeholder="Result appears here"></textarea>
            </div>
        </div>
        <p id="b64Status" class="status" aria-live="polite">Enter data and choose encode or decode.</p>
        <p id="b64Meta" class="note">Input: -- | Output: --</p>
    </section>
</main>
<script src="tools-menu.js"></script>
<script src="theme.js"></script>
<script src="base64-encoder-decoder.js"></script>
</body>
</html>