Auto commit: 2026-02-04T01:00:55.778Z

config/settings.py

@@ -133,7 +133,7 @@ AUTH_PASSWORD_VALIDATORS = [
 # Internationalization
 # https://docs.djangoproject.com/en/5.2/topics/i18n/
 
-LANGUAGE_CODE = 'en-us'
+LANGUAGE_CODE = 'es'
 
 TIME_ZONE = 'UTC'
 
@@ -179,4 +179,4 @@ if EMAIL_USE_SSL:
 # Default primary key field type
 # https://docs.djangoproject.com/en/5.2/ref/settings/#default-auto-field
 
-DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
+DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

core/admin.py

@@ -1,3 +1,19 @@
 from django.contrib import admin
+from .models import Program, SongRequest
 
-# Register your models here.
+@admin.register(Program)
+class ProgramAdmin(admin.ModelAdmin):
+    list_display = ('title', 'day', 'start_time', 'end_time', 'dj_name')
+    list_filter = ('day',)
+    search_fields = ('title', 'dj_name')
+
+@admin.register(SongRequest)
+class SongRequestAdmin(admin.ModelAdmin):
+    list_display = ('song_title', 'artist_name', 'listener_name', 'created_at', 'is_played')
+    list_filter = ('is_played', 'created_at')
+    search_fields = ('song_title', 'artist_name', 'listener_name')
+    actions = ['mark_as_played']
+
+    def mark_as_played(self, request, queryset):
+        queryset.update(is_played=True)
+    mark_as_played.short_description = "Mark selected requests as played"

core/context_processors.py

@@ -8,6 +8,9 @@ def project_context(request):
     return {
         "project_description": os.getenv("PROJECT_DESCRIPTION", ""),
         "project_image_url": os.getenv("PROJECT_IMAGE_URL", ""),
+        "whatsapp_number": "+5359177041",
+        "whatsapp_group_link": "https://chat.whatsapp.com/DkG96pTzAFO3hvLqmzwmTY",
+        "radio_url": "https://play.radioking.io/lili-record-s-radio",
         # Used for cache-busting static assets
         "deployment_timestamp": int(time.time()),
     }

core/forms.py

@@ -0,0 +1,13 @@
+from django import forms
+from .models import SongRequest
+
+class SongRequestForm(forms.ModelForm):
+    class Meta:
+        model = SongRequest
+        fields = ['listener_name', 'song_title', 'artist_name', 'message']
+        widgets = {
+            'listener_name': forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'Tu Nombre'}),
+            'song_title': forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'Título de la Canción'}),
+            'artist_name': forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'Nombre del Artista'}),
+            'message': forms.Textarea(attrs={'class': 'form-control', 'placeholder': 'Mensaje opcional', 'rows': 3}),
+        }

core/migrations/0001_initial.py

@@ -0,0 +1,41 @@
+# Generated by Django 5.2.7 on 2026-02-03 21:22
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Program',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('title', models.CharField(max_length=200)),
+                ('description', models.TextField(blank=True)),
+                ('day', models.CharField(choices=[('MON', 'Monday'), ('TUE', 'Tuesday'), ('WED', 'Wednesday'), ('THU', 'Thursday'), ('FRI', 'Friday'), ('SAT', 'Saturday'), ('SUN', 'Sunday')], max_length=3)),
+                ('start_time', models.TimeField()),
+                ('end_time', models.TimeField()),
+                ('dj_name', models.CharField(blank=True, max_length=100)),
+            ],
+            options={
+                'ordering': ['day', 'start_time'],
+            },
+        ),
+        migrations.CreateModel(
+            name='SongRequest',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('listener_name', models.CharField(max_length=100)),
+                ('song_title', models.CharField(max_length=200)),
+                ('artist_name', models.CharField(max_length=200)),
+                ('message', models.TextField(blank=True)),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+                ('is_played', models.BooleanField(default=False)),
+            ],
+        ),
+    ]

core/migrations/0002_alter_program_day.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.2.7 on 2026-02-03 22:23
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('core', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='program',
+            name='day',
+            field=models.CharField(choices=[('MON', 'Lunes'), ('TUE', 'Martes'), ('WED', 'Miércoles'), ('THU', 'Jueves'), ('FRI', 'Viernes'), ('SAT', 'Sábado'), ('SUN', 'Domingo')], max_length=3),
+        ),
+    ]

core/models.py

@@ -1,3 +1,35 @@
 from django.db import models
 
-# Create your models here.
+class Program(models.Model):
+    DAYS_OF_WEEK = [
+        ('MON', 'Lunes'),
+        ('TUE', 'Martes'),
+        ('WED', 'Miércoles'),
+        ('THU', 'Jueves'),
+        ('FRI', 'Viernes'),
+        ('SAT', 'Sábado'),
+        ('SUN', 'Domingo'),
+    ]
+    title = models.CharField(max_length=200)
+    description = models.TextField(blank=True)
+    day = models.CharField(max_length=3, choices=DAYS_OF_WEEK)
+    start_time = models.TimeField()
+    end_time = models.TimeField()
+    dj_name = models.CharField(max_length=100, blank=True)
+
+    class Meta:
+        ordering = ['day', 'start_time']
+
+    def __str__(self):
+        return f"{self.title} ({self.get_day_display()})"
+
+class SongRequest(models.Model):
+    listener_name = models.CharField(max_length=100)
+    song_title = models.CharField(max_length=200)
+    artist_name = models.CharField(max_length=200)
+    message = models.TextField(blank=True)
+    created_at = models.DateTimeField(auto_now_add=True)
+    is_played = models.BooleanField(default=False)
+
+    def __str__(self):
+        return f"{self.song_title} by {self.artist_name} - Requested by {self.listener_name}"

core/templates/base.html

@@ -1,25 +1,120 @@
 <!DOCTYPE html>
-<html lang="en">
-
+<html lang="es">
 <head>
-  <meta charset="UTF-8">
-  <title>{% block title %}Knowledge Base{% endblock %}</title>
-  {% if project_description %}
-  <meta name="description" content="{{ project_description }}">
-  <meta property="og:description" content="{{ project_description }}">
-  <meta property="twitter:description" content="{{ project_description }}">
-  {% endif %}
-  {% if project_image_url %}
-  <meta property="og:image" content="{{ project_image_url }}">
-  <meta property="twitter:image" content="{{ project_image_url }}">
-  {% endif %}
-  {% load static %}
-  <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
-  {% block head %}{% endblock %}
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Lili Records Radio{% endblock %}</title>
+    
+    <!-- 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@300;400;600;800&display=swap" rel="stylesheet">
+    
+    <!-- Bootstrap 5 CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    
+    {% load static %}
+    <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
+    
+    {% block head %}{% endblock %}
 </head>
-
 <body>
-  {% block content %}{% endblock %}
-</body>
+    <nav class="navbar navbar-expand-lg navbar-dark sticky-top">
+        <div class="container">
+            <a class="navbar-brand d-flex align-items-center" href="{% url 'home' %}">
+                <img src="{% static 'images/logo.png' %}" alt="Logo" height="40" class="me-2">
+                LILI RECORDS
+            </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="#schedule">Horario</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#request">Pedir Canción</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/admin/">Administración</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
 
-</html>
+    <main>
+        {% if messages %}
+            <div class="container mt-3">
+                {% for message in messages %}
+                    <div class="alert alert-{{ message.tags }} alert-dismissible fade show bg-card text-white border-0" role="alert">
+                        {{ message }}
+                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Cerrar"></button>
+                    </div>
+                {% endfor %}
+            </div>
+        {% endif %}
+
+        {% block content %}{% endblock %}
+    </main>
+
+    <!-- Radio Player Bar -->
+    <div id="playerBar" class="player-bar">
+        <div class="container d-flex align-items-center h-100 position-relative">
+            <button class="close-player" onclick="toggleRadioPlayer()">&times;</button>
+            <div class="player-iframe-container">
+                <iframe id="radioIframe" src="" allow="autoplay"></iframe>
+            </div>
+            <div class="player-external-link ms-3 d-none d-md-block">
+                <a href="{{ radio_url }}" target="_blank" class="btn btn-sm btn-outline-cyan rounded-pill">
+                    <i class="fas fa-external-link-alt small"></i> Abrir en ventana
+                </a>
+            </div>
+        </div>
+    </div>
+
+    <!-- WhatsApp Widget -->
+    <div class="whatsapp-widget">
+        <div class="whatsapp-tooltip">¡Envía tu mensaje de voz aquí!</div>
+        <a href="https://wa.me/{{ whatsapp_number|cut:'+'|cut:' ' }}?text=Hola,%20quiero%20enviar%20un%20mensaje%20de%20voz%20para%20la%20radio" class="whatsapp-button" target="_blank">
+            <i class="fab fa-whatsapp"></i>
+        </a>
+    </div>
+
+    <footer class="footer">
+        <div class="container">
+            <p>&copy; 2026 Lili Records Radio. Todos los derechos reservados.</p>
+            <p class="small">Desarrollado por Flatlogic AI</p>
+        </div>
+    </footer>
+
+    <!-- Bootstrap 5 JS Bundle -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    
+    <script>
+        function toggleRadioPlayer(event) {
+            if (event) event.preventDefault();
+            const playerBar = document.getElementById('playerBar');
+            const radioIframe = document.getElementById('radioIframe');
+            const body = document.body;
+            const radioUrl = "{{ radio_url }}";
+
+            if (playerBar.classList.contains('active')) {
+                playerBar.classList.remove('active');
+                body.classList.remove('player-active');
+            } else {
+                if (!radioIframe.src || radioIframe.src === window.location.href || radioIframe.src === "") {
+                    radioIframe.src = radioUrl;
+                }
+                playerBar.classList.add('active');
+                body.classList.add('player-active');
+            }
+        }
+    </script>
+    {% block scripts %}{% endblock %}
+</body>
+</html>

core/templates/core/index.html

@@ -1,145 +1,105 @@
-{% extends "base.html" %}
-
-{% block title %}{{ project_name }}{% endblock %}
-
-{% block head %}
-<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);
-  }
-
-  * {
-    box-sizing: border-box;
-  }
-
-  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;
-    inset: 0;
-    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: 2.5rem 2rem;
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
-  }
-
-  h1 {
-    font-size: clamp(2.2rem, 3vw + 1.2rem, 3.2rem);
-    font-weight: 700;
-    margin: 0 0 1.2rem;
-    letter-spacing: -0.02em;
-  }
-
-  p {
-    margin: 0.5rem 0;
-    font-size: 1.1rem;
-    opacity: 0.92;
-  }
-
-  .loader {
-    margin: 1.5rem auto;
-    width: 56px;
-    height: 56px;
-    border: 4px solid rgba(255, 255, 255, 0.25);
-    border-top-color: #fff;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-  }
-
-  @keyframes spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  .runtime code {
-    background: rgba(0, 0, 0, 0.25);
-    padding: 0.15rem 0.45rem;
-    border-radius: 4px;
-    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  }
-
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    border: 0;
-  }
-
-  footer {
-    position: absolute;
-    bottom: 1rem;
-    width: 100%;
-    text-align: center;
-    font-size: 0.85rem;
-    opacity: 0.75;
-  }
-</style>
-{% endblock %}
+{% extends 'base.html' %}
+{% load static %}
 
 {% block content %}
-<main>
-  <div class="card">
-    <h1>Analyzing your requirements and generating your app…</h1>
-    <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
-      <span class="sr-only">Loading…</span>
+<!-- Hero Section -->
+<section class="hero-section text-center">
+    <div class="container">
+        <div class="row justify-content-center">
+            <div class="col-lg-8">
+                <a href="#" onclick="toggleRadioPlayer(event)" class="text-decoration-none">
+                    <span class="live-badge mb-3 d-inline-block">En Vivo</span>
+                </a>
+                <h1 class="display-3 fw-bold mb-4">Tu Voz, Tu Música, <br><span style="color: var(--neon-cyan)">Tu Radio.</span></h1>
+                <p class="lead text-muted mb-5">Transmitiendo los mejores discos las 24 horas, los 7 días de la semana. Únete a nuestra comunidad y crea la lista de reproducción.</p>
+                <div class="mt-4 d-flex justify-content-center gap-3">
+                    <a href="#request" class="btn btn-outline-light rounded-pill px-4">Pedir una Canción</a>
+                    <a href="#schedule" class="btn btn-outline-light rounded-pill px-4">Ver Horario</a>
+                </div>
+            </div>
+        </div>
     </div>
-    <p class="hint">AppWizzy AI is collecting your requirements and applying the first changes.</p>
-    <p class="hint">This page will refresh automatically as the plan is implemented.</p>
-    <p class="runtime">
-      Runtime: Django <code>{{ django_version }}</code> · Python <code>{{ python_version }}</code>
-      — UTC <code>{{ current_time|date:"Y-m-d H:i:s" }}</code>
-    </p>
-  </div>
-</main>
-<footer>
-  Page updated: {{ current_time|date:"Y-m-d H:i:s" }} (UTC)
-</footer>
+</section>
+
+<!-- Main Grid -->
+<div class="container pb-5">
+    <div class="row g-4">
+        <!-- Schedule Section -->
+        <div class="col-lg-7" id="schedule">
+            <div class="card h-100 p-4 text-white">
+                <h2 class="h3 mb-4 fw-bold text-white">Horario de la Radio</h2>
+                {% if programs %}
+                    <div class="schedule-list">
+                        {% for program in programs %}
+                            <div class="schedule-item d-flex justify-content-between align-items-center">
+                                <div>
+                                    <h5 class="mb-1 fw-bold text-white">{{ program.title }}</h5>
+                                    <p class="mb-0 text-white small">con {{ program.dj_name|default:"AutoDJ" }}</p>
+                                </div>
+                                <div class="text-end">
+                                    <span class="badge bg-dark text-cyan">{{ program.start_time|time:"H:i" }} - {{ program.end_time|time:"H:i" }}</span>
+                                    <div class="small text-white mt-1">{{ program.get_day_display }}</div>
+                                </div>
+                            </div>
+                        {% endfor %}
+                    </div>
+                {% else %}
+                    <div class="text-center py-5">
+                        <p class="text-white">No hay programas programados para hoy. ¡Sintoniza nuestra mezcla 24/7!</p>
+                    </div>
+                {% endif %}
+            </div>
+        </div>
+
+        <!-- Song Request Section -->
+        <div class="col-lg-5" id="request">
+            <div class="card h-100 p-4">
+                <h2 class="h3 mb-4 fw-bold text-white">Pedir una Canción</h2>
+                <form method="post" class="song-form">
+                    {% csrf_token %}
+                    <div class="mb-3">
+                        <label class="form-label small text-white">Tu Nombre</label>
+                        {{ form.listener_name }}
+                    </div>
+                    <div class="row mb-3">
+                        <div class="col">
+                            <label class="form-label small text-white">Título de la Canción</label>
+                            {{ form.song_title }}
+                        </div>
+                        <div class="col">
+                            <label class="form-label small text-white">Nombre del Artista</label>
+                            {{ form.artist_name }}
+                        </div>
+                    </div>
+                    <div class="mb-4">
+                        <label class="form-label small text-white">Saludo / Mensaje</label>
+                        {{ form.message }}
+                    </div>
+                    <button type="submit" class="btn btn-neon w-100">Enviar Pedido</button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- WhatsApp Community Section -->
+<section class="py-5 bg-dark">
+    <div class="container">
+        <div class="card p-5 text-center shadow-lg border-0" style="background: linear-gradient(135deg, #128C7E 0%, #075E54 100%);">
+            <div class="mb-4">
+                <i class="fab fa-whatsapp display-1 text-white"></i>
+            </div>
+            <h2 class="mb-3 text-white fw-bold">¡Únete a Lili Records Radio!</h2>
+            <p class="mb-4 text-white lead">Únete a nuestro grupo exclusivo de WhatsApp. <br> <strong>¡Comparte con otros oyentes y envía tus mensajes de voz!</strong></p>
+            <div class="d-flex flex-column flex-md-row justify-content-center gap-3">
+                <a href="{{ whatsapp_group_link }}" target="_blank" class="btn btn-light btn-lg rounded-pill px-5 fw-bold text-success">
+                    <i class="fas fa-users me-2"></i> Unirme a Lili Records Radio
+                </a>
+                <a href="https://wa.me/{{ whatsapp_number|cut:'+'|cut:' ' }}?text=Hola,%20quiero%20enviar%20un%20mensaje%20de%20voz%20para%20la%20radio" target="_blank" class="btn btn-outline-light btn-lg rounded-pill px-5 fw-bold">
+                    <i class="fas fa-microphone me-2"></i> Enviar Mensaje de Voz
+                </a>
+            </div>
+        </div>
+    </div>
+</section>
 {% endblock %}

core/views.py

@@ -1,25 +1,26 @@
-import os
-import platform
-
-from django import get_version as django_version
-from django.shortcuts import render
+from django.shortcuts import render, redirect
+from django.contrib import messages
+from .models import Program, SongRequest
+from .forms import SongRequestForm
 from django.utils import timezone
 
-
 def home(request):
-    """Render the landing screen with loader and environment details."""
-    host_name = request.get_host().lower()
-    agent_brand = "AppWizzy" if host_name == "appwizzy.com" else "Flatlogic"
-    now = timezone.now()
+    # Get current programs (simplification: showing all for now, sorted)
+    programs = Program.objects.all()
+    
+    # Handle song request form
+    if request.method == 'POST':
+        form = SongRequestForm(request.POST)
+        if form.is_valid():
+            form.save()
+            messages.success(request, '¡Tu pedido de canción ha sido enviado! Mantente en sintonía.')
+            return redirect('home')
+    else:
+        form = SongRequestForm()
 
     context = {
-        "project_name": "New Style",
-        "agent_brand": agent_brand,
-        "django_version": django_version(),
-        "python_version": platform.python_version(),
-        "current_time": now,
-        "host_name": host_name,
-        "project_description": os.getenv("PROJECT_DESCRIPTION", ""),
-        "project_image_url": os.getenv("PROJECT_IMAGE_URL", ""),
+        'programs': programs,
+        'form': form,
+        'current_time': timezone.now(),
     }
-    return render(request, "core/index.html", context)
+    return render(request, 'core/index.html', context)

static/css/custom.css

@@ -1,4 +1,247 @@
-/* Custom styles for the application */
-body {
-    font-family: system-ui, -apple-system, sans-serif;
+:root {
+    --bg-dark: #0B0D17;
+    --bg-card: #1A1E2E;
+    --neon-pink: #FF007A;
+    --neon-cyan: #00F0FF;
+    --text-main: #FFFFFF;
+    --text-muted: #A0A0A0;
+    --accent-gradient: linear-gradient(45deg, var(--neon-pink), var(--neon-cyan));
+    --whatsapp-green: #25D366;
 }
+
+body {
+    background-color: var(--bg-dark);
+    color: var(--text-main);
+    font-family: 'Poppins', sans-serif;
+    margin: 0;
+    overflow-x: hidden;
+    position: relative;
+    min-height: 100vh;
+    padding-bottom: 0;
+    transition: padding-bottom 0.3s ease;
+}
+
+body.player-active {
+    padding-bottom: 150px; /* Incrementado para el nuevo alto del player */
+}
+
+body::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url('../images/background.png');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    opacity: 0.15;
+    z-index: -1;
+    pointer-events: none;
+}
+
+.navbar {
+    background-color: rgba(11, 13, 23, 0.8);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.navbar-brand {
+    font-weight: 800;
+    background: var(--accent-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-size: 1.5rem;
+}
+
+.text-cyan {
+    color: var(--neon-cyan) !important;
+}
+
+.hero-section {
+    padding: 100px 0;
+    position: relative;
+    background: radial-gradient(circle at top right, rgba(255, 0, 122, 0.05), transparent),
+                radial-gradient(circle at bottom left, rgba(0, 240, 255, 0.05), transparent);
+}
+
+.card {
+    background-color: rgba(26, 30, 46, 0.7);
+    backdrop-filter: blur(5px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 15px;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+    background-color: rgba(26, 30, 46, 0.85);
+}
+
+.btn-neon {
+    background: var(--accent-gradient);
+    border: none;
+    color: white;
+    font-weight: 600;
+    padding: 12px 30px;
+    border-radius: 30px;
+    transition: all 0.3s ease;
+}
+
+.btn-neon:hover {
+    box-shadow: 0 0 20px rgba(255, 0, 122, 0.5);
+    transform: scale(1.05);
+    color: white;
+}
+
+.btn-outline-cyan {
+    border: 1px solid var(--neon-cyan);
+    color: var(--neon-cyan);
+    background: transparent;
+    transition: all 0.3s ease;
+}
+
+.btn-outline-cyan:hover {
+    background: var(--neon-cyan);
+    color: var(--bg-dark);
+}
+
+.form-control {
+    background-color: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: white;
+    border-radius: 10px;
+}
+
+.form-control:focus {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: var(--neon-cyan);
+    color: white;
+    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
+}
+
+.live-badge {
+    background-color: var(--neon-pink);
+    color: white;
+    padding: 5px 15px;
+    border-radius: 20px;
+    font-size: 0.8rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0% { opacity: 1; }
+    50% { opacity: 0.5; }
+    100% { opacity: 1; }
+}
+
+.schedule-item {
+    padding: 15px;
+    border-left: 3px solid var(--neon-cyan);
+    margin-bottom: 10px;
+    background: rgba(255, 255, 255, 0.02);
+}
+
+.footer {
+    padding: 50px 0;
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+    text-align: center;
+    color: var(--text-muted);
+}
+
+/* WhatsApp Widget */
+.whatsapp-widget {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    transition: bottom 0.3s ease;
+}
+
+body.player-active .whatsapp-widget {
+    bottom: 180px;
+}
+
+.whatsapp-button {
+    width: 60px;
+    height: 60px;
+    background-color: var(--whatsapp-green);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    text-decoration: none;
+    font-size: 30px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+    transition: all 0.3s ease;
+}
+
+.whatsapp-button:hover {
+    transform: scale(1.1);
+    color: white;
+    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
+}
+
+/* Player Bar */
+.player-bar {
+    position: fixed;
+    bottom: -200px;
+    left: 0;
+    width: 100%;
+    height: 150px;
+    background: rgba(11, 13, 23, 0.98);
+    backdrop-filter: blur(20px);
+    border-top: 2px solid var(--neon-cyan);
+    z-index: 2000;
+    transition: bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.player-bar.active {
+    bottom: 0;
+}
+
+.player-iframe-container {
+    flex-grow: 1;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+}
+
+.player-iframe-container iframe {
+    width: 100%;
+    height: 400px; /* Suficiente alto para ver controles */
+    border: none;
+    position: absolute;
+    top: -125px; /* Ajuste para mostrar el centro del player de RadioKing */
+}
+
+.close-player {
+    position: absolute;
+    top: 50%;
+    right: 15px;
+    transform: translateY(-50%);
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+    color: white;
+    font-size: 1.5rem;
+    cursor: pointer;
+    z-index: 2001;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.close-player:hover {
+    background: var(--neon-pink);
+}

staticfiles/css/custom.css

@@ -1,21 +1,186 @@
-
 :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);
+    --bg-dark: #0B0D17;
+    --bg-card: #1A1E2E;
+    --neon-pink: #FF007A;
+    --neon-cyan: #00F0FF;
+    --text-main: #FFFFFF;
+    --text-muted: #A0A0A0;
+    --accent-gradient: linear-gradient(45deg, var(--neon-pink), var(--neon-cyan));
+    --whatsapp-green: #25D366;
 }
+
 body {
+    background-color: var(--bg-dark);
+    color: var(--text-main);
+    font-family: 'Poppins', sans-serif;
     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;
+    overflow-x: hidden;
     position: relative;
+    min-height: 100vh;
 }
+
+body::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url('../images/background.png');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    opacity: 0.15; /* Sutil transparencia para no interferir con la legibilidad */
+    z-index: -1;
+    pointer-events: none;
+}
+
+.navbar {
+    background-color: rgba(11, 13, 23, 0.8);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.navbar-brand {
+    font-weight: 800;
+    background: var(--accent-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-size: 1.5rem;
+}
+
+.hero-section {
+    padding: 100px 0;
+    position: relative;
+    /* Ajustado para ser más transparente y dejar ver el fondo */
+    background: radial-gradient(circle at top right, rgba(255, 0, 122, 0.05), transparent),
+                radial-gradient(circle at bottom left, rgba(0, 240, 255, 0.05), transparent);
+}
+
+.card {
+    background-color: rgba(26, 30, 46, 0.7); /* Transparencia en las tarjetas */
+    backdrop-filter: blur(5px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 15px;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+    background-color: rgba(26, 30, 46, 0.85);
+}
+
+.btn-neon {
+    background: var(--accent-gradient);
+    border: none;
+    color: white;
+    font-weight: 600;
+    padding: 12px 30px;
+    border-radius: 30px;
+    transition: all 0.3s ease;
+}
+
+.btn-neon:hover {
+    box-shadow: 0 0 20px rgba(255, 0, 122, 0.5);
+    transform: scale(1.05);
+    color: white;
+}
+
+.form-control {
+    background-color: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: white;
+    border-radius: 10px;
+}
+
+.form-control:focus {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: var(--neon-cyan);
+    color: white;
+    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
+}
+
+.live-badge {
+    background-color: var(--neon-pink);
+    color: white;
+    padding: 5px 15px;
+    border-radius: 20px;
+    font-size: 0.8rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0% { opacity: 1; }
+    50% { opacity: 0.5; }
+    100% { opacity: 1; }
+}
+
+.schedule-item {
+    padding: 15px;
+    border-left: 3px solid var(--neon-cyan);
+    margin-bottom: 10px;
+    background: rgba(255, 255, 255, 0.02);
+}
+
+.footer {
+    padding: 50px 0;
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+    text-align: center;
+    color: var(--text-muted);
+}
+
+/* WhatsApp Widget */
+.whatsapp-widget {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+}
+
+.whatsapp-button {
+    width: 60px;
+    height: 60px;
+    background-color: var(--whatsapp-green);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    text-decoration: none;
+    font-size: 30px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+    transition: all 0.3s ease;
+}
+
+.whatsapp-button:hover {
+    transform: scale(1.1);
+    color: white;
+    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
+}
+
+.whatsapp-tooltip {
+    background: var(--bg-card);
+    color: white;
+    padding: 10px 15px;
+    border-radius: 10px;
+    margin-bottom: 15px;
+    font-size: 0.9rem;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    opacity: 0;
+    transform: translateY(10px);
+    transition: all 0.3s ease;
+    pointer-events: none;
+    white-space: nowrap;
+}
+
+.whatsapp-widget:hover .whatsapp-tooltip {
+    opacity: 1;
+    transform: translateY(0);
+}