Spaces:
Running
Running
Add 3 files
Browse files- README.md +7 -5
- index.html +1124 -19
- prompts.txt +2 -0
README.md
CHANGED
@@ -1,10 +1,12 @@
|
|
1 |
---
|
2 |
-
title:
|
3 |
-
emoji:
|
4 |
-
colorFrom:
|
5 |
-
colorTo:
|
6 |
sdk: static
|
7 |
pinned: false
|
|
|
|
|
8 |
---
|
9 |
|
10 |
-
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
|
|
1 |
---
|
2 |
+
title: privaqucolony2
|
3 |
+
emoji: 🐳
|
4 |
+
colorFrom: pink
|
5 |
+
colorTo: pink
|
6 |
sdk: static
|
7 |
pinned: false
|
8 |
+
tags:
|
9 |
+
- deepsite
|
10 |
---
|
11 |
|
12 |
+
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
index.html
CHANGED
@@ -1,19 +1,1124 @@
|
|
1 |
-
<!
|
2 |
-
<html>
|
3 |
-
|
4 |
-
|
5 |
-
|
6 |
-
|
7 |
-
|
8 |
-
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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>Aquapod Colony | Hive of Activity - Prefecture Edition</title>
|
7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
8 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
9 |
+
<style>
|
10 |
+
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');
|
11 |
+
|
12 |
+
body {
|
13 |
+
font-family: 'Montserrat', sans-serif;
|
14 |
+
background-color: #f0f8ff;
|
15 |
+
color: #1a365d;
|
16 |
+
scroll-behavior: smooth;
|
17 |
+
}
|
18 |
+
|
19 |
+
.title-font {
|
20 |
+
font-family: 'Playfair Display', serif;
|
21 |
+
}
|
22 |
+
|
23 |
+
.hero-gradient {
|
24 |
+
background: linear-gradient(135deg, #0077be 0%, #00b4d8 50%, #90e0ef 100%);
|
25 |
+
}
|
26 |
+
|
27 |
+
.wave-shape {
|
28 |
+
position: absolute;
|
29 |
+
bottom: 0;
|
30 |
+
left: 0;
|
31 |
+
width: 100%;
|
32 |
+
overflow: hidden;
|
33 |
+
line-height: 0;
|
34 |
+
}
|
35 |
+
|
36 |
+
.wave-shape svg {
|
37 |
+
position: relative;
|
38 |
+
display: block;
|
39 |
+
width: calc(100% + 1.3px);
|
40 |
+
height: 150px;
|
41 |
+
}
|
42 |
+
|
43 |
+
.wave-shape .shape-fill {
|
44 |
+
fill: #f0f8ff;
|
45 |
+
}
|
46 |
+
|
47 |
+
.aquapod-card {
|
48 |
+
transition: all 0.3s ease;
|
49 |
+
box-shadow: 0 10px 15px -3px rgba(0, 119, 190, 0.1);
|
50 |
+
}
|
51 |
+
|
52 |
+
.aquapod-card:hover {
|
53 |
+
transform: translateY(-5px);
|
54 |
+
box-shadow: 0 20px 25px -5px rgba(0, 119, 190, 0.2);
|
55 |
+
}
|
56 |
+
|
57 |
+
.feature-icon {
|
58 |
+
width: 60px;
|
59 |
+
height: 60px;
|
60 |
+
display: flex;
|
61 |
+
align-items: center;
|
62 |
+
justify-content: center;
|
63 |
+
border-radius: 50%;
|
64 |
+
background-color: rgba(0, 180, 216, 0.1);
|
65 |
+
margin-bottom: 1rem;
|
66 |
+
}
|
67 |
+
|
68 |
+
.marine-bg {
|
69 |
+
background-color: #1a365d;
|
70 |
+
}
|
71 |
+
|
72 |
+
.ocean-text {
|
73 |
+
color: #0077be;
|
74 |
+
}
|
75 |
+
|
76 |
+
.honeycomb {
|
77 |
+
display: flex;
|
78 |
+
flex-wrap: wrap;
|
79 |
+
width: 600px;
|
80 |
+
margin: 0 auto;
|
81 |
+
overflow: hidden;
|
82 |
+
padding: 20px 0;
|
83 |
+
}
|
84 |
+
|
85 |
+
.honeycomb-cell {
|
86 |
+
position: relative;
|
87 |
+
width: 200px;
|
88 |
+
height: 173.21px;
|
89 |
+
margin: 0 -30px 0;
|
90 |
+
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
91 |
+
transition: all 0.3s ease;
|
92 |
+
}
|
93 |
+
|
94 |
+
.honeycomb-cell:hover {
|
95 |
+
transform: scale(1.1);
|
96 |
+
z-index: 10;
|
97 |
+
}
|
98 |
+
|
99 |
+
.honeycomb-cell__content {
|
100 |
+
position: absolute;
|
101 |
+
top: 0;
|
102 |
+
left: 0;
|
103 |
+
width: 100%;
|
104 |
+
height: 100%;
|
105 |
+
display: flex;
|
106 |
+
flex-direction: column;
|
107 |
+
justify-content: center;
|
108 |
+
align-items: center;
|
109 |
+
text-align: center;
|
110 |
+
padding: 10px;
|
111 |
+
box-sizing: border-box;
|
112 |
+
}
|
113 |
+
|
114 |
+
.honeycomb-cell__title {
|
115 |
+
font-weight: 700;
|
116 |
+
margin-bottom: 5px;
|
117 |
+
font-size: 1.2rem;
|
118 |
+
}
|
119 |
+
|
120 |
+
.honeycomb-cell__description {
|
121 |
+
font-size: 0.8rem;
|
122 |
+
}
|
123 |
+
|
124 |
+
.tier-1 {
|
125 |
+
background-color: #90e0ef;
|
126 |
+
}
|
127 |
+
|
128 |
+
.tier-2 {
|
129 |
+
background-color: #00b4d8;
|
130 |
+
color: white;
|
131 |
+
}
|
132 |
+
|
133 |
+
.tier-3 {
|
134 |
+
background-color: #0077be;
|
135 |
+
color: white;
|
136 |
+
}
|
137 |
+
|
138 |
+
.aqua-oasis {
|
139 |
+
background-color: #1a365d;
|
140 |
+
color: white;
|
141 |
+
}
|
142 |
+
|
143 |
+
.honeycomb-container {
|
144 |
+
position: relative;
|
145 |
+
width: 100%;
|
146 |
+
display: flex;
|
147 |
+
justify-content: center;
|
148 |
+
margin: 40px 0;
|
149 |
+
}
|
150 |
+
|
151 |
+
.honeycomb-legend {
|
152 |
+
display: flex;
|
153 |
+
justify-content: center;
|
154 |
+
margin: 20px 0;
|
155 |
+
gap: 20px;
|
156 |
+
}
|
157 |
+
|
158 |
+
.legend-item {
|
159 |
+
display: flex;
|
160 |
+
align-items: center;
|
161 |
+
gap: 8px;
|
162 |
+
}
|
163 |
+
|
164 |
+
.legend-color {
|
165 |
+
width: 20px;
|
166 |
+
height: 20px;
|
167 |
+
border-radius: 4px;
|
168 |
+
}
|
169 |
+
|
170 |
+
/* 3D card effect */
|
171 |
+
.card-3d {
|
172 |
+
transform-style: preserve-3d;
|
173 |
+
transition: transform 0.5s ease;
|
174 |
+
}
|
175 |
+
|
176 |
+
.card-3d:hover {
|
177 |
+
transform: rotateY(10deg) rotateX(5deg) translateY(-5px);
|
178 |
+
}
|
179 |
+
|
180 |
+
/* Floating button */
|
181 |
+
.floating-btn {
|
182 |
+
position: fixed;
|
183 |
+
bottom: 30px;
|
184 |
+
right: 30px;
|
185 |
+
width: 60px;
|
186 |
+
height: 60px;
|
187 |
+
border-radius: 50%;
|
188 |
+
background-color: #0077be;
|
189 |
+
color: white;
|
190 |
+
display: flex;
|
191 |
+
align-items: center;
|
192 |
+
justify-content: center;
|
193 |
+
box-shadow: 0 4px 20px rgba(0, 119, 190, 0.3);
|
194 |
+
cursor: pointer;
|
195 |
+
z-index: 100;
|
196 |
+
transition: all 0.3s ease;
|
197 |
+
}
|
198 |
+
|
199 |
+
.floating-btn:hover {
|
200 |
+
transform: scale(1.1);
|
201 |
+
background-color: #005f9e;
|
202 |
+
}
|
203 |
+
|
204 |
+
.floating-btn i {
|
205 |
+
font-size: 24px;
|
206 |
+
}
|
207 |
+
|
208 |
+
/* Modal */
|
209 |
+
.modal {
|
210 |
+
display: none;
|
211 |
+
position: fixed;
|
212 |
+
top: 0;
|
213 |
+
left: 0;
|
214 |
+
width: 100%;
|
215 |
+
height: 100%;
|
216 |
+
background-color: rgba(0, 0, 0, 0.7);
|
217 |
+
z-index: 200;
|
218 |
+
overflow-y: auto;
|
219 |
+
}
|
220 |
+
|
221 |
+
.modal-content {
|
222 |
+
background-color: white;
|
223 |
+
margin: 5% auto;
|
224 |
+
padding: 30px;
|
225 |
+
border-radius: 10px;
|
226 |
+
width: 80%;
|
227 |
+
max-width: 800px;
|
228 |
+
position: relative;
|
229 |
+
animation: modalopen 0.5s;
|
230 |
+
}
|
231 |
+
|
232 |
+
@keyframes modalopen {
|
233 |
+
from {opacity: 0; transform: translateY(-50px);}
|
234 |
+
to {opacity: 1; transform: translateY(0);}
|
235 |
+
}
|
236 |
+
|
237 |
+
.close-btn {
|
238 |
+
position: absolute;
|
239 |
+
top: 15px;
|
240 |
+
right: 15px;
|
241 |
+
font-size: 24px;
|
242 |
+
cursor: pointer;
|
243 |
+
color: #777;
|
244 |
+
}
|
245 |
+
|
246 |
+
.close-btn:hover {
|
247 |
+
color: #333;
|
248 |
+
}
|
249 |
+
</style>
|
250 |
+
</head>
|
251 |
+
<body>
|
252 |
+
<!-- Navigation -->
|
253 |
+
<nav class="bg-white shadow-lg fixed w-full z-50">
|
254 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
255 |
+
<div class="flex justify-between h-16">
|
256 |
+
<div class="flex items-center">
|
257 |
+
<div class="flex-shrink-0 flex items-center">
|
258 |
+
<i class="fas fa-honeycomb text-3xl ocean-text mr-2"></i>
|
259 |
+
<span class="title-font text-xl font-semibold ocean-text">Aquapod Hive</span>
|
260 |
+
</div>
|
261 |
+
</div>
|
262 |
+
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
|
263 |
+
<a href="#home" class="nav-link text-gray-700 hover:text-blue-900 px-3 py-2 text-sm font-medium">Home</a>
|
264 |
+
<a href="#structure" class="nav-link text-gray-700 hover:text-blue-900 px-3 py-2 text-sm font-medium">Hive Structure</a>
|
265 |
+
<a href="#tiers" class="nav-link text-gray-700 hover:text-blue-900 px-3 py-2 text-sm font-medium">Prefecture Tiers</a>
|
266 |
+
<a href="#benefits" class="nav-link text-gray-700 hover:text-blue-900 px-3 py-2 text-sm font-medium">Benefits</a>
|
267 |
+
<a href="#contact" class="nav-link text-gray-700 hover:text-blue-900 px-3 py-2 text-sm font-medium">Contact</a>
|
268 |
+
</div>
|
269 |
+
<div class="flex items-center md:hidden">
|
270 |
+
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-blue-900 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button">
|
271 |
+
<span class="sr-only">Open main menu</span>
|
272 |
+
<i class="fas fa-bars"></i>
|
273 |
+
</button>
|
274 |
+
</div>
|
275 |
+
</div>
|
276 |
+
</div>
|
277 |
+
|
278 |
+
<!-- Mobile menu -->
|
279 |
+
<div class="hidden md:hidden bg-white shadow-lg" id="mobile-menu">
|
280 |
+
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
281 |
+
<a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-900 hover:bg-gray-50">Home</a>
|
282 |
+
<a href="#structure" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-900 hover:bg-gray-50">Hive Structure</a>
|
283 |
+
<a href="#tiers" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-900 hover:bg-gray-50">Prefecture Tiers</a>
|
284 |
+
<a href="#benefits" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-900 hover:bg-gray-50">Benefits</a>
|
285 |
+
<a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-900 hover:bg-gray-50">Contact</a>
|
286 |
+
</div>
|
287 |
+
</div>
|
288 |
+
</nav>
|
289 |
+
|
290 |
+
<!-- Hero Section -->
|
291 |
+
<section id="home" class="hero-gradient pt-24 pb-32 relative overflow-hidden">
|
292 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
293 |
+
<div class="lg:grid lg:grid-cols-12 lg:gap-8">
|
294 |
+
<div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex lg:items-center">
|
295 |
+
<div>
|
296 |
+
<h1 class="mt-4 text-4xl tracking-tight font-extrabold text-white sm:mt-5 sm:leading-none lg:mt-6 lg:text-5xl xl:text-6xl title-font">
|
297 |
+
<span class="block">Aquapod Hive</span>
|
298 |
+
<span class="block">Prefecture Edition</span>
|
299 |
+
</h1>
|
300 |
+
<p class="mt-3 text-base text-blue-100 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
|
301 |
+
Experience the future of sustainable ocean living with our innovative hexagonal prefecture system, inspired by nature's perfect design.
|
302 |
+
</p>
|
303 |
+
<div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
|
304 |
+
<div class="rounded-md shadow">
|
305 |
+
<a href="#structure" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-white hover:bg-blue-50 md:py-4 md:text-lg md:px-10">
|
306 |
+
Explore Hive Structure
|
307 |
+
</a>
|
308 |
+
</div>
|
309 |
+
</div>
|
310 |
+
</div>
|
311 |
+
</div>
|
312 |
+
<div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
|
313 |
+
<div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md card-3d">
|
314 |
+
<div class="relative block w-full bg-white rounded-lg overflow-hidden">
|
315 |
+
<img class="w-full" src="aquapod.jpg" alt="Aquapod structure">
|
316 |
+
<div class="absolute inset-0 bg-blue-900 opacity-20"></div>
|
317 |
+
</div>
|
318 |
+
</div>
|
319 |
+
</div>
|
320 |
+
</div>
|
321 |
+
</div>
|
322 |
+
<div class="wave-shape">
|
323 |
+
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
|
324 |
+
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21, 0,0,0,321.39,56.44Z" class="shape-fill"></path>
|
325 |
+
</svg>
|
326 |
+
</div>
|
327 |
+
</section>
|
328 |
+
|
329 |
+
<!-- Hive Structure Section -->
|
330 |
+
<section id="structure" class="py-20 bg-white">
|
331 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
332 |
+
<div class="text-center">
|
333 |
+
<h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl title-font">
|
334 |
+
Hexagonal Hive Structure
|
335 |
+
</h2>
|
336 |
+
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
|
337 |
+
Our innovative prefecture system organizes the Aquapod into efficient hexagonal zones, creating a harmonious and functional community.
|
338 |
+
</p>
|
339 |
+
</div>
|
340 |
+
|
341 |
+
<div class="honeycomb-container">
|
342 |
+
<div class="honeycomb">
|
343 |
+
<!-- Tier 1 - Outer Ring (Harmony) -->
|
344 |
+
<div class="honeycomb-cell tier-1">
|
345 |
+
<div class="honeycomb-cell__content">
|
346 |
+
<div class="honeycomb-cell__title">Harmony A1</div>
|
347 |
+
<div class="honeycomb-cell__description">1-3 Bells</div>
|
348 |
+
</div>
|
349 |
+
</div>
|
350 |
+
<div class="honeycomb-cell tier-1">
|
351 |
+
<div class="honeycomb-cell__content">
|
352 |
+
<div class="honeycomb-cell__title">Harmony B2</div>
|
353 |
+
<div class="honeycomb-cell__description">1-3 Bells</div>
|
354 |
+
</div>
|
355 |
+
</div>
|
356 |
+
<div class="honeycomb-cell tier-1">
|
357 |
+
<div class="honeycomb-cell__content">
|
358 |
+
<div class="honeycomb-cell__title">Harmony C3</div>
|
359 |
+
<div class="honeycomb-cell__description">1-3 Bells</div>
|
360 |
+
</div>
|
361 |
+
</div>
|
362 |
+
|
363 |
+
<!-- Tier 2 - Middle Ring (Industry) -->
|
364 |
+
<div class="honeycomb-cell tier-2">
|
365 |
+
<div class="honeycomb-cell__content">
|
366 |
+
<div class="honeycomb-cell__title">Industry D4</div>
|
367 |
+
<div class="honeycomb-cell__description">4-6 Bells</div>
|
368 |
+
</div>
|
369 |
+
</div>
|
370 |
+
<div class="honeycomb-cell tier-2">
|
371 |
+
<div class="honeycomb-cell__content">
|
372 |
+
<div class="honeycomb-cell__title">Industry E5</div>
|
373 |
+
<div class="honeycomb-cell__description">4-6 Bells</div>
|
374 |
+
</div>
|
375 |
+
</div>
|
376 |
+
|
377 |
+
<!-- Aqua Oasis (Central Hub) -->
|
378 |
+
<div class="honeycomb-cell aqua-oasis">
|
379 |
+
<div class="honeycomb-cell__content">
|
380 |
+
<div class="honeycomb-cell__title">Aqua Oasis</div>
|
381 |
+
<div class="honeycomb-cell__description">Relaxation & Activities</div>
|
382 |
+
</div>
|
383 |
+
</div>
|
384 |
+
|
385 |
+
<!-- Tier 2 - Middle Ring (Industry) -->
|
386 |
+
<div class="honeycomb-cell tier-2">
|
387 |
+
<div class="honeycomb-cell__content">
|
388 |
+
<div class="honeycomb-cell__title">Industry F6</div>
|
389 |
+
<div class="honeycomb-cell__description">4-6 Bells</div>
|
390 |
+
</div>
|
391 |
+
</div>
|
392 |
+
|
393 |
+
<!-- Tier 3 - Inner Ring (Diligence) -->
|
394 |
+
<div class="honeycomb-cell tier-3">
|
395 |
+
<div class="honeycomb-cell__content">
|
396 |
+
<div class="honeycomb-cell__title">Diligence G7</div>
|
397 |
+
<div class="honeycomb-cell__description">7-8 Bells</div>
|
398 |
+
</div>
|
399 |
+
</div>
|
400 |
+
<div class="honeycomb-cell tier-3">
|
401 |
+
<div class="honeycomb-cell__content">
|
402 |
+
<div class="honeycomb-cell__title">Diligence H8</div>
|
403 |
+
<div class="honeycomb-cell__description">7-8 Bells</div>
|
404 |
+
</div>
|
405 |
+
</div>
|
406 |
+
</div>
|
407 |
+
</div>
|
408 |
+
|
409 |
+
<div class="honeycomb-legend">
|
410 |
+
<div class="legend-item">
|
411 |
+
<div class="legend-color tier-3"></div>
|
412 |
+
<span>Prefectures of Diligence (7-8 Bells)</span>
|
413 |
+
</div>
|
414 |
+
<div class="legend-item">
|
415 |
+
<div class="legend-color tier-2"></div>
|
416 |
+
<span>Prefectures of Industry (4-6 Bells)</span>
|
417 |
+
</div>
|
418 |
+
<div class="legend-item">
|
419 |
+
<div class="legend-color tier-1"></div>
|
420 |
+
<span>Prefectures of Harmony (1-3 Bells)</span>
|
421 |
+
</div>
|
422 |
+
<div class="legend-item">
|
423 |
+
<div class="legend-color aqua-oasis"></div>
|
424 |
+
<span>Aqua Oasis</span>
|
425 |
+
</div>
|
426 |
+
</div>
|
427 |
+
|
428 |
+
<!-- Aqua Oasis Details Section -->
|
429 |
+
<div class="mt-12 bg-blue-50 rounded-lg p-8 shadow-lg">
|
430 |
+
<h3 class="text-2xl font-bold text-blue-900 mb-6 title-font">Aqua Oasis: Central Relaxation & Activity Platform</h3>
|
431 |
+
|
432 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
433 |
+
<div>
|
434 |
+
<h4 class="text-lg font-semibold text-blue-800 mb-3">Concept</h4>
|
435 |
+
<p class="text-gray-700 mb-6">
|
436 |
+
Located 12 nautical miles off the coast, Aqua Oasis is a multi-purpose platform designed for relaxation, water sports activities, and convenient access to supplies.
|
437 |
+
Inspired by a honeycomb shape, it optimizes space utilization while maintaining structural integrity.
|
438 |
+
</p>
|
439 |
+
|
440 |
+
<h4 class="text-lg font-semibold text-blue-800 mb-3">Dimensions & Materials</h4>
|
441 |
+
<ul class="list-disc pl-5 text-gray-700 space-y-2">
|
442 |
+
<li><strong>Size:</strong> Hexagonal platform with a diameter of 50 meters (164 ft)</li>
|
443 |
+
<li><strong>Materials:</strong> Marine-grade materials (UC5B and UC5C classification)</li>
|
444 |
+
<li><strong>Floatation:</strong> Closed-cell polyethylene (unsinkable and UV-resistant)</li>
|
445 |
+
<li><strong>Decking:</strong> Marine-grade lumber or non-slip composite material</li>
|
446 |
+
<li><strong>Superstructure:</strong> Aluminum or galvanized steel (corrosion-resistant)</li>
|
447 |
+
</ul>
|
448 |
+
</div>
|
449 |
+
|
450 |
+
<div>
|
451 |
+
<h4 class="text-lg font-semibold text-blue-800 mb-3">Features</h4>
|
452 |
+
<ul class="list-disc pl-5 text-gray-700 space-y-2">
|
453 |
+
<li>Solar panels for power generation</li>
|
454 |
+
<li>Wi-Fi connectivity and USB charging ports</li>
|
455 |
+
<li>Freshwater tanks housed underneath</li>
|
456 |
+
<li>Central relaxation area with seating and hammocks</li>
|
457 |
+
<li>Dedicated zones for water sports activities</li>
|
458 |
+
<li>Refreshment area with basic supplies</li>
|
459 |
+
<li>Docking stations for resident vessels</li>
|
460 |
+
</ul>
|
461 |
+
|
462 |
+
<h4 class="text-lg font-semibold text-blue-800 mt-6 mb-3">Sustainability</h4>
|
463 |
+
<ul class="list-disc pl-5 text-gray-700 space-y-2">
|
464 |
+
<li>Rainwater harvesting systems</li>
|
465 |
+
<li>Responsible waste management</li>
|
466 |
+
<li>Low-flow fixtures for water conservation</li>
|
467 |
+
</ul>
|
468 |
+
</div>
|
469 |
+
</div>
|
470 |
+
</div>
|
471 |
+
|
472 |
+
<div class="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
473 |
+
<div class="aquapod-card rounded-lg overflow-hidden shadow-lg card-3d">
|
474 |
+
<div class="p-6">
|
475 |
+
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mb-4">
|
476 |
+
<i class="fas fa-project-diagram"></i>
|
477 |
+
</div>
|
478 |
+
<h3 class="text-lg font-medium text-gray-900">Hexagonal Efficiency</h3>
|
479 |
+
<p class="mt-2 text-gray-500">
|
480 |
+
The honeycomb structure maximizes space utilization while minimizing material usage, creating the most efficient layout for ocean living.
|
481 |
+
</p>
|
482 |
+
</div>
|
483 |
+
</div>
|
484 |
+
|
485 |
+
<div class="aquapod-card rounded-lg overflow-hidden shadow-lg card-3d">
|
486 |
+
<div class="p-6">
|
487 |
+
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mb-4">
|
488 |
+
<i class="fas fa-arrows-alt-h"></i>
|
489 |
+
</div>
|
490 |
+
<h3 class="text-lg font-medium text-gray-900">Modular Design</h3>
|
491 |
+
<p class="mt-2 text-gray-500">
|
492 |
+
Each hexagonal prefecture can be added or reconfigured as needed, allowing the colony to grow organically over time.
|
493 |
+
</p>
|
494 |
+
</div>
|
495 |
+
</div>
|
496 |
+
|
497 |
+
<div class="aquapod-card rounded-lg overflow-hidden shadow-lg card-3d">
|
498 |
+
<div class="p-6">
|
499 |
+
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mb-4">
|
500 |
+
<i class="fas fa-shield-alt"></i>
|
501 |
+
</div>
|
502 |
+
<h3 class="text-lg font-medium text-gray-900">Structural Integrity</h3>
|
503 |
+
<p class="mt-2 text-gray-500">
|
504 |
+
The hexagonal pattern provides exceptional strength against ocean currents and storms, distributing forces evenly throughout the structure.
|
505 |
+
</p>
|
506 |
+
</div>
|
507 |
+
</div>
|
508 |
+
</div>
|
509 |
+
</div>
|
510 |
+
</section>
|
511 |
+
|
512 |
+
<!-- Prefecture Tiers Section -->
|
513 |
+
<section id="tiers" class="py-20 bg-gray-50">
|
514 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
515 |
+
<div class="text-center">
|
516 |
+
<h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl title-font">
|
517 |
+
Prefecture Tiers & Benefits
|
518 |
+
</h2>
|
519 |
+
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
|
520 |
+
Our tiered system rewards community participation with better positioning and amenities.
|
521 |
+
</p>
|
522 |
+
</div>
|
523 |
+
|
524 |
+
<div class="mt-12 grid grid-cols-1 gap-8 md:grid-cols-3">
|
525 |
+
<!-- Tier 1 -->
|
526 |
+
<div class="aquapod-card rounded-lg overflow-hidden shadow-lg card-3d">
|
527 |
+
<div class="bg-blue-200 px-6 py-4">
|
528 |
+
<h3 class="text-xl font-bold text-blue-900">Prefectures of Harmony</h3>
|
529 |
+
<p class="text-blue-700">Tier 1 (1-3 Bells)</p>
|
530 |
+
</div>
|
531 |
+
<div class="p-6">
|
532 |
+
<ul class="space-y-4">
|
533 |
+
<li class="flex items-start">
|
534 |
+
<div class="flex-shrink-0">
|
535 |
+
<i class="fas fa-check-circle text-blue-500"></i>
|
536 |
+
</div>
|
537 |
+
<p class="ml-3 text-gray-600">Outer ring locations with ocean views</p>
|
538 |
+
</li>
|
539 |
+
<li class="flex items-start">
|
540 |
+
<div class="flex-shrink-0">
|
541 |
+
<i class="fas fa-check-circle text-blue-500"></i>
|
542 |
+
</div>
|
543 |
+
<p class="ml-3 text-gray-600">Basic community amenities access</p>
|
544 |
+
</li>
|
545 |
+
<li class="flex items-start">
|
546 |
+
<div class="flex-shrink-0">
|
547 |
+
<i class="fas fa-check-circle text-blue-500"></i>
|
548 |
+
</div>
|
549 |
+
<p class="ml-3 text-gray-600">Standard maintenance services</p>
|
550 |
+
</li>
|
551 |
+
<li class="flex items-start">
|
552 |
+
<div class="flex-shrink-0">
|
553 |
+
<i class="fas fa-check-circle text-blue-500"></i>
|
554 |
+
</div>
|
555 |
+
<p class="ml-3 text-gray-600">Community event participation</p>
|
556 |
+
</li>
|
557 |
+
</ul>
|
558 |
+
</div>
|
559 |
+
</div>
|
560 |
+
|
561 |
+
<!-- Tier 2 -->
|
562 |
+
<div class="aquapod-card rounded-lg overflow-hidden shadow-lg card-3d transform scale-105 z-10">
|
563 |
+
<div class="bg-blue-500 px-6 py-4 text-white">
|
564 |
+
<h3 class="text-xl font-bold">Prefectures of Industry</h3>
|
565 |
+
<p>Tier 2 (4-6 Bells)</p>
|
566 |
+
</div>
|
567 |
+
<div class="p-6">
|
568 |
+
<ul class="space-y-4">
|
569 |
+
<li class="flex items-start">
|
570 |
+
<div class="flex-shrink-0">
|
571 |
+
<i class="fas fa-check-circle text-blue-300"></i>
|
572 |
+
</div>
|
573 |
+
<p class="ml-3 text-gray-600">Middle ring with quicker central access</p>
|
574 |
+
</li>
|
575 |
+
<li class="flex items-start">
|
576 |
+
<div class="flex-shrink-0">
|
577 |
+
<i class="fas fa-check-circle text-blue-300"></i>
|
578 |
+
</div>
|
579 |
+
<p class="ml-3 text-gray-600">Priority amenities access</p>
|
580 |
+
</li>
|
581 |
+
<li class="flex items-start">
|
582 |
+
<div class="flex-shrink-0">
|
583 |
+
<i class="fas fa-check-circle text-blue-300"></i>
|
584 |
+
</div>
|
585 |
+
<p class="ml-3 text-gray-600">Enhanced maintenance services</p>
|
586 |
+
</li>
|
587 |
+
<li class="flex items-start">
|
588 |
+
<div class="flex-shrink-0">
|
589 |
+
<i class="fas fa-check-circle text-blue-300"></i>
|
590 |
+
</div>
|
591 |
+
<p class="ml-3 text-gray-600">Reserved event seating</p>
|
592 |
+
</li>
|
593 |
+
<li class="flex items-start">
|
594 |
+
<div class="flex-shrink-0">
|
595 |
+
<i class="fas fa-check-circle text-blue-300"></i>
|
596 |
+
</div>
|
597 |
+
<p class="ml-3 text-gray-600">Monthly service credits</p>
|
598 |
+
</li>
|
599 |
+
</ul>
|
600 |
+
</div>
|
601 |
+
</div>
|
602 |
+
|
603 |
+
<!-- Tier 3 -->
|
604 |
+
<div class="aquapod-card rounded-lg overflow-hidden shadow-lg card-3d">
|
605 |
+
<div class="bg-blue-800 px-6 py-4 text-white">
|
606 |
+
<h3 class="text-xl font-bold">Prefectures of Diligence</h3>
|
607 |
+
<p>Tier 3 (7-8 Bells)</p>
|
608 |
+
</div>
|
609 |
+
<div class="p-6">
|
610 |
+
<ul class="space-y-4">
|
611 |
+
<li class="flex items-start">
|
612 |
+
<div class="flex-shrink-0">
|
613 |
+
<i class="fas fa-check-circle text-blue-300"></i>
|
614 |
+
</div>
|
615 |
+
<p class="ml-3 text-gray-600">Inner ring with immediate central access</p>
|
616 |
+
</li>
|
617 |
+
<li class="flex items-start">
|
618 |
+
<div class="flex-shrink-0">
|
619 |
+
<i class="fas fa-check-circle text-blue-300"></i>
|
620 |
+
</div>
|
621 |
+
<p class="ml-3 text-gray-600">24/7 premium amenities access</p>
|
622 |
+
</li>
|
623 |
+
<li class="flex items-start">
|
624 |
+
<div class="flex-shrink-0">
|
625 |
+
<i class="fas fa-check-circle text-blue-300"></i>
|
626 |
+
</div>
|
627 |
+
<p class="ml-3 text-gray-600">Expedited maintenance services</p>
|
628 |
+
</li>
|
629 |
+
<li class="flex items-start">
|
630 |
+
<div class="flex-shrink-0">
|
631 |
+
<i class="fas fa-check-circle text-blue-300"></i>
|
632 |
+
</div>
|
633 |
+
<p class="ml-3 text-gray-600">VIP event access</p>
|
634 |
+
</li>
|
635 |
+
<li class="flex items-start">
|
636 |
+
<div class="flex-shrink-0">
|
637 |
+
<i class="fas fa-check-circle text-blue-300"></i>
|
638 |
+
</div>
|
639 |
+
<p class="ml-3 text-gray-600">Generous monthly service credits</p>
|
640 |
+
</li>
|
641 |
+
<li class="flex items-start">
|
642 |
+
<div class="flex-shrink-0">
|
643 |
+
<i class="fas fa-check-circle text-blue-300"></i>
|
644 |
+
</div>
|
645 |
+
<p class="ml-3 text-gray-600">Community leadership opportunities</p>
|
646 |
+
</li>
|
647 |
+
</ul>
|
648 |
+
</div>
|
649 |
+
</div>
|
650 |
+
</div>
|
651 |
+
|
652 |
+
<div class="mt-12 text-center">
|
653 |
+
<div class="bg-white rounded-lg shadow-lg p-6 max-w-3xl mx-auto card-3d">
|
654 |
+
<h3 class="text-xl font-bold text-gray-900">Bell Commitment System</h3>
|
655 |
+
<p class="mt-4 text-gray-600">
|
656 |
+
Residents earn "bells" through community service, maintenance contributions, and participation in colony governance.
|
657 |
+
Your bell total determines your prefecture tier, which can be upgraded as you contribute more to the community.
|
658 |
+
</p>
|
659 |
+
<div class="mt-6 flex justify-center">
|
660 |
+
<a href="#contact" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700">
|
661 |
+
Learn How to Earn Bells
|
662 |
+
</a>
|
663 |
+
</div>
|
664 |
+
</div>
|
665 |
+
</div>
|
666 |
+
</div>
|
667 |
+
</section>
|
668 |
+
|
669 |
+
<!-- Benefits Section -->
|
670 |
+
<section id="benefits" class="py-20 bg-white">
|
671 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
672 |
+
<div class="text-center">
|
673 |
+
<h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl title-font">
|
674 |
+
Hive Community Benefits
|
675 |
+
</h2>
|
676 |
+
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
|
677 |
+
The prefecture system creates a thriving, efficient ocean community.
|
678 |
+
</p>
|
679 |
+
</div>
|
680 |
+
|
681 |
+
<div class="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
|
682 |
+
<div class="aquapod-card rounded-lg overflow-hidden shadow-lg card-3d">
|
683 |
+
<div class="p-6">
|
684 |
+
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mb-4">
|
685 |
+
<i class="fas fa-heart"></i>
|
686 |
+
</div>
|
687 |
+
<h3 class="text-lg font-medium text-gray-900">Thematic Harmony</h3>
|
688 |
+
<p class="mt-2 text-gray-500">
|
689 |
+
The hexagonal layout and prefecture names reinforce our community's collaborative spirit and connection to nature.
|
690 |
+
</p>
|
691 |
+
</div>
|
692 |
+
</div>
|
693 |
+
|
694 |
+
<div class="aquapod-card rounded-lg overflow-hidden shadow-lg card-3d">
|
695 |
+
<div class="p-6">
|
696 |
+
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mb-4">
|
697 |
+
<i class="fas fa-trophy"></i>
|
698 |
+
</div>
|
699 |
+
<h3 class="text-lg font-medium text-gray-900">Incentivized Participation</h3>
|
700 |
+
<p class="mt-2 text-gray-500">
|
701 |
+
Residents offering more services (higher bell tiers) are positioned closer to the central platform with easier access to amenities.
|
702 |
+
</p>
|
703 |
+
</div>
|
704 |
+
</div>
|
705 |
+
|
706 |
+
<div class="aquapod-card rounded-lg overflow-hidden shadow-lg card-3d">
|
707 |
+
<div class="p-6">
|
708 |
+
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mb-4">
|
709 |
+
<i class="fas fa-bolt"></i>
|
710 |
+
</div>
|
711 |
+
<h3 class="text-lg font-medium text-gray-900">Operational Efficiency</h3>
|
712 |
+
<p class="mt-2 text-gray-500">
|
713 |
+
Minimizes travel time within the platform for high-service residents, creating a more efficient community.
|
714 |
+
</p>
|
715 |
+
</div>
|
716 |
+
</div>
|
717 |
+
|
718 |
+
<div class="aquapod-card rounded-lg overflow-hidden shadow-lg card-3d">
|
719 |
+
<div class="p-6">
|
720 |
+
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mb-4">
|
721 |
+
<i class="fas fa-users"></i>
|
722 |
+
</div>
|
723 |
+
<h3 class="text-lg font-medium text-gray-900">Vibrant Community Core</h3>
|
724 |
+
<p class="mt-2 text-gray-500">
|
725 |
+
Prefectures of Diligence create a dynamic center with easy access to services, fostering interaction and collaboration.
|
726 |
+
</p>
|
727 |
+
</div>
|
728 |
+
</div>
|
729 |
+
</div>
|
730 |
+
|
731 |
+
<div class="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2">
|
732 |
+
<div class="aquapod-card rounded-lg overflow-hidden shadow-lg card-3d">
|
733 |
+
<div class="p-6">
|
734 |
+
<h3 class="text-lg font-medium text-gray-900">Transparent Slip Assignment</h3>
|
735 |
+
<p class="mt-2 text-gray-500">
|
736 |
+
Slips within each prefecture are privately designated.
|
737 |
+
Residents are assigned slips based on pod size, accessibility needs, and when possible, personal preference.
|
738 |
+
</p>
|
739 |
+
<div class="mt-4">
|
740 |
+
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium">View Assignment Criteria →</a>
|
741 |
+
</div>
|
742 |
+
</div>
|
743 |
+
</div>
|
744 |
+
|
745 |
+
<div class="aquapod-card rounded-lg overflow-hidden shadow-lg card-3d">
|
746 |
+
<div class="p-6">
|
747 |
+
<h3 class="text-lg font-medium text-gray-900">Flexible Tier Advancement</h3>
|
748 |
+
<p class="mt-2 text-gray-500">
|
749 |
+
Residents can adjust their bell commitment over time, potentially leading to a change in prefecture and slip assignment.
|
750 |
+
Our system is designed to grow with you as your level of community participation evolves.
|
751 |
+
</p>
|
752 |
+
<div class="mt-4">
|
753 |
+
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Learn About Tier Progression →</a>
|
754 |
+
</div>
|
755 |
+
</div>
|
756 |
+
</div>
|
757 |
+
</div>
|
758 |
+
</div>
|
759 |
+
</section>
|
760 |
+
|
761 |
+
<!-- CTA Section -->
|
762 |
+
<section class="py-20 bg-blue-900 relative overflow-hidden">
|
763 |
+
<div class="absolute inset-0">
|
764 |
+
<img class="w-full h-full object-cover opacity-20" src="aquapod.jpg" alt="">
|
765 |
+
<div class="absolute inset-0 bg-blue-900 mix-blend-multiply"></div>
|
766 |
+
</div>
|
767 |
+
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
768 |
+
<div class="text-center">
|
769 |
+
<h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl title-font">
|
770 |
+
Ready to Join Our Hive Community?
|
771 |
+
</h2>
|
772 |
+
<p class="mt-4 max-w-2xl text-xl text-blue-100 mx-auto">
|
773 |
+
Become part of the most innovative ocean living community, where your contributions directly enhance your living experience.
|
774 |
+
</p>
|
775 |
+
<div class="mt-8 flex justify-center">
|
776 |
+
<div class="inline-flex rounded-md shadow">
|
777 |
+
<a href="#contact" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-white hover:bg-blue-50">
|
778 |
+
Apply for Residence
|
779 |
+
</a>
|
780 |
+
</div>
|
781 |
+
<div class="ml-3 inline-flex">
|
782 |
+
<a href="#structure" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 bg-opacity-60 hover:bg-opacity-70">
|
783 |
+
Tour Our Hive
|
784 |
+
</a>
|
785 |
+
</div>
|
786 |
+
</div>
|
787 |
+
</div>
|
788 |
+
</div>
|
789 |
+
</section>
|
790 |
+
|
791 |
+
<!-- Contact Section -->
|
792 |
+
<section id="contact" class="py-20 bg-white">
|
793 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
794 |
+
<div class="lg:grid lg:grid-cols-2 lg:gap-8">
|
795 |
+
<div class="lg:col-span-1">
|
796 |
+
<h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl title-font">
|
797 |
+
Contact The Hive
|
798 |
+
</h2>
|
799 |
+
<p class="mt-3 text-lg text-gray-500">
|
800 |
+
Have questions about our prefecture system or the application process? Our team is here to help.
|
801 |
+
</p>
|
802 |
+
|
803 |
+
<div class="mt-8">
|
804 |
+
<div class="flex items-start mb-8">
|
805 |
+
<div class="flex-shrink-0">
|
806 |
+
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
|
807 |
+
<i class="fas fa-map-marker-alt"></i>
|
808 |
+
</div>
|
809 |
+
</div>
|
810 |
+
<div class="ml-4">
|
811 |
+
<h4 class="text-lg leading-6 font-medium text-gray-900">Hive Headquarters</h4>
|
812 |
+
<p class="mt-1 text-base text-gray-500">
|
813 |
+
Los Angeles, California {By Appointment Only}
|
814 |
+
</p>
|
815 |
+
</div>
|
816 |
+
</div>
|
817 |
+
|
818 |
+
<div class="flex items-start mb-8">
|
819 |
+
<div class="flex-shrink-0">
|
820 |
+
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
|
821 |
+
<i class="fas fa-envelope"></i>
|
822 |
+
</div>
|
823 |
+
</div>
|
824 |
+
<div class="ml-4">
|
825 |
+
<h4 class="text-lg leading-6 font-medium text-gray-900">Email Us</h4>
|
826 |
+
<p class="mt-1 text-base text-gray-500">
|
827 | |
828 |
+
</p>
|
829 |
+
</div>
|
830 |
+
</div>
|
831 |
+
|
832 |
+
<div class="flex items-start">
|
833 |
+
<div class="flex-shrink-0">
|
834 |
+
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
|
835 |
+
<i class="fas fa-phone-alt"></i>
|
836 |
+
</div>
|
837 |
+
</div>
|
838 |
+
<div class="ml-4">
|
839 |
+
<h4 class="text-lg leading-6 font-medium text-gray-900">Call Us</h4>
|
840 |
+
<p class="mt-1 text-base text-gray-500">
|
841 |
+
(310) 555-OCEAN
|
842 |
+
</p>
|
843 |
+
</div>
|
844 |
+
</div>
|
845 |
+
</div>
|
846 |
+
</div>
|
847 |
+
|
848 |
+
<div class="mt-12 lg:mt-0 lg:col-span-1">
|
849 |
+
<div class="bg-white shadow-lg rounded-lg overflow-hidden card-3d">
|
850 |
+
<div class="px-6 py-5 border-b border-gray-200">
|
851 |
+
<h3 class="text-lg font-medium leading-6 text-gray-900">Send us a message</h3>
|
852 |
+
</div>
|
853 |
+
<div class="px-6 py-5">
|
854 |
+
<form>
|
855 |
+
<div class="mb-4">
|
856 |
+
<label for="name" class="block text-sm font-medium text-gray-700">Name</label>
|
857 |
+
<input type="text" id="name" name="name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
|
858 |
+
</div>
|
859 |
+
<div class="mb-4">
|
860 |
+
<label for="email" class="block text-sm font-medium text-gray-700">Email</label>
|
861 |
+
<input type="email" id="email" name="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
|
862 |
+
</div>
|
863 |
+
<div class="mb-4">
|
864 |
+
<label for="subject" class="block text-sm font-medium text-gray-700">Subject</label>
|
865 |
+
<select id="subject" name="subject" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
|
866 |
+
<option>General Inquiry</option>
|
867 |
+
<option>Residency Application</option>
|
868 |
+
<option>Investment Opportunity</option>
|
869 |
+
<option>Technical Question</option>
|
870 |
+
</select>
|
871 |
+
</div>
|
872 |
+
<div class="mb-4">
|
873 |
+
<label for="message" class="block text-sm font-medium text-gray-700">Message</label>
|
874 |
+
<textarea id="message" name="message" rows="4" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea>
|
875 |
+
</div>
|
876 |
+
<div class="flex justify-end">
|
877 |
+
<button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
878 |
+
Send Message
|
879 |
+
</button>
|
880 |
+
</div>
|
881 |
+
</form>
|
882 |
+
</div>
|
883 |
+
</div>
|
884 |
+
</div>
|
885 |
+
</div>
|
886 |
+
</div>
|
887 |
+
</section>
|
888 |
+
|
889 |
+
<!-- Footer -->
|
890 |
+
<footer class="marine-bg text-white pt-12 pb-8">
|
891 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
892 |
+
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
|
893 |
+
<div class="col-span-2">
|
894 |
+
<div class="flex items-center">
|
895 |
+
<i class="fas fa-honeycomb text-3xl text-blue-300 mr-2"></i>
|
896 |
+
<span class="title-font text-xl font-semibold text-white">Aquapod Hive</span>
|
897 |
+
</div>
|
898 |
+
<p class="mt-4 text-blue-100">
|
899 |
+
Pioneering sustainable ocean living through innovative hexagonal community design.
|
900 |
+
</p>
|
901 |
+
<div class="mt-6 flex space-x-6">
|
902 |
+
<a href="#" class="text-blue-300 hover:text-white">
|
903 |
+
<i class="fab fa-facebook-f"></i>
|
904 |
+
</a>
|
905 |
+
<a href="#" class="text-blue-300 hover:text-white">
|
906 |
+
<i class="fab fa-instagram"></i>
|
907 |
+
</a>
|
908 |
+
<a href="#" class="text-blue-300 hover:text-white">
|
909 |
+
<i class="fab fa-twitter"></i>
|
910 |
+
</a>
|
911 |
+
<a href="#" class="text-blue-300 hover:text-white">
|
912 |
+
<i class="fab fa-youtube"></i>
|
913 |
+
</a>
|
914 |
+
</div>
|
915 |
+
</div>
|
916 |
+
|
917 |
+
<div>
|
918 |
+
<h3 class="text-sm font-semibold text-blue-300 tracking-wider uppercase">Explore</h3>
|
919 |
+
<div class="mt-4 space-y-4">
|
920 |
+
<a href="#home" class="footer-link text-base text-blue-100 block">Home</a>
|
921 |
+
<a href="#structure" class="footer-link text-base text-blue-100 block">Hive Structure</a>
|
922 |
+
<a href="#tiers" class="footer-link text-base text-blue-100 block">Prefecture Tiers</a>
|
923 |
+
<a href="#benefits" class="footer-link text-base text-blue-100 block">Benefits</a>
|
924 |
+
</div>
|
925 |
+
</div>
|
926 |
+
|
927 |
+
<div>
|
928 |
+
<h3 class="text-sm font-semibold text-blue-300 tracking-wider uppercase">Legal</h3>
|
929 |
+
<div class="mt-4 space-y-4">
|
930 |
+
<a href="#" class="footer-link text-base text-blue-100 block">Privacy</a>
|
931 |
+
<a href="#" class="footer-link text-base text-blue-100 block">Terms</a>
|
932 |
+
<a href="#" class="footer-link text-base text-blue-100 block">FAQ</a>
|
933 |
+
<a href="#contact" class="footer-link text-base text-blue-100 block">Contact</a>
|
934 |
+
</div>
|
935 |
+
</div>
|
936 |
+
</div>
|
937 |
+
|
938 |
+
<div class="mt-12 border-t border-blue-800 pt-8">
|
939 |
+
<p class="text-base text-blue-300 text-center">
|
940 |
+
© 2023 Aquapod Hive Community. All rights reserved.
|
941 |
+
</p>
|
942 |
+
</div>
|
943 |
+
</div>
|
944 |
+
</footer>
|
945 |
+
|
946 |
+
<!-- Floating Benefits Button -->
|
947 |
+
<div class="floating-btn" id="benefits-btn">
|
948 |
+
<i class="fas fa-star"></i>
|
949 |
+
</div>
|
950 |
+
|
951 |
+
<!-- Benefits Modal -->
|
952 |
+
<div class="modal" id="benefits-modal">
|
953 |
+
<div class="modal-content">
|
954 |
+
<span class="close-btn" id="close-modal">×</span>
|
955 |
+
<h2 class="text-2xl font-bold text-gray-900 mb-6 title-font">Hive Community Benefits</h2>
|
956 |
+
|
957 |
+
<div class="grid grid-cols-1 gap-6">
|
958 |
+
<div class="flex items-start">
|
959 |
+
<div class="flex-shrink-0">
|
960 |
+
<div class="flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white">
|
961 |
+
<i class="fas fa-heart"></i>
|
962 |
+
</div>
|
963 |
+
</div>
|
964 |
+
<div class="ml-4">
|
965 |
+
<h3 class="text-lg font-medium text-gray-900">Thematic Harmony</h3>
|
966 |
+
<p class="mt-1 text-gray-600">
|
967 |
+
The hexagonal layout and prefecture names reinforce our community's collaborative spirit and connection to nature.
|
968 |
+
</p>
|
969 |
+
</div>
|
970 |
+
</div>
|
971 |
+
|
972 |
+
<div class="flex items-start">
|
973 |
+
<div class="flex-shrink-0">
|
974 |
+
<div class="flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white">
|
975 |
+
<i class="fas fa-trophy"></i>
|
976 |
+
</div>
|
977 |
+
</div>
|
978 |
+
<div class="ml-4">
|
979 |
+
<h3 class="text-lg font-medium text-gray-900">Incentivized Participation</h3>
|
980 |
+
<p class="mt-1 text-gray-600">
|
981 |
+
Residents offering more services (higher bell tiers) are positioned closer to the central platform with easier access to amenities.
|
982 |
+
</p>
|
983 |
+
</div>
|
984 |
+
</div>
|
985 |
+
|
986 |
+
<div class="flex items-start">
|
987 |
+
<div class="flex-shrink-0">
|
988 |
+
<div class="flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white">
|
989 |
+
<i class="fas fa-bolt"></i>
|
990 |
+
</div>
|
991 |
+
</div>
|
992 |
+
<div class="ml-4">
|
993 |
+
<h3 class="text-lg font-medium text-gray-900">Operational Efficiency</h3>
|
994 |
+
<p class="mt-1 text-gray-600">
|
995 |
+
Minimizes travel time within the platform for high-service residents, creating a more efficient community.
|
996 |
+
</p>
|
997 |
+
</div>
|
998 |
+
</div>
|
999 |
+
|
1000 |
+
<div class="flex items-start">
|
1001 |
+
<div class="flex-shrink-0">
|
1002 |
+
<div class="flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white">
|
1003 |
+
<i class="fas fa-users"></i>
|
1004 |
+
</div>
|
1005 |
+
</div>
|
1006 |
+
<div class="ml-4">
|
1007 |
+
<h3 class="text-lg font-medium text-gray-900">Vibrant Community Core</h3>
|
1008 |
+
<p class="mt-1 text-gray-600">
|
1009 |
+
Prefectures of Diligence create a dynamic center with easy access to services, fostering interaction and collaboration.
|
1010 |
+
</p>
|
1011 |
+
</div>
|
1012 |
+
</div>
|
1013 |
+
</div>
|
1014 |
+
|
1015 |
+
<div class="mt-8">
|
1016 |
+
<a href="#benefits" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700">
|
1017 |
+
View All Benefits
|
1018 |
+
</a>
|
1019 |
+
</div>
|
1020 |
+
</div>
|
1021 |
+
</div>
|
1022 |
+
|
1023 |
+
<script>
|
1024 |
+
// Mobile menu toggle
|
1025 |
+
document.getElementById('mobile-menu-button').addEventListener('click', function() {
|
1026 |
+
const menu = document.getElementById('mobile-menu');
|
1027 |
+
if (menu.classList.contains('hidden')) {
|
1028 |
+
menu.classList.remove('hidden');
|
1029 |
+
} else {
|
1030 |
+
menu.classList.add('hidden');
|
1031 |
+
}
|
1032 |
+
});
|
1033 |
+
|
1034 |
+
// Smooth scrolling for navigation links
|
1035 |
+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
1036 |
+
anchor.addEventListener('click', function (e) {
|
1037 |
+
e.preventDefault();
|
1038 |
+
|
1039 |
+
const targetId = this.getAttribute('href');
|
1040 |
+
const targetElement = document.querySelector(targetId);
|
1041 |
+
|
1042 |
+
if (targetElement) {
|
1043 |
+
window.scrollTo({
|
1044 |
+
top: targetElement.offsetTop - 80,
|
1045 |
+
behavior: 'smooth'
|
1046 |
+
});
|
1047 |
+
|
1048 |
+
// Close mobile menu if open
|
1049 |
+
const mobileMenu = document.getElementById('mobile-menu');
|
1050 |
+
if (!mobileMenu.classList.contains('hidden')) {
|
1051 |
+
mobileMenu.classList.add('hidden');
|
1052 |
+
}
|
1053 |
+
}
|
1054 |
+
});
|
1055 |
+
});
|
1056 |
+
|
1057 |
+
// Add shadow to navbar on scroll
|
1058 |
+
window.addEventListener('scroll', function() {
|
1059 |
+
const nav = document.querySelector('nav');
|
1060 |
+
if (window.scrollY > 10) {
|
1061 |
+
nav.classList.add('shadow-lg');
|
1062 |
+
} else {
|
1063 |
+
nav.classList.remove('shadow-lg');
|
1064 |
+
}
|
1065 |
+
});
|
1066 |
+
|
1067 |
+
// 3D effect for cards on mouse move
|
1068 |
+
document.querySelectorAll('.card-3d').forEach(card => {
|
1069 |
+
card.addEventListener('mousemove', (e) => {
|
1070 |
+
const rect = card.getBoundingClientRect();
|
1071 |
+
const x = e.clientX - rect.left;
|
1072 |
+
const y = e.clientY - rect.top;
|
1073 |
+
|
1074 |
+
const centerX = rect.width / 2;
|
1075 |
+
const centerY = rect.height / 2;
|
1076 |
+
|
1077 |
+
const angleX = (y - centerY) / 20;
|
1078 |
+
const angleY = (centerX - x) / 20;
|
1079 |
+
|
1080 |
+
card.style.transform = `rotateX(${angleX}deg) rotateY(${angleY}deg) translateY(-5px)`;
|
1081 |
+
});
|
1082 |
+
|
1083 |
+
card.addEventListener('mouseleave', () => {
|
1084 |
+
card.style.transform = 'rotateY(0) rotateX(0) translateY(0)';
|
1085 |
+
});
|
1086 |
+
});
|
1087 |
+
|
1088 |
+
// Honeycomb cell animation
|
1089 |
+
document.querySelectorAll('.honeycomb-cell').forEach(cell => {
|
1090 |
+
cell.addEventListener('mouseenter', () => {
|
1091 |
+
cell.style.transform = 'scale(1.1)';
|
1092 |
+
cell.style.zIndex = '10';
|
1093 |
+
});
|
1094 |
+
|
1095 |
+
cell.addEventListener('mouseleave', () => {
|
1096 |
+
cell.style.transform = 'scale(1)';
|
1097 |
+
cell.style.zIndex = '1';
|
1098 |
+
});
|
1099 |
+
});
|
1100 |
+
|
1101 |
+
// Floating benefits button functionality
|
1102 |
+
const benefitsBtn = document.getElementById('benefits-btn');
|
1103 |
+
const benefitsModal = document.getElementById('benefits-modal');
|
1104 |
+
const closeModal = document.getElementById('close-modal');
|
1105 |
+
|
1106 |
+
benefitsBtn.addEventListener('click', () => {
|
1107 |
+
benefitsModal.style.display = 'block';
|
1108 |
+
document.body.style.overflow = 'hidden';
|
1109 |
+
});
|
1110 |
+
|
1111 |
+
closeModal.addEventListener('click', () => {
|
1112 |
+
benefitsModal.style.display = 'none';
|
1113 |
+
document.body.style.overflow = 'auto';
|
1114 |
+
});
|
1115 |
+
|
1116 |
+
window.addEventListener('click', (e) => {
|
1117 |
+
if (e.target === benefitsModal) {
|
1118 |
+
benefitsModal.style.display = 'none';
|
1119 |
+
document.body.style.overflow = 'auto';
|
1120 |
+
}
|
1121 |
+
});
|
1122 |
+
</script>
|
1123 |
+
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=privateuserh/privaqucolony2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
|
1124 |
+
</html>
|
prompts.txt
ADDED
@@ -0,0 +1,2 @@
|
|
|
|
|
|
|
1 |
+
Put Hive Community Benefits in a floating button and display first image as the aquapod.jpg file
|
2 |
+
In the Hexagonal Hive Structure the Central Hub goes in the middle the surrounding it the Diligence surrounding Diligence is Industry the the outer layer surrounding Industry is Harmony Rename Central Hub to Aqua Oasis Aqua-Oasis: A Central Relaxation and Activity Platform Concept: Aqua-Oasis is a multi-purpose platform located 12 nautical miles off the coast, designed for relaxation, water sports activities, and convenient access to supplies. Inspired by a honeycomb shape, it optimizes space utilization while maintaining structural integrity. The platform will be equipped with solar panels for power generation, Wi-Fi connectivity, USB ports for device charging, and freshwater tanks housed underneath. Dimensions and Materials: Size: The optimal size will depend on factors like the number of expected users, budget, and desired functionalities. Consider a modular design allowing for future expansion. A hexagonal platform with a diameter of 50 meters (164 ft) offers a good starting point. Materials: The platform should be constructed using high-quality, marine-grade materials (or classified as UC5B and UC5C) that can withstand harsh weather conditions and constant exposure to saltwater. Here are some options: Floatation: Closed-cell polyethylene (unsinkable and UV-resistant) Decking: Marine-grade lumber (treated for durability) or a non-slip composite material Superstructure: Aluminum or galvanized steel (corrosion-resistant) Layout: Central Hub: A central hub area can provide shade and a place for relaxation. Equip it with comfortable seating, hammocks, and sun loungers. Activity Zones: Dedicate specific zones for different water sports activities like kayaking, paddleboarding, or diving. Provide storage for equipment rentals or resident-owned gear. Refreshment Area: Include a covered area with picnic tables, vending machines, or a small convenience store offering basic supplies like snacks, drinks, sunscreen, and first-aid kits. Freshwater Access: Install freshwater spigots around the platform for refilling water bottles or rinsing equipment. Docking Stations: Designate areas for resident vessels to dock temporarily for easy access to the platform. Sustainability Features: Solar Panels: Install solar panels on the roof of the central hub or throughout the platform to generate clean electricity for powering lights, Wi-Fi, and USB charging ports. Waste Management: Implement a responsible waste management system. This could involve designated waste bins for proper disposal and potential partnerships with mainland waste collection services. Water Conservation: Freshwater is a precious resource. Consider rainwater harvesting systems or low-flow fixtures to minimize freshwater usage. Safety and Regulations: Safety Equipment: Equip the platform with life rings, life jackets, and a first-aid kit. Emergency Procedures: Develop clear emergency response procedures and ensure all staff (if any) are trained accordingly. Lighting: Install proper lighting for nighttime visibility and safety. Permits and Approvals: Obtain all necessary permits and approvals from relevant local, state, and federal authorities before construction commences. Additional Considerations: Accessibility: Ensure the platform is accessible for people with disabilities, potentially by incorporating ramps or lifts. Security: Develop a plan to deter unauthorized access and ensure the safety of residents and their belongings. This could involve security cameras or periodic patrols. Maintenance: Establish a regular maintenance plan to ensure the platform remains in good condition. By implementing this plan, Aquapod can create a unique and sustainable Aqua-Oasis that enhances the overall Aquapod experience for residents.
|