Auto commit: 2026-02-16T22:54:44.202Z
This commit is contained in:
parent
e7beea1aa6
commit
553f2310eb
137
history.php
137
history.php
@ -191,6 +191,67 @@ $history = $stmt->fetchAll();
|
||||
backdrop-filter: blur(5px);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.controls-row {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-container i {
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
background: var(--glass-bg);
|
||||
border: 1px solid var(--glass-border);
|
||||
padding: 0.8rem 1rem 0.8rem 2.8rem;
|
||||
border-radius: 12px;
|
||||
color: var(--text-color);
|
||||
font-family: inherit;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: var(--primary-color);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
[data-theme="light"] .search-input:focus {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
background: var(--primary-color);
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 0 1.2rem;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.download-btn:hover {
|
||||
opacity: 0.9;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body data-theme="dark">
|
||||
@ -208,7 +269,17 @@ $history = $stmt->fetchAll();
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="history-list">
|
||||
<div class="controls-row">
|
||||
<div class="search-container">
|
||||
<i class="bi bi-search"></i>
|
||||
<input type="text" id="search-input" class="search-input" placeholder="Buscar canción o artista..." onkeyup="filterHistory()">
|
||||
</div>
|
||||
<button onclick="downloadHistory()" class="download-btn">
|
||||
<i class="bi bi-download"></i> GUARDAR
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="history-list" id="history-list">
|
||||
<?php if (empty($history)): ?>
|
||||
<div style="text-align: center; opacity: 0.5; padding: 2rem;">No hay canciones registradas en las últimas 24 horas.</div>
|
||||
<?php else: ?>
|
||||
@ -258,6 +329,70 @@ $history = $stmt->fetchAll();
|
||||
themeBtn.classList.add('bi-sun-fill');
|
||||
}
|
||||
})();
|
||||
|
||||
function filterHistory() {
|
||||
const input = document.getElementById('search-input');
|
||||
const filter = input.value.toLowerCase();
|
||||
const list = document.getElementById('history-list');
|
||||
const items = list.getElementsByClassName('history-item');
|
||||
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
const titleElement = items[i].querySelector('.history-title');
|
||||
const artistElement = items[i].querySelector('.history-artist');
|
||||
|
||||
if (!titleElement || !artistElement) continue;
|
||||
|
||||
const title = titleElement.innerText.toLowerCase();
|
||||
const artist = artistElement.innerText.toLowerCase();
|
||||
|
||||
if (title.includes(filter) || artist.includes(filter)) {
|
||||
items[i].style.display = "";
|
||||
} else {
|
||||
items[i].style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function downloadHistory() {
|
||||
const list = document.getElementById('history-list');
|
||||
const items = list.getElementsByClassName('history-item');
|
||||
let content = "Lili Records Radio - Historial de Canciones\n";
|
||||
content += "========================================\n\n";
|
||||
|
||||
let count = 0;
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
if (items[i].style.display !== "none") {
|
||||
const titleElement = items[i].querySelector('.history-title');
|
||||
const artistElement = items[i].querySelector('.history-artist');
|
||||
const timeElement = items[i].querySelector('.history-time');
|
||||
|
||||
if (!titleElement || !artistElement || !timeElement) continue;
|
||||
|
||||
const title = titleElement.innerText;
|
||||
const artist = artistElement.innerText;
|
||||
const time = timeElement.innerText;
|
||||
content += `[${time}] ${title} - ${artist}\n`;
|
||||
count++;
|
||||
}
|
||||
}
|
||||
|
||||
if (count === 0) {
|
||||
alert("No hay canciones para descargar.");
|
||||
return;
|
||||
}
|
||||
|
||||
const blob = new Blob([content], { type: 'text/plain' });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
const date = new Date().toISOString().split('T')[0];
|
||||
|
||||
a.setAttribute('hidden', '');
|
||||
a.setAttribute('href', url);
|
||||
a.setAttribute('download', `historial-radio-${date}.txt`);
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user