Spaces:
Running on L4
Running on L4
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Example Sentences — Layout Options</title> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Merriweather:wght@700&family=JetBrains+Mono:wght@400;500&display=swap'); | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| font-family: 'Inter', system-ui, sans-serif; | |
| background: #fff; | |
| color: #1e1e2e; | |
| padding: 40px; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| h1 { font-family: 'Merriweather', serif; color: #63348d; margin-bottom: 8px; font-size: 24px; } | |
| h2 { font-family: 'Merriweather', serif; color: #63348d; margin: 48px 0 8px; font-size: 18px; } | |
| .subtitle { color: #666; margin-bottom: 40px; font-size: 14px; } | |
| .description { color: #666; font-size: 13px; margin-bottom: 16px; line-height: 1.5; } | |
| .mockup { border: 1px solid #e5e5e5; border-radius: 8px; padding: 24px; margin-bottom: 12px; background: #fafafa; } | |
| /* Shared example button style */ | |
| .ex-btn { | |
| font-family: 'Inter', system-ui, sans-serif; | |
| font-size: 13px; | |
| padding: 5px 12px; | |
| border: 1.5px solid #d4c8e8; | |
| border-radius: 16px; | |
| background: #fff; | |
| color: #4a3070; | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| white-space: nowrap; | |
| } | |
| .ex-btn:hover { | |
| background: #f3f0f7; | |
| border-color: #63348d; | |
| } | |
| .ex-label { | |
| font-family: 'Merriweather', serif; | |
| font-weight: 700; | |
| color: #63348d; | |
| font-size: 13px; | |
| min-width: 60px; | |
| flex-shrink: 0; | |
| } | |
| /* Input area placeholder */ | |
| .fake-input { | |
| font-family: 'Inter', system-ui, sans-serif; | |
| font-size: 14px; | |
| padding: 10px 14px; | |
| border: 1px solid #d1d5db; | |
| border-radius: 6px; | |
| color: #999; | |
| background: #fff; | |
| width: 100%; | |
| margin-top: 16px; | |
| } | |
| .fake-btn { | |
| background: #63348d; | |
| color: #fff; | |
| border: none; | |
| border-radius: 6px; | |
| padding: 10px 24px; | |
| font-size: 14px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| margin-top: 8px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Example Sentences — Layout Options</h1> | |
| <p class="subtitle">Examples above the input, organized as labeled pairs. Five polysemy words × two contexts each.</p> | |
| <!-- ════════════════════════════════════════════════════════════════ --> | |
| <h2>A. Horizontal pairs — label then two buttons inline</h2> | |
| <p class="description">Each row: word label + two sentence buttons. Compact, pairs are visually obvious.</p> | |
| <div class="mockup"> | |
| <div style="display:flex; flex-direction:column; gap:8px; margin-bottom:4px;"> | |
| <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap;"> | |
| <span class="ex-label">bass:</span> | |
| <button class="ex-btn">He tuned his bass and plugged into the</button> | |
| <button class="ex-btn">On the lake she caught a bass and pulled it onto the</button> | |
| </div> | |
| <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap;"> | |
| <span class="ex-label">spring:</span> | |
| <button class="ex-btn">She wound the metal spring and the clock began to</button> | |
| <button class="ex-btn">After the long winter the warm spring rain made the flowers</button> | |
| </div> | |
| <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap;"> | |
| <span class="ex-label">current:</span> | |
| <button class="ex-btn">The river current pulled the boat toward the</button> | |
| <button class="ex-btn">In her speech the current president talked about the</button> | |
| </div> | |
| <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap;"> | |
| <span class="ex-label">pitch:</span> | |
| <button class="ex-btn">She tuned her guitar until the pitch was</button> | |
| <button class="ex-btn">The ballplayer stood on the mound and wound up to pitch to the</button> | |
| </div> | |
| <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap;"> | |
| <span class="ex-label">light:</span> | |
| <button class="ex-btn">She flipped the switch and the light began to</button> | |
| <button class="ex-btn">The bag was so light she carried it with</button> | |
| </div> | |
| </div> | |
| <div class="fake-input">Enter a sentence to explore...</div> | |
| <button class="fake-btn">Explore</button> | |
| </div> | |
| <!-- ════════════════════════════════════════════════════════════════ --> | |
| <h2>B. Two-column grid — label spans both</h2> | |
| <p class="description">Each pair in a subtle group. Label on top, two buttons below as columns. More visual separation between pairs.</p> | |
| <div class="mockup"> | |
| <div style="display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; margin-bottom:4px;"> | |
| <div style="grid-column:1/-1;"><span class="ex-label">bass:</span></div> | |
| <button class="ex-btn" style="text-align:left;">He tuned his bass and plugged into the</button> | |
| <button class="ex-btn" style="text-align:left;">On the lake she caught a bass and pulled it onto the</button> | |
| <div style="grid-column:1/-1; margin-top:4px;"><span class="ex-label">spring:</span></div> | |
| <button class="ex-btn" style="text-align:left;">She wound the metal spring and the clock began to</button> | |
| <button class="ex-btn" style="text-align:left;">After the long winter the warm spring rain made the flowers</button> | |
| <div style="grid-column:1/-1; margin-top:4px;"><span class="ex-label">current:</span></div> | |
| <button class="ex-btn" style="text-align:left;">The river current pulled the boat toward the</button> | |
| <button class="ex-btn" style="text-align:left;">In her speech the current president talked about the</button> | |
| <div style="grid-column:1/-1; margin-top:4px;"><span class="ex-label">pitch:</span></div> | |
| <button class="ex-btn" style="text-align:left;">She tuned her guitar until the pitch was</button> | |
| <button class="ex-btn" style="text-align:left;">The ballplayer stood on the mound and wound up to pitch to the</button> | |
| <div style="grid-column:1/-1; margin-top:4px;"><span class="ex-label">light:</span></div> | |
| <button class="ex-btn" style="text-align:left;">She flipped the switch and the light began to</button> | |
| <button class="ex-btn" style="text-align:left;">The bag was so light she carried it with</button> | |
| </div> | |
| <div class="fake-input">Enter a sentence to explore...</div> | |
| <button class="fake-btn">Explore</button> | |
| </div> | |
| <!-- ════════════════════════════════════════════════════════════════ --> | |
| <h2>C. Compact inline — labels as chips, sentences flow</h2> | |
| <p class="description">Labels are small colored chips inline with sentences. Everything flows in one block. Most compact.</p> | |
| <div class="mockup"> | |
| <div style="display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:4px;"> | |
| <span style="font-family:'JetBrains Mono',monospace; font-size:11px; background:#ede8f5; color:#63348d; padding:2px 8px; border-radius:10px; font-weight:600;">bass</span> | |
| <button class="ex-btn">He tuned his bass and plugged into the</button> | |
| <button class="ex-btn">On the lake she caught a bass and pulled it onto the</button> | |
| <span style="font-family:'JetBrains Mono',monospace; font-size:11px; background:#ede8f5; color:#63348d; padding:2px 8px; border-radius:10px; font-weight:600;">spring</span> | |
| <button class="ex-btn">She wound the metal spring and the clock began to</button> | |
| <button class="ex-btn">After the long winter the warm spring rain made the flowers</button> | |
| <span style="font-family:'JetBrains Mono',monospace; font-size:11px; background:#ede8f5; color:#63348d; padding:2px 8px; border-radius:10px; font-weight:600;">current</span> | |
| <button class="ex-btn">The river current pulled the boat toward the</button> | |
| <button class="ex-btn">In her speech the current president talked about the</button> | |
| <span style="font-family:'JetBrains Mono',monospace; font-size:11px; background:#ede8f5; color:#63348d; padding:2px 8px; border-radius:10px; font-weight:600;">pitch</span> | |
| <button class="ex-btn">She tuned her guitar until the pitch was</button> | |
| <button class="ex-btn">The ballplayer stood on the mound and wound up to pitch to the</button> | |
| <span style="font-family:'JetBrains Mono',monospace; font-size:11px; background:#ede8f5; color:#63348d; padding:2px 8px; border-radius:10px; font-weight:600;">light</span> | |
| <button class="ex-btn">She flipped the switch and the light began to</button> | |
| <button class="ex-btn">The bag was so light she carried it with</button> | |
| </div> | |
| <div class="fake-input">Enter a sentence to explore...</div> | |
| <button class="fake-btn">Explore</button> | |
| </div> | |
| <!-- ════════════════════════════════════════════════════════════════ --> | |
| <h2>D. Horizontal pairs with background grouping</h2> | |
| <p class="description">Like A but each pair has a subtle background. Makes the pairing unmistakable.</p> | |
| <div class="mockup"> | |
| <div style="display:flex; flex-direction:column; gap:6px; margin-bottom:4px;"> | |
| <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:#f8f6fb; padding:6px 10px; border-radius:6px;"> | |
| <span class="ex-label">bass:</span> | |
| <button class="ex-btn">He tuned his bass and plugged into the</button> | |
| <button class="ex-btn">On the lake she caught a bass and pulled it onto the</button> | |
| </div> | |
| <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:#f8f6fb; padding:6px 10px; border-radius:6px;"> | |
| <span class="ex-label">spring:</span> | |
| <button class="ex-btn">She wound the metal spring and the clock began to</button> | |
| <button class="ex-btn">After the long winter the warm spring rain made the flowers</button> | |
| </div> | |
| <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:#f8f6fb; padding:6px 10px; border-radius:6px;"> | |
| <span class="ex-label">current:</span> | |
| <button class="ex-btn">The river current pulled the boat toward the</button> | |
| <button class="ex-btn">In her speech the current president talked about the</button> | |
| </div> | |
| <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:#f8f6fb; padding:6px 10px; border-radius:6px;"> | |
| <span class="ex-label">pitch:</span> | |
| <button class="ex-btn">She tuned her guitar until the pitch was</button> | |
| <button class="ex-btn">The ballplayer stood on the mound and wound up to pitch to the</button> | |
| </div> | |
| <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:#f8f6fb; padding:6px 10px; border-radius:6px;"> | |
| <span class="ex-label">light:</span> | |
| <button class="ex-btn">She flipped the switch and the light began to</button> | |
| <button class="ex-btn">The bag was so light she carried it with</button> | |
| </div> | |
| </div> | |
| <div class="fake-input">Enter a sentence to explore...</div> | |
| <button class="fake-btn">Explore</button> | |
| </div> | |
| </body> | |
| </html> | |