shakecities/templates/city.html
Nathan Woodburn 10d3df6460
All checks were successful
Build Docker / Build SLDs Image (push) Successful in 19s
Build Docker / Build Main Image (push) Successful in 20s
feat: More responsive display
2023-11-15 19:15:10 +11:00

112 lines
6.4 KiB
HTML

<!DOCTYPE html>
<html data-bs-theme="light" lang="en" style="width: 100vw;height: 99vh;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>ShakeCities</title>
<link rel="icon" type="image/png" sizes="670x700" href="assets/img/HNS.png">
<link rel="icon" type="image/png" sizes="670x700" href="assets/img/HNSW.png" media="(prefers-color-scheme: dark)">
<link rel="icon" type="image/png" sizes="670x700" href="assets/img/HNS.png">
<link rel="icon" type="image/png" sizes="670x700" href="assets/img/HNSW.png" media="(prefers-color-scheme: dark)">
<link rel="icon" type="image/png" sizes="670x700" href="assets/img/HNS.png">
<link rel="icon" type="image/png" sizes="670x700" href="assets/img/HNS.png">
<link rel="icon" type="image/png" sizes="670x700" href="assets/img/HNS.png">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/styles.min.css">
</head>
<body style="height: 99vh;width: 100vw;color: #1fffff;background: #000000;overflow-x: hidden;">
<div class="d-print-block d-sm-none d-md-none d-lg-none d-xl-block d-xxl-block">
<div class="d-xl-flex align-items-xl-center" style="background: #f1ffff;border-radius: 10px;padding-top: 2%;padding-left: 2%;padding-right: 2%;padding-bottom: 2%;width: 30%;display: inline-flex;height: 15em;margin-top: 1%;margin-left: 1%;">
<div style="width: 20vw;height: 20vw;max-height: 200px;max-width: 200px;"><img src="{{avatar}}" width="100%" height="100%" style="border-radius: 50%;"></div>
<div style="margin-left: 40px;">
<div>
<p style="font-size: 24px;">{{hnschat}}</p>
</div>
<div>
<p style="font-size: 24px;">{{location}}</p>
</div>
</div>
</div>
<div class="d-xl-flex align-items-xl-center right-align top-align" style="background: #f1ffff;border-radius: 10px;padding-top: 2%;padding-left: 2%;padding-bottom: 2%;width: 60%;position: absolute;padding-right: 2%;display: inline-flex;height: 15em;">
<div style="display: inline-block;">
<div>
<p style="font-size: 24px;">HNS: {{hns}}</p>
</div>
<div>
<p style="font-size: 24px;">BTC: {{btc}}</p>
</div>
<div>
<p style="font-size: 24px;">ETH: {{eth}}</p>
</div>
</div>
</div>
</div>
<div class="d-print-none d-sm-none d-md-none d-lg-block d-xl-none d-xxl-none">
<div style="background: #f1ffff;border-radius: 10px;padding-top: 2%;padding-left: 2%;padding-right: 2%;padding-bottom: 2%;width: 40%;margin-top: 1%;margin-left: 1%;">
<div style="width: 100%;height: 20vw;max-height: 200px;"><img src="{{avatar}}" width="100%" height="100%" style="border-radius: 50%;"></div>
<div class="text-center">
<div>
<p style="font-size: 24px;">{{hnschat}}</p>
</div>
<div>
<p style="font-size: 24px;">{{location}}</p>
</div>
</div>
</div>
<div class="d-xl-flex align-items-xl-center right-align top-align" style="background: #f1ffff;border-radius: 10px;padding-top: 2%;padding-left: 2%;padding-bottom: 2%;width: 50%;position: absolute;padding-right: 2%;display: inline-flex;height: 15em;">
<div style="display: inline-block;">
<div>
<p style="font-size: 24px;">HNS: {{hns}}</p>
</div>
<div>
<p style="font-size: 24px;">BTC: {{btc}}</p>
</div>
<div>
<p style="font-size: 24px;">ETH: {{eth}}</p>
</div>
</div>
</div>
</div>
<div class="d-none d-print-none d-sm-block d-md-block d-lg-none d-xl-none d-xxl-none">
<div class="d-xl-flex align-items-xl-center" style="background: #f1ffff;border-radius: 10px;padding-top: 2%;padding-left: 2%;padding-right: 2%;padding-bottom: 2%;display: inline-flex;margin: 1%;width: 98%;">
<div style="width: 20vw;height: 20vw;max-width: 200px;max-height: 200px;display: inline-block;"><img src="{{avatar}}" width="100%" height="100%" style="border-radius: 50%;"></div>
<div style="display: inline-block;margin-left: 40px;">
<div>
<p style="font-size: 24px;">{{hnschat}}</p>
</div>
<div>
<p style="font-size: 24px;">{{location}}</p>
</div>
</div>
</div>
<div class="d-xl-flex align-items-xl-center" style="background: #f1ffff;border-radius: 10px;padding-top: 2%;padding-left: 2%;padding-bottom: 2%;padding-right: 2%;display: inline-flex;margin: 1%;width: 98%;">
<div style="display: inline-block;">
<div>
<p style="font-size: 24px;">HNS: {{hns}}</p>
</div>
<div>
<p style="font-size: 24px;">BTC: {{btc}}</p>
</div>
<div>
<p style="font-size: 24px;">ETH: {{eth}}</p>
</div>
</div>
</div>
</div>
<div style="background: #f1ffff;border-radius: 10px;padding-top: 2%;padding-left: 2%;padding-right: 2%;padding-bottom: 2%;margin: 1%;margin-right: 1.6%;">
<p style="font-size: 24px;">{{data|safe}}</p>
</div>
<div class="d-flex justify-content-xl-start align-items-xl-center" style="margin-right: 1%;margin-left: 1%;height: 6%;margin-top: 0.5%;">
<div class="d-inline-block d-print-inline-block d-sm-none d-md-none d-lg-none d-xl-inline-block d-xxl-inline-block" style="display: inline-flex;width: 3vw;height: 3vw;background: #f1ffff;padding: 4px;border-radius: 50%;"><img src="{{hns_icon}}" width="100%" height="100%"></div>
<div class="d-xl-flex align-items-xl-center" style="display: inline-flex;padding: 1%;height: 100%;margin-left: 2%;">
<p class="align-self-baseline" style="color: #f1ffff;">Powered by <a href="https://{{main_domain}}" target="_blank">ShakeCities</a></p>
</div>
</div>
<div style="height: 10px;"></div>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/script.min.js"></script>
</body>
</html>