```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Line Picker</title>
<style>
@keyframes drawCard {
0% { transform: rotateY(0); }
50% { transform: rotateY(180deg); }
100% { transform: rotateY(0); }
}
.animate-card {
animation: drawCard 2s;
}
.result {
margin-top: 10px;
font-size: 24px;
}
.history {
max-height: 200px;
overflow-y: auto;
margin-top: 10px;
}
</style>
</head>
<body>
<div style="display: flex; justify-content: center; align-items: center; flex-direction: column; width: 400px; height: 400px; border: 5px solid gold; border-radius: 15px; background-color: #333; padding: 10px;">
<input type="file" id="fileInput" style="margin-bottom: 10px;">
<button onclick="pickRandomLine()" style="padding: 10px 20px; font-size: 18px; background-color: #8B0000; color: white; border: none; border-radius: 5px; cursor: pointer;">🎲 Pick a Card!</button>
<div id="cardArea" style="margin-top: 10px; width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; background-color: white; border: 1px solid #8B0000; border-radius: 10px;">
<div id="card" style="width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; background: #282828; color: white; font-size: 24px;"></div>
</div>
<div class="result" id="result"></div>
<div class="history" id="history"></div>
</div>
<script>
let lines = [];
let displayed = new Set();
document.getElementById('fileInput').addEventListener('change', readFile);
function readFile(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function() {
lines = reader.result.split('\n').filter(line => line.trim() !== '');
};
reader.readAsText(file);
}
function pickRandomLine() {
if (lines.length === 0) {
alert('Please upload a valid text file first.');
return;
}
if (displayed.size === lines.length) {
alert('No more lines to display.');
return;
}
let randomIndex;
do {
randomIndex = Math.floor(Math.random() * lines.length);
} while (displayed.has(randomIndex));
displayed.add(randomIndex);
document.getElementById('cardArea').classList.add('animate-card');
setTimeout(() => {
document.getElementById('cardArea').classList.remove('animate-card');
document.getElementById('card').textContent = randomIndex + 1;
document.getElementById('result').textContent = '✨' + lines[randomIndex] + '✨';
const historyItem = document.createElement('div');
historyItem.textContent = `🎉 ${randomIndex + 1}: ${lines[randomIndex]}`;
document.getElementById('history').appendChild(historyItem);
}, 2000);
}
</script>
</body>
</html>
```
