From c02eb378146e816592b6db1b29e3a610578be2e5 Mon Sep 17 00:00:00 2001
From: Adam Iannazzone <46025473+jiannazzone@users.noreply.github.com>
Date: Tue, 23 Apr 2024 15:43:21 -0400
Subject: [PATCH] Add exterior divs to reduce number of gradient calculations

---
 css/style.css       |   2 +
 features.html       | 188 ++++++++++++++++++++++++--------------------
 scripts/features.js |   8 --
 3 files changed, 103 insertions(+), 95 deletions(-)

diff --git a/css/style.css b/css/style.css
index e243697..e5cb090 100644
--- a/css/style.css
+++ b/css/style.css
@@ -89,4 +89,6 @@ footer {
 
 #active-feature-item {
     border: 1px white solid;
+    border-radius: 5px;
+    background: transparent;
 }
\ No newline at end of file
diff --git a/features.html b/features.html
index 0f59929..24239d8 100644
--- a/features.html
+++ b/features.html
@@ -149,23 +149,23 @@
                         </div>
 
                         <!-- Feature List -->
-                        <div class="h5" id="feature-list">
-                            <div class="row feature-list-item gradient-spin my-gradient rounded-3" id="active-feature-item">
+                        <div class="h5 my-gradient gradient-spin" id="feature-list">
+                            <div class="row feature-list-item" id="active-feature-item">
                                 <div class="col">
                                     Pick Up and Play
                                 </div>
                             </div>
-                            <div class="row feature-list-item gradient-spin my-gradient rounded-3" id="">
+                            <div class="row feature-list-item" id="">
                                 <div class="col">
                                     Quick Resume
                                 </div>
                             </div>
-                            <div class="row feature-list-item gradient-spin my-gradient rounded-3" id="">
+                            <div class="row feature-list-item" id="">
                                 <div class="col">
                                     Rewind & Fast Forward
                                 </div>
                             </div>
-                            <div class="row feature-list-item gradient-spin my-gradient rounded-3" id="">
+                            <div class="row feature-list-item" id="">
                                 <div class="col">
                                     Configurator
                                 </div>
@@ -176,94 +176,108 @@
 
                     <!-- Right Column -->
                     <div class="col-8" id="feature-detail-column">
-                        <div class="feature-detail-container rounded-3 p-3 my-gradient gradient-spin" id="active-feature-detail">
-                            <!-- Image/Video Container -->
-                            <div class="row" id="feature-media-container">
-                                <div class="col">
-                                    <img class="img-fluid rounded-3" src="assets/screens_old/screen01.jpeg">
+                        <div class="my-gradient gradient-spin rounded-3 p-3">
+                            <div class="feature-detail-container"
+                                id="active-feature-detail">
+                                <!-- Image/Video Container -->
+                                <div class="row" id="feature-media-container">
+                                    <div class="col">
+                                        <img class="img-fluid rounded-3" src="assets/screens_old/screen01.jpeg">
+                                    </div>
+                                </div>
+
+                                <!-- Feature Detail Container -->
+                                <div class="row py-2 m-1 rounded-3 feature-text-container">
+                                    <div class="col">
+                                        <h4>Don't waste time on setup</h4>
+                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+                                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+                                        nostrud
+                                        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+                                        irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                                        nulla
+                                        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                                        officia
+                                        deserunt mollit anim id est laborum.
+                                    </div>
                                 </div>
                             </div>
 
-                            <!-- Feature Detail Container -->
-                            <div class="row py-2 m-1 rounded-3 feature-text-container">
-                                <div class="col">
-                                    <h4 >Don't waste time on setup</h4>
-                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-                                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-                                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-                                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
-                                    deserunt mollit anim id est laborum.
+                            <div class="feature-detail-container" id="">
+                                <!-- Image/Video Container -->
+                                <div class="row" id="feature-media-container">
+                                    <div class="col">
+                                        <img class="img-fluid rounded-3" src="assets/screens_old/screen02.jpeg">
+                                    </div>
+                                </div>
+
+                                <!-- Feature Detail Container -->
+                                <div class="row rounded-3 py-2 m-1">
+                                    <div class="col">
+                                        <h4>Don't waste time on setup #2</h4>
+                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+                                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+                                        nostrud
+                                        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+                                        irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                                        nulla
+                                        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                                        officia
+                                        deserunt mollit anim id est laborum.
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="feature-detail-container" id="">
+                                <!-- Image/Video Container -->
+                                <div class="row" id="feature-media-container">
+                                    <div class="col">
+                                        <img class="img-fluid rounded-3" src="assets/screens_old/screen03.jpeg">
+                                    </div>
+                                </div>
+
+                                <!-- Feature Detail Container -->
+                                <div class="row rounded-3 py-2 m-1">
+                                    <div class="col">
+                                        <h4>Don't waste time on setup #3</h4>
+                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+                                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+                                        nostrud
+                                        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+                                        irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                                        nulla
+                                        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                                        officia
+                                        deserunt mollit anim id est laborum.
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="feature-detail-container" id="">
+                                <!-- Image/Video Container -->
+                                <div class="row" id="feature-media-container">
+                                    <div class="col">
+                                        <img class="img-fluid rounded-3" src="assets/screens_old/screen04.jpeg">
+                                    </div>
+                                </div>
+
+                                <!-- Feature Detail Container -->
+                                <div class="row rounded-3 py-2 m-1">
+                                    <div class="col">
+                                        <h4>Don't waste time on setup #4</h4>
+                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+                                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+                                        nostrud
+                                        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+                                        irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                                        nulla
+                                        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                                        officia
+                                        deserunt mollit anim id est laborum.
+                                    </div>
                                 </div>
                             </div>
                         </div>
-
-                        <div class="feature-detail-container rounded-3 p-3 my-gradient gradient-spin" id="">
-                            <!-- Image/Video Container -->
-                            <div class="row" id="feature-media-container">
-                                <div class="col">
-                                    <img class="img-fluid rounded-3" src="assets/screens_old/screen02.jpeg">
-                                </div>
-                            </div>
-
-                            <!-- Feature Detail Container -->
-                            <div class="row rounded-3 py-2 m-1">
-                                <div class="col">
-                                    <h4>Don't waste time on setup #2</h4>
-                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-                                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-                                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-                                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
-                                    deserunt mollit anim id est laborum.
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="feature-detail-container rounded-3 p-3 my-gradient gradient-spin" id="">
-                            <!-- Image/Video Container -->
-                            <div class="row" id="feature-media-container">
-                                <div class="col">
-                                    <img class="img-fluid rounded-3" src="assets/screens_old/screen03.jpeg">
-                                </div>
-                            </div>
-
-                            <!-- Feature Detail Container -->
-                            <div class="row rounded-3 py-2 m-1">
-                                <div class="col">
-                                    <h4>Don't waste time on setup #3</h4>
-                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-                                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-                                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-                                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
-                                    deserunt mollit anim id est laborum.
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="feature-detail-container rounded-3 p-3 my-gradient gradient-spin" id="">
-                            <!-- Image/Video Container -->
-                            <div class="row" id="feature-media-container">
-                                <div class="col">
-                                    <img class="img-fluid rounded-3" src="assets/screens_old/screen04.jpeg">
-                                </div>
-                            </div>
-
-                            <!-- Feature Detail Container -->
-                            <div class="row rounded-3 py-2 m-1">
-                                <div class="col">
-                                    <h4>Don't waste time on setup #4</h4>
-                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-                                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-                                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-                                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
-                                    deserunt mollit anim id est laborum.
-                                </div>
-                            </div>
-                        </div>
-
                     </div>
                     <!-- End Right Column -->
                 </div>
diff --git a/scripts/features.js b/scripts/features.js
index e64be19..eeab149 100644
--- a/scripts/features.js
+++ b/scripts/features.js
@@ -1,6 +1,5 @@
 featureTitles = document.getElementsByClassName('feature-list-item');
 featureDetails = document.getElementsByClassName('feature-detail-container');
-// let currentFeature = 0;
 
 for (let i = 0; i < featureTitles.length; i++) {
     featureTitles[i].addEventListener('click', function () {
@@ -16,16 +15,9 @@ function updateActiveFeature(i) {
     for (let j = 0; j < featureTitles.length; j++) {
         featureTitles[j].removeAttribute('id');
         featureDetails[j].removeAttribute('id');
-        featureTitles[j].className = 'row feature-list-item rounded-3';
-        featureTitles[j].style = '';
     }
 
-    // currentFeature = i;
-
     // Update the active feature
     featureTitles[i].id = 'active-feature-item';
     featureDetails[i].id = 'active-feature-detail'
-
-    // Handle styles
-    featureTitles[i].className += ' gradient-spin my-gradient';
 }
\ No newline at end of file