Adds device compatiblity overview (#150)

niklasr22 · Apr 27, 2024 · d0a31ca · d0a31ca
1 parent cb30912
commit d0a31ca
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 18 deletions.
diff --git a/MacBookPro.webp b/MacBookPro.webp
diff --git a/ProDisplayXDR.webp b/ProDisplayXDR.webp
diff --git a/index.html b/index.html
@@ -49,6 +49,32 @@ <h2>About</h2>
           By default this is only possible when displaying HDR content.
         </p>
       </div>
+      <div class="info">
+        <h2>Compatibility</h2>
+        <div class="compatibility-table">
+          <div class="row">
+            <div class="col example-image">
+              <img src="./MacBookPro.webp" />
+            </div>
+            <div class="col details">
+              <p class="brand">MacBook Pro</p>
+              <ul>
+                <li>M1 Pro, M1 Max (2021)</li>
+                <li>M2 Pro, M2 Max (2023)</li>
+                <li>M3, M3 Pro, M3 Max (2023)</li>
+              </ul>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col example-image">
+              <img src="./ProDisplayXDR.webp" />
+            </div>
+            <div class="col details">
+              <p class="brand">Pro Display XDR</p>
+            </div>
+          </div>
+        </div>
+      </div>
       <div class="info">
         <h2>Donate</h2>
         <p>
@@ -59,13 +85,6 @@ <h2>Donate</h2>
           <a class="btn paypal" href="https://www.paypal.com/donate/?hosted_button_id=FTG9FJK4HLRTY">PayPal Donation</a>
         </div>
       </div>
-      <div class="info">
-        <h2>Contribute</h2>
-        <p>
-          BrightIntosh is an open source project.
-          If you want to contribute, feel free to open an issue on <a
-            href="https://github.com/niklasr22/BrightIntosh">GitHub</a>.</p>
-      </div>
       <div class="info">
         <h2>Disclaimer</h2>
         <p>
@@ -75,7 +94,6 @@ <h2>Disclaimer</h2>
           responsibility for any problems that arise from the use of this software.
           <br />
           By using the BrightIntosh application you accept the above.
-          <br /><br />
         </p>
       </div>
       <div class="info">
@@ -112,8 +130,6 @@ <h2 class="animated-text">Shine bright!</h2>
   <script>
     initComparisons();
 
-    fetch("https://c.brightintosh.de/v.php");
-
     function toggleModal(modalId) {
       const modal = document.getElementById(modalId);
       const overlay = document.getElementById("modal-overlay");

diff --git a/index_nd.html b/index_nd.html
@@ -50,11 +50,30 @@ <h2>About</h2>
         </p>
       </div>
       <div class="info">
-        <h2>Contribute</h2>
-        <p>
-          BrightIntosh is an open source project.
-          If you want to contribute, feel free to open an issue on <a
-            href="https://github.com/niklasr22/BrightIntosh">GitHub</a>.</p>
+        <h2>Compatibility</h2>
+        <div class="compatibility-table">
+          <div class="row">
+            <div class="col example-image">
+              <img src="./MacBookPro.webp" />
+            </div>
+            <div class="col details">
+              <p class="brand">MacBook Pro</p>
+              <ul>
+                <li>M1 Pro, M1 Max (2021)</li>
+                <li>M2 Pro, M2 Max (2023)</li>
+                <li>M3, M3 Pro, M3 Max (2023)</li>
+              </ul>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col example-image">
+              <img src="./ProDisplayXDR.webp" />
+            </div>
+            <div class="col details">
+              <p class="brand">Pro Display XDR</p>
+            </div>
+          </div>
+        </div>
       </div>
       <div class="info">
         <h2>Disclaimer</h2>
@@ -65,7 +84,6 @@ <h2>Disclaimer</h2>
           responsibility for any problems that arise from the use of this software.
           <br />
           By using the BrightIntosh application you accept the above.
-          <br /><br />
         </p>
       </div>
       <div class="info">
@@ -85,8 +103,6 @@ <h2>Trademark notices</h2>
   </div>
   <script>
     initComparisons();
-
-    fetch("https://c.brightintosh.de/v.php");
   </script>
 </body>
 

diff --git a/main.css b/main.css
@@ -33,6 +33,43 @@ div.content {
     width: 60%;
 }
 
+.compatibility-table {
+    background: #fff8;
+    backdrop-filter: blur(10px);
+    border-radius: 20px;
+    box-shadow: #c0c0c0 0px 2px 5px;
+}
+
+.compatibility-table .brand {
+    font-size: 20px;
+    font-weight: 700;
+}
+
+.compatibility-table .row {
+    display: flex;
+}
+
+.compatibility-table .col {
+    width: 50%;
+}
+
+.compatibility-table .details {
+    align-content: center;
+}
+
+.compatibility-table .example-image {
+    padding: 30px;
+}
+
+.compatibility-table img {
+    max-width: 100%;
+}
+
+.compatibility-table ul {
+    list-style: none;
+    text-align: left;
+}
+
 .head {
     display: flex;
     justify-content: space-between;
@@ -404,4 +441,12 @@ code .copy-btn {
         width: 100%;
         margin: 8px;
     }
+
+    .compatibility-table .row {
+        display: block;
+    }
+
+    .compatibility-table .col {
+        width: 100%;
+    }
 }