Hugging Face's logo

Spaces:
Danny2014
/
google
Running

App Files Community
google / index.html
Danny2014's picture
Danny2014
create me a part for the statistics - Follow Up Deployment
ec9943e verified
Raw
History Blame Contribute Delete
60.7 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Wendy Tem FC - Official Website</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;600;700&display=swap');
/* Edit Mode Styles */
 .edit-mode .editable {
 outline: 2px dashed rgba(255, 213, 79, 0.7);
 position: relative;
 min-height: 20px;
 }
 .edit-mode .editable:hover {
 background-color: rgba(255, 213, 79, 0.1);
 }
 .edit-mode .editable-image:hover .edit-image-overlay {
 opacity: 1;
 }
 .edit-image-overlay {
 cursor: pointer;
 }
 .edit-toolbar {
 position: fixed;
 top: 10px;
 right: 10px;
 z-index: 9999;
 background: white;
 padding: 10px;
 border-radius: 5px;
 box-shadow: 0 2px 10px rgba(0,0,0,0.2);
 }
 .edit-btn {
 background: #1a365d;
 color: white;
 border: none;
 padding: 8px 15px;
 border-radius: 4px;
 cursor: pointer;
 font-weight: bold;
 }
 .edit-btn:hover {
 background: #2c5282;
 }
:root {
 --primary: #1a365d;
 --secondary: #e53e3e;
 --accent: #f6ad55;
 }
body {
 font-family: 'Montserrat', sans-serif;
 }
.logo-font {
 font-family: 'Bebas Neue', cursive;
 }
.player-card:hover {
 transform: translateY(-10px);
 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
.hero {
 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');
 background-size: cover;
 background-position: center;
 }
.player-image {
 height: 250px;
 object-fit: cover;
 object-position: top;
 }
.trophy {
 animation: bounce 2s infinite;
 }
@keyframes bounce {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-10px); }
 }
 </style>
</head>
<body class="bg-gray-100">
 <!-- Edit Mode Toggle -->
 <div class="edit-toolbar">
 <button id="toggle-edit" class="edit-btn">Toggle Edit Mode</button>
 <div id="save-status" style="margin-top: 5px; font-size: 12px;"></div>
 </div>
<!-- Navigation -->
 <nav class="bg-blue-900 text-white shadow-lg">
 <div class="container mx-auto px-6 py-3">
 <div class="flex justify-between items-center">
 <div class="flex items-center space-x-4">
 <div class="flex items-center">
 <i class="fas fa-futbol text-2xl text-yellow-400 mr-2"></i>
 <span class="logo-font text-3xl">Wendy Tem FC</span>
 </div>
 </div>
 <div class="hidden md:flex items-center space-x-8">
 <a href="#home" class="hover:text-yellow-400 transition">Home</a>
 <a href="#team" class="hover:text-yellow-400 transition">Team</a>
 <a href="#matches" class="hover:text-yellow-400 transition">Matches</a>
 <a href="#training" class="hover:text-yellow-400 transition">Training Programs</a>
 <a href="#stats" class="hover:text-yellow-400 transition">Statistics</a>
 <a href="#gallery" class="hover:text-yellow-400 transition">Gallery</a>
 <a href="#contact" class="hover:text-yellow-400 transition">Contact</a>
 </div>
 <div class="md:hidden">
 <button id="menu-btn" class="text-white focus:outline-none">
 <i class="fas fa-bars text-2xl"></i>
 </button>
 </div>
 </div>
 <!-- Mobile Menu -->
 <div id="mobile-menu" class="hidden md:hidden mt-4 pb-4">
 <a href="#home" class="block py-2 hover:text-yellow-400 transition">Home</a>
 <a href="#team" class="block py-2 hover:text-yellow-400 transition">Team</a>
 <a href="#matches" class="block py-2 hover:text-yellow-400 transition">Matches</a>
 <a href="#training" class="block py-2 hover:text-yellow-400 transition">Training Programs</a>
 <a href="#stats" class="block py-2 hover:text-yellow-400 transition">Statistics</a>
 <a href="#gallery" class="block py-2 hover:text-yellow-400 transition">Gallery</a>
 <a href="#contact" class="block py-2 hover:text-yellow-400 transition">Contact</a>
 </div>
 </div>
 </nav>
<!-- Hero Section -->
 <section id="home" class="hero text-white py-20 md:py-32">
 <div class="container mx-auto px-6 text-center">
 <h1 class="logo-font text-5xl md:text-7xl mb-6">Wendy Tem FC</h1>
 <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Passion. Teamwork. Victory. Our journey to greatness continues.</p>
 <div class="flex justify-center space-x-4">
 <a href="#team" class="bg-red-600 hover:bg-red-700 px-6 py-3 rounded-lg font-semibold transition">Meet The Team</a>
 <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>
 </div>
 </div>
 </section>
<!-- About Section -->
 <section class="py-16 bg-white">
 <div class="container mx-auto px-6">
 <div class="flex flex-col md:flex-row items-center">
 <div class="md:w-1/2 mb-10 md:mb-0">
 <h2 class="logo-font text-4xl mb-6 text-blue-900">Our Story</h2>
 <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>
 <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>
 <div class="flex items-center">
 <div class="mr-6 text-center">
 <div class="text-3xl font-bold text-red-600">7+</div>
 <div class="text-gray-600">Dedicated Players</div>
 </div>
 <div class="mr-6 text-center">
 <div class="text-3xl font-bold text-blue-900">3</div>
 <div class="text-gray-600">Team Trophies</div>
 </div>
 <div class="text-center">
 <div class="text-3xl font-bold text-yellow-500">100%</div>
 <div class="text-gray-600">Passion</div>
 </div>
 </div>
 </div>
 <div class="md:w-1/2 md:pl-12">
 <div class="relative">
 <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">
 <div class="absolute -bottom-6 -right-6 bg-yellow-400 p-4 rounded-full shadow-lg trophy">
 <i class="fas fa-trophy text-4xl text-blue-900"></i>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Training Programs Section -->
 <section id="training" class="py-16 bg-white">
 <div class="container mx-auto px-6">
 <h2 class="logo-font text-4xl mb-12 text-center text-blue-900">Training Programs</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <!-- Program 1 -->
 <div class="bg-gray-100 rounded-lg overflow-hidden shadow-lg transition duration-300 hover:shadow-xl">
 <div class="h-48 bg-blue-900 flex items-center justify-center">
 <i class="fas fa-child text-6xl text-yellow-400"></i>
 </div>
 <div class="p-6">
 <h3 class="text-2xl font-bold mb-3 text-blue-900">Youth Development</h3>
 <p class="text-gray-700 mb-4">For ages 6-16 focusing on fundamental skills, teamwork and sportsmanship.</p>
 <ul class="space-y-2 mb-6">
 <li class="flex items-start">
 <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
 <span>Monday & Wednesday 4-6 PM</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
 <span>Saturday 9-11 AM</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
 <span>Age-appropriate coaching</span>
 </li>
 </ul>
 <a href="#register" class="inline-block bg-blue-900 hover:bg-blue-800 text-white px-6 py-2 rounded-lg transition">
 Learn More
 </a>
 </div>
 </div>
<!-- Program 2 -->
 <div class="bg-gray-100 rounded-lg overflow-hidden shadow-lg transition duration-300 hover:shadow-xl">
 <div class="h-48 bg-red-600 flex items-center justify-center">
 <i class="fas fa-running text-6xl text-white"></i>
 </div>
 <div class="p-6">
 <h3 class="text-2xl font-bold mb-3 text-blue-900">Adult Training</h3>
 <p class="text-gray-700 mb-4">For players 17+ looking to improve skills, fitness and game understanding.</p>
 <ul class="space-y-2 mb-6">
 <li class="flex items-start">
 <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
 <span>Tuesday & Thursday 7-9 PM</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
 <span>Sunday 10 AM-12 PM</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
 <span>Tactical and technical development</span>
 </li>
 </ul>
 <a href="#register" class="inline-block bg-blue-900 hover:bg-blue-800 text-white px-6 py-2 rounded-lg transition">
 Learn More
 </a>
 </div>
 </div>
<!-- Program 3 -->
 <div class="bg-gray-100 rounded-lg overflow-hidden shadow-lg transition duration-300 hover:shadow-xl">
 <div class="h-48 bg-yellow-500 flex items-center justify-center">
 <i class="fas fa-star text-6xl text-blue-900"></i>
 </div>
 <div class="p-6">
 <h3 class="text-2xl font-bold mb-3 text-blue-900">Elite Program</h3>
 <p class="text-gray-700 mb-4">Advanced training for competitive players looking to reach higher levels.</p>
 <ul class="space-y-2 mb-6">
 <li class="flex items-start">
 <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
 <span>Monday-Friday 5-7 PM</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
 <span>Personalized development plans</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
 <span>Scouting opportunities</span>
 </li>
 </ul>
 <a href="#register" class="inline-block bg-blue-900 hover:bg-blue-800 text-white px-6 py-2 rounded-lg transition">
 Learn More
 </a>
 </div>
 </div>
 </div>
<!-- Training Features -->
 <div class="mt-16 bg-blue-900 text-white rounded-lg p-8">
 <h3 class="text-2xl font-bold mb-6 text-center">Our Training Philosophy</h3>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <div class="text-center">
 <div class="w-16 h-16 bg-yellow-400 rounded-full flex items-center justify-center mx-auto mb-4">
 <i class="fas fa-futbol text-2xl text-blue-900"></i>
 </div>
 <h4 class="font-bold mb-2">Technical Excellence</h4>
 <p class="text-blue-200">Master ball control, passing, shooting and other fundamental skills.</p>
 </div>
 <div class="text-center">
 <div class="w-16 h-16 bg-yellow-400 rounded-full flex items-center justify-center mx-auto mb-4">
 <i class="fas fa-chess text-2xl text-blue-900"></i>
 </div>
 <h4 class="font-bold mb-2">Tactical Understanding</h4>
 <p class="text-blue-200">Develop game intelligence and decision-making abilities.</p>
 </div>
 <div class="text-center">
 <div class="w-16 h-16 bg-yellow-400 rounded-full flex items-center justify-center mx-auto mb-4">
 <i class="fas fa-heartbeat text-2xl text-blue-900"></i>
 </div>
 <h4 class="font-bold mb-2">Physical Development</h4>
 <p class="text-blue-200">Improve speed, strength, endurance and flexibility.</p>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Statistics Section -->
 <section id="stats" class="py-16 bg-blue-900 text-white">
 <div class="container mx-auto px-6">
 <h2 class="logo-font text-4xl mb-12 text-center text-yellow-400">Team Statistics</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12">
 <!-- Stat 1 -->
 <div class="bg-blue-800 p-6 rounded-lg text-center">
 <div class="text-4xl font-bold mb-2">24</div>
 <div class="text-sm uppercase tracking-wider">Matches Played</div>
 </div>
<!-- Stat 2 -->
 <div class="bg-blue-800 p-6 rounded-lg text-center">
 <div class="text-4xl font-bold mb-2">18</div>
 <div class="text-sm uppercase tracking-wider">Wins</div>
 </div>
<!-- Stat 3 -->
 <div class="bg-blue-800 p-6 rounded-lg text-center">
 <div class="text-4xl font-bold mb-2">4</div>
 <div class="text-sm uppercase tracking-wider">Draws</div>
 </div>
<!-- Stat 4 -->
 <div class="bg-blue-800 p-6 rounded-lg text-center">
 <div class="text-4xl font-bold mb-2">2</div>
 <div class="text-sm uppercase tracking-wider">Losses</div>
 </div>
 </div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
 <!-- Top Scorers -->
 <div class="bg-blue-800 p-6 rounded-lg">
 <h3 class="text-xl font-bold mb-4 text-yellow-400">Top Scorers</h3>
 <div class="space-y-4">
 <div class="flex justify-between">
 <span>Andrea Ventrice</span>
 <span class="font-bold">14 goals</span>
 </div>
 <div class="flex justify-between">
 <span>Marco Menichelli</span>
 <span class="font-bold">8 goals</span>
 </div>
 <div class="flex justify-between">
 <span>Daniele Conti</span>
 <span class="font-bold">6 goals</span>
 </div>
 </div>
 </div>
<!-- Clean Sheets -->
 <div class="bg-blue-800 p-6 rounded-lg">
 <h3 class="text-xl font-bold mb-4 text-yellow-400">Clean Sheets</h3>
 <div class="space-y-4">
 <div class="flex justify-between">
 <span>Alessandro Sabia</span>
 <span class="font-bold">9 clean sheets</span>
 </div>
 <div class="flex justify-between">
 <span>Team Total</span>
 <span class="font-bold">12 clean sheets</span>
 </div>
 </div>
 </div>
<!-- Discipline -->
 <div class="bg-blue-800 p-6 rounded-lg">
 <h3 class="text-xl font-bold mb-4 text-yellow-400">Discipline</h3>
 <div class="space-y-4">
 <div class="flex justify-between">
 <span>Yellow Cards</span>
 <span class="font-bold">24</span>
 </div>
 <div class="flex justify-between">
 <span>Red Cards</span>
 <span class="font-bold">2</span>
 </div>
 <div class="flex justify-between">
 <span>Fair Play Rank</span>
 <span class="font-bold">3rd</span>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Team Section -->
 <section id="team" class="py-16 bg-gray-100">
 <div class="container mx-auto px-6">
 <h2 class="logo-font text-4xl mb-12 text-center text-blue-900">Meet Our Players</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
 <!-- Player 1 -->
 <div class="player-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
 <div class="editable-image relative">
 <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">
 <div class="edit-image-overlay absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 transition duration-300">
 <span class="text-white font-bold">Click to Change</span>
 </div>
 </div>
 <div class="p-6">
 <h3 class="text-xl font-bold mb-1">Marco Menichelli</h3>
 <p class="text-gray-600 mb-3">Midfielder</p>
 <div class="flex justify-between text-sm text-gray-500">
 <span>#10</span>
 <span>Captain</span>
 </div>
 </div>
 </div>
<!-- Player 2 -->
 <div class="player-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
 <div class="editable-image relative">
 <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">
 <div class="edit-image-overlay absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 transition duration-300">
 <span class="text-white font-bold">Click to Change</span>
 </div>
 </div>
 <div class="p-6">
 <h3 class="text-xl font-bold mb-1">Andrea Ventrice</h3>
 <p class="text-gray-600 mb-3">Forward</p>
 <div class="flex justify-between text-sm text-gray-500">
 <span>#7</span>
 <span>Top Scorer</span>
 </div>
 </div>
 </div>
<!-- Player 3 -->
 <div class="player-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
 <div class="editable-image relative">
 <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">
 <div class="edit-image-overlay absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 transition duration-300">
 <span class="text-white font-bold">Click to Change</span>
 </div>
 </div>
 <div class="p-6">
 <h3 class="text-xl font-bold mb-1">Roberto Menichelli</h3>
 <p class="text-gray-600 mb-3">Defender</p>
 <div class="flex justify-between text-sm text-gray-500">
 <span>#4</span>
 <span>Vice Captain</span>
 </div>
 </div>
 </div>
<!-- Player 4 -->
 <div class="player-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
 <div class="editable-image relative">
 <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">
 <div class="edit-image-overlay absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 transition duration-300">
 <span class="text-white font-bold">Click to Change</span>
 </div>
 </div>
 <div class="p-6">
 <h3 class="text-xl font-bold mb-1">Alessandro Sabia</h3>
 <p class="text-gray-600 mb-3">Goalkeeper</p>
 <div class="flex justify-between text-sm text-gray-500">
 <span>#1</span>
 <span>Wall</span>
 </div>
 </div>
 </div>
<!-- Player 5 -->
 <div class="player-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
 <div class="editable-image relative">
 <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">
 <div class="edit-image-overlay absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 transition duration-300">
 <span class="text-white font-bold">Click to Change</span>
 </div>
 </div>
 <div class="p-6">
 <h3 class="text-xl font-bold mb-1">Alessandro De Simone</h3>
 <p class="text-gray-600 mb-3">Midfielder</p>
 <div class="flex justify-between text-sm text-gray-500">
 <span>#8</span>
 <span>Playmaker</span>
 </div>
 </div>
 </div>
<!-- Player 6 -->
 <div class="player-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
 <div class="editable-image relative">
 <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">
 <div class="edit-image-overlay absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 transition duration-300">
 <span class="text-white font-bold">Click to Change</span>
 </div>
 </div>
 <div class="p-6">
 <h3 class="text-xl font-bold mb-1">Lorenzo Tomassini</h3>
 <p class="text-gray-600 mb-3">Defender</p>
 <div class="flex justify-between text-sm text-gray-500">
 <span>#5</span>
 <span>Rock Solid</span>
 </div>
 </div>
 </div>
<!-- Player 7 -->
 <div class="player-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
 <div class="editable-image relative">
 <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">
 <div class="edit-image-overlay absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 transition duration-300">
 <span class="text-white font-bold">Click to Change</span>
 </div>
 </div>
 <div class="p-6">
 <h3 class="text-xl font-bold mb-1">Daniele Conti</h3>
 <p class="text-gray-600 mb-3">Forward</p>
 <div class="flex justify-between text-sm text-gray-500">
 <span>#9</span>
 <span>Speedster</span>
 </div>
 </div>
 </div>
<!-- Team Staff Card -->
 <div class="player-card bg-blue-900 text-white rounded-lg overflow-hidden shadow-md transition duration-300">
 <div class="editable-image h-64 bg-blue-800 flex items-center justify-center relative">
 <i class="fas fa-users text-6xl"></i>
 </div>
 <div class="p-6">
 <h3 class="text-xl font-bold mb-1">Team Staff</h3>
 <p class="mb-3">Our dedicated support team</p>
 <div class="text-sm">
 <p class="mb-1"><i class="fas fa-user-tie mr-2"></i> Manager: Luca Bianchi</p>
 <p class="mb-1"><i class="fas fa-medal mr-2"></i> Coach: Marco Rossi</p>
 <p><i class="fas fa-heartbeat mr-2"></i> Physio: Giovanni Verdi</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Matches Section -->
 <section id="matches" class="py-16 bg-white">
 <div class="container mx-auto px-6">
 <h2 class="logo-font text-4xl mb-12 text-center text-blue-900">Upcoming Matches</h2>
<div class="max-w-3xl mx-auto">
 <!-- Match 1 -->
 <div class="flex flex-col md:flex-row items-center justify-between bg-gray-100 rounded-lg p-6 mb-6">
 <div class="text-center md:text-left mb-4 md:mb-0">
 <div class="text-lg font-semibold">League Match</div>
 <div class="text-gray-600">Saturday, June 10, 2023</div>
 </div>
 <div class="flex items-center">
 <div class="text-center px-4">
 <div class="font-bold text-xl">Wendy Tem FC</div>
 <div class="text-sm text-gray-600">Home</div>
 </div>
 <div class="px-4 text-center">
 <div class="text-2xl font-bold text-red-600">VS</div>
 <div class="text-xs text-gray-600">15:00 CET</div>
 </div>
 <div class="text-center px-4">
 <div class="font-bold text-xl">FC Torino</div>
 <div class="text-sm text-gray-600">Away</div>
 </div>
 </div>
 <button class="mt-4 md:mt-0 bg-blue-900 hover:bg-blue-800 text-white px-4 py-2 rounded-lg transition">
 Get Tickets
 </button>
 </div>
<!-- Match 2 -->
 <div class="flex flex-col md:flex-row items-center justify-between bg-gray-100 rounded-lg p-6 mb-6">
 <div class="text-center md:text-left mb-4 md:mb-0">
 <div class="text-lg font-semibold">Cup Quarterfinal</div>
 <div class="text-gray-600">Wednesday, June 14, 2023</div>
 </div>
 <div class="flex items-center">
 <div class="text-center px-4">
 <div class="font-bold text-xl">Juventus FC</div>
 <div class="text-sm text-gray-600">Home</div>
 </div>
 <div class="px-4 text-center">
 <div class="text-2xl font-bold text-red-600">VS</div>
 <div class="text-xs text-gray-600">20:45 CET</div>
 </div>
 <div class="text-center px-4">
 <div class="font-bold text-xl">Wendy Tem FC</div>
 <div class="text-sm text-gray-600">Away</div>
 </div>
 </div>
 <button class="mt-4 md:mt-0 bg-blue-900 hover:bg-blue-800 text-white px-4 py-2 rounded-lg transition">
 Get Tickets
 </button>
 </div>
<!-- Match 3 -->
 <div class="flex flex-col md:flex-row items-center justify-between bg-gray-100 rounded-lg p-6">
 <div class="text-center md:text-left mb-4 md:mb-0">
 <div class="text-lg font-semibold">Friendly Match</div>
 <div class="text-gray-600">Sunday, June 18, 2023</div>
 </div>
 <div class="flex items-center">
 <div class="text-center px-4">
 <div class="font-bold text-xl">Wendy Tem FC</div>
 <div class="text-sm text-gray-600">Home</div>
 </div>
 <div class="px-4 text-center">
 <div class="text-2xl font-bold text-red-600">VS</div>
 <div class="text-xs text-gray-600">18:00 CET</div>
 </div>
 <div class="text-center px-4">
 <div class="font-bold text-xl">AC Milan</div>
 <div class="text-sm text-gray-600">Away</div>
 </div>
 </div>
 <button class="mt-4 md:mt-0 bg-blue-900 hover:bg-blue-800 text-white px-4 py-2 rounded-lg transition">
 Get Tickets
 </button>
 </div>
 </div>
<div class="text-center mt-12">
 <a href="#" class="inline-block bg-red-600 hover:bg-red-700 text-white px-8 py-3 rounded-lg font-semibold transition">
 View Full Schedule <i class="fas fa-arrow-right ml-2"></i>
 </a>
 </div>
 </div>
 </section>
<!-- Training Sessions Section -->
 <section id="training" class="py-16 bg-white">
 <div class="container mx-auto px-6">
 <h2 class="logo-font text-4xl mb-12 text-center text-blue-900">Training Sessions</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
 <div class="bg-gray-100 p-8 rounded-lg">
 <h3 class="text-2xl font-bold mb-4 text-blue-900">Youth Academy</h3>
 <p class="mb-4 text-gray-700">Our youth program focuses on developing fundamental skills for players aged 6-16.</p>
 <ul class="space-y-2 mb-6">
 <li class="flex items-start">
 <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
 <span>Monday & Wednesday: 4-6 PM</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
 <span>Saturday: 9-11 AM</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
 <span>Professional coaching staff</span>
 </li>
 </ul>
 <a href="#register" class="inline-block bg-blue-900 hover:bg-blue-800 text-white px-6 py-2 rounded-lg transition">
 Register Now
 </a>
 </div>
<div class="bg-gray-100 p-8 rounded-lg">
 <h3 class="text-2xl font-bold mb-4 text-blue-900">Adult Training</h3>
 <p class="mb-4 text-gray-700">For players 17+ looking to improve their skills and fitness.</p>
 <ul class="space-y-2 mb-6">
 <li class="flex items-start">
 <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
 <span>Tuesday & Thursday: 7-9 PM</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
 <span>Sunday: 10 AM-12 PM</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
 <span>Competitive and recreational options</span>
 </li>
 </ul>
 <a href="#register" class="inline-block bg-blue-900 hover:bg-blue-800 text-white px-6 py-2 rounded-lg transition">
 Register Now
 </a>
 </div>
 </div>
<div class="bg-blue-900 text-white p-8 rounded-lg">
 <h3 class="text-2xl font-bold mb-4">Private Coaching</h3>
 <p class="mb-6 max-w-2xl">Book one-on-one sessions with our professional coaches to focus on specific skills and development areas.</p>
 <a href="#register" class="inline-block bg-yellow-500 hover:bg-yellow-600 text-blue-900 px-6 py-2 rounded-lg font-semibold transition">
 Request Private Session
 </a>
 </div>
 </div>
 </section>
<!-- Registration Section -->
 <section id="register" class="py-16 bg-gray-100">
 <div class="container mx-auto px-6 max-w-4xl">
 <h2 class="logo-font text-4xl mb-12 text-center text-blue-900">Registration Form</h2>
<form class="bg-white p-8 rounded-lg shadow-md">
 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
 <div>
 <label for="first-name" class="block mb-2 font-medium">First Name*</label>
 <input type="text" id="first-name" required class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
 </div>
 <div>
 <label for="last-name" class="block mb-2 font-medium">Last Name*</label>
 <input type="text" id="last-name" required class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
 </div>
 <div>
 <label for="email" class="block mb-2 font-medium">Email*</label>
 <input type="email" id="email" required class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
 </div>
 <div>
 <label for="phone" class="block mb-2 font-medium">Phone*</label>
 <input type="tel" id="phone" required class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
 </div>
 </div>
<div class="mb-6">
 <label class="block mb-2 font-medium">Program*</label>
 <div class="space-y-2">
 <div class="flex items-center">
 <input type="radio" id="youth" name="program" value="youth" class="mr-2" checked>
 <label for="youth">Youth Academy (6-16 years)</label>
 </div>
 <div class="flex items-center">
 <input type="radio" id="adult" name="program" value="adult" class="mr-2">
 <label for="adult">Adult Training (17+ years)</label>
 </div>
 <div class="flex items-center">
 <input type="radio" id="private" name="program" value="private" class="mr-2">
 <label for="private">Private Coaching</label>
 </div>
 </div>
 </div>
<div class="mb-6">
 <label for="experience" class="block mb-2 font-medium">Football Experience</label>
 <textarea id="experience" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Tell us about your football background..."></textarea>
 </div>
<div class="mb-6">
 <div class="flex items-start">
 <input type="checkbox" id="terms" required class="mt-1 mr-2">
 <label for="terms">I agree to the <a href="#" class="text-blue-600 hover:underline">terms and conditions</a> and understand the <a href="#" class="text-blue-600 hover:underline">privacy policy</a>*</label>
 </div>
 </div>
<button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white py-3 px-6 rounded-lg font-semibold transition">
 Submit Registration
 </button>
 </form>
 </div>
 </section>
<!-- Gallery Section -->
 <section id="gallery" class="py-16 bg-gray-100">
 <div class="container mx-auto px-6">
 <h2 class="logo-font text-4xl mb-12 text-center text-blue-900">Team Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
 <div class="relative group overflow-hidden rounded-lg shadow-lg">
 <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">
 <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
 <span class="text-white font-bold">Training Session</span>
 </div>
 </div>
<div class="relative group overflow-hidden rounded-lg shadow-lg">
 <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">
 <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
 <span class="text-white font-bold">Match Action</span>
 </div>
 </div>
<div class="relative group overflow-hidden rounded-lg shadow-lg">
 <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">
 <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
 <span class="text-white font-bold">Victory Celebration</span>
 </div>
 </div>
<div class="relative group overflow-hidden rounded-lg shadow-lg">
 <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">
 <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
 <span class="text-white font-bold">Our Amazing Fans</span>
 </div>
 </div>
<div class="relative group overflow-hidden rounded-lg shadow-lg">
 <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">
 <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
 <span class="text-white font-bold">Team Huddle</span>
 </div>
 </div>
<div class="relative group overflow-hidden rounded-lg shadow-lg">
 <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">
 <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
 <span class="text-white font-bold">Our Home Stadium</span>
 </div>
 </div>
 </div>
<div class="text-center mt-12">
 <a href="#" class="inline-block bg-blue-900 hover:bg-blue-800 text-white px-8 py-3 rounded-lg font-semibold transition">
 View More Photos <i class="fas fa-camera ml-2"></i>
 </a>
 </div>
 </div>
 </section>
<!-- Contact Section -->
 <section id="contact" class="py-16 bg-blue-900 text-white">
 <div class="container mx-auto px-6">
 <h2 class="logo-font text-4xl mb-12 text-center">Get In Touch</h2>
<div class="flex flex-col md:flex-row">
 <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
 <h3 class="text-2xl font-bold mb-6">Contact Information</h3>
 <div class="space-y-6">
 <div class="flex items-start">
 <i class="fas fa-map-marker-alt text-yellow-400 mt-1 mr-4"></i>
 <div>
 <h4 class="font-semibold">Address</h4>
 <p class="text-blue-200">123 Football Avenue, Turin, Italy</p>
 </div>
 </div>
 <div class="flex items-start">
 <i class="fas fa-phone-alt text-yellow-400 mt-1 mr-4"></i>
 <div>
 <h4 class="font-semibold">Phone</h4>
 <p class="text-blue-200">+39 123 456 7890</p>
 </div>
 </div>
 <div class="flex items-start">
 <i class="fas fa-envelope text-yellow-400 mt-1 mr-4"></i>
 <div>
 <h4 class="font-semibold">Email</h4>
 <p class="text-blue-200">info@wendytemfc.com</p>
 </div>
 </div>
 <div class="flex items-start">
 <i class="fas fa-clock text-yellow-400 mt-1 mr-4"></i>
 <div>
 <h4 class="font-semibold">Office Hours</h4>
 <p class="text-blue-200">Monday - Friday: 9:00 AM - 5:00 PM</p>
 </div>
 </div>
 </div>
<div class="mt-10">
 <h3 class="text-2xl font-bold mb-6">Follow Us</h3>
 <div class="flex space-x-4">
 <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">
 <i class="fab fa-facebook-f"></i>
 </a>
 <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">
 <i class="fab fa-twitter"></i>
 </a>
 <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">
 <i class="fab fa-instagram"></i>
 </a>
 <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">
 <i class="fab fa-youtube"></i>
 </a>
 </div>
 </div>
 </div>
<div class="md:w-1/2">
 <h3 class="text-2xl font-bold mb-6">Send Us a Message</h3>
 <form>
 <div class="mb-4">
 <label for="name" class="block mb-2">Your Name</label>
 <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">
 </div>
 <div class="mb-4">
 <label for="email" class="block mb-2">Your Email</label>
 <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">
 </div>
 <div class="mb-4">
 <label for="subject" class="block mb-2">Subject</label>
 <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">
 </div>
 <div class="mb-6">
 <label for="message" class="block mb-2">Your Message</label>
 <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>
 </div>
 <button type="submit" class="bg-yellow-400 hover:bg-yellow-500 text-blue-900 font-bold py-3 px-6 rounded-lg transition">
 Send Message <i class="fas fa-paper-plane ml-2"></i>
 </button>
 </form>
 </div>
 </div>
 </div>
 </section>
<!-- Newsletter -->
 <section class="py-12 bg-red-600 text-white">
 <div class="container mx-auto px-6 text-center">
 <h2 class="logo-font text-3xl mb-4">Stay Updated</h2>
 <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>
 <div class="max-w-md mx-auto flex">
 <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-lg focus:outline-none text-gray-900">
 <button class="bg-blue-900 hover:bg-blue-800 px-6 py-3 rounded-r-lg font-semibold transition">
 Subscribe
 </button>
 </div>
 </div>
 </section>
<!-- Footer -->
 <footer class="bg-gray-900 text-gray-400 py-8">
 <div class="container mx-auto px-6">
 <div class="flex flex-col md:flex-row justify-between items-center">
 <div class="flex items-center mb-4 md:mb-0">
 <i class="fas fa-futbol text-2xl text-yellow-400 mr-2"></i>
 <span class="logo-font text-2xl text-white">Wendy Tem FC</span>
 </div>
 <div class="text-center md:text-right">
 <p>&copy; 2023 Wendy Tem FC. All rights reserved.</p>
 <div class="flex justify-center md:justify-end space-x-4 mt-2">
 <a href="#" class="hover:text-white transition">Privacy Policy</a>
 <a href="#" class="hover:text-white transition">Terms of Service</a>
 <a href="#" class="hover:text-white transition">Sitemap</a>
 </div>
 </div>
 </div>
 </div>
 </footer>
<!-- Back to Top Button -->
 <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">
 <i class="fas fa-arrow-up"></i>
 </button>
<script>
 // Edit Mode Functionality
 document.addEventListener('DOMContentLoaded', function() {
 const urlParams = new URLSearchParams(window.location.search);
 const editMode = urlParams.get('edit') === 'true';
if (editMode) {
 document.body.classList.add('edit-mode');
 document.getElementById('toggle-edit').textContent = 'Exit Edit Mode';
 }
// Make elements editable
 const editables = document.querySelectorAll('h1, h2, h3, p, span, a:not([href^="#"]):not([href^="mailto:"])');
 editables.forEach(el => {
 el.classList.add('editable');
 if (editMode) {
 el.setAttribute('contenteditable', 'true');
 }
 });
// Toggle edit mode
 document.getElementById('toggle-edit').addEventListener('click', function() {
 const isEditMode = document.body.classList.toggle('edit-mode');
 this.textContent = isEditMode ? 'Exit Edit Mode' : 'Toggle Edit Mode';
editables.forEach(el => {
 el.setAttribute('contenteditable', isEditMode);
 });
// Update URL
 const newUrl = new URL(window.location);
 if (isEditMode) {
 newUrl.searchParams.set('edit', 'true');
 } else {
 newUrl.searchParams.delete('edit');
 }
 window.history.pushState({}, '', newUrl);
 });
// Save content to localStorage
 function saveContent() {
 const content = {};
 editables.forEach((el, index) => {
 content[`editable-${index}`] = el.innerHTML;
 });
 localStorage.setItem('wendytemfc-content', JSON.stringify(content));
 document.getElementById('save-status').textContent = 'Changes saved locally!';
 setTimeout(() => {
 document.getElementById('save-status').textContent = '';
 }, 2000);
 }
// Load content from localStorage
 function loadContent() {
 const saved = localStorage.getItem('wendytemfc-content');
 if (saved) {
 const content = JSON.parse(saved);
 editables.forEach((el, index) => {
 if (content[`editable-${index}`]) {
 el.innerHTML = content[`editable-${index}`];
 }
 });
 }
 }
// Auto-save on changes
 editables.forEach(el => {
 el.addEventListener('input', saveContent);
 });
// Load saved content
 loadContent();
// Image change functionality
 document.querySelectorAll('.editable-image').forEach(container => {
 container.addEventListener('click', function(e) {
 if (!document.body.classList.contains('edit-mode')) return;
const img = this.querySelector('img') || this;
 const newSrc = prompt('Enter new image URL:', img.src);
if (newSrc && newSrc !== img.src) {
 if (img.tagName === 'IMG') {
 img.src = newSrc;
 } else {
 // For the team staff card that uses a div
 this.innerHTML = `<img src="${newSrc}" class="w-full h-full object-cover">`;
 }
 saveContent();
 }
 });
 });
 });
// Mobile menu toggle
 const menuBtn = document.getElementById('menu-btn');
 const mobileMenu = document.getElementById('mobile-menu');
menuBtn.addEventListener('click', () => {
 mobileMenu.classList.toggle('hidden');
 });
// Back to top button
 const backToTopBtn = document.getElementById('back-to-top');
window.addEventListener('scroll', () => {
 if (window.pageYOffset > 300) {
 backToTopBtn.classList.remove('opacity-0', 'invisible');
 backToTopBtn.classList.add('opacity-100', 'visible');
 } else {
 backToTopBtn.classList.remove('opacity-100', 'visible');
 backToTopBtn.classList.add('opacity-0', 'invisible');
 }
 });
backToTopBtn.addEventListener('click', () => {
 window.scrollTo({
 top: 0,
 behavior: 'smooth'
 });
 });
// Smooth scrolling for navigation links
 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
 anchor.addEventListener('click', function (e) {
 e.preventDefault();
const targetId = this.getAttribute('href');
 const targetElement = document.querySelector(targetId);
if (targetElement) {
 window.scrollTo({
 top: targetElement.offsetTop - 80,
 behavior: 'smooth'
 });
// Close mobile menu if open
 if (!mobileMenu.classList.contains('hidden')) {
 mobileMenu.classList.add('hidden');
 }
 }
 });
 });
 </script>
<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>
</html>