Lili Record´s Radio
This commit is contained in:
Flatlogic Bot
parent
e44364c633
commit
4c0b53f5a0
BIN
assets/pasted-20260129-210745-654c6eb5.jpg
Normal file
BIN
assets/pasted-20260129-210745-654c6eb5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,3 +1,14 @@
|
||||
from django.contrib import admin
|
||||
from .models import Station, Track
|
||||
|
||||
# Register your models here.
|
||||
@admin.register(Station)
|
||||
class StationAdmin(admin.ModelAdmin):
|
||||
list_display = ('name', 'is_active', 'color')
|
||||
list_filter = ('is_active',)
|
||||
search_fields = ('name',)
|
||||
|
||||
@admin.register(Track)
|
||||
class TrackAdmin(admin.ModelAdmin):
|
||||
list_display = ('title', 'artist', 'station', 'created_at')
|
||||
list_filter = ('station',)
|
||||
search_fields = ('title', 'artist')
|
||||
38
core/migrations/0001_initial.py
Normal file
38
core/migrations/0001_initial.py
Normal file
@ -0,0 +1,38 @@
|
||||
# Generated by Django 5.2.7 on 2026-01-29 21:05
|
||||
|
||||
import django.db.models.deletion
|
||||
from django.db import migrations, models
|
||||
|
||||
|
||||
class Migration(migrations.Migration):
|
||||
|
||||
initial = True
|
||||
|
||||
dependencies = [
|
||||
]
|
||||
|
||||
operations = [
|
||||
migrations.CreateModel(
|
||||
name='Station',
|
||||
fields=[
|
||||
('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
|
||||
('name', models.CharField(max_length=100)),
|
||||
('stream_url', models.URLField(help_text='URL for the radio stream')),
|
||||
('description', models.TextField(blank=True)),
|
||||
('color', models.CharField(default='#FF007F', help_text='Hex color for the vinyl', max_length=7)),
|
||||
('image', models.FileField(blank=True, null=True, upload_to='stations/')),
|
||||
('is_active', models.BooleanField(default=True)),
|
||||
],
|
||||
),
|
||||
migrations.CreateModel(
|
||||
name='Track',
|
||||
fields=[
|
||||
('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
|
||||
('title', models.CharField(max_length=200)),
|
||||
('artist', models.CharField(max_length=200)),
|
||||
('audio_file', models.FileField(blank=True, null=True, upload_to='tracks/')),
|
||||
('created_at', models.DateTimeField(auto_now_add=True)),
|
||||
('station', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='tracks', to='core.station')),
|
||||
],
|
||||
),
|
||||
]
|
||||
BIN
core/migrations/__pycache__/0001_initial.cpython-311.pyc
Normal file
BIN
core/migrations/__pycache__/0001_initial.cpython-311.pyc
Normal file
Binary file not shown.
@ -1,3 +1,22 @@
|
||||
from django.db import models
|
||||
|
||||
# Create your models here.
|
||||
class Station(models.Model):
|
||||
name = models.CharField(max_length=100)
|
||||
stream_url = models.URLField(help_text="URL for the radio stream")
|
||||
description = models.TextField(blank=True)
|
||||
color = models.CharField(max_length=7, default="#FF007F", help_text="Hex color for the vinyl")
|
||||
image = models.FileField(upload_to="stations/", blank=True, null=True)
|
||||
is_active = models.BooleanField(default=True)
|
||||
|
||||
def __str__(self):
|
||||
return self.name
|
||||
|
||||
class Track(models.Model):
|
||||
station = models.ForeignKey(Station, related_name="tracks", on_delete=models.CASCADE)
|
||||
title = models.CharField(max_length=200)
|
||||
artist = models.CharField(max_length=200)
|
||||
audio_file = models.FileField(upload_to="tracks/", blank=True, null=True)
|
||||
created_at = models.DateTimeField(auto_now_add=True)
|
||||
|
||||
def __str__(self):
|
||||
return f"{self.artist} - {self.title}"
|
||||
|
||||
@ -1,25 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<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 Record's{% endblock %}</title>
|
||||
{% if project_description %}
|
||||
<meta name="description" content="{{ project_description }}">
|
||||
{% endif %}
|
||||
{% load static %}
|
||||
<!-- Google Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&family=Righteous&display=swap" rel="stylesheet">
|
||||
<!-- Bootstrap 5 -->
|
||||
<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">
|
||||
<link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body class="bg-dark text-white" style="font-family: 'Poppins', sans-serif;">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-transparent border-bottom border-secondary">
|
||||
<div class="container">
|
||||
<a class="navbar-brand d-flex align-items-center" href="/" style="font-family: 'Righteous', cursive; font-size: 1.8rem; color: #FF007F;">
|
||||
<img src="/assets/pasted-20260129-210745-654c6eb5.jpg" alt="Lili Record's Logo" height="50" class="me-2 rounded-circle">
|
||||
Lili Record's
|
||||
</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 active" href="/">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/admin/">Admin</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<body>
|
||||
{% block content %}{% endblock %}
|
||||
<main>
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<footer class="py-4 border-top border-secondary mt-5">
|
||||
<div class="container text-center text-secondary">
|
||||
<p>© 2026 Lili Record's. Spin your vibes.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
@ -1,145 +1,183 @@
|
||||
{% extends "base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}{{ project_name }}{% endblock %}
|
||||
{% block content %}
|
||||
<div class="container py-5">
|
||||
<div class="row align-items-center justify-content-center">
|
||||
<!-- Vinyl Player Visual -->
|
||||
<div class="col-lg-6 mb-5 mb-lg-0 text-center d-flex justify-content-center">
|
||||
<div class="player-container">
|
||||
<div id="vinyl" class="vinyl-disk">
|
||||
<div class="vinyl-label" id="vinyl-label">
|
||||
<img src="/assets/pasted-20260129-210745-654c6eb5.jpg" alt="Logo" class="img-fluid rounded-circle" style="width: 100%; height: 100%; object-fit: cover; opacity: 0.9;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="tonearm" id="tonearm"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Player Controls & Info -->
|
||||
<div class="col-lg-6">
|
||||
<div class="glass-card p-4 rounded-4 shadow-lg border-neon">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<img src="/assets/pasted-20260129-210745-654c6eb5.jpg" alt="Logo" height="60" class="me-3 rounded-2 shadow-sm">
|
||||
<div>
|
||||
<h1 class="h2 mb-0 fw-bold" id="current-station-name" style="font-family: 'Righteous', cursive; color: var(--secondary-neon);">Lili Record's</h1>
|
||||
<p class="text-secondary mb-0" id="current-track-info">Virtual Broadcast</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="audio-controls mb-4 p-3 rounded-3 bg-dark bg-opacity-50 border border-secondary">
|
||||
<audio id="audio-player"></audio>
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<button id="play-btn" class="btn btn-primary btn-lg rounded-circle d-flex align-items-center justify-content-center" style="width: 70px; height: 70px;">
|
||||
<i class="fas fa-play fs-4"></i>
|
||||
</button>
|
||||
<div class="flex-grow-1">
|
||||
<label for="volume-control" class="form-label small text-secondary mb-1">Volume</label>
|
||||
<input type="range" class="form-range" id="volume-control" min="0" max="1" step="0.01" value="0.5">
|
||||
</div>
|
||||
<span class="badge bg-dark border border-secondary mt-3" id="volume-indicator">50%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="station-list">
|
||||
<h5 class="mb-3 text-uppercase small ls-wide fw-bold text-secondary">Available Stations</h5>
|
||||
<div class="list-group list-group-flush bg-transparent custom-scrollbar" style="max-height: 250px; overflow-y: auto;">
|
||||
{% for station in stations %}
|
||||
<button class="list-group-item list-group-item-action bg-transparent text-white border-0 py-3 rounded-3 mb-2 station-item"
|
||||
data-url="{{ station.stream_url }}"
|
||||
data-name="{{ station.name }}"
|
||||
data-color="{{ station.color }}">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="station-dot me-3" style="background-color: {{ station.color }}; box-shadow: 0 0 15px {{ station.color }};"></div>
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="mb-0 fw-bold">{{ station.name }}</h6>
|
||||
<small class="text-secondary">Click to tune in</small>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right text-muted small"></i>
|
||||
</div>
|
||||
</button>
|
||||
{% empty %}
|
||||
<div class="text-center py-4">
|
||||
<i class="fas fa-search mb-2 text-muted fs-1"></i>
|
||||
<p class="text-muted small">No stations added yet.<br><a href="/admin/" class="text-decoration-none text-primary">Add some in Admin!</a></p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% 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%;
|
||||
.border-neon {
|
||||
border-color: rgba(0, 242, 255, 0.3) !important;
|
||||
box-shadow: 0 0 20px rgba(0, 242, 255, 0.1);
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 100% 100%;
|
||||
.glass-card {
|
||||
background: rgba(15, 15, 15, 0.8);
|
||||
backdrop-filter: blur(15px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
.ls-wide { letter-spacing: 0.1em; }
|
||||
.station-dot {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.station-item {
|
||||
background: rgba(255, 255, 255, 0.03) !important;
|
||||
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
border: 1px solid transparent !important;
|
||||
}
|
||||
.station-item:hover {
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
transform: translateX(10px);
|
||||
border-color: rgba(255, 0, 127, 0.3) !important;
|
||||
}
|
||||
.station-item.active {
|
||||
background: linear-gradient(90deg, rgba(255, 0, 127, 0.1), transparent) !important;
|
||||
border-left: 4px solid var(--primary-neon) !important;
|
||||
border-color: rgba(255, 0, 127, 0.2) !important;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.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 %}
|
||||
|
||||
{% 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>
|
||||
</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>
|
||||
{% block scripts %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const audio = document.getElementById('audio-player');
|
||||
const playBtn = document.getElementById('play-btn');
|
||||
const vinyl = document.getElementById('vinyl');
|
||||
const vinylLabel = document.getElementById('vinyl-label');
|
||||
const tonearm = document.getElementById('tonearm');
|
||||
const stationItems = document.querySelectorAll('.station-item');
|
||||
const stationNameDisplay = document.getElementById('current-station-name');
|
||||
const volumeControl = document.getElementById('volume-control');
|
||||
const volumeIndicator = document.getElementById('volume-indicator');
|
||||
|
||||
let isPlaying = false;
|
||||
|
||||
function togglePlay() {
|
||||
if (isPlaying) {
|
||||
audio.pause();
|
||||
playBtn.innerHTML = '<i class="fas fa-play fs-4"></i>';
|
||||
vinyl.classList.remove('spinning');
|
||||
tonearm.classList.remove('active');
|
||||
} else {
|
||||
if (audio.src && audio.src !== window.location.href) {
|
||||
audio.play().catch(e => {
|
||||
console.error("Playback failed", e);
|
||||
alert("Unable to play stream. It might be offline.");
|
||||
});
|
||||
playBtn.innerHTML = '<i class="fas fa-pause fs-4"></i>';
|
||||
vinyl.classList.add('spinning');
|
||||
tonearm.classList.add('active');
|
||||
} else {
|
||||
alert('Please select a station first!');
|
||||
return;
|
||||
}
|
||||
}
|
||||
isPlaying = !isPlaying;
|
||||
}
|
||||
|
||||
playBtn.addEventListener('click', togglePlay);
|
||||
|
||||
stationItems.forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
const url = this.dataset.url;
|
||||
const name = this.dataset.name;
|
||||
const color = this.dataset.color;
|
||||
|
||||
// Update UI
|
||||
stationItems.forEach(i => i.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
stationNameDisplay.textContent = name;
|
||||
vinylLabel.style.boxShadow = `0 0 30px ${color}`;
|
||||
|
||||
// Set source and play
|
||||
audio.src = url;
|
||||
isPlaying = false; // Reset state for toggle
|
||||
togglePlay();
|
||||
});
|
||||
});
|
||||
|
||||
volumeControl.addEventListener('input', function() {
|
||||
audio.volume = this.value;
|
||||
volumeIndicator.textContent = Math.round(this.value * 100) + '%';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@ -1,25 +1,12 @@
|
||||
import os
|
||||
import platform
|
||||
|
||||
from django import get_version as django_version
|
||||
from django.shortcuts import render
|
||||
from django.utils import timezone
|
||||
|
||||
from .models import Station
|
||||
import time
|
||||
|
||||
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()
|
||||
|
||||
stations = Station.objects.filter(is_active=True)
|
||||
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", ""),
|
||||
"stations": stations,
|
||||
"project_name": "Lili Record's",
|
||||
"deployment_timestamp": int(time.time()),
|
||||
}
|
||||
return render(request, "core/index.html", context)
|
||||
|
||||
@ -1,4 +1,183 @@
|
||||
/* Custom styles for the application */
|
||||
body {
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
/* Lili Record's Custom Styles - Metallic & Neon Edition */
|
||||
|
||||
:root {
|
||||
--primary-neon: #FF007F;
|
||||
--secondary-neon: #00F2FF;
|
||||
--metallic-silver: #c0c0c0;
|
||||
--metallic-dark: #2c2c2c;
|
||||
--vinyl-black: #050505;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #050505;
|
||||
background-image:
|
||||
radial-gradient(at 0% 0%, rgba(255, 0, 127, 0.15) 0px, transparent 50%),
|
||||
radial-gradient(at 100% 100%, rgba(0, 242, 255, 0.15) 0px, transparent 50%);
|
||||
min-height: 100vh;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, var(--primary-neon), #e60072);
|
||||
border: none;
|
||||
box-shadow: 0 0 20px rgba(255, 0, 127, 0.4);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 0 30px rgba(255, 0, 127, 0.7);
|
||||
}
|
||||
|
||||
/* Vinyl Record Player */
|
||||
.player-container {
|
||||
position: relative;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
margin: 0 auto;
|
||||
background: linear-gradient(145deg, #333, #111);
|
||||
border-radius: 30px;
|
||||
padding: 25px;
|
||||
border: 2px solid rgba(255,255,255,0.05);
|
||||
box-shadow:
|
||||
inset 0 0 80px #000,
|
||||
0 20px 60px rgba(0,0,0,0.8),
|
||||
0 0 40px rgba(0, 242, 255, 0.05);
|
||||
}
|
||||
|
||||
.vinyl-disk {
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
background: radial-gradient(circle, #222 0%, #111 20%, #050505 100%);
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
box-shadow: 0 0 30px rgba(0,0,0,1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-image: repeating-radial-gradient(
|
||||
circle,
|
||||
rgba(255,255,255,0.03) 0,
|
||||
rgba(255,255,255,0.03) 1px,
|
||||
transparent 1px,
|
||||
transparent 3px
|
||||
);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Metallic Shine */
|
||||
.vinyl-disk::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
border-radius: 50%;
|
||||
background: conic-gradient(
|
||||
from 0deg,
|
||||
transparent 0deg,
|
||||
rgba(255,255,255,0.05) 45deg,
|
||||
transparent 90deg,
|
||||
rgba(255,255,255,0.05) 135deg,
|
||||
transparent 180deg,
|
||||
rgba(255,255,255,0.05) 225deg,
|
||||
transparent 270deg,
|
||||
rgba(255,255,255,0.05) 315deg,
|
||||
transparent 360deg
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.vinyl-label {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
background-color: var(--primary-neon);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.5s ease;
|
||||
border: 6px solid #111;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
background: #fff; /* White bg for logo fallback */
|
||||
}
|
||||
|
||||
.tonearm {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 40px;
|
||||
width: 24px;
|
||||
height: 200px;
|
||||
background: linear-gradient(to right, #666, #999, #666);
|
||||
border-radius: 12px;
|
||||
transform-origin: 50% 15px;
|
||||
transform: rotate(-35deg);
|
||||
transition: transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
z-index: 10;
|
||||
box-shadow: 4px 4px 10px rgba(0,0,0,0.6);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.tonearm::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background: #333;
|
||||
border-radius: 4px;
|
||||
border: 2px solid #555;
|
||||
}
|
||||
|
||||
.tonearm.active {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.vinyl-disk.spinning {
|
||||
animation: spin 3.5s linear infinite;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 992px) {
|
||||
.player-container {
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
}
|
||||
.vinyl-disk {
|
||||
width: 270px;
|
||||
height: 270px;
|
||||
}
|
||||
.vinyl-label {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.tonearm {
|
||||
height: 160px;
|
||||
right: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.player-container {
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
}
|
||||
.vinyl-disk {
|
||||
width: 230px;
|
||||
height: 230px;
|
||||
}
|
||||
.vinyl-label {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.tonearm {
|
||||
height: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,21 +1,183 @@
|
||||
/* Lili Record's Custom Styles - Metallic & Neon Edition */
|
||||
|
||||
: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);
|
||||
--primary-neon: #FF007F;
|
||||
--secondary-neon: #00F2FF;
|
||||
--metallic-silver: #c0c0c0;
|
||||
--metallic-dark: #2c2c2c;
|
||||
--vinyl-black: #050505;
|
||||
}
|
||||
|
||||
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;
|
||||
background-color: #050505;
|
||||
background-image:
|
||||
radial-gradient(at 0% 0%, rgba(255, 0, 127, 0.15) 0px, transparent 50%),
|
||||
radial-gradient(at 100% 100%, rgba(0, 242, 255, 0.15) 0px, transparent 50%);
|
||||
min-height: 100vh;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, var(--primary-neon), #e60072);
|
||||
border: none;
|
||||
box-shadow: 0 0 20px rgba(255, 0, 127, 0.4);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 0 30px rgba(255, 0, 127, 0.7);
|
||||
}
|
||||
|
||||
/* Vinyl Record Player */
|
||||
.player-container {
|
||||
position: relative;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
margin: 0 auto;
|
||||
background: linear-gradient(145deg, #333, #111);
|
||||
border-radius: 30px;
|
||||
padding: 25px;
|
||||
border: 2px solid rgba(255,255,255,0.05);
|
||||
box-shadow:
|
||||
inset 0 0 80px #000,
|
||||
0 20px 60px rgba(0,0,0,0.8),
|
||||
0 0 40px rgba(0, 242, 255, 0.05);
|
||||
}
|
||||
|
||||
.vinyl-disk {
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
background: radial-gradient(circle, #222 0%, #111 20%, #050505 100%);
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
box-shadow: 0 0 30px rgba(0,0,0,1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-image: repeating-radial-gradient(
|
||||
circle,
|
||||
rgba(255,255,255,0.03) 0,
|
||||
rgba(255,255,255,0.03) 1px,
|
||||
transparent 1px,
|
||||
transparent 3px
|
||||
);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Metallic Shine */
|
||||
.vinyl-disk::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
border-radius: 50%;
|
||||
background: conic-gradient(
|
||||
from 0deg,
|
||||
transparent 0deg,
|
||||
rgba(255,255,255,0.05) 45deg,
|
||||
transparent 90deg,
|
||||
rgba(255,255,255,0.05) 135deg,
|
||||
transparent 180deg,
|
||||
rgba(255,255,255,0.05) 225deg,
|
||||
transparent 270deg,
|
||||
rgba(255,255,255,0.05) 315deg,
|
||||
transparent 360deg
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.vinyl-label {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
background-color: var(--primary-neon);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.5s ease;
|
||||
border: 6px solid #111;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
background: #fff; /* White bg for logo fallback */
|
||||
}
|
||||
|
||||
.tonearm {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 40px;
|
||||
width: 24px;
|
||||
height: 200px;
|
||||
background: linear-gradient(to right, #666, #999, #666);
|
||||
border-radius: 12px;
|
||||
transform-origin: 50% 15px;
|
||||
transform: rotate(-35deg);
|
||||
transition: transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
z-index: 10;
|
||||
box-shadow: 4px 4px 10px rgba(0,0,0,0.6);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.tonearm::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background: #333;
|
||||
border-radius: 4px;
|
||||
border: 2px solid #555;
|
||||
}
|
||||
|
||||
.tonearm.active {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.vinyl-disk.spinning {
|
||||
animation: spin 3.5s linear infinite;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 992px) {
|
||||
.player-container {
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
}
|
||||
.vinyl-disk {
|
||||
width: 270px;
|
||||
height: 270px;
|
||||
}
|
||||
.vinyl-label {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.tonearm {
|
||||
height: 160px;
|
||||
right: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.player-container {
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
}
|
||||
.vinyl-disk {
|
||||
width: 230px;
|
||||
height: 230px;
|
||||
}
|
||||
.vinyl-label {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.tonearm {
|
||||
height: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
BIN
staticfiles/pasted-20260129-210745-654c6eb5.jpg
Normal file
BIN
staticfiles/pasted-20260129-210745-654c6eb5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Loading…
x
Reference in New Issue
Block a user