Hugging Face's logo

Spaces:
Brozy123
/
LineUp-Bot
Running

App Files Community
1
LineUp-Bot / league.html
Brozy123's picture
Brozy123
Update league.html
e9aa560 verified
raw
history blame contribute delete
21.7 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>FriendlyBot League — Official Website</title>
 <link rel="icon" href="/logo.png">
 <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
 <style>
 :root {
 --bg: #050510;
 --surface: #0f0f25;
 --surface-light: #1a1a3a;
 --accent: #5865F2;
 --accent-gradient: linear-gradient(135deg, #5865F2 0%, #3b82f6 100%);
 --gold: #FFD700;
 --gold-gradient: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
 --text: #ffffff;
 --text-dim: rgba(255, 255, 255, 0.6);
 --border: rgba(255, 255, 255, 0.08);
 --radius: 20px;
 }
 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }
 body {
 font-family: 'Outfit', sans-serif;
 background: var(--bg);
 color: var(--text);
 line-height: 1.6;
 overflow-x: hidden;
 }
 /* Background Glows */
 .glow {
 position: fixed;
 width: 600px;
 height: 600px;
 background: radial-gradient(circle, rgba(88, 101, 242, 0.1) 0%, transparent 70%);
 border-radius: 50%;
 z-index: -1;
 pointer-events: none;
 }
 .glow-1 { top: -200px; right: -200px; }
 .glow-2 { bottom: -200px; left: -200px; }
 header {
 padding: 30px 5%;
 display: flex;
 justify-content: space-between;
 align-items: center;
 background: rgba(5, 5, 16, 0.8);
 backdrop-filter: blur(10px);
 position: sticky;
 top: 0;
 z-index: 100;
 border-bottom: 1px solid var(--border);
 }
 .brand {
 display: flex;
 align-items: center;
 gap: 15px;
 font-size: 24px;
 font-weight: 800;
 letter-spacing: -0.5px;
 text-decoration: none;
 color: white;
 }
 .brand img {
 width: 45px;
 height: 45px;
 border-radius: 50%;
 box-shadow: 0 0 20px rgba(88, 101, 242, 0.4);
 }
 .nav-links {
 display: flex;
 gap: 20px;
 align-items: center;
 }
 .btn-dashboard {
 padding: 10px 24px;
 border-radius: 12px;
 background: var(--surface-light);
 color: white;
 text-decoration: none;
 font-weight: 600;
 font-size: 14px;
 border: 1px solid var(--border);
 transition: all 0.3s ease;
 }
 .btn-dashboard:hover {
 background: var(--accent);
 transform: translateY(-2px);
 box-shadow: 0 10px 20px rgba(88, 101, 242, 0.3);
 }
 .hero {
 padding: 100px 5% 60px;
 text-align: center;
 max-width: 1000px;
 margin: 0 auto;
 }
 .hero h1 {
 font-size: 64px;
 font-weight: 800;
 margin-bottom: 20px;
 background: linear-gradient(to right, #fff, var(--text-dim));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 line-height: 1.1;
 }
 .hero p {
 font-size: 18px;
 color: var(--text-dim);
 max-width: 700px;
 margin: 0 auto 40px;
 }
 .cta-box {
 background: var(--gold-gradient);
 padding: 30px;
 border-radius: var(--radius);
 display: inline-flex;
 flex-direction: column;
 align-items: center;
 gap: 15px;
 color: #000;
 box-shadow: 0 20px 40px rgba(255, 215, 0, 0.2);
 animation: float 6s ease-in-out infinite;
 }
 @keyframes float {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-10px); }
 }
 .cta-box h2 {
 font-size: 20px;
 font-weight: 800;
 }
 .btn-join {
 background: #000;
 color: #fff;
 padding: 12px 30px;
 border-radius: 12px;
 text-decoration: none;
 font-weight: 700;
 transition: all 0.3s;
 }
 .btn-join:hover {
 transform: scale(1.05);
 }
 .container {
 padding: 60px 5%;
 max-width: 1400px;
 margin: 0 auto;
 }
 .section-title {
 font-size: 32px;
 font-weight: 800;
 margin-bottom: 40px;
 display: flex;
 align-items: center;
 gap: 15px;
 }
 .section-title::after {
 content: '';
 flex: 1;
 height: 1px;
 background: var(--border);
 }
 .teams-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
 gap: 25px;
 }
 .team-card {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 padding: 25px;
 position: relative;
 overflow: hidden;
 transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 cursor: pointer;
 height: fit-content;
 }
 .team-card:hover {
 border-color: var(--accent);
 transform: translateY(-5px);
 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
 }
 .team-card.expanded {
 border-color: var(--accent);
 box-shadow: 0 0 30px rgba(88, 101, 242, 0.2);
 }
 .team-card::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 6px;
 background: var(--accent);
 }
 .team-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 15px;
 }
 .team-header-main {
 display: flex;
 align-items: center;
 gap: 15px;
 }
 .team-icon {
 width: 50px;
 height: 50px;
 background: var(--surface-light);
 border-radius: 12px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 24px;
 font-weight: 800;
 }
 .team-info h3 {
 font-size: 22px;
 font-weight: 700;
 }
 .expand-hint {
 font-size: 12px;
 color: var(--accent);
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 1px;
 display: flex;
 align-items: center;
 gap: 5px;
 transition: all 0.3s;
 }
 .team-card.expanded .expand-hint {
 transform: rotate(180deg);
 color: var(--text-dim);
 }
 .manager-simple {
 margin-top: 10px;
 font-size: 14px;
 color: var(--text-dim);
 font-weight: 500;
 }
 .team-details {
 max-height: 0;
 overflow: hidden;
 transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 opacity: 0;
 }
 .team-card.expanded .team-details {
 max-height: 500px;
 opacity: 1;
 margin-top: 25px;
 }
 .team-meta {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 15px;
 margin-bottom: 25px;
 padding: 15px;
 background: rgba(255, 255, 255, 0.03);
 border-radius: 12px;
 }
 .meta-item label {
 display: block;
 font-size: 11px;
 text-transform: uppercase;
 color: var(--text-dim);
 font-weight: 700;
 letter-spacing: 1px;
 }
 .meta-item span {
 font-size: 14px;
 font-weight: 600;
 }
 .roster-title {
 font-size: 13px;
 font-weight: 700;
 color: var(--text-dim);
 margin-bottom: 12px;
 text-transform: uppercase;
 display: flex;
 align-items: center;
 gap: 8px;
 }
 .roster-list {
 list-style: none;
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 }
 .player-tag {
 background: var(--surface-light);
 padding: 6px 14px;
 border-radius: 100px;
 font-size: 13px;
 font-weight: 500;
 border: 1px solid var(--border);
 }
 footer {
 padding: 60px 5%;
 text-align: center;
 border-top: 1px solid var(--border);
 margin-top: 60px;
 color: var(--text-dim);
 font-size: 14px;
 }
 @media (max-width: 768px) {
 .hero h1 { font-size: 40px; }
 header { padding: 20px 5%; }
 .nav-links { display: none; }
 }
 </style>
</head>
<body>
 <div class="glow glow-1"></div>
 <div class="glow glow-2"></div>
<header>
 <a href="/" class="brand">
 <img src="/logo.png" alt="FriendlyBot">
 FriendlyBot League
 </a>
 <div class="nav-links">
 <a href="/" class="btn-dashboard">Dashboard</a>
 </div>
 </header>
<section class="hero">
 <h1>The Ultimate Arena</h1>
 <p>Compete, win, and earn premium rewards. The FriendlyBot League is where legends are made. Join 50+ teams in the quest for glory.</p>
<div class="cta-box">
 <h2>🏆 Winner Wins Premium Features!</h2>
 <p style="color: #000; font-size: 14px; margin-bottom: 0;">Exclusive bot upgrades, custom themes, and advanced analytics await.</p>
 <a href="https://discord.gg/vpHd4Xfm" target="_blank" class="btn-join" style="display: flex; align-items: center; gap: 10px; background: #5865F2; color: white;">
 <svg width="20" height="20" viewBox="0 0 24 24" aria-label="Discord" role="img" fill="#fff" style="flex:0 0 auto;">
 <circle cx="12" cy="12" r="10" fill="#5865F2" />
 <text x="12" y="16" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#fff" font-weight="bold">D</text>
 </svg>
 Join Discord League
 </a>
 </div>
 </section>
<div class="container">
 <h2 class="section-title">Participating Teams</h2>
<div class="teams-grid">
 <!-- Team 1 -->
 <div class="team-card" style="border-top-color: #ED4245;">
 <div class="team-header">
 <div class="team-header-main">
 <div class="team-icon" style="color: #ED4245;">FC</div>
 <div class="team-info">
 <h3>FC Barcelona</h3>
 </div>
 </div>
 <div class="expand-hint">▼</div>
 </div>
 <div class="manager-simple">Manager: Luis Martínez</div>
<div class="team-details">
 <div class="team-meta">
 <div class="meta-item">
 <label>Manager</label>
 <span>Luis Martínez</span>
 </div>
 <div class="meta-item">
 <label>Assistant</label>
 <span>Marta López</span>
 </div>
 </div>
 <div class="roster-title">👥 Active Roster</div>
 <ul class="roster-list">
 <li class="player-tag">Marc Serrano</li>
 <li class="player-tag">Alejandro Ruiz</li>
 <li class="player-tag">Jonas Villar</li>
 <li class="player-tag">Carlos Mendez</li>
 <li class="player-tag">Diego Alvarez</li>
 </ul>
 </div>
 </div>
<!-- Team 2 -->
 <div class="team-card" style="border-top-color: #FFFFFF;">
 <div class="team-header">
 <div class="team-header-main">
 <div class="team-icon" style="color: #fff; background: #333;">RM</div>
 <div class="team-info">
 <h3>Real Madrid CF</h3>
 </div>
 </div>
 <div class="expand-hint">▼</div>
 </div>
 <div class="manager-simple">Manager: Elena García</div>
<div class="team-details">
 <div class="team-meta">
 <div class="meta-item">
 <label>Manager</label>
 <span>Elena García</span>
 </div>
 <div class="meta-item">
 <label>Assistant</label>
 <span>Diego Ramirez</span>
 </div>
 </div>
 <div class="roster-title">👥 Active Roster</div>
 <ul class="roster-list">
 <li class="player-tag">Alvaro Jiménez</li>
 <li class="player-tag">Mateo Ruiz</li>
 <li class="player-tag">Sergio Navarro</li>
 <li class="player-tag">Raúl Santos</li>
 <li class="player-tag">Luis Ortega</li>
 </ul>
 </div>
 </div>
<!-- Team 3 -->
 <div class="team-card" style="border-top-color: #E11D48;">
 <div class="team-header">
 <div class="team-header-main">
 <div class="team-icon" style="color: #E11D48;">SF</div>
 <div class="team-info">
 <h3>Sevilla FC</h3>
 </div>
 </div>
 <div class="expand-hint">▼</div>
 </div>
 <div class="manager-simple">Manager: Pablo Cárdenas</div>
<div class="team-details">
 <div class="team-meta">
 <div class="meta-item">
 <label>Manager</label>
 <span>Pablo Cárdenas</span>
 </div>
 <div class="meta-item">
 <label>Assistant</label>
 <span>Lucía Peña</span>
 </div>
 </div>
 <div class="roster-title">👥 Active Roster</div>
 <ul class="roster-list">
 <li class="player-tag">Ignacio Lara</li>
 <li class="player-tag">Adrián Vega</li>
 <li class="player-tag">Marcos Gil</li>
 <li class="player-tag">Rafael Soto</li>
 <li class="player-tag">Camilo Cruz</li>
 </ul>
 </div>
 </div>
<!-- Team 4 -->
 <div class="team-card" style="border-top-color: #1D4ED8;">
 <div class="team-header">
 <div class="team-header-main">
 <div class="team-icon" style="color: #1D4ED8;">AM</div>
 <div class="team-info">
 <h3>Atlético Madrid</h3>
 </div>
 </div>
 <div class="expand-hint">▼</div>
 </div>
 <div class="manager-simple">Manager: Diego Costa</div>
<div class="team-details">
 <div class="team-meta">
 <div class="meta-item">
 <label>Manager</label>
 <span>Diego Costa</span>
 </div>
 <div class="meta-item">
 <label>Assistant</label>
 <span>Isabel Ramos</span>
 </div>
 </div>
 <div class="roster-title">👥 Active Roster</div>
 <ul class="roster-list">
 <li class="player-tag">Daniel Herrera</li>
 <li class="player-tag">Jorge Perez</li>
 <li class="player-tag">Martín Ruiz</li>
 <li class="player-tag">Alex Torres</li>
 <li class="player-tag">Lucas Vega</li>
 </ul>
 </div>
 </div>
<!-- Team 5 -->
 <div class="team-card" style="border-top-color: #10B981;">
 <div class="team-header">
 <div class="team-header-main">
 <div class="team-icon" style="color: #10B981;">RB</div>
 <div class="team-info">
 <h3>Real Betis</h3>
 </div>
 </div>
 <div class="expand-hint">▼</div>
 </div>
 <div class="manager-simple">Manager: Sofia Mendez</div>
<div class="team-details">
 <div class="team-meta">
 <div class="meta-item">
 <label>Manager</label>
 <span>Sofia Mendez</span>
 </div>
 <div class="meta-item">
 <label>Assistant</label>
 <span>Omar Ruiz</span>
 </div>
 </div>
 <div class="roster-title">👥 Active Roster</div>
 <ul class="roster-list">
 <li class="player-tag">Alejandro Fuentes</li>
 <li class="player-tag">Diego Morales</li>
 <li class="player-tag">Nico Aguirre</li>
 <li class="player-tag">Javi Cordero</li>
 <li class="player-tag">Tomás Cruz</li>
 </ul>
 </div>
 </div>
<!-- Team 6 -->
 <div class="team-card" style="border-top-color: #F59E0B;">
 <div class="team-header">
 <div class="team-header-main">
 <div class="team-icon" style="color: #F59E0B;">AC</div>
 <div class="team-info">
 <h3>Athletic Club</h3>
 </div>
 </div>
 <div class="expand-hint">▼</div>
 </div>
 <div class="manager-simple">Manager: Iker Aranzazu</div>
<div class="team-details">
 <div class="team-meta">
 <div class="meta-item">
 <label>Manager</label>
 <span>Iker Aranzazu</span>
 </div>
 <div class="meta-item">
 <label>Assistant</label>
 <span>Marta Larra</span>
 </div>
 </div>
 <div class="roster-title">👥 Active Roster</div>
 <ul class="roster-list">
 <li class="player-tag">Jon Etxeberria</li>
 <li class="player-tag">Oier Zabaleta</li>
 <li class="player-tag">Unai Arrieta</li>
 <li class="player-tag">Nerea Bello</li>
 <li class="player-tag">Ainhoa Etxe</li>
 </ul>
 </div>
 </div>
 </div>
 </div>
<footer>
 <p>&copy; 2026 FriendlyBot League. Powered by FriendlyBot.</p>
 </footer>
<script>
 // Smooth entrance animations and click handlers
 document.addEventListener('DOMContentLoaded', () => {
 const cards = document.querySelectorAll('.team-card');
cards.forEach((card, index) => {
 // Initial animation
 card.style.opacity = '0';
 card.style.transform = 'translateY(20px)';
 setTimeout(() => {
 card.style.transition = 'all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275)';
 card.style.opacity = '1';
 card.style.transform = 'translateY(0)';
 }, 100 * index);
 // Click to expand
 card.addEventListener('click', () => {
 card.classList.toggle('expanded');
 });
 });
 });
 </script>
</body>
</html>