You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
129 lines
5.1 KiB
129 lines
5.1 KiB
<!DOCTYPE html>
|
|
<html lang="en" data-theme="dark">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta http-equiv="cache-control" content="no-cache" />
|
|
<title>VideoMakerBot</title>
|
|
|
|
<!-- Modern Tech Stack -->
|
|
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
|
|
<style>
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: #0f172a; /* Slate 900 */
|
|
}
|
|
|
|
.glass-nav {
|
|
background: rgba(15, 23, 42, 0.8);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* Custom scrollbar for a modern look */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: #1e293b;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #334155;
|
|
border-radius: 10px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #475569;
|
|
}
|
|
|
|
/* Dotted path inputs shouldn't show default browser validation UI */
|
|
input:invalid {
|
|
box-shadow: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="min-h-screen flex flex-col">
|
|
|
|
<header class="sticky top-0 z-50 glass-nav">
|
|
<div class="container mx-auto px-4">
|
|
<div class="navbar px-0">
|
|
<div class="flex-1">
|
|
<a href="/" class="flex items-center gap-2 group">
|
|
<div class="bg-indigo-600 p-2 rounded-lg group-hover:bg-indigo-500 transition-colors">
|
|
<i data-lucide="video" class="w-5 h-5 text-white"></i>
|
|
</div>
|
|
<span class="text-xl font-bold tracking-tight text-white">VideoMakerBot</span>
|
|
</a>
|
|
</div>
|
|
<div class="flex-none gap-2">
|
|
<ul class="menu menu-horizontal px-1 gap-1">
|
|
<li><a href="/" class="rounded-lg hover:bg-white/10 text-slate-300">Library</a></li>
|
|
<li><a href="/backgrounds" class="rounded-lg hover:bg-white/10 text-slate-300">Backgrounds</a></li>
|
|
<li><a href="/settings" class="rounded-lg hover:bg-white/10 text-slate-300">Settings</a></li>
|
|
</ul>
|
|
<a href="/create" class="btn btn-indigo btn-sm ml-2 rounded-lg capitalize border-none bg-indigo-600 hover:bg-indigo-500 text-white">
|
|
<i data-lucide="plus" class="w-4 h-4"></i>
|
|
Create
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{% if get_flashed_messages() %}
|
|
<div class="container mx-auto px-4 mt-4">
|
|
{% for category, message in get_flashed_messages(with_categories=true) %}
|
|
<div class="alert {{ 'alert-error' if category == 'error' else 'alert-success' }} shadow-lg mb-2">
|
|
<i data-lucide="{{ 'alert-circle' if category == 'error' else 'check-circle' }}" class="w-5 h-5"></i>
|
|
<span>{{ message }}</span>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<main class="flex-grow">
|
|
{% block main %}{% endblock %}
|
|
</main>
|
|
|
|
<footer class="bg-slate-900 border-t border-white/5 py-12 mt-12">
|
|
<div class="container mx-auto px-4">
|
|
<div class="flex flex-col md:flex-row justify-between items-center gap-6">
|
|
<div class="flex flex-col gap-2">
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="video" class="w-5 h-5 text-indigo-500"></i>
|
|
<span class="text-lg font-semibold text-white">VideoMakerBot</span>
|
|
</div>
|
|
<p class="text-slate-400 text-sm">Automated short-form video creator.</p>
|
|
</div>
|
|
|
|
<div class="flex gap-6 text-sm text-slate-400">
|
|
<a href="https://github.com/elebumm/RedditVideoMakerBot" target="_blank" class="hover:text-white transition-colors">GitHub</a>
|
|
<a href="#" class="hover:text-white transition-colors" id="hard-reload">Hard Reload</a>
|
|
</div>
|
|
</div>
|
|
<div class="mt-8 pt-8 border-t border-white/5 text-center text-xs text-slate-500">
|
|
© 2026 VideoMakerBot. Built for speed and creativity.
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Initialize Lucide icons
|
|
lucide.createIcons();
|
|
|
|
document.getElementById("hard-reload").addEventListener("click", function (e) {
|
|
e.preventDefault();
|
|
window.location.reload(true);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|