<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="1:1">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #0b132b;
      color: #f8fafc;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px 8px;
      user-select: none;
    }
    .system-container {
      position: relative;
      width: 100%;
      max-width: 400px;
      aspect-ratio: 1 / 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .orbit-sun {
      transform-origin: 200px 200px;
      animation: spin 14s linear infinite;
    }
    .orbit-earth {
      transform-origin: 200px 70px;
      animation: spin 1.1s linear infinite;
    }
    .counter-spin {
      transform-box: fill-box;
      transform-origin: center;
      animation: counter-spin 14s linear infinite;
    }
    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(-360deg); }
    }
    @keyframes counter-spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    .paused * {
      animation-play-state: paused !important;
    }
    .controls {
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: center;
      margin-top: 4px;
      z-index: 10;
    }
    .btn {
      background: #1c2541;
      color: #f8fafc;
      border: 1px solid #3a506b;
      padding: 6px 16px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      outline: none;
    }
    .btn:active {
      background: #3a506b;
    }
    .legend {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px 16px;
      font-size: 12px;
      color: #94a3b8;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      display: inline-block;
    }
  </style>
</head>
<body>

  <div class="system-container" id="simContainer">
    <svg viewBox="0 0 400 400">
      <defs>
        <radialGradient id="sunGlow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stop-color="#ffea00" />
          <stop offset="60%" stop-color="#ff9100" />
          <stop offset="100%" stop-color="#ff5400" stop-opacity="0.1" />
        </radialGradient>
        <radialGradient id="earthGrad" cx="35%" cy="35%" r="65%">
          <stop offset="0%" stop-color="#48cae4" />
          <stop offset="60%" stop-color="#0077b6" />
          <stop offset="100%" stop-color="#023e8a" />
        </radialGradient>
      </defs>

      
      <circle cx="200" cy="200" r="130" fill="none" stroke="#3a506b" stroke-width="1.5" stroke-dasharray="5 5" />

      
      <path id="orbitTextPath" d="M 70 200 A 130 130 0 0 1 330 200" fill="none" />
      <text fill="#64748b" font-size="11" font-weight="600" letter-spacing="1">
        <textPath href="#orbitTextPath" startOffset="50%" text-anchor="middle">
          Earth Orbit: 365 Days
        </textPath>
      </text>

      
      <circle cx="200" cy="200" r="42" fill="url(#sunGlow)" opacity="0.3" />
      <circle cx="200" cy="200" r="28" fill="url(#sunGlow)" />
      <text x="200" y="204" fill="#0b132b" font-size="12" font-weight="bold" text-anchor="middle">Sun</text>

      
      <g class="orbit-sun">
        
        <g>
          
          <circle cx="200" cy="70" r="32" fill="none" stroke="#475569" stroke-width="1" stroke-dasharray="3 3" />
          
          
          <g class="orbit-earth">
            <circle cx="200" cy="38" r="4" fill="#e2e8f0" />
          </g>

          
          <circle cx="200" cy="70" r="12" fill="url(#earthGrad)" />
          
          
          <g class="counter-spin">
            <text x="200" y="74" fill="#ffffff" font-size="9" font-weight="bold" text-anchor="middle">Earth</text>
          </g>
        </g>
      </g>
    </svg>
  </div>

  <div class="legend">
    <div class="legend-item">
      <span class="dot" style="background:#0077b6;"></span>
      <span>Earth Orbit: 365 Days</span>
    </div>
    <div class="legend-item">
      <span class="dot" style="background:#cbd5e1;"></span>
      <span>Moon Orbit: ~27 Days</span>
    </div>
  </div>

  <div class="controls">
    <button class="btn" id="playBtn" aria-label="Play or pause animation">
      <span id="btnIcon">⏸</span>
      <span id="btnText">Pause</span>
    </button>
  </div>

  <script>
    const sim = document.getElementById('simContainer');
    const playBtn = document.getElementById('playBtn');
    const btnIcon = document.getElementById('btnIcon');
    const btnText = document.getElementById('btnText');

    let isPlaying = true;

    playBtn.addEventListener('click', () => {
      isPlaying = !isPlaying;
      if (isPlaying) {
        sim.classList.remove('paused');
        btnIcon.textContent = '⏸';
        btnText.textContent = 'Pause';
      } else {
        sim.classList.add('paused');
        btnIcon.textContent = '▶';
        btnText.textContent = 'Play';
      }
    });
  </script>
</body>
</html>

The Earth-Sun-Moon System

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; }
    body {
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    
    .grid {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 12px;
    }

    @media (max-width: 520px) {
      .grid {
        grid-template-columns: 1fr;
      }
    }

    .panel {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      position: relative;
    }

    .panel-title {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      margin-bottom: 8px;
    }

    /* Size Panel */
    .size-stage {
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
      justify-content: space-around;
    }

    .size-row {
      display: flex;
      align-items: center;
      gap: 12px;
      background: #ffffff;
      border: 1px solid #edf2f7;
      border-radius: 8px;
      padding: 8px 12px;
    }

    .size-display {
      width: 64px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .sun-sphere {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #fff176, #f59e0b, #d97706);
      box-shadow: 0 0 16px rgba(245, 158, 11, 0.4);
    }

    .earth-sphere {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #60a5fa, #2563eb, #1d4ed8);
      box-shadow: 0 0 6px rgba(37, 99, 235, 0.3);
    }

    .moon-sphere {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #f1f5f9, #94a3b8, #64748b);
      box-shadow: 0 0 4px rgba(100, 116, 139, 0.3);
    }

    .obj-info {
      display: flex;
      flex-direction: column;
    }

    .obj-name {
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
    }

    .obj-sub {
      font-size: 12px;
      color: #64748b;
    }

    /* Distance & Sky Panel */
    .distance-stage {
      display: flex;
      flex-direction: column;
      gap: 12px;
      flex: 1;
      justify-content: space-between;
    }

    .scale-box {
      background: #ffffff;
      border: 1px solid #edf2f7;
      border-radius: 8px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .distance-track {
      position: relative;
      height: 28px;
      background: #f1f5f9;
      border-radius: 14px;
      display: flex;
      align-items: center;
      padding: 0 10px;
      overflow: hidden;
    }

    .dist-point-earth {
      position: absolute;
      left: 8px;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #2563eb;
      z-index: 2;
    }

    .dist-point-moon {
      position: absolute;
      left: 32px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #94a3b8;
      z-index: 2;
    }

    .dist-point-sun {
      position: absolute;
      right: 8px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: radial-gradient(circle, #fde047, #f59e0b);
      box-shadow: 0 0 8px #f59e0b;
      z-index: 2;
    }

    .dist-line {
      position: absolute;
      left: 14px;
      right: 18px;
      height: 2px;
      background: #cbd5e1;
      border-top: 2px dashed #94a3b8;
    }

    .distance-labels {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      font-weight: 600;
      color: #475569;
    }

    /* Sky View Comparison */
    .sky-box {
      background: #0f172a;
      border-radius: 8px;
      padding: 12px;
      color: #ffffff;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .sky-title {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.5px;
      color: #94a3b8;
      text-transform: uppercase;
    }

    .sky-circles {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
      width: 100%;
    }

    .sky-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .apparent-circle {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      position: relative;
    }

    .sun-sky {
      background: radial-gradient(circle, #fffbeb, #fde047, #f59e0b);
      box-shadow: 0 0 14px rgba(253, 224, 71, 0.6);
    }

    .moon-sky {
      background: radial-gradient(circle, #ffffff, #cbd5e1, #94a3b8);
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
    }

    .equals-sign {
      font-size: 20px;
      font-weight: bold;
      color: #38bdf8;
    }

    .sky-tag {
      font-size: 11px;
      color: #cbd5e1;
      font-weight: 600;
    }

    .takeaway-pill {
      background: #e0f2fe;
      color: #0369a1;
      font-size: 12px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="panel">
      <div class="panel-title">Real Size</div>
      <div class="size-stage">
        
        <div class="size-row">
          <div class="size-display">
            <div class="sun-sphere"></div>
          </div>
          <div class="obj-info">
            <span class="obj-name">Sun</span>
            <span class="obj-sub">Giant Star</span>
          </div>
        </div>

        <div class="size-row">
          <div class="size-display">
            <div class="earth-sphere"></div>
          </div>
          <div class="obj-info">
            <span class="obj-name">Earth</span>
            <span class="obj-sub">Our Planet</span>
          </div>
        </div>

        <div class="size-row">
          <div class="size-display">
            <div class="moon-sphere"></div>
          </div>
          <div class="obj-info">
            <span class="obj-name">Moon</span>
            <span class="obj-sub">Rocky Neighbor</span>
          </div>
        </div>

      </div>
    </div>

    
    <div class="panel">
      <div class="panel-title">Distance & Sky View</div>
      <div class="distance-stage">
        
        <div class="scale-box">
          <div class="distance-track">
            <div class="dist-line"></div>
            <div class="dist-point-earth" title="Earth"></div>
            <div class="dist-point-moon" title="Moon"></div>
            <div class="dist-point-sun" title="Sun"></div>
          </div>
          <div class="distance-labels">
            <span>Moon: 240,000 miles (Close)</span>
            <span>Sun: 93,000,000 miles (Far)</span>
          </div>
        </div>

        <div class="sky-box">
          <div class="sky-title">View From Earth Sky</div>
          <div class="sky-circles">
            <div class="sky-item">
              <div class="apparent-circle sun-sky"></div>
              <span class="sky-tag">Sun</span>
            </div>
            <div class="equals-sign">≈</div>
            <div class="sky-item">
              <div class="apparent-circle moon-sky"></div>
              <span class="sky-tag">Moon</span>
            </div>
          </div>
          <div class="takeaway-pill">
            ✦ Same apparent size!
          </div>
        </div>

      </div>
    </div>
  </div>

</body>
</html>

science.ks3.y1.t4.s2

Aligned learning resources

Related diagrams