`data/artifacts/0066d3284995/mac1__minicpm-v-latest.html`

52 lines
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ship of State Steered by Committee</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
    .container {
      width: fit-content;
      padding: 2rem;
      background-color: #f9fafb;
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
    }
    .title {
      font-size: 36px;
      margin-bottom: 2rem;
    }
    #svg-container {
      width: fit-content;
      height: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    #ship, #helmets {
      fill: black;
      cursor: move;
    }
    .light-mode {
      filter: brightness(80%);
    }
  </style>
</head>
<body>
<div class="container">
  <div id="svg-container"></div>
  <div class="title">The ship of state steered by committee...</div>
  <button id="toggle-light">Light Mode ONOFF</button>
</div>

<script>
const svgContainer = document.getElementById("svg-container");
const toggleButton = document.getElementById("toggle-light");
const ship = newSVGSVGElement("#ship", "M640,213H8C-9.257,-4.843 1.566,-11 115.53,10A55.069,55.069 0 0,1