207 lines
6.9 KiB
HTML
207 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Data Wrap/Unwrap Form</title>
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
background-color: #f9f9f9;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 100vh;
|
||
box-sizing: border-box; /* Добавлено */
|
||
}
|
||
.content {
|
||
flex: 1;
|
||
padding-bottom: 20px; /* Добавлено */
|
||
}
|
||
.form-container {
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
||
margin-bottom: 15px; /* Уменьшено */
|
||
}
|
||
h1 {
|
||
color: #333;
|
||
text-align: center;
|
||
margin-bottom: 25px; /* Уменьшено */
|
||
font-size: 1.8em; /* Добавлено */
|
||
}
|
||
textarea {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
min-height: 120px; /* Уменьшено */
|
||
padding: 10px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
font-family: monospace;
|
||
resize: vertical;
|
||
box-sizing: border-box; /* Добавлено */
|
||
}
|
||
input[type="file"] {
|
||
margin: 8px 0; /* Уменьшено */
|
||
width: 100%; /* Добавлено */
|
||
}
|
||
input[type="number"] {
|
||
width: 60px;
|
||
padding: 5px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
}
|
||
button {
|
||
padding: 8px 16px;
|
||
background: #4CAF50;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
margin: 4px; /* Уменьшено */
|
||
transition: background 0.3s;
|
||
}
|
||
button:hover {
|
||
background: #45a049;
|
||
}
|
||
hr {
|
||
border: 0;
|
||
height: 1px;
|
||
background: #ddd;
|
||
margin: 15px 0; /* Уменьшено */
|
||
}
|
||
.form-title {
|
||
font-weight: bold;
|
||
margin-bottom: 8px; /* Уменьшено */
|
||
color: #555;
|
||
font-size: 0.95em; /* Добавлено */
|
||
}
|
||
.button-group {
|
||
text-align: right;
|
||
margin-top: 8px; /* Уменьшено */
|
||
}
|
||
footer {
|
||
text-align: center;
|
||
padding: 12px 0;
|
||
color: #777;
|
||
font-size: 0.85em; /* Уменьшено */
|
||
border-top: 1px solid #eee;
|
||
background: white;
|
||
margin-top: auto; /* Важно для прижатия */
|
||
position: sticky;
|
||
bottom: 0;
|
||
}
|
||
.footer-links {
|
||
margin-top: 6px; /* Уменьшено */
|
||
}
|
||
.footer-links a {
|
||
color: #4CAF50;
|
||
text-decoration: none;
|
||
margin: 0 6px; /* Уменьшено */
|
||
font-size: 0.85em; /* Уменьшено */
|
||
}
|
||
.footer-links a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
@media (max-width: 600px) {
|
||
body {
|
||
padding: 15px;
|
||
}
|
||
.form-container {
|
||
padding: 15px;
|
||
}
|
||
h1 {
|
||
font-size: 1.5em;
|
||
margin-bottom: 20px;
|
||
}
|
||
button {
|
||
padding: 6px 12px;
|
||
font-size: 0.9em;
|
||
}
|
||
.btn-link {
|
||
background: #9C27B0;
|
||
}
|
||
.btn-link:hover {
|
||
background: #7B1FA2;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="content">
|
||
<!-- <h1>Сервис передачи секретов</h1> -->
|
||
|
||
<div class="form-container">
|
||
<div class="form-title">Введите текст или токен:</div>
|
||
<form method="post" action="{{.URL}}/wrap">
|
||
<textarea id="tokenTextarea" name="input_token" maxlength="{{.MAXTEXTLENGTH}}" placeholder="Введите текст или токен...">{{.TEXT}}</textarea>
|
||
<div class="button-group">
|
||
<button type="submit">Зашифровать</button>
|
||
<button type="submit" formaction="{{.URL}}/unwrap">Расшифровать</button>
|
||
<button type="button" class="btn-copy" onclick="copyToken()">Скопировать</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="form-container">
|
||
<div class="form-title">Выберите файл (до 100кб):</div>
|
||
<form method="post" action="{{.URL}}/wrapfile" enctype="multipart/form-data">
|
||
<input type="file" name="file" id="file" required>
|
||
<div class="button-group">
|
||
<button type="submit">Зашифровать файл</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="form-container">
|
||
<div class="form-title">Генерация пароля:</div>
|
||
<form method="post" action="{{.URL}}/genpassword">
|
||
<div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;">
|
||
<div style="margin-bottom: 8px;">
|
||
Длина пароля (от 15 до {{.MAXTEXTLENGTH}}):
|
||
<input type="number" name="passlength" min="15" max="{{.MAXTEXTLENGTH}}" value="32">
|
||
</div>
|
||
<button type="submit" style="margin-left: auto;">Сгенерировать пароль</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<footer>
|
||
<div>© <script>document.write(new Date().getFullYear())</script> SVK</div>
|
||
</footer>
|
||
|
||
|
||
<script>
|
||
function copyToken() {
|
||
const textarea = document.getElementById('tokenTextarea');
|
||
const fullText = textarea.value;
|
||
const token = fullText.split('\n')[0].trim();
|
||
|
||
copyToClipboard(token, '.btn-copy');
|
||
}
|
||
|
||
function copyToClipboard(text, buttonSelector) {
|
||
const tempInput = document.createElement('input');
|
||
tempInput.value = text;
|
||
document.body.appendChild(tempInput);
|
||
tempInput.select();
|
||
|
||
document.execCommand('copy');
|
||
document.body.removeChild(tempInput);
|
||
|
||
const copyBtn = document.querySelector(buttonSelector);
|
||
const originalText = copyBtn.textContent;
|
||
copyBtn.textContent = 'Скопировано!';
|
||
|
||
setTimeout(() => {
|
||
copyBtn.textContent = originalText;
|
||
}, 2000);
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|