-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
189 lines (179 loc) · 8.43 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>LED Vergleich Rechner</title>
<link rel="stylesheet" href="semantic.min.css">
<link rel="stylesheet" href="spaces.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="alert no-display">
<a href="javascript: void(0)" data-update class="calc-link">Jetzt berechnen</a>
<small>(<a href="javascript: void(0)" class="calc-link" data-reset>Abbrechen)</a></small>
</div>
<header id="header" class="hidden">
<div class="container">
<a href="http://www.bessere-technik.de">
<img id="logo" class="logo" src="img/logo.png" alt="Bessere Technik" title="Bessere Technik">
</a>
<h1 class="main-heading">LED Strom-Spar-Rechner</h1>
</div>
</header>
<main class="ui container pos-rel">
<i class="print icon"></i>
<form class="ui form mt-xl" method="">
<!-- cards -->
<div class="ui three stackable cards">
<!-- your data -->
<div class="ui card">
<div class="content">
<h3 class="ui blue header">Anzahl und Einsatzzeit</h3>
</div>
<div class="content field">
<div class="right floated meta">Stück</div>
<label for="amount">Anzahl</label>
<input type="number" autocomplete="off" id="amount" name="amount" placeholder="Pflichtfeld" value="1">
</div>
<div class="content field">
<div class="right floated meta">Stunden/Tag</div>
<label for="time">Brenndauer</label>
<input type="number" autocomplete="off" id="time" name="time" placeholder="Pflichtfeld" value="6">
</div>
<div class="content field">
<div class="right floated meta">Tage/Jahr</div>
<label for="days">Arbeitstage</label>
<input type="number" autocomplete="off" id="days" name="days" placeholder="Pflichtfeld" value="365">
</div>
<div class="content field">
<div class="right floated meta">Cent/kWh</div>
<label for="powerprice">Strompreis</label>
<input type="number" autocomplete="off" id="powerprice" name="powerprice" placeholder="Pflichtfeld" value="28">
</div>
<div class="ui sticky content field hide-mobile">
<div class="ui w100 pv-s primary button" data-update>
<i class="calculator icon"></i>
Jetzt berechnen
</div>
</div>
</div>
<!-- /your data -->
<!-- old lamp -->
<div class="ui card">
<div class="content">
<h3 class="ui dark-grey header">Alte Lampe</h3>
</div>
<div class="content field">
<div class="right floated meta">Watt</div>
<label for="old-power">Leistung</label>
<input type="number" autocomplete="off" id="old_power" name="old-power" placeholder="Pflichtfeld" value="60">
</div>
<div class="content field">
<div class="right floated meta">Euro</div>
<label for="old-initialcost">Anschaffungskosten</label>
<input type="number" autocomplete="off" id="old_initialcost" name="old-initialcost" placeholder="Pflichtfeld" value="1.30">
</div>
<div class="content field">
<div class="right floated meta">Stunden</div>
<label for="old-endurance">Lebensdauer</label>
<input type="number" autocomplete="off" id="old_endurance" name="old-endurance" placeholder="Pflichtfeld" value="1000">
</div>
<div class="content field empty-content-field">
</div>
</div>
<!-- /old lamp -->
<!-- new lamp -->
<div class="ui card">
<div class="content">
<h3 class="ui green header">LED Lampe</h3>
</div>
<div class="content field">
<div class="right floated meta">Watt</div>
<label for="new_power">Leistung</label>
<input type="number" autocomplete="off" id="new_power" name="new_power" placeholder="Pflichtfeld" value="5">
</div>
<div class="content field">
<div class="right floated meta">Euro</div>
<label for="new_initialcost">Anschaffungskosten</label>
<input type="number" autocomplete="off" id="new_initialcost" name="new_initialcost" placeholder="Pflichtfeld" value="5.9">
</div>
<div class="content field">
<div class="right floated meta">Stunden</div>
<label for="new_endurance">Lebensdauer</label>
<input type="number" autocomplete="off" id="new_endurance" name="new_endurance" placeholder="Pflichtfeld" value="40000">
</div>
<div class="content field empty-content-field hide-mobile">
</div>
<div class="ui sticky content field show-mobile">
<div class="ui w100 pv-s primary button" data-update>
<i class="calculator icon"></i>
Jetzt berechnen
</div>
</div>
</div>
<!-- /new lamp -->
</div>
<!-- /cards -->
</form>
<div class="ui segment mt-s">
<h3 class="ui header">Direktvergleich</h3>
<table class="ui celled fixed unstackable table">
<thead>
<tr>
<th>Herstellerangaben</th>
<th class="negative mobile hidden">Alte Lampe</th>
<th class="positive mobile hidden">LED Lampe</th>
</tr>
</thead>
<tbody>
<tr>
<td>Energieverbrauch in 1000h</td>
<td class="negative"><span id="old_thousand_h_energy">68</span> kWh</td>
<td class="positive"><span id="new_thousand_h_energy">25</span> kWh</td>
</tr>
<tr>
<td>Täglicher Stromverbrauch</td>
<td class="negative"><span id="old_daily_energy">11,424</span> kWh</td>
<td class="positive"><span id="new_daily_energy">4,2</span> kWh</td>
</tr>
<tr>
<td>Tägliche Energiekosten</td>
<td class="negative"><span id="old_daily_cost">3,19872</span> Euro</td>
<td class="positive"><span id="new_daily_cost">1,176</span> Euro</td>
</tr>
<tr>
<td>Jährliche Energiekosten</td>
<td class="negative"><span id="old_annual_cost">812,47488</span> Euro</td>
<td class="positive"><span id="new_annual_cost">298,704</span> Euro</td>
</tr>
</tbody>
</table>
<div class="ui container year_savings">
<h1 class="header">Jährliche Ersparnis</h1>
<span id="yearly_savings" class="green content"></span> Euro/Jahr
</div>
</div>
<div class="ui segment mt-s savings">
<h3 class="ui header">Ihre Ersparnis</h3>
<p>Ihre Ersparnis während der Lebensdauer der LED Lampe von <span id="lifetime" data-after=" Jahren">18,26</span> beträgt <span id="lifetime_saving" data-after=" Euro">9.383,94</span> bei <span id="result_time" data-after=" Stunde(n)">6</span> Brenndauer im täglichen Durchschnitt.</p>
<p>Sie Investieren <span id="invest_led" data-after=" Euro">870,80</span> in LED Technik statt <span id="invest_old" data-after=" Euro">134,40</span> für <span id="num_old">74,67</span> alte Leuchtmittel im Vergleich zur LED Laufzeit.</p>
<p>Sie sparen <span id="cent_a_day" data-after=" Cent">202,27</span> pro Tag, was <span id="euro_a_year" data-after=" Euro">513,77</span> im Jahr bei <span id="result_days" data-after=" Arbeitstagen">254</span> entspricht.</p>
<p>Nach <span id="years_to_amortise" data-after=" Jahren">1,69</span> hat sich Ihre Investition in die neue LED Technik amortisiert. Sie haben in den <span id="lifetime_copy" data-after=" Jahren">18,26</span> ungefähr <span id="total_kwh" data-after=" kWh"></span> Energie eingespart.</p>
</div>
</main>
<script src="jquery.min.js"></script>
<script src="semantic.min.js"></script>
<script src="script.js"></script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-31224725-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>