Auto commit: 2026-01-31T04:18:35.987Z
This commit is contained in:
Flatlogic Bot
parent
d79034aa07
commit
997b7d4c83
458
index.php
458
index.php
@ -61,7 +61,7 @@ try {
|
|||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
--primary-color: #ff2d55;
|
--primary-color: #ff2d55;
|
||||||
--glass-bg: rgba(0, 0, 0, 0.6);
|
--glass-bg: rgba(0, 0, 0, 0.7);
|
||||||
--glass-border: rgba(255, 255, 255, 0.15);
|
--glass-border: rgba(255, 255, 255, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -86,7 +86,7 @@ try {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: url('<?= $promoImage ?>') center/cover no-repeat;
|
background: url('<?= $promoImage ?>') center/cover no-repeat;
|
||||||
filter: brightness(0.3) blur(5px);
|
filter: brightness(0.25) blur(8px);
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -124,7 +124,7 @@ try {
|
|||||||
.left-column {
|
.left-column {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 2rem;
|
top: 2rem;
|
||||||
flex: 0 0 300px;
|
flex: 0 0 320px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 1.5rem;
|
gap: 1.5rem;
|
||||||
@ -133,7 +133,7 @@ try {
|
|||||||
.admin-column {
|
.admin-column {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 2rem;
|
top: 2rem;
|
||||||
flex: 0 0 300px;
|
flex: 0 0 320px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 1.5rem;
|
gap: 1.5rem;
|
||||||
@ -141,15 +141,14 @@ try {
|
|||||||
|
|
||||||
.player-container {
|
.player-container {
|
||||||
background: var(--glass-bg);
|
background: var(--glass-bg);
|
||||||
backdrop-filter: blur(15px);
|
backdrop-filter: blur(20px);
|
||||||
-webkit-backdrop-filter: blur(15px);
|
-webkit-backdrop-filter: blur(20px);
|
||||||
border: 1px solid var(--glass-border);
|
border: 1px solid var(--glass-border);
|
||||||
border-radius: 28px;
|
border-radius: 30px;
|
||||||
padding: 1.5rem;
|
padding: 2rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
box-shadow: 0 20px 40px rgba(0,0,0,0.6);
|
box-shadow: 0 25px 50px rgba(0,0,0,0.8);
|
||||||
transition: all 0.3s ease;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -166,89 +165,60 @@ try {
|
|||||||
.promo-image {
|
.promo-image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
border-radius: 30px;
|
border-radius: 35px;
|
||||||
box-shadow: 0 30px 60px rgba(0,0,0,0.7);
|
box-shadow: 0 35px 70px rgba(0,0,0,0.8);
|
||||||
border: 1px solid var(--glass-border);
|
border: 1px solid var(--glass-border);
|
||||||
transition: transform 0.5s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.comments-window {
|
.comments-window {
|
||||||
background: var(--glass-bg);
|
background: var(--glass-bg);
|
||||||
backdrop-filter: blur(20px);
|
backdrop-filter: blur(25px);
|
||||||
-webkit-backdrop-filter: blur(20px);
|
-webkit-backdrop-filter: blur(25px);
|
||||||
border: 1px solid var(--glass-border);
|
border: 1px solid var(--glass-border);
|
||||||
border-radius: 30px;
|
border-radius: 35px;
|
||||||
padding: 1.8rem;
|
padding: 2rem;
|
||||||
box-shadow: 0 30px 60px rgba(0,0,0,0.5);
|
box-shadow: 0 35px 70px rgba(0,0,0,0.6);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-height: 400px;
|
min-height: 450px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comments-header {
|
.comments-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-bottom: 1.2rem;
|
margin-bottom: 1.5rem;
|
||||||
padding-bottom: 0.8rem;
|
padding-bottom: 1rem;
|
||||||
border-bottom: 1px solid var(--glass-border);
|
border-bottom: 1px solid var(--glass-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.comments-list {
|
.comments-list {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding-right: 0.8rem;
|
padding-right: 10px;
|
||||||
max-height: 500px;
|
max-height: 550px;
|
||||||
}
|
|
||||||
|
|
||||||
.comments-list::-webkit-scrollbar {
|
|
||||||
width: 4px;
|
|
||||||
}
|
|
||||||
.comments-list::-webkit-scrollbar-thumb {
|
|
||||||
background: var(--glass-border);
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-item {
|
.comment-item {
|
||||||
background: rgba(255,255,255,0.04);
|
background: rgba(255,255,255,0.05);
|
||||||
border: 1px solid rgba(255,255,255,0.05);
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
border-radius: 16px;
|
border-radius: 20px;
|
||||||
padding: 1.2rem;
|
padding: 1.5rem;
|
||||||
margin-bottom: 1.2rem;
|
margin-bottom: 1.2rem;
|
||||||
font-size: 0.95rem;
|
|
||||||
position: relative;
|
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-item:hover {
|
.comment-item:hover {
|
||||||
background: rgba(255,255,255,0.08);
|
background: rgba(255,255,255,0.1);
|
||||||
transform: translateX(5px);
|
transform: scale(1.02);
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-user {
|
.comment-user {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
margin-bottom: 0.3rem;
|
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 1rem;
|
margin-bottom: 0.4rem;
|
||||||
}
|
|
||||||
|
|
||||||
.comment-text {
|
|
||||||
opacity: 0.9;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-date {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
opacity: 0.4;
|
|
||||||
display: block;
|
|
||||||
margin-top: 0.6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-actions {
|
|
||||||
position: absolute;
|
|
||||||
top: 15px;
|
|
||||||
right: 15px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-wa-reply {
|
.btn-wa-reply {
|
||||||
@ -256,72 +226,47 @@ try {
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
width: 36px;
|
width: 40px;
|
||||||
height: 36px;
|
height: 40px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 1rem;
|
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-wa-reply:hover {
|
.btn-wa-reply:hover {
|
||||||
transform: scale(1.15) rotate(10deg);
|
transform: scale(1.2) rotate(15deg);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
box-shadow: 0 6px 15px rgba(37, 211, 102, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.request-form {
|
|
||||||
margin-top: 1.5rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-control-glass {
|
.form-control-glass {
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
border: 1px solid rgba(255,255,255,0.1);
|
border: none;
|
||||||
color: #000;
|
color: #000;
|
||||||
border-radius: 16px;
|
border-radius: 18px;
|
||||||
padding: 0.8rem 1.2rem;
|
padding: 0.9rem 1.4rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-control-glass::placeholder {
|
|
||||||
color: #777;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-send-request {
|
.btn-send-request {
|
||||||
background: linear-gradient(45deg, var(--primary-color), #ff512f);
|
background: linear-gradient(45deg, var(--primary-color), #ff512f);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 16px;
|
border-radius: 18px;
|
||||||
padding: 0.8rem;
|
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
text-transform: uppercase;
|
box-shadow: 0 10px 25px rgba(255, 45, 85, 0.4);
|
||||||
letter-spacing: 1px;
|
|
||||||
box-shadow: 0 10px 20px rgba(255, 45, 85, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-send-request:hover {
|
|
||||||
transform: translateY(-3px);
|
|
||||||
box-shadow: 0 15px 25px rgba(255, 45, 85, 0.5);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.radio-logo {
|
.radio-logo {
|
||||||
width: 70px;
|
width: 85px;
|
||||||
height: 70px;
|
height: 85px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: linear-gradient(135deg, #ff2d55, #ff512f);
|
margin: 0 auto 1.2rem;
|
||||||
margin: 0 auto 1rem;
|
box-shadow: 0 0 30px rgba(255, 45, 85, 0.6);
|
||||||
display: flex;
|
animation: pulse 3s infinite;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
box-shadow: 0 0 25px rgba(255, 45, 85, 0.5);
|
|
||||||
animation: pulse 2.5s infinite;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border: 3px solid rgba(255,255,255,0.2);
|
border: 4px solid rgba(255,255,255,0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
.radio-logo img {
|
.radio-logo img {
|
||||||
@ -331,176 +276,124 @@ try {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes pulse {
|
@keyframes pulse {
|
||||||
0% { transform: scale(1); box-shadow: 0 0 20px rgba(255, 45, 85, 0.4); }
|
0% { transform: scale(1); }
|
||||||
50% { transform: scale(1.08); box-shadow: 0 0 40px rgba(255, 45, 85, 0.7); }
|
50% { transform: scale(1.1); }
|
||||||
100% { transform: scale(1); box-shadow: 0 0 20px rgba(255, 45, 85, 0.4); }
|
100% { transform: scale(1); }
|
||||||
}
|
|
||||||
|
|
||||||
.song-title {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-weight: 800;
|
|
||||||
margin-bottom: 0.2rem;
|
|
||||||
display: block;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.artist-name {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
opacity: 0.6;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-play {
|
.btn-play {
|
||||||
width: 50px;
|
width: 60px;
|
||||||
height: 50px;
|
height: 60px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
color: #000;
|
color: #000;
|
||||||
border: none;
|
border: none;
|
||||||
font-size: 1.2rem;
|
font-size: 1.5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
transition: all 0.3s ease;
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-play:hover {
|
.btn-play:hover {
|
||||||
transform: scale(1.1);
|
|
||||||
background: var(--primary-color);
|
background: var(--primary-color);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
transform: scale(1.15);
|
||||||
|
|
||||||
.volume-slider {
|
|
||||||
width: 100%;
|
|
||||||
height: 6px;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
background: rgba(255,255,255,0.1);
|
|
||||||
border-radius: 10px;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.volume-slider::-webkit-slider-thumb {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 50%;
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: 0 0 10px rgba(0,0,0,0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.qr-mini-box {
|
|
||||||
background: rgba(255,255,255,0.08);
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 16px;
|
|
||||||
border: 1px solid var(--glass-border);
|
|
||||||
width: 85px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.qr-mini-box:hover {
|
|
||||||
background: rgba(255,255,255,0.15);
|
|
||||||
border-color: var(--primary-color);
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
.qr-text-mini {
|
|
||||||
font-size: 0.65rem;
|
|
||||||
margin-top: 5px;
|
|
||||||
font-weight: 800;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.admin-stats-box {
|
.admin-stats-box {
|
||||||
background: var(--glass-bg);
|
background: var(--glass-bg);
|
||||||
backdrop-filter: blur(15px);
|
backdrop-filter: blur(20px);
|
||||||
-webkit-backdrop-filter: blur(15px);
|
-webkit-backdrop-filter: blur(20px);
|
||||||
border: 1px solid var(--glass-border);
|
border: 1px solid var(--glass-border);
|
||||||
border-radius: 28px;
|
border-radius: 30px;
|
||||||
padding: 1.5rem;
|
padding: 2rem;
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 20px 40px rgba(0,0,0,0.6);
|
|
||||||
animation: fadeIn 0.8s ease;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
box-shadow: 0 25px 50px rgba(0,0,0,0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes fadeIn {
|
.stat-widget-container {
|
||||||
from { opacity: 0; transform: translateY(20px); }
|
background: rgba(255,255,255,0.04);
|
||||||
to { opacity: 1; transform: translateY(0); }
|
border-radius: 20px;
|
||||||
|
padding: 1rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
border: 1px solid rgba(255,255,255,0.05);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.stat-widget-container img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
.whatsapp-btn {
|
.whatsapp-btn {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 30px;
|
bottom: 30px;
|
||||||
left: 30px;
|
left: 30px;
|
||||||
width: 65px;
|
width: 70px;
|
||||||
height: 65px;
|
height: 70px;
|
||||||
background: #25d366;
|
background: #25d366;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 2.2rem;
|
font-size: 2.5rem;
|
||||||
box-shadow: 0 15px 35px rgba(37, 211, 102, 0.4);
|
box-shadow: 0 15px 35px rgba(37, 211, 102, 0.5);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
z-index: 100;
|
z-index: 1000;
|
||||||
animation: bounce 2.5s infinite;
|
animation: bounce 2.5s infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-youtube-float {
|
.btn-youtube-float {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 110px;
|
bottom: 115px;
|
||||||
left: 30px;
|
left: 30px;
|
||||||
width: 65px;
|
width: 70px;
|
||||||
height: 65px;
|
height: 70px;
|
||||||
background: #ff0000;
|
background: #ff0000;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 2rem;
|
font-size: 2.2rem;
|
||||||
box-shadow: 0 15px 35px rgba(255, 0, 0, 0.4);
|
box-shadow: 0 15px 35px rgba(255, 0, 0, 0.5);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
z-index: 100;
|
z-index: 1000;
|
||||||
animation: bounce 2.8s infinite;
|
animation: bounce 2.8s infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes bounce {
|
@keyframes bounce {
|
||||||
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
|
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
|
||||||
40% {transform: translateY(-12px);}
|
40% {transform: translateY(-15px);}
|
||||||
60% {transform: translateY(-6px);}
|
60% {transform: translateY(-8px);}
|
||||||
}
|
}
|
||||||
|
|
||||||
.live-badge {
|
.live-badge {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 15px;
|
top: 20px;
|
||||||
left: 15px;
|
left: 20px;
|
||||||
background: var(--primary-color);
|
background: var(--primary-color);
|
||||||
padding: 4px 10px;
|
padding: 5px 12px;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
font-size: 0.65rem;
|
font-size: 0.7rem;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 1.5px;
|
letter-spacing: 2px;
|
||||||
box-shadow: 0 4px 10px rgba(255, 45, 85, 0.4);
|
box-shadow: 0 5px 15px rgba(255, 45, 85, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.policy-link {
|
.troubleshoot-note {
|
||||||
color: #fff;
|
font-size: 0.75rem;
|
||||||
opacity: 0.5;
|
opacity: 0.6;
|
||||||
font-size: 0.8rem;
|
margin-top: 1rem;
|
||||||
text-decoration: none;
|
line-height: 1.4;
|
||||||
border-bottom: 1px dashed rgba(255,255,255,0.3);
|
|
||||||
padding-bottom: 2px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.policy-link:hover {
|
|
||||||
opacity: 1;
|
|
||||||
color: var(--primary-color);
|
|
||||||
border-bottom-color: var(--primary-color);
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
@ -517,26 +410,25 @@ try {
|
|||||||
<img src="<?= $logoImage ?>" alt="Lili Records Logo">
|
<img src="<?= $logoImage ?>" alt="Lili Records Logo">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="song-info mb-3">
|
<div class="song-info mb-4">
|
||||||
<span class="song-title" id="songTitle">Conectando...</span>
|
<span class="d-block fw-bold fs-5" id="songTitle">Conectando...</span>
|
||||||
<span class="artist-name" id="artistName">Lili Records Radio</span>
|
<span class="d-block opacity-50 small" id="artistName">Lili Records Radio</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="player-controls-row d-flex align-items-center gap-3">
|
<div class="player-controls-row d-flex align-items-center gap-3 justify-content-center">
|
||||||
<button class="btn-play" id="playBtn">
|
<button class="btn-play" id="playBtn">
|
||||||
<i class="fas fa-play" id="playIcon"></i>
|
<i class="fas fa-play" id="playIcon"></i>
|
||||||
</button>
|
</button>
|
||||||
<div class="flex-grow-1 d-flex align-items-center gap-2">
|
<div class="d-flex align-items-center gap-2" style="width: 120px;">
|
||||||
<i class="fas fa-volume-off opacity-50" style="font-size: 0.8rem;"></i>
|
<i class="fas fa-volume-up opacity-50"></i>
|
||||||
<input type="range" class="volume-slider" id="volumeSlider" min="0" max="1" step="0.01" value="0.8">
|
<input type="range" class="form-range" id="volumeSlider" min="0" max="1" step="0.01" value="0.8">
|
||||||
<i class="fas fa-volume-up opacity-50" style="font-size: 0.8rem;"></i>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<?php if ($isAdmin): ?>
|
<?php if ($isAdmin): ?>
|
||||||
<div class="mt-4 pt-3 border-top border-white border-opacity-10">
|
<div class="mt-4 pt-4 border-top border-white border-opacity-10">
|
||||||
<div class="mb-2 small text-primary"><i class="fas fa-shield-alt me-1"></i> MODO ADMIN</div>
|
<div class="mb-2 small text-primary fw-bold"><i class="fas fa-user-shield me-1"></i> PANEL ADMINISTRADOR</div>
|
||||||
<a href="?logout=1" class="btn btn-sm btn-outline-danger px-3 rounded-pill" style="font-size: 0.75rem;">Cerrar Administración</a>
|
<a href="?logout=1" class="btn btn-sm btn-outline-danger px-4 rounded-pill mt-2">Cerrar Sesión</a>
|
||||||
</div>
|
</div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</aside>
|
</aside>
|
||||||
@ -550,34 +442,33 @@ try {
|
|||||||
<?php if ($isAdmin): ?>
|
<?php if ($isAdmin): ?>
|
||||||
<div class="comments-header">
|
<div class="comments-header">
|
||||||
<div>
|
<div>
|
||||||
<h5 class="mb-1"><i class="fas fa-user-shield me-2 text-primary"></i>Panel de Control</h5>
|
<h5 class="mb-1"><i class="fas fa-comments me-2 text-primary"></i>Mensajes de Oyentes</h5>
|
||||||
<p class="small opacity-50 mb-0">Gestiona los mensajes de tus oyentes</p>
|
<p class="small opacity-50 mb-0">Gestiona las peticiones en tiempo real</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="qr-mini-box text-center">
|
<div class="text-center" style="width: 90px;">
|
||||||
<img src="<?= $qrImage ?>" alt="QR Pago" class="w-100 rounded-2">
|
<img src="<?= $qrImage ?>" alt="QR Pago" class="w-100 rounded-3 mb-1">
|
||||||
<p class="qr-text-mini text-white mb-0">APOYAR</p>
|
<p class="small fw-bold mb-0">APOYAR</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="comments-list" id="commentsList">
|
<div class="comments-list" id="commentsList">
|
||||||
<?php if (empty($requests)): ?>
|
<?php if (empty($requests)): ?>
|
||||||
<div class="text-center py-5 opacity-40">
|
<div class="text-center py-5 opacity-30">
|
||||||
<i class="fas fa-comment-slash fa-3x mb-3"></i>
|
<i class="fas fa-comment-slash fa-4x mb-3"></i>
|
||||||
<p>Aún no hay mensajes recibidos.</p>
|
<p>No hay mensajes todavía.</p>
|
||||||
</div>
|
</div>
|
||||||
<?php else: ?>
|
<?php else: ?>
|
||||||
<?php foreach ($requests as $req): ?>
|
<?php foreach ($requests as $req): ?>
|
||||||
<div class="comment-item">
|
<div class="comment-item">
|
||||||
<span class="comment-user"><?= htmlspecialchars($req['name']) ?></span>
|
<span class="comment-user"><?= htmlspecialchars($req['name']) ?></span>
|
||||||
<p class="comment-text mb-0"><?= htmlspecialchars($req['message']) ?></p>
|
<p class="mb-2"><?= htmlspecialchars($req['message']) ?></p>
|
||||||
<span class="comment-date"><?= date('d M Y, H:i', strtotime($req['created_at'])) ?></span>
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
|
<span class="small opacity-40"><?= date('d M, H:i', strtotime($req['created_at'])) ?></span>
|
||||||
<?php if (!empty($req['phone'])): ?>
|
<?php if (!empty($req['phone'])): ?>
|
||||||
<div class="comment-actions">
|
<a href="https://wa.me/<?= preg_replace('/[^0-9]/', '', $req['phone']) ?>" class="btn-wa-reply" target="_blank">
|
||||||
<a href="https://wa.me/<?= preg_replace('/[^0-9]/', '', $req['phone']) ?>" class="btn-wa-reply" target="_blank">
|
<i class="fab fa-whatsapp"></i>
|
||||||
<i class="fab fa-whatsapp"></i>
|
</a>
|
||||||
</a>
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
<?php endif; ?>
|
|
||||||
</div>
|
</div>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
@ -585,48 +476,52 @@ try {
|
|||||||
<?php else: ?>
|
<?php else: ?>
|
||||||
<div class="comments-header border-0 mb-3">
|
<div class="comments-header border-0 mb-3">
|
||||||
<div>
|
<div>
|
||||||
<h5 class="mb-1"><i class="fas fa-microphone-alt me-2 text-primary"></i>¡Envíanos tu mensaje!</h5>
|
<h5 class="mb-1"><i class="fas fa-paper-plane me-2 text-primary"></i>¡Envía tu mensaje!</h5>
|
||||||
<p class="small opacity-60 mb-0">Pide tu canción favorita o envía un saludo.</p>
|
<p class="small opacity-60 mb-0">Pide una canción o envía un saludo al aire.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="qr-mini-box text-center">
|
<div class="text-center" style="width: 90px;">
|
||||||
<img src="<?= $qrImage ?>" alt="QR Pago" class="w-100 rounded-2">
|
<img src="<?= $qrImage ?>" alt="QR Pago" class="w-100 rounded-3 mb-1">
|
||||||
<p class="qr-text-mini text-white mb-0">APOYAR</p>
|
<p class="small fw-bold mb-0">APOYAR</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="comments-list" style="max-height: 250px;">
|
<div class="comments-list" style="max-height: 250px;">
|
||||||
<?php foreach (array_slice($requests, 0, 5) as $req): ?>
|
<?php if (empty($requests)): ?>
|
||||||
<div class="comment-item py-2 px-3 mb-2 border-0 bg-white bg-opacity-5">
|
<p class="text-center py-4 opacity-40 italic">Sé el primero en escribir...</p>
|
||||||
<span class="comment-user" style="font-size: 0.85rem;"><?= htmlspecialchars($req['name']) ?></span>
|
<?php else: ?>
|
||||||
<p class="comment-text mb-0" style="font-size: 0.9rem;"><?= htmlspecialchars($req['message']) ?></p>
|
<?php foreach (array_slice($requests, 0, 8) as $req): ?>
|
||||||
</div>
|
<div class="comment-item py-2 px-3 mb-2 border-0 bg-white bg-opacity-5 rounded-4">
|
||||||
<?php endforeach; ?>
|
<span class="comment-user small"><?= htmlspecialchars($req['name']) ?></span>
|
||||||
|
<p class="mb-0 small"><?= htmlspecialchars($req['message']) ?></p>
|
||||||
|
</div>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
<form action="submit_request.php" method="POST" class="request-form mt-auto">
|
<form action="submit_request.php" method="POST" class="request-form mt-auto pt-4">
|
||||||
<div class="row g-2">
|
<div class="row g-2 mb-2">
|
||||||
<div class="col-sm-6">
|
<div class="col-sm-6">
|
||||||
<input type="text" name="name" class="form-control form-control-glass" placeholder="Nombre completo" required>
|
<input type="text" name="name" class="form-control form-control-glass" placeholder="Tu nombre" required>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-6">
|
<div class="col-sm-6">
|
||||||
<input type="text" name="phone" class="form-control form-control-glass" placeholder="WhatsApp / Teléfono">
|
<input type="text" name="phone" class="form-control form-control-glass" placeholder="Tu WhatsApp">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<textarea name="message" class="form-control form-control-glass" rows="1" placeholder="Escribe aquí tu petición o saludo..." required></textarea>
|
<textarea name="message" class="form-control form-control-glass" rows="1" placeholder="Mensaje o canción..." required></textarea>
|
||||||
<button type="submit" class="btn btn-send-request text-white px-4">
|
<button type="submit" class="btn btn-send-request text-white px-4">
|
||||||
<i class="fas fa-paper-plane"></i>
|
<i class="fas fa-paper-plane"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-center mt-2">
|
<div class="text-center mt-3">
|
||||||
<span class="policy-link" data-bs-toggle="modal" data-bs-target="#policyModal">Ver Políticas de Privacidad</span>
|
<a href="#" class="text-white opacity-40 small text-decoration-none" data-bs-toggle="modal" data-bs-target="#policyModal">Ver Políticas de Privacidad</a>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-4 text-center pb-4">
|
<div class="mt-4 text-center pb-5">
|
||||||
<p class="small text-white opacity-40 mb-0">© 2026 Lili Record´s Radio. All rights reserved.</p>
|
<p class="small text-white opacity-30 mb-0">© 2026 Lili Record´s Radio. Música que conecta.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -634,30 +529,35 @@ try {
|
|||||||
<?php if ($isAdmin): ?>
|
<?php if ($isAdmin): ?>
|
||||||
<div class="admin-column">
|
<div class="admin-column">
|
||||||
<div class="admin-stats-box">
|
<div class="admin-stats-box">
|
||||||
<h6 class="small mb-3 d-flex align-items-center justify-content-center font-weight-bold">
|
<h6 class="small mb-3 fw-bold text-uppercase letter-spacing-1">
|
||||||
<i class="fas fa-globe-americas me-2 text-primary"></i>
|
<i class="fas fa-map-marked-alt me-2 text-primary"></i>
|
||||||
MAPA DE VISITANTES
|
Ubicación de Oyentes
|
||||||
</h6>
|
</h6>
|
||||||
<div class="d-flex justify-content-center mb-4 py-2" style="background: rgba(255,255,255,0.03); border-radius: 20px; min-height: 160px;">
|
<div class="stat-widget-container">
|
||||||
<!-- Widget Map Whos.amung.us -->
|
<!-- Usando Widget de Imagen para máxima compatibilidad con bloqueadores -->
|
||||||
<script id="_waumap">var _wau = _wau || []; _wau.push(["map", "lili-records", "map", "260", "130", "cool", "star-red"]);</script>
|
<a href="https://whos.amung.us/stats/lili-records/" target="_blank">
|
||||||
<script src="https://whos.amung.us/map.js"></script>
|
<img src="https://whos.amung.us/mapwidget/lili-records.png" alt="Mapa de Visitantes" width="260" height="130" border="0">
|
||||||
|
</a>
|
||||||
|
<p class="small troubleshoot-note">Mapa generado en tiempo real. Haz clic para ver detalles.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h6 class="small mb-3 d-flex align-items-center justify-content-center font-weight-bold">
|
<h6 class="small mb-3 fw-bold text-uppercase letter-spacing-1">
|
||||||
<i class="fas fa-users me-2 text-primary"></i>
|
<i class="fas fa-users me-2 text-primary"></i>
|
||||||
OYENTES ONLINE
|
Conexiones en Vivo
|
||||||
</h6>
|
</h6>
|
||||||
<div class="d-flex justify-content-center py-3" style="background: rgba(255,255,255,0.03); border-radius: 20px;">
|
<div class="stat-widget-container" style="min-height: 100px;">
|
||||||
<script id="_wauq0z">var _wau = _wau || []; _wau.push(["classic", "lili-records", "q0z"]);</script>
|
<a href="https://whos.amung.us/stats/lili-records/" target="_blank">
|
||||||
<script src="https://whos.amung.us/classic.js"></script>
|
<img src="https://whos.amung.us/widget/lili-records.png" alt="Contador" border="0">
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-4 pt-3 border-top border-white border-opacity-10 text-center">
|
<div class="mt-4 pt-3 border-top border-white border-opacity-10">
|
||||||
<p class="small opacity-50 mb-0">
|
<a href="https://whos.amung.us/stats/lili-records/" target="_blank" class="btn btn-primary btn-sm w-100 rounded-pill py-2">
|
||||||
Estadísticas activas
|
<i class="fas fa-external-link-alt me-2"></i> Abrir Estadísticas
|
||||||
|
</a>
|
||||||
|
<p class="troubleshoot-note text-center">
|
||||||
|
Si no visualizas el mapa, asegúrate de que tu navegador no esté bloqueando contenido de <b>whos.amung.us</b>.
|
||||||
</p>
|
</p>
|
||||||
<a href="https://whos.amung.us/stats/lili-records/" target="_blank" class="btn btn-link text-primary p-0 mt-1" style="font-size: 0.7rem; text-decoration: none;">Ver panel completo <i class="fas fa-external-link-alt ms-1"></i></a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -667,23 +567,21 @@ try {
|
|||||||
<!-- Modal Política de Privacidad -->
|
<!-- Modal Política de Privacidad -->
|
||||||
<div class="modal fade" id="policyModal" tabindex="-1" aria-hidden="true">
|
<div class="modal fade" id="policyModal" tabindex="-1" aria-hidden="true">
|
||||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||||
<div class="modal-content border-0" style="background: rgba(20,20,20,0.95); border-radius: 30px; backdrop-filter: blur(20px);">
|
<div class="modal-content border-0" style="background: rgba(15,15,15,0.98); border-radius: 35px; backdrop-filter: blur(30px);">
|
||||||
<div class="modal-header border-white border-opacity-10 px-4 py-3">
|
<div class="modal-header border-white border-opacity-10 px-5 py-4">
|
||||||
<h5 class="modal-title font-weight-bold">POLÍTICA DE PRIVACIDAD Y CONTENIDO</h5>
|
<h5 class="modal-title fw-bold">POLÍTICA DE PRIVACIDAD</h5>
|
||||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body p-4" style="font-size: 0.95rem; line-height: 1.7; opacity: 0.9;">
|
<div class="modal-body px-5 py-4" style="font-size: 1rem; line-height: 1.8; opacity: 0.8;">
|
||||||
<ul class="list-unstyled">
|
<ul class="list-unstyled">
|
||||||
<li class="mb-3 d-flex gap-3"><i class="fas fa-check-circle text-primary mt-1"></i> No se permiten comentarios indecentes, ofensivos o discriminatorios.</li>
|
<li class="mb-3 d-flex gap-3"><i class="fas fa-check text-primary mt-1"></i> Respeto absoluto: No se permiten comentarios ofensivos o discriminatorios.</li>
|
||||||
<li class="mb-3 d-flex gap-3"><i class="fas fa-check-circle text-primary mt-1"></i> No aceptamos contenidos políticos; nuestro enfoque es puramente cultural y musical.</li>
|
<li class="mb-3 d-flex gap-3"><i class="fas fa-check text-primary mt-1"></i> Neutralidad: No aceptamos contenidos políticos ni religiosos.</li>
|
||||||
<li class="mb-3 d-flex gap-3"><i class="fas fa-check-circle text-primary mt-1"></i> No recopilamos datos personales sensibles sin autorización previa y explícita.</li>
|
<li class="mb-3 d-flex gap-3"><i class="fas fa-check text-primary mt-1"></i> Privacidad: Tus datos (WhatsApp/Nombre) solo se usan para identificarte en el aire.</li>
|
||||||
<li class="mb-3 d-flex gap-3"><i class="fas fa-check-circle text-primary mt-1"></i> No compartimos información con terceros sin consentimiento del propietario.</li>
|
<li class="mb-3 d-flex gap-3"><i class="fas fa-check text-primary mt-1"></i> Seguridad: No compartimos tu información con terceros.</li>
|
||||||
<li class="mb-3 d-flex gap-3"><i class="fas fa-check-circle text-primary mt-1"></i> Los contenidos enviados son promovidos exclusivamente bajo petición y permiso del usuario.</li>
|
|
||||||
<li class="mb-3 d-flex gap-3"><i class="fas fa-check-circle text-primary mt-1"></i> Respetamos la privacidad del dispositivo y no utilizamos rastreadores invasivos de terceros.</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer border-0 px-4 pb-4">
|
<div class="modal-footer border-0 px-5 pb-5">
|
||||||
<button type="button" class="btn btn-primary px-5 rounded-pill" data-bs-dismiss="modal">Entendido</button>
|
<button type="button" class="btn btn-primary px-5 py-2 rounded-pill fw-bold" data-bs-dismiss="modal">ACEPTAR</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user