Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Secondary Use of Health Records Navigator</title> | |
| <link rel="stylesheet" href="style.css" /> | |
| <script src="app.js" defer></script> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Secondary Use of Health Records Flow Navigator: For Norway</h1> | |
| </header> | |
| <div class="topnav"> | |
| <div class="toprow"> | |
| <div class="progress" aria-label="progress"> | |
| <span id="pbar"></span> | |
| </div> | |
| <button id="clearBtn" class="clear" title="Clear all progress"> | |
| Clear | |
| </button> | |
| </div> | |
| <div id="dots" class="graph" aria-label="step navigation"></div> | |
| </div> | |
| <div class="wrap card"> | |
| <!-- PURPOSE --> | |
| <div class="section"> | |
| <h2 style="margin: 0 0 6px"> | |
| What is the primary purpose of the secondary use of health records? | |
| </h2> | |
| <div class="purpose" id="purposeList"></div> | |
| <div class="tiny"><span class="req">★</span>: Important/Required</div> | |
| </div> | |
| <!-- Anonymized outcome --> | |
| <div class="section hidden" id="anonMsg"> | |
| <div class="center"> | |
| <svg width="72" height="72" viewBox="0 0 24 24" aria-hidden="true"> | |
| <path | |
| fill="#79ffb7" | |
| d="M12 1 3 5v6c0 5 3.8 9.7 9 11c5.2-1.3 9-6 9-11V5z" | |
| /> | |
| </svg> | |
| <p class="tiny" style="margin: 8px 0 0"> | |
| <b>GDPR does not apply</b> to truly anonymized data (<a | |
| href="https://gdpr.eu/recital-26/" | |
| target="_blank" | |
| >Recital 26</a | |
| >). | |
| </p> | |
| </div> | |
| </div> | |
| <!-- TIMELINE --> | |
| <div class="section timeline" id="timeline"></div> | |
| <!-- Finish --> | |
| <div id="finish" class="finish" aria-live="polite"> | |
| <div class="confetti" id="confetti"></div> | |
| <h2 id="finishTitle" style="margin: 6px 0 0">End</h2> | |
| <p id="finishSub" class="tiny"></p> | |
| </div> | |
| </div> | |
| <!-- Flow controller --> | |
| <div id="flow" class="flow hidden" role="group" aria-label="flow question"> | |
| <div class="q"> | |
| <strong id="qtxt">Ready?</strong> | |
| <div class="btns"> | |
| <button class="cta y" id="yesBtn" aria-label="Yes">Yes</button> | |
| <button class="cta n" id="noBtn" aria-label="No">No</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Overlay for the bent arrow that links the active step to the flow bar --> | |
| <svg | |
| id="linkSvg" | |
| class="linksvg" | |
| viewBox="0 0 100 100" | |
| preserveAspectRatio="none" | |
| aria-hidden="true" | |
| > | |
| <defs> | |
| <marker | |
| id="arrowHead" | |
| viewBox="0 0 10 10" | |
| refX="8.5" | |
| refY="5" | |
| markerWidth="6" | |
| markerHeight="6" | |
| orient="auto-start-reverse" | |
| > | |
| <path d="M 0 0 L 10 5 L 0 10 z" fill="#cfe0ff"></path> | |
| </marker> | |
| </defs> | |
| <path id="linkPath" marker-end="url(#arrowHead)"></path> | |
| </svg> | |
| </body> | |
| </html> | |