iframe-proxy | Sunbelt Computer Software

160 lines (149 loc) · 6.35 KB
<!doctype html>
<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Feff Math</title>
    <meta name="description" content="60 random sets of Year 7 mixed maths practice.">
    <link rel="stylesheet" href="styles.css?v=3">
    <header class="app-header">
      <div class="brand-lockup">
        <img class="brand-art" src="assets/brand-lockup.png" alt="Feff Math">
        <div class="brand-copy">
          <h1>Feff Math</h1>
          <p>Year 7 maths with tiny wins, stickers, and one very serious study cat.</p>
        </div>
        <div class="header-cat" aria-hidden="true">
        </div>
      </div>
      <div class="header-stats">
        <div class="progress-card" aria-live="polite">
          <span class="progress-label">Progress</span>
          <strong id="progressText">0 of 60 sets</strong>
          <div id="headerStickerTrail" class="header-sticker-trail" aria-hidden="true"></div>
          <div class="progress-track" aria-hidden="true">
            <span id="progressBar"></span>
          </div>
        </div>
        <div class="total-card" aria-live="polite">
          <span>Total correct</span>
          <strong id="totalCorrectText">0 / 10</strong>
        </div>
      </div>
      <button id="notificationButton" class="notification-button" type="button" aria-label="Open 2 practice updates" aria-expanded="false" aria-controls="notificationPanel">
        <img class="header-bell" src="assets/header-bell.png" alt="" aria-hidden="true">
      </button>
      <div id="notificationPanel" class="notification-panel" role="dialog" aria-label="Practice updates" hidden>
        <div class="notification-panel-header">
          <strong>Practice updates</strong>
          <button id="notificationClose" class="notification-close" type="button" aria-label="Close practice updates">Close</button>
        </div>
        <div id="notificationList" class="notification-list"></div>
      </div>
    </header>
    <main class="app-shell">
      <aside class="day-panel practice-hub" aria-label="Practice hub">
        <div class="day-panel-header">
          <h2>Practice</h2>
          <div class="practice-picker" aria-label="Choose practice set">
            <button id="todayMixModeButton" class="practice-mode-button is-active" type="button" data-mode="mix">Today's mix</button>
            <div class="focused-set-section">
              <span>Focused sets</span>
              <button id="factorisationModeButton" class="practice-mode-button" type="button" data-mode="factorisation">Factorisation</button>
              <button id="percentagesModeButton" class="practice-mode-button" type="button" data-mode="percentages">Percentages</button>
            </div>
          </div>
          <div class="set-card" aria-live="polite">
            <span id="setLabel">Set 1 of 60</span>
            <strong id="setTitle">Random challenge</strong>
            <p id="setSummary">10 questions with mixed topics and sneaky traps.</p>
          </div>
        </div>
        <div class="mix-actions">
          <button id="previousMixButton" class="mix-button is-secondary" type="button">Previous</button>
          <button id="newMixButton" class="mix-button" type="button">New mix</button>
        </div>
        <div class="mix-stats" aria-live="polite">
          <span>
            <strong id="completedSetsText">0</strong>
            completed
          </span>
          <span>
            <strong id="topicCountText">0</strong>
            topics
          </span>
          <span>
            <strong id="trapCountText">0</strong>
            traps
          </span>
        </div>
        <div class="sticker-album" aria-live="polite">
          <div class="album-heading">
            <span>Sticker album</span>
            <strong id="albumCount">0 / 60</strong>
          </div>
          <div id="stickerGrid" class="sticker-grid"></div>
          <p id="nextStickerText">Finish a set to collect the first sticker.</p>
        </div>
      </aside>
      <section class="practice-panel" aria-live="polite">
        <div class="practice-header">
          <div>
            <p class="section-label">Mixed challenge</p>
            <h2 id="dayTitle">Set 1</h2>
          </div>
          <div class="score-box">
            <span>Correct</span>
            <strong id="scoreText">0 / 10</strong>
          </div>
        </div>
        <div class="encouragement" id="encouragement">
          Take your time. A mistake just shows what to practise next.
        </div>
        <div id="practiceStartPanel" class="practice-start-panel">
          <strong id="startSetName">Set 1</strong>
          <button id="startPracticeButton" class="start-practice-button" type="button">Start</button>
        </div>
        <form id="questionList" class="question-list" autocomplete="off"></form>
        <div id="practiceFinishPanel" class="practice-finish-panel" hidden>
          <button id="finishPracticeButton" class="finish-practice-button" type="button">Finish</button>
        </div>
      </section>
      <aside class="buddy-panel" aria-label="Study buddy and rewards">
        <section class="buddy-card">
          <h2>Your study buddy</h2>
          <div class="buddy-scene">
            <div id="buddyBubble" class="buddy-bubble"></div>
            <div id="buddyCat" class="buddy-cat" aria-hidden="true"></div>
          </div>
        </section>
        <section class="mission-card">
          <h2>Set mission</h2>
          <p>Answer 10 questions</p>
          <div class="mission-row">
            <div class="mission-track" aria-hidden="true">
              <span id="missionBar"></span>
            </div>
            <strong id="missionText">0 / 10</strong>
          </div>
          <p id="missionRewardText">10 to open your surprise.</p>
        </section>
        <section class="mystery-card" aria-live="polite">
          <h2>Mystery box</h2>
          <div id="mysteryBox" class="mystery-box">
            <div class="box-lid"></div>
            <div class="box-body">?</div>
          </div>
          <p id="mysteryText">Finish the set to open it.</p>
        </section>
        <section class="fact-card">
          <h2>Cat fact of the day</h2>
          <p id="catFactText">Cats can jump up to 6 times their height.</p>
        </section>
      </aside>
    </main>
    <script src="app.js?v=2"></script>
Sunbelt Computer Software

PL/B Language Development and Support

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sunbelt Computer Software

PL/B Language Development and Support

FilesExpand file tree

index.html

Latest commit

History

index.html

File metadata and controls
