Added Scroll down information

Author: ArneTR

details.html

@@ -33,25 +33,24 @@ <h2 class="ui image header">
                 <h1 id="website-name" class="ui massive teal ribbon label"></h1>
                 <p style="margin-left: 0; margin-top: 10px; text-align: left;">Tested on <span id="last-run-date"></span></p>
                 <hr>
-                <div style="display: flex; gap: 20px;">
-                    <div id="rendering-energy-label" style="white-space: nowrap;"></div>
-                    <div>
-                        <h2 style="display: inline-block; margin-bottom: 0px;">Rendering Energy</h2>
-                        <p>The CPU power consumption for rendering was <span id="rendering-power" class="ui label"></span></p>
-                        <p>With an initial load and then waiting for 5s the total visit time was: <span class="ui label measurement-duration"></span></p>
-                        <p>This equates to an energy of: <span id="rendering-energy" class="ui label"></span></p>
-                        <p>If you have 10,000 people visiting your page per month this would consume <span id="rendering-energy-10k" class="ui label"></span></p>
-                    </div>
+                <div id="rendering-energy-label" style="white-space: nowrap;"></div>
+                <div>
+                    <h2 style="display: inline-block; margin-bottom: 0px;">Rendering Energy</h2>
+                    <p>The CPU power consumption for rendering was <span id="rendering-power" class="ui label"></span></p>
+                    <p>With an initial load and then waiting for 5s the total visit time was: <span class="ui label measurement-duration"></span></p>
+                    <p>This equates to an energy of: <span id="rendering-energy" class="ui label"></span></p>
+                    <p>If you have 10,000 people visiting your page per month this would consume <span id="rendering-energy-10k" class="ui label"></span></p>
                 </div>
                 <hr>
-                <div style="display: flex; gap: 20px;">
-                    <div id="network-transfer-label" style="white-space: nowrap;"></div>
-                    <div>
-                        <h2 style="display: inline-block; margin-bottom: 0px;">Network Data</h2>
-                        <p>The network data transfer the website was <span id="network-transfer" class="ui label"></span> for loading and staying on the page for <span class="ui label measurement-duration"></span></p>
-                        <p>Assuming you have 10,000 visitors per month this website would produce about <span id="network-carbon-10k-year" class="ui label"> per year</p>
-                    </div>
-                </div>
+                <div id="network-transfer-label" style="white-space: nowrap;"></div>
+                <h2 style="display: inline-block; margin-bottom: 0px;">Network Data</h2>
+                <p>The network data transfer the website was <span id="network-transfer" class="ui label"></span> for loading and staying on the page for <span class="ui label measurement-duration"></span></p>
+                <p>Assuming you have 10,000 visitors per month this website would produce about <span id="network-carbon-10k-year" class="ui label"> per year</p>
+                <hr>
+                <h3>What about scrolling?</h3>
+                <p>A page can download way more resources when scrolling down. Also some energy intensive rendering elements can be below the fold.</p>
+                <p>However scrolling is hard to compare as some pages have infinite scrolling and some don't.</p>
+                <p>Thus webNRG⚡️ <i>does</i> check scrolling energy but is <i>only displayed</i> in the <a id="measurement-details-link-scroll" href="" target="_blank" rel="noopener">Green Metrics Tool Detail View</a>. Click on the <i>Scroll down and wait for 5 s</i> tab.</p>
                 <hr>
                 <h3>History and more details</h3>
                 <ul>

js/details.js

@@ -62,6 +62,7 @@
     document.querySelector('#network-carbon-10k-year').textContent = `${(network_carbon_10k_kg).toFixed(2)} kg`;
 
     document.querySelector('#measurement-details-link').href = `https://metrics.green-coding.io/stats.html?id=${uuid}`;
+    document.querySelector('#measurement-details-link-scroll').href = `https://metrics.green-coding.io/stats.html?id=${uuid}#RUNTIME__Scroll%20down%20and%20wait%20for%205%20s`;
     document.querySelector('#timeline-link').href = `https://metrics.green-coding.io/timeline.html?uri=https%3A%2F%2Fgithub.com%2Fgreen-coding-solutions%2Fgreen-metrics-tool&branch=main&machine_id=6&filename=templates%2Fwebsite%2Fusage_scenario_cached.yml&usage_scenario_variables=${encodeURIComponent(usage_scenario_variables_json)}&metrics=key`;
 
 })()