100 lines
3.4 KiB
Plaintext
100 lines
3.4 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<!-- displays site properly based on user's device -->
|
|
|
|
<link
|
|
rel="stylesheet"
|
|
href="static/public/out.css"
|
|
type="text/css"
|
|
media="screen"
|
|
/>
|
|
<link
|
|
rel="icon"
|
|
type="image/png"
|
|
sizes="32x32"
|
|
href="static/public/images/favicon-32x32.png"
|
|
/>
|
|
|
|
<title>Frontend Mentor | Results summary component</title>
|
|
|
|
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
|
|
<style>
|
|
.attribution {
|
|
font-size: 11px;
|
|
text-align: center;
|
|
}
|
|
.attribution a {
|
|
color: hsl(228, 45%, 44%);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="grid place-items-center w-screen h-screen">
|
|
<article
|
|
class="flex flex-col w-full h-full md:flex-row md:bg-white md:rounded-3xl md:shadow-2xl md:shadow-light-lavender/50 md:w-[715px] md:h-[500px]"
|
|
>
|
|
<section
|
|
id="results-pane"
|
|
class="flex flex-col gap-y-4 items-center px-10 pt-4 pb-8 text-white bg-gradient-to-t from-50% rounded-b-3xl md:justify-around md:w-1/2 md:rounded-3xl from-light-royal-blue to-light-slate-blue"
|
|
>
|
|
<h1 class="font-bold md:pt-2 md:text-xl text-pale-blue">
|
|
Your Result
|
|
</h1>
|
|
<div
|
|
class="flex flex-col justify-center items-center w-32 h-32 bg-gradient-to-t rounded-full md:w-44 md:h-44 from-violet-blue/60 to-persian-blue/75"
|
|
>
|
|
<span class="text-5xl font-extrabold md:text-6xl">{{ .TotalScore }}</span>
|
|
<span class="text-pale-blue"> of 100 </span>
|
|
</div>
|
|
<div class="flex flex-col gap-y-3 items-center">
|
|
<h2 class="text-xl font-bold md:text-2xl">Great</h2>
|
|
<p class="text-sm text-center md:text-base text-pale-blue">
|
|
You scored higher than {{ .UpperPercent }}% of the people who have taken these
|
|
tests.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section
|
|
id="summary-pane"
|
|
class="flex flex-col gap-y-4 p-7 md:justify-around md:px-8 md:w-1/2"
|
|
>
|
|
<h2 class="font-bold md:text-xl">Summary</h2>
|
|
<dl class="flex flex-col gap-y-4">
|
|
{{ range .Categories }}
|
|
<div
|
|
class="flex flex-row items-center px-5 h-12 text-sm rounded-lg bg-summary-item-color/5"
|
|
style="--summary-item-color-var: {{ .ColorHsl }}"
|
|
>
|
|
<img src="{{ .IconPath }}" alt="" class="pr-2" />
|
|
<dt class="flex-1 text-summary-item-color">{{ .Name }}</dt>
|
|
<dd class="flex flex-row">
|
|
<strong class="pr-2">{{ .Score }}</strong>
|
|
<span class="text-dark-gray-blue">/ 100</span>
|
|
</dd>
|
|
</div>
|
|
{{ end }}
|
|
</dl>
|
|
<a
|
|
href="/"
|
|
flex
|
|
flex-row
|
|
class="grid place-items-center w-full h-12 text-white rounded-full bg-dark-gray-blue"
|
|
>
|
|
Continue
|
|
</a>
|
|
</section>
|
|
</article>
|
|
</main>
|
|
<footer class="fixed inset-x-0 bottom-1 attribution">
|
|
Challenge by
|
|
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
|
|
>Frontend Mentor</a
|
|
>. Coded by <a href="#">Your Name Here</a>.
|
|
</footer>
|
|
</body>
|
|
</html>
|