mirror of
https://gitlab.com/mangadex-pub/mangadex_at_home.git
synced 2024-01-19 02:48:37 +00:00
104 lines
5 KiB
HTML
104 lines
5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>MD@H Client</title>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
|
|
<script src="dataReceive.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="layout.css">
|
|
<link rel="stylesheet" type="text/css" href="themes/sharpStyle.css" id="style">
|
|
<link rel="stylesheet" type="text/css" href="themes/lightTheme.css" id="theme">
|
|
</head>
|
|
<body>
|
|
<div id="pageBar">
|
|
<a href="https://mangadex.org/">
|
|
<img src="https://mangadex.org/images/misc/navbar.svg?3" alt="mangadex" width="65px"
|
|
height="65px" style="float: left; padding: 5px; border-radius: 50%">
|
|
</a>
|
|
<h1 style="position: absolute; left: 75px; margin-left: 10px">MangaDex@Home Client Interface</h1>
|
|
<div id="consoleLatest" hidden></div>
|
|
</div>
|
|
<div id="sideBar" >
|
|
<div id="expSide" class="sideOption" onclick="expSide()">
|
|
<img src="icons/showmore.png" alt="dash" width="30px" height="30px" style="padding: 10px" class="img">
|
|
<h2 style="position: absolute; left: 50px; top: 0; margin: calc((50px - 29px)/2)">Menu</h2>
|
|
</div>
|
|
<div id="dash" class="sideOption sideSelected" onclick="selectTab('dash','dashb')">
|
|
<img src="icons/dashboard.png" alt="dash" width="30px" height="30px" style="padding: 10px" class="img">
|
|
<h2 style="position: absolute; left: 50px; top: 50px; margin: calc((50px - 29px)/2)">Dashboard</h2>
|
|
</div>
|
|
<div id="opt" class="sideOption" onclick="selectTab('opt','dashOptions')">
|
|
<img src="icons/options.png" alt="dash" width="30px" height="30px" style="padding: 10px" class="img">
|
|
<h2 style="position: absolute; left: 50px; top: 100px; margin: calc((50px - 29px)/2)">Options</h2>
|
|
</div>
|
|
</div>
|
|
<div id="content">
|
|
<div id="dashb" class="content" style="overflow-y: scroll">
|
|
<div class="contentHeader">
|
|
<h1 style="margin: 0;position:absolute; top: 42px; padding-left: 30px">Dashboard</h1>
|
|
</div>
|
|
<div id="pleasejustwork" style="height: calc(100% - 140px); width: calc(100% - 40px); margin: 20px">
|
|
<div id="thelonelynumber" style="position: absolute; width: 30%; margin: 20px;">
|
|
<div class="line_graph_data">
|
|
<canvas id="hitpie"></canvas>
|
|
</div>
|
|
</div>
|
|
<div id="thegraphfamily"
|
|
style="position: absolute; width: calc(70% - 80px); margin: 20px; left: calc(30% + 40px); top: 100px">
|
|
<div style="margin: 20px; width: calc(100% - 40px)" class="line_graph_data">
|
|
<canvas id="bytessent" style="height: 350px"></canvas>
|
|
</div>
|
|
<div style="margin: 20px; width: calc(100% - 40px)" class="line_graph_data">
|
|
<canvas id="requestsserved" style="height: 350px"></canvas>
|
|
</div>
|
|
<div style="margin: 20px; width: calc(100% - 40px)" class="line_graph_data">
|
|
<canvas id="browsercached" style="height: 350px"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="dashOptions" class="content" hidden>
|
|
<div class="contentHeader">
|
|
<h1 style="margin: 0;position:absolute; top: 42px; padding-left: 30px">Options</h1>
|
|
</div>
|
|
<div id="options">
|
|
<h3>General</h3>
|
|
<div class="option">
|
|
<h4>Data Refresh Rate (ms)</h4>
|
|
<label><input id="dataRefreshRate" type="number" class="optionInput input" placeholder="5000" min="500"></label>
|
|
</div>
|
|
<div class="option">
|
|
<h4>Graph Time Frame (ms)</h4>
|
|
<label><input id="graphTimeFrame" type="number" class="optionInput input" placeholder="30000" min="10000"></label>
|
|
</div>
|
|
<h3>Display</h3>
|
|
<div class="option">
|
|
<h4>Theme</h4>
|
|
<label><select id="themeIn" class="optionInput input">
|
|
<option value="lightTheme">Light</option>
|
|
<option value="darkTheme">Dark</option>
|
|
<option value="midnightTheme">Midnight</option>
|
|
</select></label>
|
|
</div>
|
|
<div class="option">
|
|
<h4>Style</h4>
|
|
<label><select id="styleIn" class="optionInput input">
|
|
<option value="sharpStyle">Sharp</option>
|
|
<option value="softStyle">Soft</option>
|
|
</select></label>
|
|
</div>
|
|
<div class="option">
|
|
<h4>Animations</h4>
|
|
<label class="switch switchInput">
|
|
<input id="doAnimations" type="checkbox">
|
|
<span id="doAnimationscb" class="slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<button id="apply" class="button" onclick="applyOptions()">Apply</button>
|
|
<button id="reset" class="button" onclick="resetOptions()">Reset</button>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |