add rating to website

niklasr22 · Sep 13, 2024 · 8d3ef9c · 8d3ef9c
1 parent 3c15883
commit 8d3ef9c
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -63,9 +63,15 @@ <h2>Unlock your MacBook Pro®'s Full Brightness</h2>
       </div>
       <div class="info" id="trial">
         <h2>Get started with a free trial</h2>
-        <p class="card text-card">
-          Use BrightIntosh free for three days after getting it from the App Store®!
-        </p>
+        <div class="card text-card center">
+          Use BrightIntosh free for three days after getting it from the App Store!
+          <br />
+          <br />
+          <div class="center">
+            <div class="rating" style="--rating: 4.8;" aria-label="Rating of this product is 2.3 out of 5."></div>
+            <p class="rating-numeric"><strong>4.8</strong> out of 5 on the App Store®</p>
+          </div>
+        </div>
       </div>
       <div class="info" id="about">
         <h2>About</h2>
@@ -118,16 +124,14 @@ <h2>Disclaimer</h2>
         <h2>How it works</h2>
         <div class="card text-card">
           <ol>
-            <li>BrightIntosh creates a small 1x1 pixel sized overlay with the brightest HDR color to get macOS to enable
-              the
-              full
-              HDR brightness for the screen.
+            <li>BrightIntosh activates full HDR brightness on your MacBook Pro by creating a tiny 1x1 pixel overlay with
+              the brightest HDR color, prompting macOS to enable maximum screen brightness.
             </li>
-            <li>This pixel is hidden behind the rounded corner of the MacBook Pro's
-              screen.
+            <li>This pixel is discreetly hidden behind the rounded corner of your MacBook Pro's display, making it
+              invisible.
             </li>
-            <li>Then BrightIntosh performs a correction on the gamma values of the screen to lift the brightness
-              of the screen's entire content.
+            <li>Finally, BrightIntosh adjusts the screen's gamma values, enhancing the brightness across all content
+              displayed.
             </li>
             </ul>
         </div>

diff --git a/main.css b/main.css
@@ -42,6 +42,11 @@ div.content {
     padding: 30px;
 }
 
+.sm-card {
+    display: inline-block;
+    padding: 15px;
+}
+
 .text-card {
     text-align: left;
 }
@@ -361,6 +366,37 @@ h2 {
     background-position: 0% 0;
 }
 
+:root {
+    --star-size: 30px;
+    --star-color: #fff;
+    --star-background: #fc9601;
+}
+
+.rating {
+    --percent: calc(var(--rating) / 5 * 100%);
+    display: inline-block;
+    font-size: var(--star-size);
+    height: var(--star-size);
+    line-height: 1;
+    text-align: left;
+    padding-left: 0px;
+    padding-right: 0px;
+}
+
+.rating::before {
+    content: '★★★★★';
+    background: linear-gradient(90deg, var(--star-background) 0%, var(--star-background) var(--percent), rgba(0, 0, 0, 1) var(--percent), rgba(0, 0, 0, 1) 100%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    display: block;
+    position: relative;
+}
+
+.rating-numeric {
+    margin: 0;
+}
+
 .hidden {
     display: none;
 }
@@ -370,6 +406,10 @@ h2 {
     display: none;
 }
 
+.center {
+    text-align: center;
+}
+
 @media screen and (max-width: 1350px) {
 
     .head {