335 lines
6.8 KiB
HTML
335 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1.0"
|
|
>
|
|
|
|
<title>Steg Tool</title>
|
|
|
|
<link
|
|
rel="stylesheet"
|
|
href="/style.css"
|
|
>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<main class="container">
|
|
|
|
<header class="header">
|
|
<h1>Steg Tool</h1>
|
|
|
|
<p>
|
|
Hide messages or files inside PNG images.
|
|
</p>
|
|
</header>
|
|
|
|
|
|
<!-- ENCODE -->
|
|
|
|
<section class="card">
|
|
|
|
<div class="card-header">
|
|
<h2>Encode</h2>
|
|
|
|
<p>
|
|
Hide a message or file inside a PNG.
|
|
</p>
|
|
</div>
|
|
|
|
|
|
<form id="encode-form">
|
|
|
|
<div class="form-group">
|
|
|
|
<label for="encode-image">
|
|
Cover image
|
|
</label>
|
|
|
|
<div
|
|
id="encode-dropzone"
|
|
class="dropzone"
|
|
tabindex="0"
|
|
>
|
|
|
|
<input
|
|
id="encode-image"
|
|
type="file"
|
|
accept="image/png"
|
|
hidden
|
|
>
|
|
|
|
<div class="dropzone-icon">
|
|
↑
|
|
</div>
|
|
|
|
<strong>
|
|
Choose a PNG
|
|
</strong>
|
|
|
|
<span>
|
|
or drag and drop one here
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<div
|
|
id="encode-image-info"
|
|
class="image-info hidden"
|
|
></div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
<span class="label">
|
|
Payload
|
|
</span>
|
|
|
|
<div class="mode-selector">
|
|
|
|
<label class="mode-option">
|
|
|
|
<input
|
|
type="radio"
|
|
name="encode-mode"
|
|
value="message"
|
|
checked
|
|
>
|
|
|
|
<span>Message</span>
|
|
|
|
</label>
|
|
|
|
|
|
<label class="mode-option">
|
|
|
|
<input
|
|
type="radio"
|
|
name="encode-mode"
|
|
value="file"
|
|
>
|
|
|
|
<span>File</span>
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
id="message-section"
|
|
class="form-group"
|
|
>
|
|
|
|
<label for="message">
|
|
Message
|
|
</label>
|
|
|
|
<textarea
|
|
id="message"
|
|
rows="6"
|
|
placeholder="Enter your secret message..."
|
|
></textarea>
|
|
|
|
<div
|
|
id="message-size"
|
|
class="field-hint"
|
|
>
|
|
0 characters
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
id="file-section"
|
|
class="form-group hidden"
|
|
>
|
|
|
|
<label for="secret-file">
|
|
Secret file
|
|
</label>
|
|
|
|
<input
|
|
id="secret-file"
|
|
type="file"
|
|
>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
<label for="encode-password">
|
|
Password
|
|
<span class="optional">
|
|
optional
|
|
</span>
|
|
</label>
|
|
|
|
<input
|
|
id="encode-password"
|
|
type="password"
|
|
placeholder="Leave blank for no encryption"
|
|
autocomplete="new-password"
|
|
>
|
|
|
|
<div class="field-hint">
|
|
Without a password, anyone with the PNG
|
|
can extract the payload.
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<button
|
|
type="submit"
|
|
id="encode-button"
|
|
class="button"
|
|
>
|
|
Encode PNG
|
|
</button>
|
|
|
|
</form>
|
|
|
|
|
|
<div
|
|
id="encode-status"
|
|
class="status"
|
|
></div>
|
|
|
|
</section>
|
|
|
|
|
|
<!-- DECODE -->
|
|
|
|
<section class="card">
|
|
|
|
<div class="card-header">
|
|
<h2>Decode</h2>
|
|
|
|
<p>
|
|
Extract a hidden message or file from a PNG.
|
|
</p>
|
|
</div>
|
|
|
|
|
|
<form id="decode-form">
|
|
|
|
<div class="form-group">
|
|
|
|
<label for="decode-image">
|
|
Encoded PNG
|
|
</label>
|
|
|
|
<div
|
|
id="decode-dropzone"
|
|
class="dropzone"
|
|
tabindex="0"
|
|
>
|
|
|
|
<input
|
|
id="decode-image"
|
|
type="file"
|
|
accept="image/png"
|
|
hidden
|
|
>
|
|
|
|
<div class="dropzone-icon">
|
|
↑
|
|
</div>
|
|
|
|
<strong>
|
|
Choose an encoded PNG
|
|
</strong>
|
|
|
|
<span>
|
|
or drag and drop one here
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<div
|
|
id="decode-image-info"
|
|
class="image-info hidden"
|
|
></div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
<label for="decode-password">
|
|
Password
|
|
<span class="optional">
|
|
optional
|
|
</span>
|
|
</label>
|
|
|
|
<input
|
|
id="decode-password"
|
|
type="password"
|
|
placeholder="Leave blank if not encrypted"
|
|
autocomplete="current-password"
|
|
>
|
|
|
|
</div>
|
|
|
|
|
|
<button
|
|
type="submit"
|
|
id="decode-button"
|
|
class="button"
|
|
>
|
|
Decode PNG
|
|
</button>
|
|
|
|
</form>
|
|
|
|
|
|
<div
|
|
id="decode-status"
|
|
class="status"
|
|
></div>
|
|
|
|
|
|
<div
|
|
id="decoded-message"
|
|
class="result hidden"
|
|
>
|
|
|
|
<div class="result-header">
|
|
|
|
<h3>Decoded message</h3>
|
|
|
|
<button
|
|
id="copy-message"
|
|
type="button"
|
|
class="secondary-button"
|
|
>
|
|
Copy
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<pre id="message-output"></pre>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</main>
|
|
|
|
|
|
<script src="/app.js"></script>
|
|
|
|
</body>
|
|
</html> |