<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>openCountdown</title> </head> <body> <style> body, html { margin: 0; padding: 0; -webkit-app-region: drag; } body { background-color: rgba(35, 35, 35, 1); color: white; font-family: 'Helvetica'; overflow: hidden; } #wrap { width: 100%; margin-top: 20px; display: block; text-align: center; } #logo { width: 200px; padding-top: 20px; padding-bottom: 10px; text-align: center; user-select: none; } #actions { padding: 10px; display: block; box-shadow: inset 0px 5px 10px rgba(0, 0, 0, 0.3); padding-top: 20px; padding-bottom: 20px; background-color: #d40215; background-image: url("background.svg"); background-position: 60% 60%; user-select: none; } .dobutton { font-size: 1em; padding: 10px 20px; border: 0px; user-select: none; cursor: pointer; border-radius: 4px; } #launch { background-color: rgba(255, 255, 255, 1); margin-right: 5px; border: 1px solid white; } #hide { background-color: rgba(255, 255, 255, 0.1); color: white; margin-right: 5px; border: 1px solid white; } #close { background-color: rgba(255, 255, 255, 0.1); color: white; border: 1px solid white; } input { -webkit-appearance: textfield; background-color: white; -webkit-rtl-ordering: logical; cursor: text; padding: 1px; border-width: 2px; border-style: inset; border-color: initial; border-image: initial; } #status, #model { user-select: none !important; } #status { font-size: 40px; font-weight: 100; margin: 0; color: rgba(255, 255, 255, 0.4); } #model { font-size: 14px; } h1 { font-size: 40px; padding-top: 20px; font-weight: 100; } #url { padding-top: 5px; padding-bottom: 10px; -webkit-app-region: no-drag !important; } #meh { background-color: #b00013; background-image: url("background.svg"); background-position: 90% 90%; margin-top: 30px; padding-bottom: 10px; } textarea:focus, input:focus { outline: 0; } #ifs, input[type='button'] { -webkit-app-region: no-drag !important; } input { -webkit-app-region: no-drag !important; } #ifp { width: 50px; text-align: center; border-bottom-left-radius: 3px; border-top-left-radius: 3px; background-color: #d40215; font-size: 13px; color: #fff; padding-top: 3px; padding-bottom: 3px; border: 1px solid white; border-right-width: 1px; } #ifpb { cursor: pointer; border: 1px solid #ccc; background-color: #b00013; color: white; border: 1px solid white; padding: 3px 8px; border-bottom-right-radius: 3px; border-top-right-radius: 3px; border-left-width: 0px; margin-top: -1px; font-size: 13px; } #ifpb:hover { background-color: #666; } #ift { color: white; -webkit-appearance: checkbox; cursor: pointer; } #ifs { background-color: #d40215; color: #fff; border: 1px solid white; font-size: 12px !important; margin-bottom: -4px; } #guitext { font-size: 12px; color: white; padding-top: 0px; padding-bottom: 2px; } #bottombuttons { padding-bottom: 100px; } </style> <div id="wrap"> <div id="topwrap"> <img id="logo" src="../static/logo/logoProposal.svg" alt="openCountdown" /> <div id="model">model_text (version_etc)</div> </div> <div id="meh"> <h1 id="status">Status</h1> <div id="url">URL</div> </div> <div id="actions"> <p><input type="text" maxlength="5" id="ifp" value="8000" /><input type="button" id="ifpb" value="Change" /></p> <p> <input type="checkbox" id="ift" /> <label for="ift" style="font-size: 12px">Start minimized</label> </p> <div id="bottombuttons"> <input type="button" class="dobutton" value="Launch GUI" id="launch" /> <input type="button" class="dobutton" value="Hide" id="hide" /> <input type="button" class="dobutton" value="Quit" id="close" /> </div> </div> </div> <script type="text/javascript" src="window.js"></script> </body> </html>