172 lines
4.3 KiB
HTML
172 lines
4.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
|
|
<title>Recharge Agency</title>
|
|
<style>
|
|
:root {
|
|
--page-width: 512px;
|
|
--brown-990: #290e00;
|
|
--panel-brown: #5e3513;
|
|
--gold-line: #f7dd92;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
min-height: 100%;
|
|
background: var(--brown-990);
|
|
font-family:
|
|
-apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial,
|
|
sans-serif;
|
|
}
|
|
|
|
body {
|
|
color: #fff7df;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
.page {
|
|
width: min(100%, var(--page-width));
|
|
aspect-ratio: 1080 / 2410;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
background: var(--brown-990);
|
|
}
|
|
|
|
.canvas {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--brown-990);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
.hero-scene {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 70.9959%;
|
|
overflow: hidden;
|
|
-webkit-mask: url("../../assets/recharge-agency-list/mask.svg") 0 0 / 100% 100% no-repeat;
|
|
mask: url("../../assets/recharge-agency-list/mask.svg") 0 0 / 100% 100% no-repeat;
|
|
}
|
|
|
|
.hero-layer {
|
|
position: absolute;
|
|
display: block;
|
|
max-width: none;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.hero-layer.top-glow {
|
|
left: -16.3889%;
|
|
top: -2.9807%;
|
|
width: 132.7778%;
|
|
height: 45.7043%;
|
|
}
|
|
|
|
.hero-layer.palace {
|
|
left: 0;
|
|
top: -30.0994%;
|
|
width: 100%;
|
|
height: 133.2554%;
|
|
}
|
|
|
|
.hero-layer.figure {
|
|
left: 0;
|
|
top: -12.858%;
|
|
width: 100%;
|
|
height: 104.0327%;
|
|
}
|
|
|
|
.title-ribbon {
|
|
position: absolute;
|
|
left: 1.8519%;
|
|
top: 56.722%;
|
|
width: 96.2037%;
|
|
height: 4.6888%;
|
|
display: block;
|
|
max-width: none;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.content-panel {
|
|
position: absolute;
|
|
left: 5.3704%;
|
|
top: 63.0705%;
|
|
width: 89.1667%;
|
|
height: 11.4108%;
|
|
border: 1px solid var(--gold-line);
|
|
border-radius: 2.9076% / 10.1818%;
|
|
background: var(--panel-brown);
|
|
}
|
|
|
|
.bottom-frame {
|
|
position: absolute;
|
|
left: 1.8056%;
|
|
top: 91%;
|
|
width: 96.1574%;
|
|
height: 2.4066%;
|
|
display: block;
|
|
max-width: none;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<main class="page" aria-labelledby="page-title">
|
|
<div class="canvas" data-node-id="220:1781">
|
|
<h1 id="page-title" class="sr-only">Recharge Agency</h1>
|
|
|
|
<div class="hero-scene" data-node-id="220:1782">
|
|
<img class="hero-layer top-glow" src="../../assets/recharge-agency-list/top-glow.png" alt="" />
|
|
<img class="hero-layer palace" src="../../assets/recharge-agency-list/palace-hall.png" alt="" />
|
|
<img class="hero-layer figure" src="../../assets/recharge-agency-list/title-figure.png" alt="" />
|
|
</div>
|
|
|
|
<img class="title-ribbon" src="../../assets/recharge-agency-list/title-ribbon.png" alt="Recharge Agency" />
|
|
|
|
<section class="content-panel" aria-label="Recharge agency list"></section>
|
|
|
|
<svg class="bottom-frame" aria-hidden="true" viewBox="0 0 1038.5 58" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M0 58L9 49V28L34 8H193.5L200 17.5H840.5L845.5 8H1005.5L1031 28.5V49L1038.5 58V25.5L1010 0H840.5L834.5 11.5H204L197 0H30L0 25.5V58Z" fill="url(#bottom-frame-gradient)" />
|
|
<defs>
|
|
<linearGradient id="bottom-frame-gradient" x1="0" y1="29" x2="1038.5" y2="29" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#FFCC5A" />
|
|
<stop offset="0.1342" stop-color="#FAE47E" />
|
|
<stop offset="0.721154" stop-color="#FAE47E" />
|
|
<stop offset="1" stop-color="#FFCC5A" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</main>
|
|
</body>
|
|
|
|
</html>
|