116 lines
6.3 KiB
PHP
116 lines
6.3 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title><?php echo htmlspecialchars(getenv('PROJECT_NAME') ?: 'Mi Juego Increíble'); ?></title>
|
|
<meta name="description" content="<?php echo htmlspecialchars(getenv('PROJECT_DESCRIPTION') ?: 'El próximo gran juego para móviles.'); ?>">
|
|
<meta property="og:title" content="<?php echo htmlspecialchars(getenv('PROJECT_NAME') ?: 'Mi Juego Increíble'); ?>">
|
|
<meta property="og:description" content="<?php echo htmlspecialchars(getenv('PROJECT_DESCRIPTION') ?: 'El próximo gran juego para móviles.'); ?>">
|
|
<meta property="og:image" content="<?php echo htmlspecialchars(getenv('PROJECT_IMAGE_URL') ?: 'assets/images/placeholder.jpg'); ?>">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
<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@600&family=Lato:wght@400;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="#"><?php echo htmlspecialchars(getenv('PROJECT_NAME') ?: 'GameName'); ?></a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
<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="#features">Características</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#gallery">Galería</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#credits">Créditos</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<header class="hero-section text-white text-center">
|
|
<div class="container d-flex flex-column justify-content-center align-items-center" style="min-height: 100vh;">
|
|
<div class="fade-in">
|
|
<h1 class="display-3 fw-bold">El Próximo Juego Épico</h1>
|
|
<p class="lead my-4">Una aventura increíble te espera. Prepárate para sumergirte en un nuevo mundo.</p>
|
|
<a href="#" class="google-play-badge">
|
|
<img src="https://play.google.com/intl/en_us/badges/static/images/badges/es_badge_web_generic.png" alt="Consíguelo en Google Play">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section id="features" class="py-5">
|
|
<div class="container">
|
|
<div class="text-center mb-5 fade-in">
|
|
<h2 class="fw-bold">Características Principales</h2>
|
|
<p class="text-muted">Descubre lo que hace a este juego único.</p>
|
|
</div>
|
|
<div class="row text-center">
|
|
<div class="col-md-4 mb-4 fade-in">
|
|
<div class="card h-100 shadow-sm border-0 p-4">
|
|
<i class="bi bi-controller fs-1 text-primary"></i>
|
|
<h3 class="h4 my-3">Jugabilidad Inmersiva</h3>
|
|
<p>Controles intuitivos y una historia que te atrapará desde el primer momento.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 mb-4 fade-in">
|
|
<div class="card h-100 shadow-sm border-0 p-4">
|
|
<i class="bi bi-brush fs-1 text-primary"></i>
|
|
<h3 class="h4 my-3">Gráficos Impresionantes</h3>
|
|
<p>Un mundo vibrante y detallado, optimizado para todos los dispositivos.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 mb-4 fade-in">
|
|
<div class="card h-100 shadow-sm border-0 p-4">
|
|
<i class="bi bi-people fs-1 text-primary"></i>
|
|
<h3 class="h4 my-3">Modo Multijugador</h3>
|
|
<p>Compite con amigos y jugadores de todo el mundo en tiempo real.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="gallery" class="py-5 bg-light">
|
|
<div class="container">
|
|
<div class="text-center mb-5 fade-in">
|
|
<h2 class="fw-bold">Galería de Imágenes</h2>
|
|
<p class="text-muted">Un vistazo al mundo del juego.</p>
|
|
</div>
|
|
<div class="row g-4">
|
|
<div class="col-md-4 fade-in"><img src="https://picsum.photos/800/600?random=1" class="img-fluid rounded shadow"></div>
|
|
<div class="col-md-4 fade-in"><img src="https://picsum.photos/800/600?random=2" class="img-fluid rounded shadow"></div>
|
|
<div class="col-md-4 fade-in"><img src="https://picsum.photos/800/600?random=3" class="img-fluid rounded shadow"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="credits" class="py-5">
|
|
<div class="container text-center fade-in">
|
|
<h2 class="fw-bold">Créditos</h2>
|
|
<p class="lead">Este juego fue creado por un desarrollador apasionado.</p>
|
|
<p class="display-6 text-primary mt-4">Tu Nombre Aquí</p>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="py-4 bg-dark text-white">
|
|
<div class="container text-center">
|
|
<p>© <?php echo date("Y"); ?> <?php echo htmlspecialchars(getenv('PROJECT_NAME') ?: 'GameName'); ?>. Todos los derechos reservados.</p>
|
|
<div>
|
|
<a href="#" class="text-white me-3"><i class="bi bi-twitter"></i></a>
|
|
<a href="#" class="text-white me-3"><i class="bi bi-instagram"></i></a>
|
|
<a href="#" class="text-white"><i class="bi bi-youtube"></i></a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
</body>
|
|
</html>
|