← back to Model Arena
data/artifacts/0f136530bd6c/qwen3-14b.html
500 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Election Night - Skycordia War Room</title>
<style>
:root {
--bg-color: #0f172a;
--accent-color: #60a5fa;
--text-color: #f8fafc;
--border-color: #374151;
--hover-color: #1e293b;
--accent-2: #fbbf24;
--error-color: #dc2626;
--placeholder-color: #6b7280;
--slider-color: #4ade80;
}
body {
margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
overflow-x: hidden;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
transition: background-color 0.2s ease;
}
.war-room {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding: 20px;
box-sizing: border-box;
}
.header {
text-align: center;
padding: 15px 0;
}
.header h1 {
margin: 0;
font-size: 2.2rem;
font-weight: 600;
}
.header p {
margin: 0;
font-size: 1rem;
color: var(--placeholder-color);
}
.map {
position: relative;
width: 100%;
height: 400px;
background-color: #1f2937;
border: 2px solid var(--accent-color);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 15px rgba(96, 165, 250, 0.2);
}
.map-inner {
width: 100%;
height: 100%;
position: relative;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="0" y="0" width="100" height="100" fill="#1f2937"/><g><path d="M5 20 L10 30 L15 25 L20 35 L25 30 L30 40 L35 35 L40 45 L45 40 L50 50 L55 45 L60 55 L65 50 L70 60 L75 55 L80 65 L85 60 L90 70 L95 65 L100 75 L95 85 L90 90 L85 95 L80 100 L75 95 L70 100 L65 95 L60 100 L55 95 L50 100 L45 95 L40 100 L35 95 L30 100 L25 95 L20 100 L15 95 L10 100 L5 95 Z" fill="#1f2937" /><text x="50" y="50" font-family="Arial" font-size="10" fill="#6b7280" text-anchor="middle">Skycordia</text></g></svg>');
background-size: cover;
}
.island {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
transition: background-color 0.4s ease, transform 0.3s ease;
}
.island.island-1 { top: 20px; left: 15%; }
.island.island-2 { top: 40px; left: 35%; }
.island.island-3 { top: 60px; left: 60%; }
.island.island-4 { top: 80px; left: 20%; }
.island.island-5 { top: 100px; left: 55%; }
.island.uncertain { background-color: #6b7280; transform: scale(0.8); }
.island.democrat { background-color: #10b982; transform: scale(1.1); }
.island.republican { background-color: #f43f5e; transform: scale(1.1); }
.island.blank { background-color: #1f2937; }
.needle {
width: 2px;
height: 160px;
background-color: var(--accent-color);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 4px;
transition: transform 0.2s ease-in-out;
}
.needle-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background-color: var(--bg-color);
border: 2px solid var(--accent-color);
border-radius: 50%;
box-shadow: 0 0 10px rgba(96, 165, 250, 0.4);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.needle-meter {
width: 2px;
height: 160px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.info {
margin: 20px 0;
text-align: center;
}
.info h2 {
margin: 0;
font-size: 1.5rem;
color: var(--accent-color);
}
.info p {
margin: 5px 0 0;
font-size: 1rem;
color: var(--text-color);
}
.pundit {
margin: 10px 0;
font-size: 1rem;
color: var(--placeholder-color);
display: flex;
align-items: center;
gap: 10px;
animation: fadeIn 2s ease-in-out;
}
.pundit img {
width: 40px;
height: 40px;
border-radius: 50%;
}
.pundit.done {
color: var(--accent-color);
}
.controls {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
gap: 15px;
}
.slider-container {
width: 100%;
max-width: 600px;
position: relative;
}
.slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 10px;
background: var(--bg-color);
outline: none;
border-radius: 5px;
cursor: pointer;
position: relative;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--slider-color);
cursor: pointer;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
.slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--slider-color);
cursor: pointer;
}
.slider-label {
font-size: 1rem;
color: var(--placeholder-color);
text-align: center;
margin-top: 5px;
}
.results {
margin-top: 20px;
text-align: center;
}
.results h2 {
margin: 0;
font-size: 1.3rem;
color: var(--accent-color);
}
.results p {
margin: 5px 0;
font-size: 1rem;
color: var(--text-color);
}
.results .candidate {
margin: 5px 0;
}
.footer {
margin-top: 30px;
font-size: 0.8rem;
color: var(--placeholder-color);
text-align: center;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@media (min-width: 768px) {
.map {
height: 500px;
}
}
@media (min-width: 1024px) {
.map {
height: 600px;
}
.war-room {
max-width: 1200px;
}
}
@media (prefers-reduced-motion: no-preference) {
.island {
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.02); }
100% { transform: scale(1); }
}
}
.island {
pointer-events: none;
}
.slider:focus {
outline: 2px solid var(--accent-color);
}
.island:focus {
outline: 2px solid var(--accent-color);
}
</style>
</head>
<body>
<div class="war-room">
<div class="header">
<h1>Election Night - Skycordia</h1>
<p>Live results. Live chaos. Live intrigue.</p>
</div>
<div class="map">
<div class="map-inner">
<div class="island island-1 is island-uncertain"></div>
<div class="island island-2 is island-uncertain"></div>
<div class="island island-3 is island-uncertain"></div>
<div class="island island-4 is island-uncertain"></div>
<div class="island island-5 is island-uncertain"></div>
</div>
<div class="needle-container">
<div class="needle" id="needle"></div>
</div>
</div>
<div class="info">
<h2>CURRENT STANDINGS</h2>
<p id="result-pct">0.00%</p>
</div>
<div class="pundits">
<div class="pundit" id="pundit1">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='50' fill='%236b7280'/><text x='50' y='55' font-family='Arial' font-size='16' fill='%23f8fafc' text-anchor='middle'>T.</text><text x='50' y='70' font-family='Arial' font-size='12' fill='%23f8fafc' text-anchor='middle'>Rivethorn</text></svg>" alt="T. Rivethorn">
<span>“This is not an election, it's a war of clouds and dreams.”</span>
</div>
<div class="pundit" id="pundit2">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='50' fill='%236b7280'/><text x='50' y='55' font-family='Arial' font-size='16' fill='%23f8fafc' text-anchor='middle'>L.</text><text x='50' y='70' font-family='Arial' font-size='12' fill='%23f8fafc' text-anchor='middle'>Kael</text></svg>" alt="L. Kael">
<span>“The clouds are moving. The skies are breaking.”</span>
</div>
<div class="pundit" id="pundit3">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='50' fill='%236b7280'/><text x='50' y='55' font-family='Arial' font-size='16' fill='%23f8fafc' text-anchor='middle'>A.</text><text x='50' y='70' font-family='Arial' font-size='12' fill='%23f8fafc' text-anchor='middle'>Morrow</text></svg>" alt="A. Morrow">
<span>“What if the sky itself decided the outcome?”</span>
</div>
</div>
<div class="controls">
<div class="slider-container">
<input type="range" id="whatif" min="0" max="100" step="1" value="50" class="slider">
<div class="slider-label">What if the final result was <span id="whatif-pct">50%</span>? <span id="whatif-candidate"></span></div>
</div>
</div>
<div class="results">
<h2>WHAT IF?</h2>
<div class="candidate" id="candidate1">Candidate A: <span id="a-percent">50%</span></div>
<div class="candidate" id="candidate2">Candidate B: <span id="b-percent">50%</span></div>
</div>
<div class="footer">
Skycordia Election Monitor v1.0 – Live data simulated. Not real. But very real if you believe in the clouds.
</div>
</div>
<script>
const islands = document.querySelectorAll('.island');
const needle = document.getElementById('needle');
const resultPct = document.getElementById('result-pct');
const whatifPct = document.getElementById('whatif-pct');
const whatifCandidate = document.getElementById('whatif-candidate');
const aPercent = document.getElementById('a-percent');
const bPercent = document.getElementById('b-percent');
const whatifSlider = document.getElementById('whatif');
let results = [];
let candidateA = 50;
let candidateB = 50;
let isAnimating = false;
// Initial state
updateIslands();
updateNeedle();
updatePundits();
updateResult();
function updateIslands() {
const states = [
{ id: 'island-1', candidate: 'democrat' },
{ id: 'island-2', candidate: 'republican' },
{ id: 'island-3', candidate: 'democrat' },
{ id: 'island-4', candidate: 'republican' },
{ id: 'island-5', candidate: 'uncertain' }
];
results = [];
states.forEach(state => {
const island = document.querySelector(`.island-${state.id.split('-')[1]}`);
island.className = `island ${state.id} ${state.candidate}`;
});
results = states.map(s => s.candidate === 'democrat' ? 1 : (s.candidate === 'republican' ? 0 : 0.5));
}
function updateNeedle() {
const total = results.reduce((a, b) => a + b, 0);
const democratVotes = results.filter(r => r === 1).length;
const republicanVotes = results.filter(r => r === 0).length;
const uncertainVotes = results.filter(r => r === 0.5).length;
const demoPct = (democratVotes / (islands.length)) * 100;
const repubPct = (republicanVotes / (islands.length)) * 100;
const pct = (democratVotes / islands.length) * 100;
resultPct.textContent = pct.toFixed(2) + '%';
const needleHeight = 160;
const topPos = (100 - pct) / 100 * needleHeight;
needle.style.transform = `translate(-50%, -${topPos}px)`;
}
function updatePundits() {
const candidates = results.map(r => r === 1 ? 'A' : (r === 0 ? 'B' : 'Uncertain'));
const demoPct = (results.filter(r => r === 1).length / islands.length) * 100;
const repubPct = (results.filter(r => r === 0).length / islands.length) * 100;
const pundits = document.querySelectorAll('.pundit');
if (demoPct > 55) {
pundits[0].classList.add('done');
pundits[0].querySelector('span').textContent = "“This is not a war—this is a victory.”";
} else if (repubPct > 55) {
pundits[1].classList.add('done');
pundits[1].querySelector('span').textContent = "“The clouds have chosen their champion.”";
} else {
pundits[2].classList.add('done');
pundits[2].querySelector('span').textContent = "“The sky still breathes, and it's undecided.”";
}
}
function updateResult() {
const demoPct = (results.filter(r => r === 1).length / islands.length) * 100;
const repubPct = (results.filter(r => r === 0).length / islands.length) * 100;
const uncertainPct = (results.filter(r => r === 0.5).length / islands.length) * 100;
candidateA = demoPct;
candidateB = repubPct;
aPercent.textContent = candidateA.toFixed(0) + '%';
bPercent.textContent = candidateB.toFixed(0) + '%';
}
function updateWhatIfSlider() {
let value = parseInt(whatifSlider.value);
whatifPct.textContent = value + '%';
const isA = value > 50;
const isB = value < 50;
const isTie = value === 50;
if (isA) {
whatifCandidate.textContent = 'Candidate A';
aPercent.textContent = value + '%';
bPercent.textContent = (100 - value) + '%';
} else if (isB) {
whatifCandidate.textContent = 'Candidate B';
aPercent.textContent = (100 - value) + '%';
bPercent.textContent = value + '%';
} else {
whatifCandidate.textContent = 'Tie';
aPercent.textContent = '50%';
bPercent.textContent = '50%';
}
}
whatifSlider.addEventListener('input', updateWhatIfSlider);
whatifSlider.addEventListener('change', updateWhatIfSlider);
updateWhatIfSlider();
// Simulate updates every 5 seconds
setInterval(() => {
if (isAnimating) return;
isAnimating = true;
// Simulate a random update
const randomIsland = Math.floor(Math.random() * islands.length);
const currentIsland = islands[randomIsland];
const currentClass = currentIsland.className.split(' ')[1];
let nextClass;
if (currentClass === 'uncertain') {
nextClass = Math.random() > 0.5 ? 'democrat' : 'republican';
} else if (currentClass === 'democrat') {
nextClass = 'republican';
} else if (currentClass === 'republican') {
nextClass = 'democrat';
}
currentIsland.className = `island ${currentIsland.id.split('-')[1]} ${nextClass}`;
setTimeout(() => {
isAnimating = false;
updateNeedle();
updateResult();
updatePundits();
}, 500);
}, 5000);
</script>
</body>
</html>