109 lines
4.8 KiB
HTML
109 lines
4.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>Image Uploaded - I2P Secure Share</title>
|
|
<link rel="stylesheet" href="/static/css/tailwind.css"/>
|
|
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
|
|
|
|
<style>
|
|
body { background-color: #1a202c; color: #cbd5e0; }
|
|
.link-box { background-color: #2d3748; border:1px solid #4a5568; word-break:break-all; }
|
|
.btn { background-color:#4299e1; transition:background-color .3s ease; }
|
|
.btn:hover { background-color:#3182ce; }
|
|
.thumbnail-container { border:2px dashed #4a5568; max-width:100%; }
|
|
.thumbnail { max-width:100%; max-height:60vh; object-fit:contain; }
|
|
.announcement-bar { background-color:#2563eb; border-bottom:1px solid #1e3a8a; }
|
|
</style>
|
|
</head>
|
|
<body class="font-sans">
|
|
|
|
{% if announcement_enabled and announcement_message %}
|
|
<div id="announcement-bar" class="announcement-bar text-white text-center p-2 relative shadow-lg">
|
|
<span>{{ announcement_message }}</span>
|
|
<button id="close-announcement" class="absolute top-0 right-0 mt-2 mr-4 text-white hover:text-gray-200 text-2xl leading-none">×</button>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="flex items-center justify-center min-h-screen py-8">
|
|
<div class="w-full max-w-2xl mx-auto p-4">
|
|
{% if password_required %}
|
|
<div class="content-container rounded-lg p-8 shadow-lg">
|
|
<h2 class="text-2xl font-semibold text-white mb-6">Enter Password to View Image</h2>
|
|
<form method="POST">
|
|
<div class="mb-6">
|
|
<label for="password" class="block text-gray-300 text-sm font-bold mb-2">Password:</label>
|
|
<input type="password" name="password" id="password"
|
|
class="w-full p-2 rounded-md text-white bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
required>
|
|
</div>
|
|
<button type="submit" class="btn w-full text-white font-bold py-3 px-5 rounded-md">Unlock Image</button>
|
|
</form>
|
|
</div>
|
|
{% else %}
|
|
<header class="text-center mb-8">
|
|
<a href="/" class="inline-block mb-4">
|
|
<img src="/static/images/stormycloud.svg"
|
|
alt="StormyCloud Logo"
|
|
style="width:550px; max-width:100%;" class="mx-auto"/>
|
|
</a>
|
|
<h1 class="text-3xl font-bold text-white">Image Uploaded Successfully</h1>
|
|
<p class="text-gray-400 mt-2 text-xl">Expires in: {{ time_left }}</p>
|
|
</header>
|
|
|
|
<main>
|
|
<div class="thumbnail-container rounded-lg p-4 mb-6 flex justify-center items-center">
|
|
<img src="/uploads/{{ filename }}"
|
|
alt="Uploaded Image" class="thumbnail rounded-md"/>
|
|
</div>
|
|
|
|
<div class="link-box rounded-lg p-4 mb-4">
|
|
<label for="share-link" class="block text-gray-300 text-sm font-bold mb-2">Direct Image Link:</label>
|
|
<div class="flex items-center space-x-2">
|
|
<input type="text" id="share-link"
|
|
class="bg-gray-700 text-white w-full p-2 border border-gray-600 rounded-md"
|
|
value="{{ request.host_url }}uploads/{{ filename }}" readonly>
|
|
<button id="copy-button"
|
|
class="btn whitespace-nowrap flex-shrink-0 text-white font-bold py-3 px-5 rounded-md">
|
|
Copy
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center mt-8">
|
|
<a href="/" class="text-blue-400 hover:text-blue-300">Upload another file</a>
|
|
</div>
|
|
<div class="text-center mt-4 text-sm">
|
|
<p class="text-gray-500">Find this service useful? <a href="/donate" class="text-blue-400 hover:underline">Consider supporting its future.</a></p>
|
|
</div>
|
|
|
|
</main>
|
|
{% endif %}
|
|
|
|
<footer class="text-center text-gray-500 mt-16 border-t border-gray-700 pt-8 pb-8">
|
|
<a href="http://stormycloud.i2p" class="hover:text-gray-400">StormyCloud</a>
|
|
<span class="mx-2">|</span>
|
|
<a href="/donate" class="hover:text-gray-400">Donate</a>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const copyBtn = document.getElementById('copy-button');
|
|
if (copyBtn) {
|
|
copyBtn.addEventListener('click', () => {
|
|
const inp = document.getElementById('share-link');
|
|
inp.select(); document.execCommand('copy');
|
|
copyBtn.textContent = 'Copied!';
|
|
setTimeout(() => copyBtn.textContent = 'Copy', 2000);
|
|
});
|
|
}
|
|
const closeBtn = document.getElementById('close-announcement');
|
|
if (closeBtn) closeBtn.addEventListener('click', () =>
|
|
document.getElementById('announcement-bar').style.display = 'none'
|
|
);
|
|
</script>
|
|
</body>
|
|
</html>
|