|
| 1 | +<!DOCTYPE html> |
| 2 | +<html> |
| 3 | + |
| 4 | +<head> |
| 5 | + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| 6 | + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| 7 | + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> |
| 8 | + <!-- Site Properties --> |
| 9 | + <title>webNRG - Measure energy and CO2 cost of your website</title> |
| 10 | + <link rel="shortcut icon" href="/favicon.ico"> |
| 11 | + <link rel="icon" href="/favicon.ico"> |
| 12 | + <link rel="icon" href="/favicon-16x16.png" sizes="16x16"> |
| 13 | + <link rel="icon" href="/favicon-32x32.png" sizes="32x32"> |
| 14 | + <meta name="description" content="Measure the actual energy cost and CO2 emissions that the browser produces when accessing and rendering your website"> |
| 15 | + <link rel="stylesheet" type="text/css" class="ui" href="/dist/css/semantic_reduced.min.css"> |
| 16 | + <link rel="stylesheet" type="text/css" href="/css/style.css"> |
| 17 | + <script type="text/javascript" src="/js/shared.js" defer></script> |
| 18 | + <script type="text/javascript" src="/js/details.js" defer></script> |
| 19 | +</head> |
| 20 | + |
| 21 | +<body> |
| 22 | + <div class="ui center aligned grid"> |
| 23 | + <div class="column"> |
| 24 | + <a href="/" style="display: block; margin-bottom: 20px;"> |
| 25 | + <h2 class="ui image header"> |
| 26 | + <img src="/img/gc.png" class="image"> |
| 27 | + <div class="content" style="color: #3d936f; font-size: 70px; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;">WebNRG⚡️</div> |
| 28 | + </h2> |
| 29 | + </a> |
| 30 | + <div class="ui stacked segment left aligned"> |
| 31 | + <h1 id="website-name" class="ui massive teal ribbon label"></h1> |
| 32 | + <p style="margin-left: 0; margin-top: 10px; text-align: left;">Tested on <span id="last-run-date"></span></p> |
| 33 | + <hr> |
| 34 | + <div style="display: flex; gap: 20px;"> |
| 35 | + <div id="rendering-power-label" style="white-space: nowrap;"></div> |
| 36 | + <div> |
| 37 | + <h2 style=" |
| 38 | + display: inline-block; |
| 39 | + margin-bottom: 0px; |
| 40 | + ">Rendering Energy</h2> |
| 41 | + <p>The CPU power consumption for rendering was <span id="rendering-power" class="ui label"></span></p> |
| 42 | + <p>With a visit time of <span class="ui label measurement-duration"></span> this equates to <span id="rendering-energy" class="ui label"></span></p> |
| 43 | + <p>If you have 10.000 people visiting your page per month this would consume <span id="rendering-energy-10k" class="ui label"></span> of energy</p> |
| 44 | + </div> |
| 45 | + </div> |
| 46 | + <hr> |
| 47 | + <div style="display: flex; gap: 20px;"> |
| 48 | + <div id="network-transfer-label" style="white-space: nowrap;"></div> |
| 49 | + <div> |
| 50 | + <h2 style="display: inline-block; margin-bottom: 0px;">Network Data</h2> |
| 51 | + <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> |
| 52 | + <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> |
| 53 | + </div> |
| 54 | + </div> |
| 55 | + <hr> |
| 56 | + <h3>History and more details</h3> |
| 57 | + <ul> |
| 58 | + <li style="margin-bottom:5px;">See the power consumption over time: <a id="timeline-link" href="" class="ui teal horizontal no-wrap"><i class="ui icon clock"></i>History </a></li> |
| 59 | + <li>See more details of the measurement: <a id="measurement-details-link" href="" class="ui blue horizontal no-wrap"><i class="ui icon info"></i>Measurement Details</a></li> |
| 60 | + </ul> |
| 61 | + </div> |
| 62 | + <hr> |
| 63 | + <div class="ui left aligned info message"> |
| 64 | + <div class="content"> |
| 65 | + <p><b>How does it work?</b> 👉 <a href="/methodology.html" style="text-decoration: underline;">Read about the methodology here</a></p> |
| 66 | + </div> |
| 67 | + </div> |
| 68 | + |
| 69 | + |
| 70 | + <script data-domain="website-tester.green-coding.io" data-api="https://worker-spring-sunset-f89b.arne5926.workers.dev/jovvvvvse" src="https://worker-spring-sunset-f89b.arne5926.workers.dev/worker/script.outbound-links.js" defer></script> |
| 71 | + </div> |
| 72 | + </div> |
| 73 | +</body> |
| 74 | +</html> |
0 commit comments