153 lines
8.4 KiB
PHP
153 lines
8.4 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Pocket 5 Soccer - Fast-Paced 5v5 Action</title>
|
|
<meta name="description" content="Experience Pocket 5 Soccer, a real-time multiplayer 5v5 soccer game designed for quick, engaging matches on mobile and desktop.">
|
|
|
|
<!-- Bootstrap 5 CDN -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Google Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Roboto:wght@400;500&display=swap" rel="stylesheet">
|
|
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
|
|
<!-- Open Graph Meta Tags -->
|
|
<meta property="og:title" content="Pocket 5 Soccer - Fast-Paced 5v5 Action">
|
|
<meta property="og:description" content="Real-time 5v5 multiplayer soccer. Quick matches, smart AI, and cross-platform controls.">
|
|
<meta property="og:image" content="https://picsum.photos/seed/soccermeta/1200/630">
|
|
<meta property="og:url" content="">
|
|
<meta property="og:type" content="website">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Navigation Bar -->
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top shadow-sm">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="#">Pocket 5 Soccer</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav ms-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#rules">Game Rules</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#controls">Controls</a>
|
|
</li>
|
|
<li class="nav-item ms-lg-3">
|
|
<a class="btn btn-primary" href="game.php">Play Now</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<header class="hero">
|
|
<div class="container">
|
|
<h1 class="display-3">Fast-Paced 5v5 Action</h1>
|
|
<p class="lead">Real-time multiplayer soccer designed for quick, intense matches.</p>
|
|
<a href="game.php" class="btn btn-primary btn-lg">Play Now</a>
|
|
<a href="#rules" class="btn btn-secondary btn-lg">Learn More</a>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Game Rules Section -->
|
|
<section id="rules">
|
|
<div class="container">
|
|
<h2 class="section-title">Game Rules & Play Style</h2>
|
|
<div class="row g-4 align-items-center">
|
|
<div class="col-lg-6">
|
|
<img src="https://picsum.photos/seed/soccerstrategy/800/600" class="img-fluid rounded shadow" alt="A top-down view of a soccer game strategy board.">
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="accordion" id="rulesAccordion">
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header" id="headingOne">
|
|
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
|
Core Gameplay
|
|
</button>
|
|
</h2>
|
|
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#rulesAccordion">
|
|
<div class="accordion-body">
|
|
<ul class="list-group list-group-flush">
|
|
<li class="list-group-item"><strong>Match Specs:</strong> 5v5 teams, 2-minute match duration.</li>
|
|
<li class="list-group-item"><strong>Control Model:</strong> Each human controls one player.</li>
|
|
<li class="list-group-item"><strong>Orientation:</strong> Vertical screen for mobile.</li>
|
|
<li class="list-group-item"><strong>AI Players:</strong> AI fills all positions not controlled by humans.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header" id="headingTwo">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
|
Advanced Mechanics
|
|
</button>
|
|
</h2>
|
|
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#rulesAccordion">
|
|
<div class="accordion-body">
|
|
<ul class="list-group list-group-flush">
|
|
<li class="list-group-item"><strong>Smart Passing:</strong> Auto-targets nearest teammate in a 30-degree arc.</li>
|
|
<li class="list-group-item"><strong>Directional Shooting:</strong> Ball trajectory follows player's facing direction.</li>
|
|
<li class="list-group-item"><strong>Active Tackle:</strong> High-speed sprint to win the ball. Failure results in a 1-second movement penalty.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Controls Section -->
|
|
<section id="controls" class="bg-white">
|
|
<div class="container">
|
|
<h2 class="section-title">Dual Platform Controls</h2>
|
|
<div class="row g-4 align-items-center">
|
|
<div class="col-lg-6 order-lg-2">
|
|
<img src="https://picsum.photos/seed/soccercontrols/800/600" class="img-fluid rounded shadow" alt="Close-up on a person's hands using a mobile phone for gaming.">
|
|
</div>
|
|
<div class="col-lg-6 order-lg-1">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h4>Mobile</h4>
|
|
<div class="control-item"><strong>Movement:</strong> Virtual Joystick</div>
|
|
<div class="control-item"><strong>Actions:</strong> On-screen Buttons</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h4>Desktop</h4>
|
|
<div class="control-item"><strong>Movement:</strong> Arrow Keys</div>
|
|
<div class="control-item"><strong>Pass:</strong> 'S' Key</div>
|
|
<div class="control-item"><strong>Shoot:</strong> 'D' Key</div>
|
|
<div class="control-item"><strong>Tackle:</strong> Spacebar</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="text-center">
|
|
<div class="container">
|
|
<p class="mb-0">© <?php echo date("Y"); ?> Pocket 5 Soccer. All Rights Reserved.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Bootstrap 5 JS Bundle -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
<!-- Custom JS -->
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
</body>
|
|
</html>
|