`data/artifacts/036f6cb02824/qwen3-14b.html`

327 lines
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Solar Symphony</title>
  <style>
    :root {
      --bg-color: #0b0b1d;
      --accent-color: #7928ca;
      --text-color: #e0e0e0;
      --highlight: #f06292;
      --error-color: #f44336;
      --success-color: #4caf50;
      --border-radius: 8px;
    }

    body {
      margin: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: var(--bg-color);
      color: var(--text-color);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
    }

    h1 {
      margin: 20px 0 10px;
      font-size: 2rem;
      text-align: center;
    }

    #solar-container {
      position: relative;
      width: 100%;
      height: calc(100vh - 120px);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .planet {
      position: absolute;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #fff;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: #000;
      user-select: none;
      pointer-events: all;
      transition: transform 0.3s ease;
      will-change: transform;
    }

    .planet:focus {
      outline: none;
      box-shadow: 0 0 15px var(--accent-color);
    }

    .orbit-path {
      position: absolute;
      width: 100%;
      height: 100%;
      border: 2px dashed rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      pointer-events: none;
    }

    .fact-card {
      position: absolute;
      top: 10px;
      right: 10px;
      background-color: rgba(255, 255, 255, 0.1);
      padding: 15px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: var(--border-radius);
      max-width: 300px;
      color: var(--text-color);
      z-index: 10;
      display: none;
      font-size: 0.9rem;
      pointer-events: none;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      animation: fadeIn 0.3s ease forwards;
    }

    .fact-card.show {
      display: block;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: scale(0.9); }
      to { opacity: 1; transform: scale(1); }
    }

    .controls {
      position: absolute;
      bottom: 20px;
      width: 100%;
      text-align: center;
      z-index: 5;
      padding: 0 20px;
    }

    .controls button {
      background-color: var(--accent-color);
      color: var(--text-color);
      border: none;
      padding: 10px 20px;
      margin: 5px;
      border-radius: var(--border-radius);
      cursor: pointer;
      font-size: 0.9rem;
      transition: background 0.2s ease;
      outline: none;
    }

    .controls button:focus {
      box-shadow: 0 0 0 3px rgba(121, 40, 202, 0.5);
    }

    .controls button:disabled {
      background-color: #555;
      color: #888;
      cursor: not-allowed;
    }

    .status {
      position: absolute;
      top: 10px;
      left: 10px;
      font-size: 0.8rem;
      color: var(--text-color);
      background: rgba(255, 255, 255, 0.1);
      padding: 8px 12px;
      border-radius: var(--border-radius);
      display: none;
    }

    .status.show {
      display: block;
    }

    .error {
      color: var(--error-color);
    }

    .success {
      color: var(--success-color);
    }

    .loading {
      color: var(--accent-color);
      font-weight: bold;
    }

    .hidden {
      display: none;
    }

    @media (max-width: 600px) {
      .controls {
        flex-direction: column;
        gap: 10px;
      }

      .controls button {
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <h1>Solar Symphony</h1>
  <div id="solar-container">
    <div class="orbit-path" style="width: 300px; height: 300px; left: 50%; top: 50%; transform: translate(-50%, -50%);"></div>
    <div class="orbit-path" style="width: 400px; height: 400px; left: 50%; top: 50%; transform: translate(-50%, -50%);"></div>
    <div class="orbit-path" style="width: 500px; height: 500px; left: 50%; top: 50%; transform: translate(-50%, -50%);"></div>
    <div class="orbit-path" style="width: 600px; height: 600px; left: 50%; top: 50%; transform: translate(-50%, -50%);"></div>

    <div class="planet" id="mercury" style="left: 50%; top: 50%; transform: translate(-50%, -50%); animation: orbit-mercury 10s linear infinite;"></div>
    <div class="planet" id="venus" style="left: 50%; top: 50%; transform: translate(-50%, -50%); animation: orbit-venus 15s linear infinite;"></div>
    <div class="planet" id="earth" style="left: 50%; top: 50%; transform: translate(-50%, -50%); animation: orbit-earth 20s linear infinite;"></div>
    <div class="planet" id="mars" style="left: 50%; top: 50%; transform: translate(-50%, -50%); animation: orbit-mars 25s linear infinite;"></div>
    <div class="planet" id="jupiter" style="left: 50%; top: 50%; transform: translate(-50%, -50%); animation: orbit-jupiter 40s linear infinite;"></div>
    <div class="planet" id="saturn" style="left: 50%; top: 50%; transform: translate(-50%, -50%); animation: orbit-saturn 50s linear infinite;"></div>
    <div class="planet" id="uranus" style="left: 50%; top: 50%; transform: translate(-50%, -50%); animation: orbit-uranus 60s linear infinite;"></div>
    <div class="planet" id="neptune" style="left: 50%; top: 50%; transform: translate(-50%, -50%); animation: orbit-neptune 70s linear infinite;"></div>
  </div>
  <div class="fact-card" id="fact-card">
    <strong id="fact-name"></strong><br>
    <span id="fact-desc"></span>
  </div>
  <div class="status" id="status" role="status" aria-live="polite"></div>
  <div class="controls">
    <button id="reset-btn">Supernova</button>
    <button id="info-btn">Info</button>
    <button id="toggle-btn">Toggle Orbits</button>
  </div>

  <script>
    const planets = {
      mercury: { name: "Mercury", note: "A3", fact: "Mercury's surface is scorched by the Sun, with temperatures that can reach 800°F (430°C)." },
      venus: { name: "Venus", note: "C4", fact: "Venus is Earth's 'twin,' but it's so hot it can melt lead." },
      earth: { name: "Earth", note: "E4", fact: "Earth is the only known planet with liquid water on its surface." },
      mars: { name: "Mars", note: "F4", fact: "Mars has the tallest volcano in the solar system: Olympus Mons." },
      jupiter: { name: "Jupiter", note: "G4", fact: "Jupiter has a Great Red Spot, a storm larger than Earth that's been raging for at least 350 years." },
      saturn: { name: "Saturn", note: "A4", fact: "Saturn's rings are made of ice and rock, and they are over 280,000 km wide." },
      uranus: { name: "Uranus", note: "C5", fact: "Uranus is tilted on its side, with its axis of rotation almost in the plane of its orbit." },
      neptune: { name: "Neptune", note: "D5", fact: "Neptune's winds can reach speeds of up to 1,200 mph (1,931 km/h), the fastest in the solar system." }
    };

    const container = document.getElementById('solar-container');
    const factCard = document.getElementById('fact-card');
    const factName = document.getElementById('fact-name');
    const factDesc = document.getElementById('fact-desc');
    const status = document.getElementById('status');

    const resetBtn = document.getElementById('reset-btn');
    const toggleBtn = document.getElementById('toggle-btn');
    const infoBtn = document.getElementById('info-btn');

    let orbitPathsVisible = true;
    let orbitPaths = [];

    function createOrbitPaths() {
      orbitPaths = Array.from(document.querySelectorAll('.orbit-path'));
      orbitPaths.forEach(path => {
        path.classList.toggle('hidden', !orbitPathsVisible);
      });
    }

    function playNote(note) {
      const audioContext = new (window.AudioContext || window.webkitAudioContext)();
      const oscillator = audioContext.createOscillator();
      const gainNode = audioContext.createGain();

      oscillator.type = 'sine';
      oscillator.frequency.setValueAtTime(440 * Math.pow(2, (note.charCodeAt(0) - 65) / 12), audioContext.currentTime);
      oscillator.connect(gainNode);
      gainNode.connect(audioContext.destination);

      oscillator.start();
      oscillator.stop(audioContext.currentTime + 1);

      if (note === 'A4') {
        oscillator.frequency.setValueAtTime(440, audioContext.currentTime);
      }
    }

    function showFact(planetName) {
      const planet = planets[planetName];
      factName.textContent = planet.name;
      factDesc.textContent = planet.fact;
      factCard.classList.add('show');
    }

    function hideFact() {
      factCard.classList.remove('show');
    }

    function showStatus(message, type) {
      status.textContent = message;
      status.classList.remove('error', 'success', 'loading');
      status.classList.add(type);
      status.classList.add('show');
      setTimeout(() => {
        status.classList.remove('show');
      }, 2000);
    }

    function onPlanetClick(e) {
      const planetName = e.target.id;
      if (!planetName) return;
      const planet = planets[planetName];

      if (!planet) {
        showStatus("No data available for this planet.", 'error');
        return;
      }

      playNote(planet.note);
      showFact(planetName);
    }

    function toggleOrbits() {
      orbitPathsVisible = !orbitPathsVisible;
      createOrbitPaths();
      showStatus(orbitPathsVisible ? "Orbits shown" : "Orbits hidden", "success");
    }

    function resetSystem() {
      showStatus("Supernova! Resetting system...", "loading");
      setTimeout(() => {
        window.location.reload();
      }, 1000);
    }

    function init() {
      Object.keys(planets).forEach(planetName => {
        const planet = document.getElementById(planetName);
        planet.textContent = planets[planetName].name[0];
        planet.addEventListener('click', onPlanetClick);
      });

      createOrbitPaths();

      resetBtn.addEventListener('click', resetSystem);
      toggleBtn.addEventListener('click', toggleOrbits);
      infoBtn.addEventListener('click', () => {
        showStatus("Information button clicked — no content available in this simulation.", "info");
      });
    }

    window.addEventListener('load', init);
  </script>
</body>
</html>