<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reading Left to Right - LEO Name Tag</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 20px 16px;
      user-select: none;
    }

    .nametag-content {
      width: 100%;
      max-width: 380px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    /* Badge hole punch decoration */
    .badge-hole {
      width: 44px;
      height: 9px;
      background: #cbd5e1;
      border-radius: 6px;
      margin-bottom: 10px;
    }

    .badge-label {
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 2px;
      color: #2563eb;
      text-transform: uppercase;
      margin-bottom: 14px;
    }

    /* Letter row container */
    .letters-row {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      gap: 14px;
      margin-bottom: 12px;
      position: relative;
      width: 100%;
    }

    .letter-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      position: relative;
      touch-action: manipulation;
    }

    .star-marker {
      width: 36px;
      height: 36px;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: starBob 3.6s ease-in-out infinite;
    }

    .star-marker svg {
      width: 100%;
      height: 100%;
      fill: #16a34a;
      filter: drop-shadow(0 2px 4px rgba(22, 163, 74, 0.3));
    }

    .star-placeholder {
      width: 36px;
      height: 36px;
      margin-bottom: 6px;
    }

    .letter-box {
      width: 74px;
      height: 86px;
      background: #f8fafc;
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 52px;
      font-weight: 900;
      color: #1e2945;
      border: 3px solid #cbd5e1;
      transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
    }

    /* Letter L pulsing yellow glow - slowed to avoid flickering */
    .letter-box.first-letter {
      border-color: #eab308;
      animation: pulseGlow 3.6s ease-in-out infinite;
    }

    .letter-box.active {
      border-color: #2563eb;
      background-color: #eff6ff;
      box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.25);
    }

    /* Arrow and direction track */
    .track-container {
      width: 100%;
      max-width: 270px;
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .arrow-track {
      width: 100%;
      height: 10px;
      background: #e2e8f0;
      border-radius: 999px;
      position: relative;
    }

    .arrow-fill {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      background: linear-gradient(90deg, #16a34a 0%, #2563eb 100%);
      border-radius: 999px;
      opacity: 0.85;
    }

    .arrow-pointer {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 24px;
      height: 24px;
      background: #2563eb;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4);
      animation: slideArrow 4s ease-in-out infinite;
    }

    .arrow-pointer svg {
      width: 14px;
      height: 14px;
      fill: none;
      stroke: #ffffff;
      stroke-width: 3.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      margin-left: 2px;
    }

    /* High-contrast green text for readability */
    .arrow-label {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      font-weight: 800;
      color: #15803d;
      margin-top: 2px;
      letter-spacing: 0.3px;
    }

    .instruction {
      margin-top: 20px;
      font-size: 14px;
      font-weight: 600;
      color: #475569;
      display: flex;
      align-items: center;
      gap: 6px;
      text-align: center;
    }

    /* Smooth, calm keyframe animations with states lasting >= 500ms */
    @keyframes pulseGlow {
      0%, 100% {
        box-shadow: 0 0 6px rgba(234, 179, 8, 0.25);
        border-color: #facc15;
      }
      40%, 60% {
        box-shadow: 0 0 20px rgba(234, 179, 8, 0.7);
        border-color: #ca8a04;
      }
    }

    @keyframes starBob {
      0%, 100% {
        transform: translateY(0);
      }
      40%, 60% {
        transform: translateY(-5px);
      }
    }

    @keyframes slideArrow {
      0%, 15% {
        left: 0%;
        opacity: 0.9;
      }
      65%, 85% {
        left: calc(100% - 24px);
        opacity: 1;
      }
      95%, 100% {
        left: calc(100% - 24px);
        opacity: 0.2;
      }
    }

    @media (max-width: 360px) {
      .letters-row {
        gap: 10px;
      }
      .letter-box {
        width: 64px;
        height: 74px;
        font-size: 44px;
        border-radius: 14px;
      }
      .track-container {
        max-width: 230px;
      }
    }
  </style>
</head>
<body>

  <div class="nametag-content">
    <div class="badge-hole" aria-hidden="true"></div>
    <div class="badge-label">My Name</div>

    <div class="letters-row" role="region" aria-label="Name letters">
      
      <div class="letter-col" onclick="tapLetter(0)" title="Letter L">
        <div class="star-marker" aria-label="Start star">
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
          </svg>
        </div>
        <div class="letter-box first-letter" id="box-0">L</div>
      </div>

      
      <div class="letter-col" onclick="tapLetter(1)" title="Letter E">
        <div class="star-placeholder" aria-hidden="true"></div>
        <div class="letter-box" id="box-1">E</div>
      </div>

      
      <div class="letter-col" onclick="tapLetter(2)" title="Letter O">
        <div class="star-placeholder" aria-hidden="true"></div>
        <div class="letter-box" id="box-2">O</div>
      </div>
    </div>

    
    <div class="track-container" aria-hidden="true">
      <div class="arrow-track">
        <div class="arrow-fill"></div>
        <div class="arrow-pointer">
          <svg viewBox="0 0 24 24">
            <path d="M5 12h14M13 6l6 6-6 6" />
          </svg>
        </div>
      </div>
      <div class="arrow-label">
        <span>★ Start Here</span>
      </div>
    </div>
  </div>

  <div class="instruction">
    <span>Read left to right &rarr; Tap a letter to hear its sound</span>
  </div>

  <script>
    let audioCtx = null;

    function playNote(freq) {
      try {
        if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        if (audioCtx.state === 'suspended') audioCtx.resume();
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        osc.type = 'sine';
        osc.frequency.value = freq;
        gain.gain.setValueAtTime(0.18, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.35);
        osc.connect(gain);
        gain.connect(audioCtx.destination);
        osc.start();
        osc.stop(audioCtx.currentTime + 0.35);
      } catch (e) {}
    }

    const notes = [329.63, 392.00, 523.25]; // E4, G4, C5

    function tapLetter(index) {
      playNote(notes[index]);
      const el = document.getElementById('box-' + index);
      if (el) {
        el.classList.add('active');
        setTimeout(() => {
          el.classList.remove('active');
        }, 300);
      }
    }
  </script>
</body>
</html>

Tracing and Building Your Name with Letters

Singing the Alphabet Song and Pointing to Letters

Recognizing Uppercase and Lowercase Letters

Identifying Letters in Your Own Name

Naming Common Letters: A to G

Naming Common Letters: H to N

Naming Common Letters: O to T

Naming Common Letters: U to Z

Sorting Letters by Shape: Straight, Curved, and Slanted

Learning Letters of the Alphabet

Finding Letters in Different Fonts and Signs

Finding Letters on a Computer Keyboard

Typing Your Name on a Keyboard

Noticing Script and Handwritten Letter Forms

Matching Letters Across Print and Digital Media

Alphabet Detective: Hunting for Letters Around the Room

Exploring Letters in Fonts, Scripts, and Keyboards

Reconnaître son prénom écrit

Copier son prénom

Taper des lettres sur un clavier

Taper des mots sur un clavier

Trouver les lettres de son prénom

Écrire son prénom et taper au clavier

Writing the First Letter of Your Name

Writing Your Full First Name from Memory

Making Letter Approximations and Mock Letters

Borrowing Letters to Label Your Drawings

Writing Messages Using Drawings and Letter Strings

Signing Your Name on Classroom Work

Writing Your Name and Emergent Letters

Les mots avec lettres muettes

Les mots fréquents avec « c/ç » et « g/gu »

Le trait d'union dans les mots composés

Reconnaître des mots connus dans un texte

Reconnaître des mots écrits

Mots outils : le, la, les

Mots outils : un, une, des

Mots outils : et, ou, à

Mots outils : c'est, il, elle

Mots outils : qui, que, dans

Mots outils : pour, avec, sur

Mémoriser des mots pour les reconnaître vite

Mots outils fréquents

Redire les mots d'une phrase lue par l'adulte

Reconnaître le titre d'un livre connu

Associer un mot écrit à son image

Lire des mots sur des étiquettes

Premiers mots et découverte de l'écrit

La langue parlée vs la langue écrite

Le verbe : l'action dans la phrase

Compléter une phrase avec le bon mot

Le point à la fin de la phrase

Écrire une phrase de début et une phrase de fin

Écrire des mots avec des combinaisons de voyelles

Découverte de la langue écrite et de la phrase

Copier des lettres en capitales

Copier des lettres en écriture script

Copier des mots simples

Écrire son prénom en écriture cursive

Copier des lettres et des mots

Essayer d'écrire un mot tout seul

Écrire une phrase dictée par l'adulte

Participer à l'écriture collective d'un texte

Produire un premier texte tout seul

Produire ses premiers écrits autonomes

Écrire son prénom de mémoire

Écrire son prénom en cursive sans modèle

Tracer chaque lettre de son prénom en suivant le bon chemin

Relire son prénom pour vérifier toutes les lettres

Écrire son prénom dans différentes situations

Observer les lettres dans les mots qu'on connaît

Emprunter une lettre à un mot connu pour écrire

Emprunter un groupe de lettres à un mot connu

Écrire un mot nouveau avec des lettres empruntées

Écrire un mot en s'aidant d'un mot qui ressemble

Assembler des lettres de plusieurs mots connus

Écrire un mot tout seul puis le relire

Emprunter des lettres aux mots connus pour écrire seul

OGE.0.W.3

OGE.0.W.3

Aligned learning resources

Related diagrams