first commit
This commit is contained in:
@@ -0,0 +1,335 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user