124 lines
5.0 KiB
HTML
124 lines
5.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Document</title>
|
|
<link rel="stylesheet" href="src/styles/main.css" />
|
|
</head>
|
|
<body>
|
|
<rail-bar></rail-bar>
|
|
<div id="main-view" class="view">
|
|
<div id="left-col">
|
|
<user-card></user-card>
|
|
<badges-widget></badges-widget>
|
|
<distinguishment-widget></distinguishment-widget>
|
|
<bio-widget></bio-widget>
|
|
<news-widget></news-widget>
|
|
</div>
|
|
<div id="rigth-col">
|
|
<div id="overview_mode" class="mode hidden">
|
|
<div id="destination-title" class="card"><h1>Overview</h1></div>
|
|
<league-rating-card></league-rating-card>
|
|
<div class="other-cards">
|
|
<record-card id="40l"></record-card>
|
|
<record-card id="blitz"></record-card>
|
|
<record-card id="zenith"></record-card>
|
|
<record-card id="zenithex"></record-card>
|
|
<zen-card></zen-card>
|
|
<finesse-card></finesse-card>
|
|
</div>
|
|
</div>
|
|
<div id="tl_mode" class="mode">
|
|
<div id="destination-title" class="card"><h1>Tetra League</h1></div>
|
|
<div id="tl-widget" class="card">
|
|
<league-rating-widget></league-rating-widget>
|
|
<tr-progress-widget style="width: 100%;"></tr-progress-widget>
|
|
<stats-table-widget id="tl-stats"></stats-table-widget>
|
|
</div>
|
|
<div id="destination-title" class="card"><h1>Nerd Stats</h1></div>
|
|
<nerd-stats-card></nerd-stats-card>
|
|
<radars-card></radars-card>
|
|
<div class="card achievements-title"><h1>Related Achievemnts</h1></div>
|
|
<div class="achievements" id="tl-achievements">
|
|
</div>
|
|
</div>
|
|
<div id="qp_mode" class="mode hidden">
|
|
qp_mode <!-- TODO: stats table as an web component? -->
|
|
</div>
|
|
<div id="40l_mode" class="mode hidden">
|
|
40l_mode
|
|
</div>
|
|
<div id="blitz_mode" class="mode hidden">
|
|
blitz_mode
|
|
</div>
|
|
<div class="selectors">
|
|
<div class="mode-selector">
|
|
<button class="mode-btn">lol</button>
|
|
<button class="mode-btn">kek</button>
|
|
</div>
|
|
<div class="card-selector">
|
|
<button class="card-btn material-symbols-outlined" style="color: var(--accent-color); padding: 2px 16px;" data-mode="overview_mode">calendar_view_day</button>
|
|
<button class="card-btn" data-mode="tl_mode">
|
|
<svg style="color: var(--accent-color); width: 36px; height: 24px" viewBox="0 15 100 65" preserveAspectRatio="none">
|
|
<defs>
|
|
<mask id="fillMaskLeague" x="0" y="0" width="100" height="100">
|
|
<image xlink:href="assets/icons/league.svg" x="0" y="0" width="100" height="100" src="ppngfallback.png" />
|
|
</mask>
|
|
</defs>
|
|
<rect x="0" y="0" width="100" height="100" style="stroke: none; fill: currentColor" mask="url("#fillMaskLeague")" />
|
|
</svg>
|
|
</button>
|
|
<button class="card-btn" data-mode="qp_mode">
|
|
<svg style="color: var(--accent-color); width: 36px; height: 24px" viewBox="0 15 100 65" preserveAspectRatio="none">
|
|
<defs>
|
|
<mask id="fillMaskQP" x="0" y="0" width="100" height="100">
|
|
<image xlink:href="assets/icons/qp.svg" x="0" y="0" width="100" height="100" src="ppngfallback.png" />
|
|
</mask>
|
|
</defs>
|
|
<rect x="0" y="0" width="100" height="100" style="stroke: none; fill: currentColor" mask="url("#fillMaskQP")" />
|
|
</svg>
|
|
</button>
|
|
<button class="card-btn" data-mode="40l_mode">
|
|
<svg style="color: var(--accent-color); width: 36px; height: 24px" viewBox="0 15 100 65" preserveAspectRatio="none">
|
|
<defs>
|
|
<mask id="fillMask40l" x="0" y="0" width="100" height="100">
|
|
<image xlink:href="assets/icons/40l.svg" x="0" y="0" width="100" height="100" src="ppngfallback.png" />
|
|
</mask>
|
|
</defs>
|
|
<rect x="0" y="0" width="100" height="100" style="stroke: none; fill: currentColor" mask="url("#fillMask40l")" />
|
|
</svg>
|
|
</button>
|
|
<button class="card-btn" data-mode="blitz_mode">
|
|
<svg style="color: var(--accent-color); width: 36px; height: 24px" viewBox="0 15 100 65" preserveAspectRatio="none">
|
|
<defs>
|
|
<mask id="fillMaskBlitz" x="0" y="0" width="100" height="100">
|
|
<image xlink:href="assets/icons/blitz.svg" x="0" y="0" width="100" height="100" src="ppngfallback.png" />
|
|
</mask>
|
|
</defs>
|
|
<rect x="0" y="0" width="100" height="100" style="stroke: none; fill: currentColor" mask="url("#fillMaskBlitz")" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div id="search-overlay" class="hidden">
|
|
<h2 class="modale-title">Search players</h2>
|
|
<div class="modale">
|
|
<form action="dialog" id="search">
|
|
<input id="search-box" type="text" name="nick" spellcheck="false" placeholder="Username or ID"/>
|
|
<button id="search-btn">
|
|
<span class="material-symbols-outlined">search</span>
|
|
</button>
|
|
</form>
|
|
<hr>
|
|
<div id="home-player"></div>
|
|
<div id="tracked-players"></div>
|
|
</div>
|
|
</div>
|
|
<script src="src/index.js" type="module"></script>
|
|
</body>
|
|
</html>
|