Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Crete Beach Clean Project</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet"> | |
| <style> | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: linear-gradient(to right, #4CB8C4, #3CD3AD); | |
| color: #fff; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100vh; | |
| text-align: center; | |
| padding: 2rem; | |
| } | |
| h1 { | |
| font-size: 3rem; | |
| margin-bottom: 1rem; | |
| font-weight: 800; | |
| } | |
| p { | |
| font-size: 1.25rem; | |
| max-width: 600px; | |
| margin-bottom: 2.5rem; | |
| line-height: 1.6; | |
| } | |
| .links { | |
| display: flex; | |
| gap: 2rem; | |
| } | |
| a { | |
| background: rgba(255, 255, 255, 0.1); | |
| padding: 1rem 2rem; | |
| border-radius: 1rem; | |
| color: #fff; | |
| text-decoration: none; | |
| font-weight: 600; | |
| transition: background 0.3s, transform 0.2s; | |
| } | |
| a:hover { | |
| background: rgba(255, 255, 255, 0.2); | |
| transform: translateY(-3px); | |
| } | |
| footer { | |
| position: absolute; | |
| bottom: 1rem; | |
| font-size: 0.9rem; | |
| color: rgba(255, 255, 255, 0.7); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Protecting Crete's Beaches</h1> | |
| <p> | |
| We've built a tool to help predict and visualize trash accumulation along Crete's beautiful coastlines. Use our heatmap or predictive model to view historical trash collection data or predict the amount of trash on a beach (to decide upon number of bags / personnel to take on a cleanup). | |
| </p> | |
| <div class="links"> | |
| <a href="/heatmap">🌍 View Heatmap</a> | |
| <a href="/predicter">🔮 Predict Trash Levels</a> | |
| </div> | |
| <footer> | |
| Created for the Laskaridis Foundation | |
| </footer> | |
| </body> | |
| </html> | |