admin/38428-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Auto commit: 2026-02-14T15:50:10.188Z

Browse Source
This commit is contained in:
Flatlogic Bot 2026-02-14 15:50:10 +00:00
parent 00da144827
commit 6f30c86767
5 changed files with 462 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/background.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 150 KiB

BIN
assets/images/featured.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 161 KiB

25
includes/pexels.php Normal file
View File

@ -0,0 +1,25 @@
<?php
function pexels_key() {
$k = getenv('PEXELS_KEY');
return $k && strlen($k) > 0 ? $k : 'Vc99rnmOhHhJAbgGQoKLZtsaIVfkeownoQNbTj78VemUjKh08ZYRbf18';
}
function pexels_get($url) {
$ch = curl_init();
curl_setopt_array($ch, [
CURLOPT_URL => $url,
CURLOPT_RETURNTRANSFER => true,
CURLOPT_HTTPHEADER => [ 'Authorization: '. pexels_key() ],
CURLOPT_TIMEOUT => 15,
]);
$resp = curl_exec($ch);
$code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);
if ($code >= 200 && $code < 300 && $resp) return json_decode($resp, true);
return null;
}
function download_to($srcUrl, $destPath) {
$data = @file_get_contents($srcUrl);
if ($data === false) return false;
if (!is_dir(dirname($destPath))) mkdir(dirname($destPath), 0775, true);
return file_put_contents($destPath, $data) !== false;
}

555
index.php
View File

@ -1,150 +1,427 @@
<?php
declare(strict_types=1);
@ini_set('display_errors', '1');
@error_reporting(E_ALL);
@date_default_timezone_set('UTC');
$phpVersion = PHP_VERSION;
$now = date('Y-m-d H:i:s');
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Lili Records Radio - La mejor música en vivo.';
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? 'assets/images/featured.jpg';
// WhatsApp info
$whatsapp_number = '+5359177041';
$whatsapp_link = "https://wa.me/" . preg_replace('/[^0-9]/', '', $whatsapp_number);
?>
<!doctype html>
<html lang="en">
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>New Style</title>
<?php
// Read project preview data from environment
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
?>
<?php if ($projectDescription): ?>
<!-- Meta description -->
<meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
<!-- Open Graph meta tags -->
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
<!-- Twitter meta tags -->
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
<?php endif; ?>
<?php if ($projectImageUrl): ?>
<!-- Open Graph image -->
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
<!-- Twitter image -->
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
<?php endif; ?>
<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=Inter:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-color-start: #6a11cb;
--bg-color-end: #2575fc;
--text-color: #ffffff;
--card-bg-color: rgba(255, 255, 255, 0.01);
--card-border-color: rgba(255, 255, 255, 0.1);
}
body {
margin: 0;
font-family: 'Inter', sans-serif;
background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
color: var(--text-color);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
text-align: center;
overflow: hidden;
position: relative;
}
body::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
animation: bg-pan 20s linear infinite;
z-index: -1;
}
@keyframes bg-pan {
0% { background-position: 0% 0%; }
100% { background-position: 100% 100%; }
}
main {
padding: 2rem;
}
.card {
background: var(--card-bg-color);
border: 1px solid var(--card-border-color);
border-radius: 16px;
padding: 2rem;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}
.loader {
margin: 1.25rem auto 1.25rem;
width: 48px;
height: 48px;
border: 3px solid rgba(255, 255, 255, 0.25);
border-top-color: #fff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.hint {
opacity: 0.9;
}
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap; border: 0;
}
h1 {
font-size: 3rem;
font-weight: 700;
margin: 0 0 1rem;
letter-spacing: -1px;
}
p {
margin: 0.5rem 0;
font-size: 1.1rem;
}
code {
background: rgba(0,0,0,0.2);
padding: 2px 6px;
border-radius: 4px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
footer {
position: absolute;
bottom: 1rem;
font-size: 0.8rem;
opacity: 0.7;
}
</style>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Lili Records Radio</title>
<!-- Meta tags SEO -->
<meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
<meta property="og:title" content="Lili Records Radio" />
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
<meta property="twitter:card" content="summary_large_image" />
<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=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<style>
:root {
--accent-color: #00e676; /* WhatsApp Green */
--primary-color: #38bdf8; /* Sky Blue */
--bg-overlay: rgba(15, 23, 42, 0.85);
--glass-bg: rgba(30, 41, 59, 0.7);
--glass-border: rgba(255, 255, 255, 0.1);
}
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: 'Inter', sans-serif;
color: #ffffff;
background-color: #0f172a;
overflow: hidden;
}
.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('assets/images/background.jpg') center/cover no-repeat;
z-index: -1;
}
.background::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--bg-overlay);
}
.app-container {
display: flex;
width: 100%;
height: 100vh;
align-items: center;
padding: 2rem;
box-sizing: border-box;
}
/* Left Side: Player */
.player-section {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 500px;
z-index: 10;
}
.glass-card {
background: var(--glass-bg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--glass-border);
border-radius: 24px;
padding: 2.5rem;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
}
.brand h1 {
font-size: 2.5rem;
font-weight: 700;
margin: 0 0 0.5rem;
background: linear-gradient(to right, #fff, var(--primary-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.brand p {
font-size: 1rem;
opacity: 0.8;
margin-bottom: 2rem;
}
/* Radio Player UI */
.radio-player {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.now-playing {
display: flex;
align-items: center;
gap: 1rem;
background: rgba(0, 0, 0, 0.3);
padding: 1rem;
border-radius: 12px;
}
.now-playing i {
font-size: 1.5rem;
color: var(--primary-color);
animation: pulse 2s infinite;
}
.track-info {
overflow: hidden;
}
.track-title {
font-weight: 600;
font-size: 1.1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.track-status {
font-size: 0.85rem;
opacity: 0.6;
}
.controls {
display: flex;
align-items: center;
gap: 1rem;
}
.play-btn {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--primary-color);
border: none;
color: #fff;
font-size: 1.5rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s, background 0.2s;
box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4);
}
.play-btn:hover {
transform: scale(1.05);
background: #0ea5e9;
}
.volume-slider {
flex: 1;
height: 6px;
-webkit-appearance: none;
background: rgba(255, 255, 255, 0.2);
border-radius: 3px;
outline: none;
}
.volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
background: #fff;
border-radius: 50%;
cursor: pointer;
}
/* Right Side: Featured Image */
.image-section {
flex: 1.2;
display: flex;
justify-content: center;
align-items: center;
padding-left: 2rem;
}
.featured-img-container {
width: 100%;
max-width: 600px;
position: relative;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
aspect-ratio: 16 / 9;
}
.featured-img-container img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.featured-img-container:hover img {
transform: scale(1.05);
}
/* Transfermovil QR Section */
.payment-section {
margin-top: 2rem;
text-align: center;
}
.qr-placeholder {
width: 180px;
height: 180px;
margin: 1rem auto;
background: #fff;
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #333;
padding: 10px;
}
.qr-placeholder i {
font-size: 3rem;
margin-bottom: 10px;
color: #000;
}
.qr-placeholder span {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
}
/* Floating WhatsApp Button */
.whatsapp-float {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 60px;
height: 60px;
background-color: var(--accent-color);
color: #FFF;
border-radius: 50%;
text-align: center;
font-size: 30px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: transform 0.3s;
}
.whatsapp-float:hover {
transform: scale(1.1);
color: #fff;
}
@keyframes pulse {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.7; }
100% { transform: scale(1); opacity: 1; }
}
/* Responsive */
@media (max-width: 992px) {
.app-container {
flex-direction: column;
height: auto;
overflow-y: auto;
padding-top: 4rem;
}
.player-section {
max-width: 100%;
margin-bottom: 2rem;
}
.image-section {
padding-left: 0;
width: 100%;
}
.featured-img-container {
aspect-ratio: 1 / 1;
}
}
</style>
</head>
<body>
<main>
<div class="card">
<h1>Analyzing your requirements and generating your website…</h1>
<div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
<span class="sr-only">Loading…</span>
</div>
<p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
<p class="hint">This page will update automatically as the plan is implemented.</p>
<p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
<div class="background"></div>
<div class="app-container">
<!-- Left Section: Player -->
<section class="player-section">
<div class="glass-card">
<header class="brand">
<h1>Lili Records</h1>
<p>Siente la música, vive el ritmo.</p>
</header>
<div class="radio-player">
<div class="now-playing">
<i class="bi bi-broadcast"></i>
<div class="track-info">
<div class="track-status">EN VIVO</div>
<div id="track-title" class="track-title">Cargando stream...</div>
</div>
</div>
<div class="controls">
<button id="play-pause" class="play-btn" onclick="togglePlay()">
<i id="play-icon" class="bi bi-play-fill"></i>
</button>
<i class="bi bi-volume-up"></i>
<input type="range" class="volume-slider" id="volume" min="0" max="1" step="0.1" value="0.8" oninput="changeVolume(this.value)">
</div>
</div>
<!-- Payment / Support Section -->
<div class="payment-section">
<p class="small">Apoya nuestro proyecto</p>
<div class="qr-placeholder">
<i class="bi bi-qr-code"></i>
<span>Transfermóvil</span>
</div>
<p style="font-size: 0.7rem; opacity: 0.6;">Escanea para donar</p>
</div>
</div>
</section>
<!-- Right Section: Featured Image -->
<section class="image-section">
<div class="featured-img-container">
<img src="assets/images/featured.jpg" alt="Lili Records Featured">
</div>
</section>
</div>
</main>
<footer>
Page updated: <?= htmlspecialchars($now) ?> (UTC)
</footer>
<!-- WhatsApp Button -->
<a href="<?= $whatsapp_link ?>" class="whatsapp-float" target="_blank">
<i class="bi bi-whatsapp"></i>
</a>
<audio id="radio-audio" src="https://listen.radioking.com/radio/828046/stream/897251" preload="none"></audio>
<script>
const audio = document.getElementById('radio-audio');
const playBtn = document.getElementById('play-pause');
const playIcon = document.getElementById('play-icon');
const trackTitle = document.getElementById('track-title');
function togglePlay() {
if (audio.paused) {
audio.play();
playIcon.classList.remove('bi-play-fill');
playIcon.classList.add('bi-pause-fill');
} else {
audio.pause();
playIcon.classList.remove('bi-pause-fill');
playIcon.classList.add('bi-play-fill');
}
}
function changeVolume(val) {
audio.volume = val;
}
// Fetch Now Playing Metadata from RadioKing
async function updateMetadata() {
try {
// RadioKing Public API for current track
const response = await fetch('https://api.radioking.io/widget/radio/828046/track/current');
const data = await response.json();
if (data && data.title) {
const title = data.artist ? `${data.artist} - ${data.title}` : data.title;
trackTitle.textContent = title;
document.title = `▶ ${title} | Lili Records Radio`;
} else {
trackTitle.textContent = "Lili Records Radio - En Vivo";
}
} catch (error) {
console.error('Error fetching metadata:', error);
trackTitle.textContent = "Lili Records Radio - En Vivo";
}
}
// Update every 30 seconds
updateMetadata();
setInterval(updateMetadata, 30000);
// Handle possible audio interruptions
audio.addEventListener('error', function(e) {
console.error('Audio error:', e);
trackTitle.textContent = "Error de conexión. Reintentando...";
setTimeout(() => {
audio.load();
if (!audio.paused) audio.play();
}, 5000);
});
</script>
</body>
</html>

21
setup_images.php Normal file
View File

@ -0,0 +1,21 @@
<?php
require_once __DIR__ . '/includes/pexels.php';
function fetch_image($query, $filename) {
$url = 'https://api.pexels.com/v1/search?query=' . urlencode($query) . '&per_page=1&page=1';
$data = pexels_get($url);
if ($data && !empty($data['photos'])) {
$photo = $data['photos'][0];
$src = $photo['src']['large2x'] ?? $photo['src']['large'];
$dest = __DIR__ . '/assets/images/' . $filename;
download_to($src, $dest);
return 'assets/images/' . $filename;
}
return null;
}
// Fetch background
fetch_image('dark music studio radio', 'background.jpg');
// Fetch featured photo
fetch_image('radio dj turntable', 'featured.jpg');
echo "Images fetched.";