Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <title>Galeri Angkatan</title> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <style> | |
| .loading-screen { | |
| position: fixed; | |
| top: 0; left: 0; width: 100%; height: 100%; | |
| background: black; color: white; | |
| display: flex; justify-content: center; align-items: center; | |
| z-index: 9999; | |
| } | |
| .hidden { display: none; } | |
| .photo-card { margin-bottom: 20px; } | |
| .photo-card img { height: 200px; object-fit: cover; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="loading" class="loading-screen"> | |
| <div class="text-center"> | |
| <h3>Loading...</h3> | |
| <div id="slideshow" class="mb-3"></div> | |
| <div class="spinner-border"></div> | |
| </div> | |
| </div> | |
| <nav class="navbar navbar-dark bg-dark"> | |
| <div class="container"> | |
| <a class="navbar-brand" href="/">Galeri Angkatan</a> | |
| <div> | |
| {% if current_user.is_authenticated %} | |
| <a class="btn btn-outline-light btn-sm" href="/logout">Logout</a> | |
| {% if current_user.is_admin %} | |
| <a class="btn btn-primary btn-sm" href="/admin">Admin</a> | |
| {% endif %} | |
| {% else %} | |
| <a class="btn btn-outline-light btn-sm" href="/login">Login</a> | |
| {% endif %} | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="container mt-3"> | |
| {% with messages = get_flashed_messages() %} | |
| {% if messages %} | |
| {% for msg in messages %} | |
| <div class="alert alert-info">{{ msg }}</div> | |
| {% endfor %} | |
| {% endif %} | |
| {% endwith %} | |
| </div> | |
| <main class="container my-4"> | |
| {% block content %}{% endblock %} | |
| </main> | |
| <script> | |
| // Loading screen | |
| fetch('/slideshow') | |
| .then(r => r.json()) | |
| .then(photos => { | |
| if(photos.length) { | |
| document.getElementById('slideshow').innerHTML = | |
| `<img src="/static/uploads/${photos[0]}" style="max-width:300px;">`; | |
| } | |
| }); | |
| setTimeout(() => { | |
| document.getElementById('loading').classList.add('hidden'); | |
| }, 2000); | |
| </script> | |
| </body> | |
| </html> |