byteseal/index.html at main · grayguava/byteseal · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ByteSeal</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/assets/css/styles.css"/>
</head>

<body>

  <div class="card">

    <!-- ── Left panel — info only ──────────────────────────── -->
    <div class="panel-left">

      <div class="branding">
        <a href="#" class="title" id="homeLink">ByteSeal</a>
        <p class="tagline">
          Offline, browser-based file encryption<br>
          using <code>.byts</code> containers.<br>
          No servers. No accounts. No uploads.
        </p>
      </div>

      <div class="info-section">
        <p class="info-label">How it works</p>
        <div class="info-steps">
          <div class="info-step">
            <span class="info-step-num">01</span>
            <span class="info-step-text">Drop or pick any file</span>
          </div>
          <div class="info-step">
            <span class="info-step-num">02</span>
            <span class="info-step-text">Set a strong password</span>
          </div>
          <div class="info-step">
            <span class="info-step-num">03</span>
            <span class="info-step-text">Download the encrypted <code>.byts</code> container</span>
          </div>
        </div>
      </div>

      <div class="info-section">
        <p class="info-label">Container format</p>
        <div class="format-grid">
          <div class="format-cell head">8 B</div>
          <div class="format-cell head">1 B</div>
          <div class="format-cell head">16 B</div>
          <div class="format-cell head">12 B</div>
          <div class="format-cell head">—</div>
          <div class="format-cell">magic</div>
          <div class="format-cell">ver</div>
          <div class="format-cell">salt</div>
          <div class="format-cell">IV</div>
          <div class="format-cell">ciphertext</div>
        </div>
      </div>

      <div class="meta-list">
        <span class="meta-item">⬡ AES-256-GCM encryption</span>
        <span class="meta-item">⬡ PBKDF2 · 250,000 iterations</span>
        <span class="meta-item">⬡ Runs 100% in your browser</span>
        <span class="meta-item">⬡ Zero network requests</span>
      </div>

    </div>

    <!-- ── Vertical divider ────────────────────────────────── -->
    <div class="divider-v"></div>

    <!-- ── Right panel ─────────────────────────────────────── -->
    <div class="panel-right">

      <div class="mode-select-wrap">
        <div class="mode-select" id="modeSelect" role="listbox" aria-label="Select mode">

          <button class="mode-option active" data-mode="lock" role="option" aria-selected="true">
            <span class="mode-option-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
                <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
              </svg>
            </span>
            Encrypt
          </button>

          <button class="mode-option" data-mode="unlock" role="option" aria-selected="false">
            <span class="mode-option-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
                <path d="M7 11V7a5 5 0 0 1 9.9-1"/>
              </svg>
            </span>
            Decrypt
          </button>

        </div>
      </div>

      <div id="view" class="view-in"></div>

      <div class="github-link-wrap">
        <a href="https://github.com/grayguava/byteseal" target="_blank" rel="noopener" class="github-link">
          <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/>
          </svg>
          View on GitHub
        </a>
      </div>

      </div>
  </div>

    <script src="/assets/vendor/zxcvbn.js"></script>
    <script type="module" src="/assets/js/app.js"></script>

</body>
</html>