Skip to content

Commit 01881ca

Browse files
ArneTRArneTR
committed
Re-indented and changed styling a bit
1 parent 8c6c9c2 commit 01881ca

File tree

1 file changed

+125
-81
lines changed

1 file changed

+125
-81
lines changed

‎index.html‎

Lines changed: 125 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,153 @@
11
<!DOCTYPE html>
2-
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
3-
4-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
6-
7-
<!-- Site Properties -->
8-
<title>webNRG - Measure energy and CO2 cost of your website</title>
9-
<link rel="shortcut icon" href="/favicon.ico">
10-
<link rel="icon" href="/favicon.ico">
11-
<link rel="icon" href="/favicon-16x16.png" sizes="16x16">
12-
<link rel="icon" href="/favicon-32x32.png" sizes="32x32">
13-
<meta name="description" content="Measure the actual energy cost and CO2 emissions that the browser produces when accessing and rendering your website">
14-
<link rel="stylesheet" type="text/css" class="ui" href="dist/css/semantic_reduced.min.css">
15-
<style type="text/css">
16-
body {
17-
background-color: #363946;
18-
}
19-
body > .grid {
20-
height: 100%;
21-
}
22-
body {
23-
margin-top: 100px;
24-
}
25-
.column {
26-
max-width: 650px;
27-
}
28-
29-
.badge-container {
30-
display: flex;
31-
justify-content: center;
32-
align-items: center;
33-
flex-wrap: wrap;
34-
gap: 10px;
35-
margin-top: 10px; }
36-
37-
.badge-container a {
38-
display: flex;
39-
}
40-
41-
.badge-container img {
42-
height: auto;
43-
max-width: 250px;
44-
}
45-
</style>
46-
<script type="text/javascript" src="custom.js" defer></script>
47-
</head>
48-
<body style="
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5+
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+
9+
<!-- Site Properties -->
10+
<title>webNRG - Measure energy and CO2 cost of your website</title>
11+
<link rel="shortcut icon" href="/favicon.ico">
12+
<link rel="icon" href="/favicon.ico">
13+
<link rel="icon" href="/favicon-16x16.png" sizes="16x16">
14+
<link rel="icon" href="/favicon-32x32.png" sizes="32x32">
15+
<meta name="description" content="Measure the actual energy cost and CO2 emissions that the browser produces when accessing and rendering your website">
16+
<link rel="stylesheet" type="text/css" class="ui" href="dist/css/semantic_reduced.min.css">
17+
<style type="text/css">
18+
@media (prefers-color-scheme: dark) {
19+
body {
20+
background-color: #363946;
21+
}
22+
}
23+
24+
@media (prefers-color-scheme: light) {
25+
body {
26+
background-color: #fff;
27+
}
28+
}
29+
30+
body > .grid {
31+
height: 100%;
32+
}
33+
body {
34+
margin-top: min(100px, 5vh);
35+
}
36+
.column {
37+
max-width: 950px;
38+
}
39+
40+
#radio-buttons .field label {
41+
font-weight: normal;
42+
}
43+
44+
div[class*="left aligned"] {
45+
text-align: left;
46+
}
47+
48+
.badge-container {
49+
display: flex;
50+
justify-content: center;
51+
align-items: center;
52+
flex-wrap: wrap;
53+
gap: 10px;
54+
margin-top: 10px;
55+
}
56+
57+
.badge-container a {
58+
display: flex;
59+
}
60+
61+
.badge-container img {
62+
height: auto;
63+
max-width: 250px;
64+
}
65+
</style>
66+
<script type="text/javascript" src="custom.js" defer></script>
67+
</head>
68+
<body style="
4969
/* width: 600px; */
50-
">
70+
">
5171

52-
<div class="ui middle aligned center aligned grid" style="
72+
<div class="ui center aligned grid" style="
5373
/* width: 864px !important; */
54-
">
55-
<div class="column" style="
74+
">
75+
<div class="column" style="
5676
/* width: 600px !important; */
57-
">
77+
">
5878
<h2 class="ui image header">
59-
<img src="gc.png" class="image" style="margin-bottom: 30px;">
60-
<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; margin-bottom: 30px;">WebNRG⚡️</div>
79+
<img src="gc.png" class="image">
80+
<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>
6181
</h2>
82+
<div class="ui left aligned warning message">
83+
<i class="close icon"></i>
84+
<div class="content">
85+
<div class="ui header">
86+
What? websites produce carbon emissions?
87+
</div>
88+
<hr>
89+
<p>Websites emit carbon through three factors: <b>Hosting</b>, <b>Network Traffic</b> and <b>User Viewing</b></p>
90+
<p>While <a href="https://www.thegreenwebfoundation.org/">other look at green hosting</a> we created <b>webNRG</b> looks at <b>Network Traffic</b> and the power consumption while <b>Viewing</b> the page.</p>
91+
<p>Check your site now and find out how emission your website creates for a <b>typical 10k users per month</b>!</p>
92+
</div>
93+
</div>
6294
<form id="page-form" class="ui large form initial">
63-
<div class="ui stacked segment">
64-
<div id="inputs-container">
95+
<div class="ui stacked segment">
96+
<div id="inputs-container">
97+
<div class="field">
98+
<div class="ui left icon input">
99+
<i class="globe icon"></i>
100+
<input type="text" name="pages[]" required placeholder="Website (e.g. www.my-page.io)">
101+
</div>
102+
</div>
103+
</div>
104+
<div class="spacer" style="height: 10px;"></div>
105+
<div class="field" style="text-align: right;">
106+
<a class="ui left icon label add-page" onclick="addField()">+ Add a page </a>
107+
</div>
65108
<div class="field">
66-
<div class="ui left icon input">
67-
<i class="globe icon"></i>
68-
<input type="text" name="pages[]" required placeholder="Website (e.g. www.my-page.io)">
69-
</div>
109+
<div class="ui left icon input">
110+
<i class="envelope icon"></i>
111+
<input type="email" name="email" placeholder="Your e-mail (optional. we ping you when measurement is done)">
112+
</div>
70113
</div>
114+
<div class="inline fields" id="radio-buttons">
115+
<label>Send me results:</label>
116+
<div class="field">
117+
<input type="radio" name="public" id="send-frequency-one-time">
118+
<label for="send-frequency-one-time">One Time</label>
119+
</div>
120+
<div class="field">
121+
<input type="radio" name="public" id="send-frequency-every-month">
122+
<label for="send-frequency-every-month">Every month</label>
123+
</div>
124+
</div>
125+
<p><smalL>You can also leave e-mail empty and check back here in ~5-30 Minutes</smalL></p>
126+
127+
<button class="ui fluid teal large submit button" style="background-color: #3d936f;">Measure</button>
71128
</div>
72-
<div class="spacer" style="height: 10px;"></div>
73-
<div class="field" style="text-align: right;">
74-
<a class="ui left icon label add-page" onclick="addField()">+ Add a page </a>
75-
</div>
76-
<div class="field">
77-
<div class="ui left icon input">
78-
<i class="envelope icon"></i>
79-
<input type="email" name="email" placeholder="Your e-mail (optional. we ping you when measurement is done)">
80-
</div>
81-
<p><smalL>You can also leave e-mail empty and check back here in ~5-30 Minutes</smalL></p>
82-
</div>
83-
<button class="ui fluid teal large submit button" style="background-color: #3d936f;">Measure</button>
84-
</div>
85129

86-
<div class="ui error message"></div>
130+
<div class="ui error message"></div>
87131

88132
</form>
89133
<hr>
90134
<h2 class="ui header">
91-
<div class="ui content" style="color: #fff; margin-top:50px;">These are the most recent websites tested with webNRG</div>
135+
<div class="ui content" style="color: #fff; margin-top:50px;">These are the most recent websites tested with webNRG</div>
92136
</h2>
93137
<div id="websites">
94138

95139

96140
</div>
97-
</div>
141+
</div>
98142
</div>
99143

100144
<div id="clonable-input-container" style="display: none;">
101145
<div class="field">
102-
<div class="ui left icon input">
103-
<i class="globe icon"></i>
104-
<input type="text" name="pages[]" placeholder="Next page (e.g. www.my-page.io/step2)">
105-
<a class="ui left icon label red" style="line-height: 22px;" onclick="removeField(this)">Delete</a>
106-
</div>
146+
<div class="ui left icon input">
147+
<i class="globe icon"></i>
148+
<input type="text" name="pages[]" placeholder="Next page (e.g. www.my-page.io/step2)">
149+
<a class="ui left icon label red" style="line-height: 22px;" onclick="removeField(this)">Delete</a>
150+
</div>
107151
</div>
108152
</div>
109153
<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>

0 commit comments

Comments
 (0)