Spaces:
Sleeping
Sleeping
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Comunidad de Panoramas</title> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet"> | |
| <style> | |
| .video-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); | |
| gap: 20px; | |
| margin-top: 20px; | |
| } | |
| .video-card { | |
| background: white; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.1); | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| cursor: pointer; | |
| } | |
| .video-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 4px 16px rgba(0,0,0,0.15); | |
| } | |
| .thumbnail-container { | |
| position: relative; | |
| width: 100%; | |
| height: 180px; | |
| overflow: hidden; | |
| } | |
| .thumbnail { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform 0.3s; | |
| } | |
| .video-card:hover .thumbnail { | |
| transform: scale(1.05); | |
| } | |
| .play-overlay { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| background: rgba(0,0,0,0.7); | |
| color: white; | |
| border-radius: 50%; | |
| width: 60px; | |
| height: 60px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 24px; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .video-card:hover .play-overlay { | |
| opacity: 1; | |
| } | |
| .video-info { | |
| padding: 15px; | |
| } | |
| .video-title { | |
| font-weight: 600; | |
| margin-bottom: 8px; | |
| color: #333; | |
| } | |
| .video-meta { | |
| color: #666; | |
| font-size: 14px; | |
| } | |
| .empty-state { | |
| text-align: center; | |
| padding: 60px 20px; | |
| color: #666; | |
| } | |
| .empty-state i { | |
| font-size: 64px; | |
| margin-bottom: 20px; | |
| color: #ddd; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-light"> | |
| <div class="container py-4"> | |
| <div class="d-flex justify-content-between align-items-center mb-4"> | |
| <h1 class="mb-0">Comunidad de Panoramas</h1> | |
| <a href="{{ url_for('index') }}" class="btn btn-primary"> | |
| <i class="bi bi-plus-circle"></i> Crear Panorama | |
| </a> | |
| </div> | |
| {% with messages = get_flashed_messages() %} | |
| {% if messages %} | |
| {% for message in messages %} | |
| <div class="alert alert-success alert-dismissible fade show" role="alert"> | |
| {{ message }} | |
| <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> | |
| </div> | |
| {% endfor %} | |
| {% endif %} | |
| {% endwith %} | |
| {% if images %} | |
| <div class="video-grid"> | |
| {% for image in images %} | |
| <div class="video-card" onclick="openPanorama('{{ image.filename }}')"> <div class="thumbnail-container"> | |
| <img src="{{ url_for('static', filename=image.thumbnail) }}" | |
| class="thumbnail" | |
| alt="Panorama thumbnail"> | |
| <div class="play-overlay"> | |
| <i class="bi bi-play-fill"></i> | |
| </div> | |
| </div> | |
| <div class="video-info"> | |
| <div class="video-title">Panorama {{ loop.index }}</div> | |
| <div class="video-meta"> | |
| <i class="bi bi-eye"></i> Vista panorámica | |
| </div> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| {% else %} | |
| <div class="empty-state"> | |
| <i class="bi bi-images"></i> | |
| <h3>No hay panoramas aún</h3> | |
| <p>Sé el primero en compartir un panorama con la comunidad</p> | |
| <a href="{{ url_for('index') }}" class="btn btn-primary"> | |
| <i class="bi bi-plus-circle"></i> Crear mi primer panorama | |
| </a> | |
| </div> | |
| {% endif %} | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> | |
| <script> | |
| </script> | |
| </body> | |
| </html> |