← back to Model Arena
data/artifacts/076ac34be3a9/mac1__qwen2-5vl-7b.html
49 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ship of State</title>
<style>
body { font-family: Arial, sans-serif; background-color: #f5f5f5; display: flex; justify-content: center; align-items: center; height: 100vh; overflow-x: hidden; }
.svgContainer { max-width: 1200px; margin-top: -387.5px; position: relative; z-index: 1; }
.toggleSwitch, .caption { border-radius: 25px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px; background-color: #ddd; padding: 8px; position: absolute; left: calc(50% - 75px); bottom: 32px; }
.lightMode { opacity: 0; transition: all 0.2s ease-in-out; color: white !important; }
.darkMode { background-color: #1a1a1a; border-color: #1a1a1a; font-weight: bold; left: calc(50% - 89px); transform: translateX(-7px) translateY(6px) scale(0.92); pointer-events: none; }
input[type="checkbox"] { display: none; }
</style>
<script>
function toggleMode() {
document.body.classList.toggle("darkMode");
}
</script>
</head>
<body>
<div class="svgContainer">
<svg viewBox="0 0 543.6 281.8" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" style="width: calc(100vw - (17 + var(--svg-container-padding) * 2)px);">
<path d="M0,141c0-65.9,53.58-120.1,123.1,-133C150.43,31.82,177.24,75.02,144.93,133c56.1,0,120.1-53.58,123.1,-133V0H0z" style="fill: #1a1a1a; z-index: -1;"></path>
<path d="M407.5,281c96.15,0,161.4-75.25,161.4,-161.4V0H0v385h310.5V0L407.5,281z" style="fill: #c4a29f;"></path>
<path d="M0,181C-100,257,-61,383,84,399l55.62,4.62h314.38l-55.62,4.62c165,-16,317.9,-250,84,-399z" style="fill: #8e5a4d;"></path>
<path d="M358.9,232l-121.3-2C311,74.7,336.3-78.5,358.9,-2v0H358.9z" style="fill: #a98c7d;"></path>
<path d="M114.5,0l48.6,52.2C123,55,121.3,55.7,114.5,62v-5.3h-0.9V0L114.5,0z" style="fill: #f0e4dc;"></path>
<path d="M0,0l0,181c0,67,53.6,120.9,120.9,120.9V0H0v181h-310C-53.6,180,0,127,0,0z" style="fill: #f0e4dc;"></path>
<path d="M331.13,-0c-32.5-36-88.5-69-88.5-69V200l-147-54.4C6,386,109.6,346.3,84.73,285c-14,-32-84.33,-87-84.33,-87v-87c0-55.34,42.5-99,83.57-62l160.73,51.53V0z" style="fill: #a98c7d;"></path>
<path d="M0,241C0,155,57.73,-55,162.4,-55H305l-130.26,0V241z" style="fill: #8e5a4d;"></path>
<path d="M90.25,239c21,7-55.85,13-88.7,-1L0,215v-62H0z" style="fill: #f0e4dc;"></path>
<path d="M90.25,15V55h128c74.1,0,133.6-75.1,88.7,-134L0,11V241z" style="fill: #a98c7d;"></path>
<path d="M350,10l-121.3,2C308.4,69,-53.6,121,84,121H262V0h74.6v-14c0-49.4-42.5-81-94.7-81h-88.9c-49.5,0-94.73,33.45-94.73,81v65H162L350,10z" style="fill: #8e5a4d;"></path>
<path d="M0,24V215l310,2c-95.5,-40-127.7-107-88.7,-134L90.25,10h116z" style="fill: #f0e4dc;"></path>
</svg>
</div>
<button class="lightMode" onclick="toggleMode()">Toggle Light Mode</button>
<div class="caption">The Ship of State Steered by Committee</div>
<script>
let caption = document.querySelector(".caption");
const toggleSwitch = document.querySelector(".lightMode");
const svgContainer = document.querySelector('.svgContainer');
const paths = Array.from(svgContainer.querySelectorAll('path'));
toggleSwitch.onclick = () => {
paths.forEach(p => p.setAttribute('fill', toggleSwitch.textContent.includes("Light") ? "#8e5a4d" : '#c4a29f'));
}
</script>
</body>
</html>