Hugging Face's logo

Spaces:
Typhoon-project
/
ML-predictor
Runtime error

App Files Community
ihateplasticbottles1001 commited on
Commit
3a7719b
·
verified ·
1 Parent(s): 50036b2

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +61 -39
templates/index.html CHANGED
@@ -1,60 +1,82 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
- <title>Trash Project</title>
 
 
6
  <style>
7
- body {
 
8
  margin: 0;
9
- font-family: Arial, sans-serif;
10
- background-color: #f4f4f4;
11
  }
12
 
13
- .container {
14
- position: relative;
15
- width: 1920px;
16
- height: 1280px;
17
- margin: 40px auto;
18
- background-image: url("{{ url_for('static', filename='Newlayout.png') }}");
19
- background-size: cover;
20
- background-repeat: no-repeat;
21
- box-shadow: 0 0 10px rgba(0,0,0,0.2);
22
- border-radius: 8px;
 
23
  }
24
 
25
- .btn {
26
- position: absolute;
27
- padding: 10px 20px;
28
- background-color: rgba(255, 255, 255, 0.85);
29
- border: 2px solid #444;
30
- border-radius: 12px;
31
- font-size: 14px;
32
- cursor: pointer;
33
- transition: 0.2s;
34
  }
35
 
36
- .btn:hover {
37
- background-color: #d1f0d1;
 
 
 
38
  }
39
 
40
- #heatmap-btn {
41
- top: 250px;
42
- left: 120px;
43
  }
44
 
45
- #predict-btn {
46
- bottom: 40px;
47
- right: 50px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
48
  }
49
  </style>
50
  </head>
51
  <body>
52
-
53
- <div class="container">
54
- <button class="btn" id="heatmap-btn" onclick="alert('🗺️ Heatmap launched!')">Trash Heatmap</button>
55
- <button class="btn" id="predict-btn" onclick="alert('📊 Predictor ready!')">Amount Predictor</button>
56
- </div>
57
-
 
 
 
 
 
58
  </body>
59
  </html>
60
-
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Crete Beach Clean Project</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
8
  <style>
9
+ * {
10
+ box-sizing: border-box;
11
  margin: 0;
12
+ padding: 0;
 
13
  }
14
 
15
+ body {
16
+ font-family: 'Inter', sans-serif;
17
+ background: linear-gradient(to right, #4CB8C4, #3CD3AD);
18
+ color: #fff;
19
+ display: flex;
20
+ flex-direction: column;
21
+ align-items: center;
22
+ justify-content: center;
23
+ height: 100vh;
24
+ text-align: center;
25
+ padding: 2rem;
26
  }
27
 
28
+ h1 {
29
+ font-size: 3rem;
30
+ margin-bottom: 1rem;
31
+ font-weight: 800;
 
 
 
 
 
32
  }
33
 
34
+ p {
35
+ font-size: 1.25rem;
36
+ max-width: 600px;
37
+ margin-bottom: 2.5rem;
38
+ line-height: 1.6;
39
  }
40
 
41
+ .links {
42
+ display: flex;
43
+ gap: 2rem;
44
  }
45
 
46
+ a {
47
+ background: rgba(255, 255, 255, 0.1);
48
+ padding: 1rem 2rem;
49
+ border-radius: 1rem;
50
+ color: #fff;
51
+ text-decoration: none;
52
+ font-weight: 600;
53
+ transition: background 0.3s, transform 0.2s;
54
+ }
55
+
56
+ a:hover {
57
+ background: rgba(255, 255, 255, 0.2);
58
+ transform: translateY(-3px);
59
+ }
60
+
61
+ footer {
62
+ position: absolute;
63
+ bottom: 1rem;
64
+ font-size: 0.9rem;
65
+ color: rgba(255, 255, 255, 0.7);
66
  }
67
  </style>
68
  </head>
69
  <body>
70
+ <h1>Protecting Crete's Beaches</h1>
71
+ <p>
72
+ 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).
73
+ </p>
74
+ <div class="links">
75
+ <a href="/heatmap">🌍 View Heatmap</a>
76
+ <a href="/predicter">🔮 Predict Trash Levels</a>
77
+ </div>
78
+ <footer>
79
+ Created for the Laskaridis Foundation
80
+ </footer>
81
  </body>
82
  </html>