Hugging Face's logo

Spaces:
Danny2014
/
google
Running

App Files Community
Danny2014 commited on
Commit
aa73497
·
verified ·
1 Parent(s): a1457f5

can you make the site editable by me? - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +686 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Google
3
- emoji: 🚀
4
- colorFrom: blue
5
- colorTo: yellow
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: google
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: blue
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,686 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Wendy Tem FC - Official Website</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=Bebas+Neue&family=Montserrat:wght@400;600;700&display=swap');
11
+
12
+ /* Edit Mode Styles */
13
+ .edit-mode .editable {
14
+ outline: 2px dashed rgba(255, 213, 79, 0.7);
15
+ position: relative;
16
+ min-height: 20px;
17
+ }
18
+ .edit-mode .editable:hover {
19
+ background-color: rgba(255, 213, 79, 0.1);
20
+ }
21
+ .edit-toolbar {
22
+ position: fixed;
23
+ top: 10px;
24
+ right: 10px;
25
+ z-index: 9999;
26
+ background: white;
27
+ padding: 10px;
28
+ border-radius: 5px;
29
+ box-shadow: 0 2px 10px rgba(0,0,0,0.2);
30
+ }
31
+ .edit-btn {
32
+ background: #1a365d;
33
+ color: white;
34
+ border: none;
35
+ padding: 8px 15px;
36
+ border-radius: 4px;
37
+ cursor: pointer;
38
+ font-weight: bold;
39
+ }
40
+ .edit-btn:hover {
41
+ background: #2c5282;
42
+ }
43
+
44
+ :root {
45
+ --primary: #1a365d;
46
+ --secondary: #e53e3e;
47
+ --accent: #f6ad55;
48
+ }
49
+
50
+ body {
51
+ font-family: 'Montserrat', sans-serif;
52
+ }
53
+
54
+ .logo-font {
55
+ font-family: 'Bebas Neue', cursive;
56
+ }
57
+
58
+ .player-card:hover {
59
+ transform: translateY(-10px);
60
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
61
+ }
62
+
63
+ .hero {
64
+ background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1574629810360-7efbbe195018?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80');
65
+ background-size: cover;
66
+ background-position: center;
67
+ }
68
+
69
+ .player-image {
70
+ height: 250px;
71
+ object-fit: cover;
72
+ object-position: top;
73
+ }
74
+
75
+ .trophy {
76
+ animation: bounce 2s infinite;
77
+ }
78
+
79
+ @keyframes bounce {
80
+ 0%, 100% { transform: translateY(0); }
81
+ 50% { transform: translateY(-10px); }
82
+ }
83
+ </style>
84
+ </head>
85
+ <body class="bg-gray-100">
86
+ <!-- Edit Mode Toggle -->
87
+ <div class="edit-toolbar">
88
+ <button id="toggle-edit" class="edit-btn">Toggle Edit Mode</button>
89
+ <div id="save-status" style="margin-top: 5px; font-size: 12px;"></div>
90
+ </div>
91
+
92
+ <!-- Navigation -->
93
+ <nav class="bg-blue-900 text-white shadow-lg">
94
+ <div class="container mx-auto px-6 py-3">
95
+ <div class="flex justify-between items-center">
96
+ <div class="flex items-center space-x-4">
97
+ <div class="flex items-center">
98
+ <i class="fas fa-futbol text-2xl text-yellow-400 mr-2"></i>
99
+ <span class="logo-font text-3xl">Wendy Tem FC</span>
100
+ </div>
101
+ </div>
102
+ <div class="hidden md:flex items-center space-x-8">
103
+ <a href="#home" class="hover:text-yellow-400 transition">Home</a>
104
+ <a href="#team" class="hover:text-yellow-400 transition">Team</a>
105
+ <a href="#matches" class="hover:text-yellow-400 transition">Matches</a>
106
+ <a href="#gallery" class="hover:text-yellow-400 transition">Gallery</a>
107
+ <a href="#contact" class="hover:text-yellow-400 transition">Contact</a>
108
+ </div>
109
+ <div class="md:hidden">
110
+ <button id="menu-btn" class="text-white focus:outline-none">
111
+ <i class="fas fa-bars text-2xl"></i>
112
+ </button>
113
+ </div>
114
+ </div>
115
+ <!-- Mobile Menu -->
116
+ <div id="mobile-menu" class="hidden md:hidden mt-4 pb-4">
117
+ <a href="#home" class="block py-2 hover:text-yellow-400 transition">Home</a>
118
+ <a href="#team" class="block py-2 hover:text-yellow-400 transition">Team</a>
119
+ <a href="#matches" class="block py-2 hover:text-yellow-400 transition">Matches</a>
120
+ <a href="#gallery" class="block py-2 hover:text-yellow-400 transition">Gallery</a>
121
+ <a href="#contact" class="block py-2 hover:text-yellow-400 transition">Contact</a>
122
+ </div>
123
+ </div>
124
+ </nav>
125
+
126
+ <!-- Hero Section -->
127
+ <section id="home" class="hero text-white py-20 md:py-32">
128
+ <div class="container mx-auto px-6 text-center">
129
+ <h1 class="logo-font text-5xl md:text-7xl mb-6">Wendy Tem FC</h1>
130
+ <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Passion. Teamwork. Victory. Our journey to greatness continues.</p>
131
+ <div class="flex justify-center space-x-4">
132
+ <a href="#team" class="bg-red-600 hover:bg-red-700 px-6 py-3 rounded-lg font-semibold transition">Meet The Team</a>
133
+ <a href="#matches" class="bg-yellow-500 hover:bg-yellow-600 px-6 py-3 rounded-lg font-semibold text-gray-900 transition">Upcoming Matches</a>
134
+ </div>
135
+ </div>
136
+ </section>
137
+
138
+ <!-- About Section -->
139
+ <section class="py-16 bg-white">
140
+ <div class="container mx-auto px-6">
141
+ <div class="flex flex-col md:flex-row items-center">
142
+ <div class="md:w-1/2 mb-10 md:mb-0">
143
+ <h2 class="logo-font text-4xl mb-6 text-blue-900">Our Story</h2>
144
+ <p class="text-gray-700 mb-4">Founded with a vision to bring together talented players under one banner, Wendy Tem FC has grown from a local team to a competitive force in regional football.</p>
145
+ <p class="text-gray-700 mb-6">Our philosophy is simple: play beautiful football, respect the game, and always give 100% for the badge.</p>
146
+ <div class="flex items-center">
147
+ <div class="mr-6 text-center">
148
+ <div class="text-3xl font-bold text-red-600">7+</div>
149
+ <div class="text-gray-600">Dedicated Players</div>
150
+ </div>
151
+ <div class="mr-6 text-center">
152
+ <div class="text-3xl font-bold text-blue-900">3</div>
153
+ <div class="text-gray-600">Team Trophies</div>
154
+ </div>
155
+ <div class="text-center">
156
+ <div class="text-3xl font-bold text-yellow-500">100%</div>
157
+ <div class="text-gray-600">Passion</div>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ <div class="md:w-1/2 md:pl-12">
162
+ <div class="relative">
163
+ <img src="https://images.unsplash.com/photo-1540747913346-19e32dc3e97e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=760&q=80" alt="Team huddle" class="rounded-lg shadow-xl">
164
+ <div class="absolute -bottom-6 -right-6 bg-yellow-400 p-4 rounded-full shadow-lg trophy">
165
+ <i class="fas fa-trophy text-4xl text-blue-900"></i>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </section>
172
+
173
+ <!-- Team Section -->
174
+ <section id="team" class="py-16 bg-gray-100">
175
+ <div class="container mx-auto px-6">
176
+ <h2 class="logo-font text-4xl mb-12 text-center text-blue-900">Meet Our Players</h2>
177
+
178
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
179
+ <!-- Player 1 -->
180
+ <div class="player-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
181
+ <img src="https://images.unsplash.com/photo-1570295999919-56ce3295bada?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Marco Menichelli" class="w-full player-image">
182
+ <div class="p-6">
183
+ <h3 class="text-xl font-bold mb-1">Marco Menichelli</h3>
184
+ <p class="text-gray-600 mb-3">Midfielder</p>
185
+ <div class="flex justify-between text-sm text-gray-500">
186
+ <span>#10</span>
187
+ <span>Captain</span>
188
+ </div>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- Player 2 -->
193
+ <div class="player-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
194
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Andrea Ventrice" class="w-full player-image">
195
+ <div class="p-6">
196
+ <h3 class="text-xl font-bold mb-1">Andrea Ventrice</h3>
197
+ <p class="text-gray-600 mb-3">Forward</p>
198
+ <div class="flex justify-between text-sm text-gray-500">
199
+ <span>#7</span>
200
+ <span>Top Scorer</span>
201
+ </div>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- Player 3 -->
206
+ <div class="player-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
207
+ <img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Roberto Menichelli" class="w-full player-image">
208
+ <div class="p-6">
209
+ <h3 class="text-xl font-bold mb-1">Roberto Menichelli</h3>
210
+ <p class="text-gray-600 mb-3">Defender</p>
211
+ <div class="flex justify-between text-sm text-gray-500">
212
+ <span>#4</span>
213
+ <span>Vice Captain</span>
214
+ </div>
215
+ </div>
216
+ </div>
217
+
218
+ <!-- Player 4 -->
219
+ <div class="player-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
220
+ <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Alessandro Sabia" class="w-full player-image">
221
+ <div class="p-6">
222
+ <h3 class="text-xl font-bold mb-1">Alessandro Sabia</h3>
223
+ <p class="text-gray-600 mb-3">Goalkeeper</p>
224
+ <div class="flex justify-between text-sm text-gray-500">
225
+ <span>#1</span>
226
+ <span>Wall</span>
227
+ </div>
228
+ </div>
229
+ </div>
230
+
231
+ <!-- Player 5 -->
232
+ <div class="player-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
233
+ <img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Alessandro De Simone" class="w-full player-image">
234
+ <div class="p-6">
235
+ <h3 class="text-xl font-bold mb-1">Alessandro De Simone</h3>
236
+ <p class="text-gray-600 mb-3">Midfielder</p>
237
+ <div class="flex justify-between text-sm text-gray-500">
238
+ <span>#8</span>
239
+ <span>Playmaker</span>
240
+ </div>
241
+ </div>
242
+ </div>
243
+
244
+ <!-- Player 6 -->
245
+ <div class="player-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
246
+ <img src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Lorenzo Tomassini" class="w-full player-image">
247
+ <div class="p-6">
248
+ <h3 class="text-xl font-bold mb-1">Lorenzo Tomassini</h3>
249
+ <p class="text-gray-600 mb-3">Defender</p>
250
+ <div class="flex justify-between text-sm text-gray-500">
251
+ <span>#5</span>
252
+ <span>Rock Solid</span>
253
+ </div>
254
+ </div>
255
+ </div>
256
+
257
+ <!-- Player 7 -->
258
+ <div class="player-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
259
+ <img src="https://images.unsplash.com/photo-1564564244660-5d73c057f2d2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1456&q=80" alt="Daniele Conti" class="w-full player-image">
260
+ <div class="p-6">
261
+ <h3 class="text-xl font-bold mb-1">Daniele Conti</h3>
262
+ <p class="text-gray-600 mb-3">Forward</p>
263
+ <div class="flex justify-between text-sm text-gray-500">
264
+ <span>#9</span>
265
+ <span>Speedster</span>
266
+ </div>
267
+ </div>
268
+ </div>
269
+
270
+ <!-- Team Staff Card -->
271
+ <div class="player-card bg-blue-900 text-white rounded-lg overflow-hidden shadow-md transition duration-300">
272
+ <div class="h-64 bg-blue-800 flex items-center justify-center">
273
+ <i class="fas fa-users text-6xl"></i>
274
+ </div>
275
+ <div class="p-6">
276
+ <h3 class="text-xl font-bold mb-1">Team Staff</h3>
277
+ <p class="mb-3">Our dedicated support team</p>
278
+ <div class="text-sm">
279
+ <p class="mb-1"><i class="fas fa-user-tie mr-2"></i> Manager: Luca Bianchi</p>
280
+ <p class="mb-1"><i class="fas fa-medal mr-2"></i> Coach: Marco Rossi</p>
281
+ <p><i class="fas fa-heartbeat mr-2"></i> Physio: Giovanni Verdi</p>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </section>
288
+
289
+ <!-- Matches Section -->
290
+ <section id="matches" class="py-16 bg-white">
291
+ <div class="container mx-auto px-6">
292
+ <h2 class="logo-font text-4xl mb-12 text-center text-blue-900">Upcoming Matches</h2>
293
+
294
+ <div class="max-w-3xl mx-auto">
295
+ <!-- Match 1 -->
296
+ <div class="flex flex-col md:flex-row items-center justify-between bg-gray-100 rounded-lg p-6 mb-6">
297
+ <div class="text-center md:text-left mb-4 md:mb-0">
298
+ <div class="text-lg font-semibold">League Match</div>
299
+ <div class="text-gray-600">Saturday, June 10, 2023</div>
300
+ </div>
301
+ <div class="flex items-center">
302
+ <div class="text-center px-4">
303
+ <div class="font-bold text-xl">Wendy Tem FC</div>
304
+ <div class="text-sm text-gray-600">Home</div>
305
+ </div>
306
+ <div class="px-4 text-center">
307
+ <div class="text-2xl font-bold text-red-600">VS</div>
308
+ <div class="text-xs text-gray-600">15:00 CET</div>
309
+ </div>
310
+ <div class="text-center px-4">
311
+ <div class="font-bold text-xl">FC Torino</div>
312
+ <div class="text-sm text-gray-600">Away</div>
313
+ </div>
314
+ </div>
315
+ <button class="mt-4 md:mt-0 bg-blue-900 hover:bg-blue-800 text-white px-4 py-2 rounded-lg transition">
316
+ Get Tickets
317
+ </button>
318
+ </div>
319
+
320
+ <!-- Match 2 -->
321
+ <div class="flex flex-col md:flex-row items-center justify-between bg-gray-100 rounded-lg p-6 mb-6">
322
+ <div class="text-center md:text-left mb-4 md:mb-0">
323
+ <div class="text-lg font-semibold">Cup Quarterfinal</div>
324
+ <div class="text-gray-600">Wednesday, June 14, 2023</div>
325
+ </div>
326
+ <div class="flex items-center">
327
+ <div class="text-center px-4">
328
+ <div class="font-bold text-xl">Juventus FC</div>
329
+ <div class="text-sm text-gray-600">Home</div>
330
+ </div>
331
+ <div class="px-4 text-center">
332
+ <div class="text-2xl font-bold text-red-600">VS</div>
333
+ <div class="text-xs text-gray-600">20:45 CET</div>
334
+ </div>
335
+ <div class="text-center px-4">
336
+ <div class="font-bold text-xl">Wendy Tem FC</div>
337
+ <div class="text-sm text-gray-600">Away</div>
338
+ </div>
339
+ </div>
340
+ <button class="mt-4 md:mt-0 bg-blue-900 hover:bg-blue-800 text-white px-4 py-2 rounded-lg transition">
341
+ Get Tickets
342
+ </button>
343
+ </div>
344
+
345
+ <!-- Match 3 -->
346
+ <div class="flex flex-col md:flex-row items-center justify-between bg-gray-100 rounded-lg p-6">
347
+ <div class="text-center md:text-left mb-4 md:mb-0">
348
+ <div class="text-lg font-semibold">Friendly Match</div>
349
+ <div class="text-gray-600">Sunday, June 18, 2023</div>
350
+ </div>
351
+ <div class="flex items-center">
352
+ <div class="text-center px-4">
353
+ <div class="font-bold text-xl">Wendy Tem FC</div>
354
+ <div class="text-sm text-gray-600">Home</div>
355
+ </div>
356
+ <div class="px-4 text-center">
357
+ <div class="text-2xl font-bold text-red-600">VS</div>
358
+ <div class="text-xs text-gray-600">18:00 CET</div>
359
+ </div>
360
+ <div class="text-center px-4">
361
+ <div class="font-bold text-xl">AC Milan</div>
362
+ <div class="text-sm text-gray-600">Away</div>
363
+ </div>
364
+ </div>
365
+ <button class="mt-4 md:mt-0 bg-blue-900 hover:bg-blue-800 text-white px-4 py-2 rounded-lg transition">
366
+ Get Tickets
367
+ </button>
368
+ </div>
369
+ </div>
370
+
371
+ <div class="text-center mt-12">
372
+ <a href="#" class="inline-block bg-red-600 hover:bg-red-700 text-white px-8 py-3 rounded-lg font-semibold transition">
373
+ View Full Schedule <i class="fas fa-arrow-right ml-2"></i>
374
+ </a>
375
+ </div>
376
+ </div>
377
+ </section>
378
+
379
+ <!-- Gallery Section -->
380
+ <section id="gallery" class="py-16 bg-gray-100">
381
+ <div class="container mx-auto px-6">
382
+ <h2 class="logo-font text-4xl mb-12 text-center text-blue-900">Team Gallery</h2>
383
+
384
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
385
+ <div class="relative group overflow-hidden rounded-lg shadow-lg">
386
+ <img src="https://images.unsplash.com/photo-1543357480-c60d400e8073?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Team training" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
387
+ <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
388
+ <span class="text-white font-bold">Training Session</span>
389
+ </div>
390
+ </div>
391
+
392
+ <div class="relative group overflow-hidden rounded-lg shadow-lg">
393
+ <img src="https://images.unsplash.com/photo-1574629810360-7efbbe195018?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80" alt="Match action" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
394
+ <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
395
+ <span class="text-white font-bold">Match Action</span>
396
+ </div>
397
+ </div>
398
+
399
+ <div class="relative group overflow-hidden rounded-lg shadow-lg">
400
+ <img src="https://images.unsplash.com/photo-1522778119026-d647f0596c20?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Celebration" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
401
+ <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
402
+ <span class="text-white font-bold">Victory Celebration</span>
403
+ </div>
404
+ </div>
405
+
406
+ <div class="relative group overflow-hidden rounded-lg shadow-lg">
407
+ <img src="https://images.unsplash.com/photo-1517649763962-0c623066013b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Fans" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
408
+ <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
409
+ <span class="text-white font-bold">Our Amazing Fans</span>
410
+ </div>
411
+ </div>
412
+
413
+ <div class="relative group overflow-hidden rounded-lg shadow-lg">
414
+ <img src="https://images.unsplash.com/photo-1540747913346-19e32dc3e97e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Team huddle" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
415
+ <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
416
+ <span class="text-white font-bold">Team Huddle</span>
417
+ </div>
418
+ </div>
419
+
420
+ <div class="relative group overflow-hidden rounded-lg shadow-lg">
421
+ <img src="https://images.unsplash.com/photo-1579952363871-368c0e6db1e5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Stadium" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
422
+ <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
423
+ <span class="text-white font-bold">Our Home Stadium</span>
424
+ </div>
425
+ </div>
426
+ </div>
427
+
428
+ <div class="text-center mt-12">
429
+ <a href="#" class="inline-block bg-blue-900 hover:bg-blue-800 text-white px-8 py-3 rounded-lg font-semibold transition">
430
+ View More Photos <i class="fas fa-camera ml-2"></i>
431
+ </a>
432
+ </div>
433
+ </div>
434
+ </section>
435
+
436
+ <!-- Contact Section -->
437
+ <section id="contact" class="py-16 bg-blue-900 text-white">
438
+ <div class="container mx-auto px-6">
439
+ <h2 class="logo-font text-4xl mb-12 text-center">Get In Touch</h2>
440
+
441
+ <div class="flex flex-col md:flex-row">
442
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
443
+ <h3 class="text-2xl font-bold mb-6">Contact Information</h3>
444
+ <div class="space-y-6">
445
+ <div class="flex items-start">
446
+ <i class="fas fa-map-marker-alt text-yellow-400 mt-1 mr-4"></i>
447
+ <div>
448
+ <h4 class="font-semibold">Address</h4>
449
+ <p class="text-blue-200">123 Football Avenue, Turin, Italy</p>
450
+ </div>
451
+ </div>
452
+ <div class="flex items-start">
453
+ <i class="fas fa-phone-alt text-yellow-400 mt-1 mr-4"></i>
454
+ <div>
455
+ <h4 class="font-semibold">Phone</h4>
456
+ <p class="text-blue-200">+39 123 456 7890</p>
457
+ </div>
458
+ </div>
459
+ <div class="flex items-start">
460
+ <i class="fas fa-envelope text-yellow-400 mt-1 mr-4"></i>
461
+ <div>
462
+ <h4 class="font-semibold">Email</h4>
463
+ <p class="text-blue-200">info@wendytemfc.com</p>
464
+ </div>
465
+ </div>
466
+ <div class="flex items-start">
467
+ <i class="fas fa-clock text-yellow-400 mt-1 mr-4"></i>
468
+ <div>
469
+ <h4 class="font-semibold">Office Hours</h4>
470
+ <p class="text-blue-200">Monday - Friday: 9:00 AM - 5:00 PM</p>
471
+ </div>
472
+ </div>
473
+ </div>
474
+
475
+ <div class="mt-10">
476
+ <h3 class="text-2xl font-bold mb-6">Follow Us</h3>
477
+ <div class="flex space-x-4">
478
+ <a href="#" class="w-10 h-10 rounded-full bg-blue-800 flex items-center justify-center hover:bg-yellow-400 hover:text-blue-900 transition">
479
+ <i class="fab fa-facebook-f"></i>
480
+ </a>
481
+ <a href="#" class="w-10 h-10 rounded-full bg-blue-800 flex items-center justify-center hover:bg-yellow-400 hover:text-blue-900 transition">
482
+ <i class="fab fa-twitter"></i>
483
+ </a>
484
+ <a href="#" class="w-10 h-10 rounded-full bg-blue-800 flex items-center justify-center hover:bg-yellow-400 hover:text-blue-900 transition">
485
+ <i class="fab fa-instagram"></i>
486
+ </a>
487
+ <a href="#" class="w-10 h-10 rounded-full bg-blue-800 flex items-center justify-center hover:bg-yellow-400 hover:text-blue-900 transition">
488
+ <i class="fab fa-youtube"></i>
489
+ </a>
490
+ </div>
491
+ </div>
492
+ </div>
493
+
494
+ <div class="md:w-1/2">
495
+ <h3 class="text-2xl font-bold mb-6">Send Us a Message</h3>
496
+ <form>
497
+ <div class="mb-4">
498
+ <label for="name" class="block mb-2">Your Name</label>
499
+ <input type="text" id="name" class="w-full px-4 py-2 rounded bg-blue-800 border border-blue-700 focus:outline-none focus:ring-2 focus:ring-yellow-400">
500
+ </div>
501
+ <div class="mb-4">
502
+ <label for="email" class="block mb-2">Your Email</label>
503
+ <input type="email" id="email" class="w-full px-4 py-2 rounded bg-blue-800 border border-blue-700 focus:outline-none focus:ring-2 focus:ring-yellow-400">
504
+ </div>
505
+ <div class="mb-4">
506
+ <label for="subject" class="block mb-2">Subject</label>
507
+ <input type="text" id="subject" class="w-full px-4 py-2 rounded bg-blue-800 border border-blue-700 focus:outline-none focus:ring-2 focus:ring-yellow-400">
508
+ </div>
509
+ <div class="mb-6">
510
+ <label for="message" class="block mb-2">Your Message</label>
511
+ <textarea id="message" rows="4" class="w-full px-4 py-2 rounded bg-blue-800 border border-blue-700 focus:outline-none focus:ring-2 focus:ring-yellow-400"></textarea>
512
+ </div>
513
+ <button type="submit" class="bg-yellow-400 hover:bg-yellow-500 text-blue-900 font-bold py-3 px-6 rounded-lg transition">
514
+ Send Message <i class="fas fa-paper-plane ml-2"></i>
515
+ </button>
516
+ </form>
517
+ </div>
518
+ </div>
519
+ </div>
520
+ </section>
521
+
522
+ <!-- Newsletter -->
523
+ <section class="py-12 bg-red-600 text-white">
524
+ <div class="container mx-auto px-6 text-center">
525
+ <h2 class="logo-font text-3xl mb-4">Stay Updated</h2>
526
+ <p class="max-w-2xl mx-auto mb-8">Subscribe to our newsletter for the latest news, match updates, and exclusive content from Wendy Tem FC.</p>
527
+ <div class="max-w-md mx-auto flex">
528
+ <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-lg focus:outline-none text-gray-900">
529
+ <button class="bg-blue-900 hover:bg-blue-800 px-6 py-3 rounded-r-lg font-semibold transition">
530
+ Subscribe
531
+ </button>
532
+ </div>
533
+ </div>
534
+ </section>
535
+
536
+ <!-- Footer -->
537
+ <footer class="bg-gray-900 text-gray-400 py-8">
538
+ <div class="container mx-auto px-6">
539
+ <div class="flex flex-col md:flex-row justify-between items-center">
540
+ <div class="flex items-center mb-4 md:mb-0">
541
+ <i class="fas fa-futbol text-2xl text-yellow-400 mr-2"></i>
542
+ <span class="logo-font text-2xl text-white">Wendy Tem FC</span>
543
+ </div>
544
+ <div class="text-center md:text-right">
545
+ <p>&copy; 2023 Wendy Tem FC. All rights reserved.</p>
546
+ <div class="flex justify-center md:justify-end space-x-4 mt-2">
547
+ <a href="#" class="hover:text-white transition">Privacy Policy</a>
548
+ <a href="#" class="hover:text-white transition">Terms of Service</a>
549
+ <a href="#" class="hover:text-white transition">Sitemap</a>
550
+ </div>
551
+ </div>
552
+ </div>
553
+ </div>
554
+ </footer>
555
+
556
+ <!-- Back to Top Button -->
557
+ <button id="back-to-top" class="fixed bottom-6 right-6 bg-blue-900 text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300">
558
+ <i class="fas fa-arrow-up"></i>
559
+ </button>
560
+
561
+ <script>
562
+ // Edit Mode Functionality
563
+ document.addEventListener('DOMContentLoaded', function() {
564
+ const urlParams = new URLSearchParams(window.location.search);
565
+ const editMode = urlParams.get('edit') === 'true';
566
+
567
+ if (editMode) {
568
+ document.body.classList.add('edit-mode');
569
+ document.getElementById('toggle-edit').textContent = 'Exit Edit Mode';
570
+ }
571
+
572
+ // Make elements editable
573
+ const editables = document.querySelectorAll('h1, h2, h3, p, span, a:not([href^="#"]):not([href^="mailto:"])');
574
+ editables.forEach(el => {
575
+ el.classList.add('editable');
576
+ if (editMode) {
577
+ el.setAttribute('contenteditable', 'true');
578
+ }
579
+ });
580
+
581
+ // Toggle edit mode
582
+ document.getElementById('toggle-edit').addEventListener('click', function() {
583
+ const isEditMode = document.body.classList.toggle('edit-mode');
584
+ this.textContent = isEditMode ? 'Exit Edit Mode' : 'Toggle Edit Mode';
585
+
586
+ editables.forEach(el => {
587
+ el.setAttribute('contenteditable', isEditMode);
588
+ });
589
+
590
+ // Update URL
591
+ const newUrl = new URL(window.location);
592
+ if (isEditMode) {
593
+ newUrl.searchParams.set('edit', 'true');
594
+ } else {
595
+ newUrl.searchParams.delete('edit');
596
+ }
597
+ window.history.pushState({}, '', newUrl);
598
+ });
599
+
600
+ // Save content to localStorage
601
+ function saveContent() {
602
+ const content = {};
603
+ editables.forEach((el, index) => {
604
+ content[`editable-${index}`] = el.innerHTML;
605
+ });
606
+ localStorage.setItem('wendytemfc-content', JSON.stringify(content));
607
+ document.getElementById('save-status').textContent = 'Changes saved locally!';
608
+ setTimeout(() => {
609
+ document.getElementById('save-status').textContent = '';
610
+ }, 2000);
611
+ }
612
+
613
+ // Load content from localStorage
614
+ function loadContent() {
615
+ const saved = localStorage.getItem('wendytemfc-content');
616
+ if (saved) {
617
+ const content = JSON.parse(saved);
618
+ editables.forEach((el, index) => {
619
+ if (content[`editable-${index}`]) {
620
+ el.innerHTML = content[`editable-${index}`];
621
+ }
622
+ });
623
+ }
624
+ }
625
+
626
+ // Auto-save on changes
627
+ editables.forEach(el => {
628
+ el.addEventListener('input', saveContent);
629
+ });
630
+
631
+ // Load saved content
632
+ loadContent();
633
+ });
634
+
635
+ // Mobile menu toggle
636
+ const menuBtn = document.getElementById('menu-btn');
637
+ const mobileMenu = document.getElementById('mobile-menu');
638
+
639
+ menuBtn.addEventListener('click', () => {
640
+ mobileMenu.classList.toggle('hidden');
641
+ });
642
+
643
+ // Back to top button
644
+ const backToTopBtn = document.getElementById('back-to-top');
645
+
646
+ window.addEventListener('scroll', () => {
647
+ if (window.pageYOffset > 300) {
648
+ backToTopBtn.classList.remove('opacity-0', 'invisible');
649
+ backToTopBtn.classList.add('opacity-100', 'visible');
650
+ } else {
651
+ backToTopBtn.classList.remove('opacity-100', 'visible');
652
+ backToTopBtn.classList.add('opacity-0', 'invisible');
653
+ }
654
+ });
655
+
656
+ backToTopBtn.addEventListener('click', () => {
657
+ window.scrollTo({
658
+ top: 0,
659
+ behavior: 'smooth'
660
+ });
661
+ });
662
+
663
+ // Smooth scrolling for navigation links
664
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
665
+ anchor.addEventListener('click', function (e) {
666
+ e.preventDefault();
667
+
668
+ const targetId = this.getAttribute('href');
669
+ const targetElement = document.querySelector(targetId);
670
+
671
+ if (targetElement) {
672
+ window.scrollTo({
673
+ top: targetElement.offsetTop - 80,
674
+ behavior: 'smooth'
675
+ });
676
+
677
+ // Close mobile menu if open
678
+ if (!mobileMenu.classList.contains('hidden')) {
679
+ mobileMenu.classList.add('hidden');
680
+ }
681
+ }
682
+ });
683
+ });
684
+ </script>
685
+ <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=Danny2014/google" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
686
+ </html>