86 lines
4.8 KiB
HTML
Executable File
86 lines
4.8 KiB
HTML
Executable File
<!doctype html>
|
|
<html lang="en-US" data-theme="light">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="author" content="Mike Wille, SLTE, 2023-09-22">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Take Home Package</title>
|
|
<link rel="stylesheet" href="lib/index.css" blocking rel="preload">
|
|
<script src="topics/topics.js"></script>
|
|
<script src="lib/script.js" defer></script>
|
|
</head>
|
|
<body>
|
|
<div id="loading" class="base overlay">
|
|
<h1><p data-tr>Loading</p></h1>
|
|
<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
|
|
</div>
|
|
<div id="error" class="base overlay" hidden>
|
|
<p data-tr>Please reload.</p>
|
|
</div>
|
|
|
|
<div id="screen"></div> <!-- dummy screen for audio topics -->
|
|
|
|
<main id="main" hidden>
|
|
<div class="container screens" id="screens">
|
|
<div class="screen-container" id="screen1">
|
|
<iframe id="frame-screen1" class="screen" scrolling="no" frameborder="0"></iframe>
|
|
<button id="popout1" class="popout button-img">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
|
<path d="M90.7,12.5v-.7l-.2-.4-.2-.3-.5-.6h0L89,9.9l-.3-.2-.4-.2H65.1a4,4,0,1,0,0,8H77.1L41.2,53.1a4,4,0,1,0,5.7,5.7L82.8,22.9V34.9a4,4,0,0,0,8,0V13.2h0A4,4,0,0,0,90.7,12.5Z"/>
|
|
<path d="M21.2,90.8H68.6a12,12,0,0,0,12-12V50.5a4,4,0,1,0-8,0V78.8a4,4,0,0,1-4,4H21.2a4,4,0,0,1-4-4V31.4a4,4,0,0,1,4-4H49.5a4,4,0,0,0,0-8H21.2a12,12,0,0,0-12,12V78.8A12,12,0,0,0,21.2,90.8Z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="screen-splitter"></div>
|
|
<div class="screen-container" id="screen2">
|
|
<iframe id="frame-screen2" class="screen" scrolling="no" frameborder="0"></iframe>
|
|
<button id="popout2" class="popout button-img">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
|
<path d="M90.7,12.5v-.7l-.2-.4-.2-.3-.5-.6h0L89,9.9l-.3-.2-.4-.2H65.1a4,4,0,1,0,0,8H77.1L41.2,53.1a4,4,0,1,0,5.7,5.7L82.8,22.9V34.9a4,4,0,0,0,8,0V13.2h0A4,4,0,0,0,90.7,12.5Z"/>
|
|
<path d="M21.2,90.8H68.6a12,12,0,0,0,12-12V50.5a4,4,0,1,0-8,0V78.8a4,4,0,0,1-4,4H21.2a4,4,0,0,1-4-4V31.4a4,4,0,0,1,4-4H49.5a4,4,0,0,0,0-8H21.2a12,12,0,0,0-12,12V78.8A12,12,0,0,0,21.2,90.8Z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="container-bottom">
|
|
<div id="timeline"></div>
|
|
</div>
|
|
<div class="buttons base">
|
|
<button id="pp" disabled data-tr>Play</button>
|
|
<button id="stop" disabled data-tr>Stop</button>
|
|
|
|
<div class="spacer"></div>
|
|
|
|
<em data-tr>Dark mode</em>
|
|
<label class="switch" for="theme-switch">
|
|
<input type="checkbox" id="theme-switch"/>
|
|
<div class="slider round"></div>
|
|
</label>
|
|
|
|
<div class="splitter"></div>
|
|
<em data-tr>Language</em>
|
|
<button id="changeLang_DE" class="button-img">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 3">
|
|
<rect id="black_stripe" width="5" height="3" y="0" x="0" fill="#000"/>
|
|
<rect id="red_stripe" width="5" height="2" y="1" x="0" fill="#D00"/>
|
|
<rect id="gold_stripe" width="5" height="1" y="2" x="0" fill="#FFCE00"/>
|
|
</svg>
|
|
</button>
|
|
<button id="changeLang_EN" class="button-img">
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1083 650">
|
|
<defs>
|
|
<polygon id="pt" points="-0.1624598481164531,0 0,-0.5 0.1624598481164531,0" transform="scale(0.0616)" fill="#FFF"/>
|
|
<g id="star"><use xlink:href="#pt" transform="rotate(-144)"/><use xlink:href="#pt" transform="rotate(-72)"/><use xlink:href="#pt"/><use xlink:href="#pt" transform="rotate(72)"/><use xlink:href="#pt" transform="rotate(144)"/></g>
|
|
<g id="s5"><use xlink:href="#star" x="-0.252"/><use xlink:href="#star" x="-0.126"/><use xlink:href="#star"/><use xlink:href="#star" x="0.126"/><use xlink:href="#star" x="0.252"/></g>
|
|
<g id="s6"><use xlink:href="#s5" x="-0.063"/><use xlink:href="#star" x="0.315"/></g>
|
|
<g id="x4"><use xlink:href="#s6"/><use xlink:href="#s5" y="0.054"/><use xlink:href="#s6" y="0.108"/><use xlink:href="#s5" y="0.162"/></g>
|
|
<g id="u"><use xlink:href="#x4" y="-0.216"/><use xlink:href="#x4"/><use xlink:href="#s6" y="0.216"/></g>
|
|
<rect id="stripe" width="1235" height="50" fill="#B22234"/>
|
|
</defs>
|
|
<rect width="1235" height="650" fill="#FFF"/><use xlink:href="#stripe"/><use xlink:href="#stripe" y="100"/><use xlink:href="#stripe" y="200"/><use xlink:href="#stripe" y="300"/><use xlink:href="#stripe" y="400"/><use xlink:href="#stripe" y="500"/><use xlink:href="#stripe" y="600"/><rect width="494" height="350" fill="#3C3B6E"/><use xlink:href="#u" transform="translate(247,175) scale(650)"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html> |