feat: upper part styled

17-results-summary-component-go/input.css

@@ -8,21 +8,21 @@ html {
 
 @font-face {
   font-family: 'HankenGrotesk';
-  src: url('public/fonts/static/HankenGrotesk-Medium.ttf') format('truetype');
+  src: url('/static/public/fonts/static/HankenGrotesk-Medium.ttf') format('truetype');
   font-weight: 400; /* Regular */
   font-style: normal;
 }
 
 @font-face {
   font-family: 'HankenGrotesk';
-  src: url('public/fonts/static/HankenGrotesk-Bold.ttf') format('truetype');
+  src: url('/static/public/fonts/static/HankenGrotesk-Bold.ttf') format('truetype');
   font-weight: 700; /* Bold */
   font-style: normal;
 }
 
 @font-face {
   font-family: 'HankenGrotesk';
-  src: url('public/fonts/static/HankenGrotesk-ExtraBold.ttf') format('truetype');
+  src: url('/static/public/fonts/static/HankenGrotesk-ExtraBold.ttf') format('truetype');
   font-weight: 800; /* ExtraBold */
   font-style: normal;
 }

17-results-summary-component-go/public/out.css

@@ -44,7 +44,7 @@ html {
   -o-tab-size: 4;
      tab-size: 4;
   /* 3 */
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: HankenGrotesk, sans-serif;
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
@@ -535,6 +535,137 @@ video {
   bottom: 0.25rem;
 }
 
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.h-32 {
+  height: 8rem;
+}
+
+.w-32 {
+  width: 8rem;
+}
+
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.gap-y-3 {
+  row-gap: 0.75rem;
+}
+
+.gap-y-4 {
+  row-gap: 1rem;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.rounded-b-3xl {
+  border-bottom-right-radius: 1.5rem;
+  border-bottom-left-radius: 1.5rem;
+}
+
+.bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+
+.from-light-royal-blue {
+  --tw-gradient-from: hsl(241, 81%, 54%) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsl(241 81% 54% / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-violet-blue\/60 {
+  --tw-gradient-from: hsla(256, 72%, 46%, 0.6) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsla(256, 72%, 46%, 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.to-light-slate-blue {
+  --tw-gradient-to: hsl(252, 100%, 67%) var(--tw-gradient-to-position);
+}
+
+.to-persian-blue\/75 {
+  --tw-gradient-to: hsla(241, 72%, 46%, 0.75) var(--tw-gradient-to-position);
+}
+
+.p-7 {
+  padding: 1.75rem;
+}
+
+.px-10 {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
+
+.pb-8 {
+  padding-bottom: 2rem;
+}
+
+.pt-4 {
+  padding-top: 1rem;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.font-extrabold {
+  font-weight: 800;
+}
+
+.text-pale-blue {
+  --tw-text-opacity: 1;
+  color: hsl(221 100% 96% / var(--tw-text-opacity));
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 html {
   font-size: 18px;
 }
@@ -542,7 +673,7 @@ html {
 @font-face {
   font-family: 'HankenGrotesk';
 
-  src: url('public/fonts/static/HankenGrotesk-Medium.ttf') format('truetype');
+  src: url('/static/public/fonts/static/HankenGrotesk-Medium.ttf') format('truetype');
 
   font-weight: 400;
 
@@ -554,7 +685,7 @@ html {
 @font-face {
   font-family: 'HankenGrotesk';
 
-  src: url('public/fonts/static/HankenGrotesk-Bold.ttf') format('truetype');
+  src: url('/static/public/fonts/static/HankenGrotesk-Bold.ttf') format('truetype');
 
   font-weight: 700;
 
@@ -566,7 +697,7 @@ html {
 @font-face {
   font-family: 'HankenGrotesk';
 
-  src: url('public/fonts/static/HankenGrotesk-ExtraBold.ttf') format('truetype');
+  src: url('/static/public/fonts/static/HankenGrotesk-ExtraBold.ttf') format('truetype');
 
   font-weight: 800;
 

17-results-summary-component-go/templates/summary-component.gohtml

@@ -31,24 +31,58 @@
       }
     </style>
   </head>
-  <body class="">
+  <body>
     <main>
-      <section>
+      <section
-        Your Result 76 of 100 Great! You scored higher than 65% of the people who
+        class="flex flex-col gap-y-4 items-center px-10 pt-4 pb-8 text-white bg-gradient-to-t rounded-b-3xl from-light-royal-blue to-light-slate-blue"
-        have taken these tests.
+      >
+        <h1 class="font-bold 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 from-violet-blue/60 to-persian-blue/75"
+        >
+          <span class="text-5xl font-extrabold">76</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">Great</h2>
+          <p class="text-sm text-center text-pale-blue">
+            You scored higher than 65% of the people who have taken these tests.
+          </p>
+        </div>
       </section>
 
-      <section>
+      <section class="flex flex-col gap-y-4 p-7">
-        Summary Reaction 80 / 100 Memory 92 / 100 Verbal 61
+        <h2 class="font-bold">Summary</h2>
-        / 100 Visual 72 / 100 Continue
+        <dl class="grid grid-cols-2">
+          <dt>Reaction</dt>
+          <dd class="flex flex-row">
+            <strong>80</strong>
+            / 100
+          </dd>
+          <dt>Memory</dt>
+          <dd class="flex flex-row">
+            <strong>92</strong>
+            / 100
+          </dd>
+          <dt>Verbal</dt>
+          <dd class="flex flex-row">
+            <strong>61</strong>
+            / 100
+          </dd>
+          <dt>Visual</dt>
+          <dd class="flex flex-row">
+            <strong>72</strong>
+            / 100
+          </dd>
+        </dl>
+        Continue
       </section>
-
+    </main>
-  </main>
+    <footer class="fixed inset-x-0 bottom-1 attribution">
-  <footer class="attribution fixed inset-x-0 bottom-1">
+      Challenge by
-    Challenge by
+      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
-    <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
         >Frontend Mentor</a
-                          >. Coded by <a href="#">Your Name Here</a>.
+      >. Coded by <a href="#">Your Name Here</a>.
-  </footer>
+    </footer>
   </body>
 </html>

flake.nix

@@ -42,9 +42,11 @@
             pkgs.scala-cli
             pkgs.sbt
             pkgs.scalafmt
+            pkgs.jdk
+
             pkgs.nodePackages.tailwindcss
             pkgs.nodePackages.prettier
-            pkgs.jdk
+            pkgs.rustywind
 
             pkgs.go
             pkgs.wgo