forked from iC0RE/arbeitszeitrechner
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathueber.html
283 lines (259 loc) · 15.9 KB
/
ueber.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
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Dienstzeitrechner">
<meta name="author" content="Paul">
<link rel="icon" href="images/660393-essentials/png/027-stopclock-3.png">
<title>Arbeitszeitrechner</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap-4.0.0-dist/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/introjs.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<link href="css/onepage-scroll.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="js/onepagescroll.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="http://www.atryon.de">Arbeitszeitrechner</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link active" href="ueber.html">Über</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="start_Tour">Funktionsweise</a>
</li>
<li class="nav-item">
<a class="nav-link" href="changelog.html">ChangeLog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="kontakt.html">Kontakt</a>
</li>
</ul>
<!-- <form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Suche" aria-label="Suche">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suche</button>
</form> -->
</div>
</nav>
<div class="main">
<section>
<div class="position-relative overflow-hidden text-center bg-dark">
<div class="head-wrapper">
<img class='fitted-image fit-top-center' src="images/clock-1461689_1920.jpg">
<div class="head-text">
<h1 class="display-5 font-weight-light">Arbeitszeitrechner</h1>
<p class="lead font-weight-normal">Erhalte Einblick in den Entwicklungsprozess.</p>
</div>
</div>
</div>
</section>
<section>
<div class="fitted-section position-relative overflow-hidden text-center text-dark bg-light vertical-horizontal-center">
<div class="upper">
<img class="center-icon" src="images/660393-essentials/svg/018-pencil-1.svg" alt="pencil icon">
</div>
<div class="lower">
<div class="p-4 mb-5">
<h2 class="display-5">Wie alles begann</h2>
<p class="lead">Berechnung der Arbeitszeit mit Excel.</p>
<p>Wann kann ich Feierabend machen?<br> Wann muss ich auf Arbeit sein?<br> Wie viel Gewinn/Verlust ergibt sich auf dem Zeitkonto?</p>
<div class="p-2 text-center">
<img src="images/excel-sheet.png" class="img-fluid rounded" alt="Responsive image">
</div>
<p>Das <b>Excel-Sheet</b> konnte genau diese Fragen beantworten.</p>
</div>
</div>
</div>
</section>
<section>
<div class="fitted-section position-relative overflow-hidden text-center text-light vertical-horizontal-center" style="background-image: url(images/theater-1713815.jpg); background-size: cover; background-position: right;">
<div class="upper">
<img class="center-icon" src="images/660393-essentials/svg/319-worldwide.svg" alt="world-wide icon">
</div>
<div class="lower">
<div class="p-4 mb-5">
<h2 class="display-5">Der nächste Schritt</h2>
<p class="lead">Plattformunabhängigkeit.</p>
<div class="my-3 py-3 text-left container-slim">
<p>Der größte Vorteil einer Web-Anwendung ist die <b>Plattformunabhängigkeit</b>. Dabei wird kein bestimmtes Betriebssystem und keine properitäre Software benötigt. Außerdem ist Sie immer und überall verfügbar (eine Internetverbindung wird vorausgesetzt).</p>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="fitted-section position-relative overflow-hidden text-center text-dark bg-light vertical-horizontal-center">
<div class="upper">
<img class="center-icon" src="images/660393-essentials/svg/256-magic-wand.svg" alt="magic-wand icon">
</div>
<div class="lower">
<div class="p-4 mb-5">
<h2 class="display-5">Version 1.0</h2>
<p class="lead">Die erste publizierte Web-App.</p>
<div class="my-3 py-3 text-left container-slim">
<p>Sie bestand nur aus der Transformation des Excel-Arbeitszeitrechners in eine Web-Anwendung und war ausschließlich auf die Berechnung der Arbeitszeit für eine 39-Stunden-Woche ausgelegt.</p>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="fitted-section position-relative overflow-hidden text-center text-light vertical-horizontal-center" style="background-image: url(images/fiesta-1503400.png); background-size: cover; background-position: left;">
<div class="upper">
<img class="center-icon bootstrap-icon" src="images/bootstrap-solid.svg" alt="bootstrap logo">
</div>
<div class="lower">
<div class="p-4 mb-5">
<h2 class="display-5">Bootstrap</h2>
<p class="lead">Das weltweit beliebteste Framework.</p>
<div class="mt-3 pt-3 text-left container-slim">
<p>Seit Beginn der Entwicklung wird für den <b>Arbeitszeitrechner</b> das Framework Bootstrap verwendet. Zunächst in <b>Version 3.3.7</b>. Seit dem <b>Design-Update</b> in <b>Version 4.1</b> wird <b>Bootstrap 4.0.0</b> eingesetzt.</p>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="fitted-section position-relative overflow-hidden text-center text-dark bg-light vertical-horizontal-center">
<div class="upper">
<img class="center-icon" src="images/660393-essentials/svg/271-network-5.svg" alt="network icon">
</div>
<div class="lower">
<div class="p-4 mb-5">
<h2 class="display-5">Weiterentwicklung</h2>
<p class="lead">Meilensteine des Arbeitszeitrechners.</p>
<div class="mt-3 pt-3 text-left container-slim">
<p>Mit der Zeit wurde der Funktionsumfang des Arbeitszeitrechners ausgebaut und um (mehr oder weniger) nützliche Features erweitert.</p>
<p>In diesem Abschnitt werden einzelne Entwicklungsschritte etwas detaillierter beschrieben.</p>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="fitted-section position-relative overflow-hidden text-center text-light bg-dark vertical-horizontal-center" style="background-image: url(images/abstract-1780167.png); background-size: cover; background-position: left;">
<div class="upper">
<img src="images/jQuery-Logo_On_Dark.svg" class="img-responsive img-fluid my-img center-icon jquery-icon" alt="jQuery-Logo">
</div>
<div class="lower">
<div class="p-4 mb-5">
<h2 class="display-5">JavaScript</h2>
<p class="lead">Implementierung von jQuery.</p>
<div class="mt-3 pt-3 text-left container-slim">
<p>In <b>Verion 1.1</b> wurde die <b>automatische Berechnung der Endzeit</b> (an Hand der Soll-Zeit) eingeführt. Der <b>AZR</b> verwendet seitdem die Javascript-Bibliothek <b>jQuery</b>, was die Entwicklung sehr vereinfachte. Das <b>Jumbotron</b> zur Anzeige der Ergebnisse wird nun dauerhaft angezeigt. Für das ChangeLog wird ein Akkordion implementiert.</p>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="fitted-section position-relative overflow-hidden text-center text-dark bg-light vertical-horizontal-center">
<div class="upper">
<img class="vertical-horizontal-center center-icon" src="images/660393-essentials/svg/027-stopclock-3.svg" alt="stopclock icon">
</div>
<div class="lower">
<div class="p-4 mb-5">
<h2 class="display-5">Das Favicon</h2>
<p class="lead">Endlich kein Standard mehr.</p>
<div class="mt-3 pt-3 text-left container-slim">
<p>In der folgenden Version (<b>1.2</b>) wurde das Standard-<b>Favicon</b> gegen ein neues, simples <b>Clock-Icon</b> ersetzt. Weiterhin wurden die <b>Buttons zur Vorauswahl der Arbeitszeit</b>, sowie die <b>prozentuale Anzeige der Arbeitszeit</b>, hinzugefügt. Zuletzt wurde das <b>Favicon</b> in <b>Verison 4.2</b> erneuert.</p>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="fitted-section position-relative overflow-hidden text-center text-light bg-dark vertical-horizontal-center" style="background-image: url(images/abstract-christmas-tree-2466800.jpg); background-size: cover; background-position: right; ">
<div class="upper">
<img class="vertical-horizontal-center center-icon" src="images/660393-essentials/svg/022-spotlight.svg" alt="spotlight icon">
</div>
<div class="p-4 mb-5">
<h2 class="display-5">x-mas Theme</h2>
<p class="lead">Das neue (Alternativ)-Design.</p>
<div class="mt-3 pt-3 text-left container-slim">
<p>Das xmas-Theme wurde mit Version <b>2.0</b> zu Beginn der <b>Adventszeit im Jahr 2016</b> veröffentlicht. Außerdem wurde die Bezeichnung <b>Dienstzeitrechner</b> an Stelle von <b>Arbeitszeitrechner</b> eingeführt, ein neues Design für das <b>ChangeLog-Akkordion</b> sowie ein weiteres Vorauswahlfeld (7:00) hinzugefügt.</p>
</div>
</div>
</div>
</section>
<section>
<div class="fitted-section position-relative overflow-hidden text-center text-dark bg-light vertical-horizontal-center">
<div class="upper">
<img class="vertical-horizontal-center center-icon" src="images/660393-essentials/svg/259-calculator.svg" alt="calculator icon">
</div>
<div class="lower">
<div class="p-4 mb-5">
<h2 class="display-5">Automatisierung</h2>
<p class="lead">Live-Update für Berechnungen.</p>
<div class="mt-3 pt-3 text-left container-slim">
<p>Seit der <b>3. Version</b> werden die berechneten Werte <b>vollautomatisch</b> bei jeder Änderung <b>aktualisiert</b>. Dadurch wurde der Komfort erhöht und die Effizienz des Rechners verbessert.</p>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="fitted-section position-relative overflow-hidden text-center text-dark bg-dark vertical-horizontal-center" style="background-image: url(images/background-2462434.jpg); background-size: cover; background-position: bottom; ">
<div class="upper">
<img class="vertical-horizontal-center center-icon" src="images/660393-essentials/svg/311-star.svg" alt="star icon">
</div>
<div class="lower">
<div class="p-4 mb-5">
<h2 class="display-5">Große Neuerung</h2>
<p class="lead">Der Countdown läuft.</p>
<div class="mt-3 pt-3 text-left container-slim">
<p>Mit der <b>4. Edition</b> des Dienstzeitrechners wurde auf Wunsch eines Ntzers ein <b>Countown</b> implementiert, der die verbleibende Arbeitszeit herunterzählt. Außerdem wurden <b>Vorauswahl-Buttons</b> für die Pausenzeit eingeführt.</p>
</div>
</div>
</div>
</div>
</section>
<section>
<div class=" fitted-section position-relative overflow-hidden text-center text-dark bg-light vertical-horizontal-center">
<div class="upper">
<img class="vertical-horizontal-center center-icon" src="images/660393-essentials/svg/309-heart.svg" alt="heart icon">
</div>
<div class="lower">
<div class="p-4 mb-5">
<h2 class="display-5">Mit Liebe gemacht</h2>
<p class="lead">unter Verwendung folgender Plugins und Symbole.</p>
<div class="mt-3 pt-3">
<p>Diese Seite verwendet das von <a href="http://www.thepetedesign.com">Pete R.</a> entwickelte Plugin <a href="http://www.thepetedesign.com/demos/onepage_scroll_demo.html">One Page Scroll</a>.<br> Lizenz: <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.de">CC BY-SA 4.0</a>
<p>Die verwendeten Symbole sind designed by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">Flaticon</a>.</p>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="footer text-white">
<div class="container text-center">
<span class="">©2016-2020 Paul Lange | Arbeitszeitrechner 4.2 | <a href="impressum.html" target="_blank">Impressum</a> | <a href="datenschutz.html" target="_blank">Datenschutz</a></span>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="bootstrap-4.0.0-dist/js/bootstrap.js"></script>
<!-- Compiled and minified JavaScript for Materialize -->
<script>
$(document).ready(function() {
$(".main").onepage_scroll({
sectionContainer: "section",
easing: "ease",
animationTime: 1000,
loop: true,
responsiveFallback: false
});
});
</script>
</body>
</html>