-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhome.html
413 lines (380 loc) · 21.8 KB
/
home.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
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
<!DOCTYPE html>
<html lang="de">
<head prefix="og: https://ogp.me/ns#">
<title>fab3F Homepage</title>
<!-- meta -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="fab3F Homepage - Hier gibt es viele Projekte, ausgeklügelt programmiert (natürlich) und Links zu weiteren vielen tollen Projekten!">
<meta name="keywords" content="fab3F, fab3F Homepage, programmieren, Projekte, homepage, home, html, css, js, javascript">
<meta name="author" content="fab3F">
<meta http-equiv="Permissions-Policy" content="interest-cohort=()">
<!-- Base -->
<base href="https://fab3F.github.io/" target="_self">
<link rel="manifest" href="site.webmanifest">
<!-- Styles -->
<link rel="stylesheet" href="css/reset.css" type="text/css">
<link rel="stylesheet" href="css/main.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<script src="js/bootstrap.bundle.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/classes.css"type="text/css">
<link rel="stylesheet" href="css/styles.css" type="text/css">
<link rel="stylesheet" href="css/footer.css" type="text/css">
<link rel="stylesheet" href="css/cookies.css" type="text/css">
<!-- Footer Social Media Icons Stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.css" integrity="sha512-KOWhIs2d8WrPgR4lTaFgxI35LLOp5PRki/DxQvb7mlP29YZ5iJ5v8tiLWF7JLk5nDBlgPP1gHzw96cZ77oD7zQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
<link rel="icon" type="image/x-icon" href="favicon/favicon.ico">
<link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="apple-mobile-web-app-title" content="fab3F Homepage">
<meta name="application-name" content="fab3F Homepage">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#202124">
<!-- Social Media Stuff -->
<meta property="og:type" content="website" />
<meta property="og:site_name" content="fab3F Homepage" />
<meta property="og:title" content="fab3F Homepage" />
<meta property="og:url" content="https://fab3F.github.io/" />
<meta property="og:description" content="fab3F Homepage - Hier gibt es viele Projekte, ausgeklügelt programmiert (natürlich) und Links zu weiteren vielen tollen Projekten!" />
<meta property="og:image" content="images/fab3F_white.png" />
<meta name="twitter:site" content="@fab3F_official" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:creator" content="@fab3F_official" />
<!-- Script für leere Seite füllen -->
<script src="js/space.js" defer></script>
<!-- Google Search canonical -->
<link rel="canonical" href="https://fab3F.github.io/" />
<!-- Cookies -->
<script src="js/cookies.js" defer></script>
</head>
<body>
<!-- Cookie Popup -->
<div id="cookie-popup">
<div id="cookie-content">
<h2>Datenschutzeinstellungen</h2>
<p>Wir verwenden Cookies und ähnliche Technologien, um sicherzustellen, dass wir Ihnen die bestmögliche Erfahrung auf unserer Website bieten können. Sie können Ihre Einstellungen jederzeit in der Fußzeile ändern.
Weitere Informationen dazu finden Sie hier:</p>
<p><a href="idn">Impressum, Datenschutz & Nutzungsbedingungen</a></p>
<div class="cookie-button-container">
<button id="cookie-accept-all">Alle Akzeptieren</button>
<button id="cookie-reject-all">Alle Ablehnen</button>
<button id="cookie-settings">Einstellungen</button>
</div>
</div>
<div id="cookie-settings-content">
<h2>Einstellungen</h2>
<p>Bitte wählen Sie aus, welche Cookies und ähnliche Technologien auf dieser Website verwendet werden dürfen.</p>
<form>
<h4>Analyse-Technologien und Cookies:</h4>
<input type="checkbox" id="switch_gtm" name="gtm" checked/><label for="switch_gtm" class="switch-label">Toggle_GTM</label>
<h5 class="cookie-name">Google Tag Manager</h5>
<p>Tool, mit dem Tags und Tracking-Codes einer Website zentral verwaltet und auf der Website eingefügt werden können, um das Nutzerverhalten zu messen und zu analysieren.</p>
<input type="checkbox" id="switch_ga" name="ga" checked/><label for="switch_ga" class="switch-label">Toggle_GA</label>
<h5 class="cookie-name">Google Analytics</h5>
<p>Ein Web-Analyse-Tool zu Analyse des Besucherverhaltens, um Erkenntnisse darüber zu gewinnen, wie Nutzer mit der Website interagieren und wie die Website verbessert werden kann.</p>
</form>
<div class="cookie-button-container">
<button id="cookie-save" onclick="saveCookieSettings()">Auswahl speichern</button>
<button id="cookie-back" onclick="showCookiePopup()">Zurück</button>
</div>
</div>
</div>
<!-- Navigation -->
<nav id="home" class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a href="#home"><img src="images/fab3F.png" class="logo responsive" alt="fab3F Logo"></a>
<a class="navbar-brand" href="#home">Homepage</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">Über mich</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">Projekte</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Kontakt</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Bilderwechsel -->
<script type="text/javascript" style="display: none;">
function preloadImages() {
const imageUrls = [
'images/startpage/html.jpg',
'images/startpage/csv.jpg',
'images/startpage/neon.png',
'images/startpage/coding.jpg'
];
imageUrls.forEach((imageUrl) => {
const img = new Image();
img.src = imageUrl;
});
}
window.addEventListener('load', preloadImages);
</script>
<header>
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" aria-label="Slide 1" class="active" aria-current="true"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3" aria-label="Slide 4"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" style="background-image: url('images/startpage/html.jpg')">
<a href="#home">
<div class="carousel-caption">
<h5>fab3F Homepage</h5>
<p>Herzlich Willkommen!</p>
</div>
</a>
</div>
<div class="carousel-item" style="background-image: url('images/startpage/csv.jpg')">
<a href="online-csv-viewer/" target="_self">
<div class="carousel-caption">
<h5>Online CSV Viewer</h5>
<p>Zeige CSV-Dateien ganz einfach online an.</p>
</div>
</a>
</div>
<div class="carousel-item" style="background-image: url('images/startpage/neon.png')">
<a href="projects/neoncursor" target="_self">
<div class="carousel-caption">
<h5>fab3F Neon Effekt</h5>
<p>Spaß mit einem neonfarbenen Cursor</p>
</div>
</a>
</div>
<div class="carousel-item" style="background-image: url('images/startpage/coding.jpg')">
<a href="projects/discordbot/" target="_self">
<div class="carousel-caption">
<h5>Discord Bot</h5>
<p>Eigener fab3F Discord Bot!</p>
</div>
</a>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Vorheriges</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Nächstes</span>
</button>
</div>
</header>
<!-- Page Content -->
<div id="content" class="background">
<section id="about" class="py-4">
<div class="container content">
<h1 class="fw-light">Über mich</h1>
<p class="lead">Hi! Ich bin <b>fab3F</b>. In meiner Freizeit programmiere ich gerne und entwickle Websites,
Minecraft Plugins oder Mods, Discord Bots und noch vieles mehr! Ich programmiere hauptsächlich mit Java,
aber um JavaScript oder Python kommt man nicht immer herum. Auf meiner anderen Website <a href="link/easyflick" target="_blank">easyflick.us.to</a>
findest du Downloads zu meinen Minecraft Ressource-Paketen und Wallpapern. Außerdem habe ich auch einen <a href="link/discord" target="_blank">Discord</a>.
Ich wünsche dir Viel Spaß auf meiner Website!</p>
</div>
</section>
<section id="projects" class="py-4">
<div class="container content">
<h1 class="fw-light">Projekte</h1>
<p class="lead">Hier findest du alle Projekte verlinkt. Auf der Website des Projekts erhältst du zusätzliche Informationen über das jeweilige Projekt.
Der Code ist meistens direkt auf der Seite verlinkt. Alternativ findest du diesen aber immer auch auf meinem <a href="link/github" target="_blank">GitHub</a>.
Falls du bei deiner Suche nicht fündig geworden bist, kannst du auch auf <a href="link/easyflick" target="_blank">EasyFlick</a> vorbeischauen.
Dort findest du viele weitere Downloads.
</p>
<h3 class="projects-header fw-light">Web Apps</h3>
<div class="projects-list">
<div class="project">
<a class="projects-picture-link" href="online-csv-viewer/" target="_self">
<img class="projects-picture" src="images/startpage/csv_preview.png" alt="Online CSV Viewer">
</a>
<h4 class="projects-info"><a href="online-csv-viewer/" target="_self">Online CSV Viewer</a></h4>
<p class="projects-info lead">
Mit diesem Tool kannst du CSV-Dateien ganz schnell und einfach online anzeigen lassen!
Du musst dir also kein weiteres Programm oder ähnliches herunterladen.
Der Viewer zeigt die sonst so unübersichtliche Datei mit einzigartiger Benutzererfahrung an!
</p>
</div>
<div class="project">
<a class="projects-picture-link" href="online-sqlite-viewer/" target="_self">
<img class="projects-picture" src="images/startpage/sqlite_preview.png" alt="Online SQLite Viewer">
</a>
<h4 class="projects-info"><a href="online-sqlite-viewer/" target="_self">Online SQLite Viewer</a></h4>
<p class="projects-info lead">
Um SQLite-Dateien ohne eine weitere Anwendung zu betrachten, kannst du einfach diesesn Online-SQLite-Viewer verwenden.
Dieser ermöglicht es, schnell und einfach eine übersichtliche Tabelle aus der SQLite-Datei zu erstellen und anzuzeigen!
</p>
</div>
<div class="project">
<a class="projects-picture-link" href="projects/mkaq" target="_self">
<img class="projects-picture" src="images/startpage/picture_coming_soon.png" alt="MediaFire Download Link Generator">
</a>
<h4 class="projects-info"><a href="projects/mkaq" target="_self">MediaFire Download Link Generator</a></h4>
<p class="projects-info lead">
Du benötigst einen direkten Download Link zu MediaFire Dateien ohne nervige Download-Seite und Werbung? Hiermit kannst du genau das umsetzen, und zwar komplett kostenfrei!
</p>
</div>
</div>
<h3 class="projects-header fw-light">Bots</h3>
<div class="projects-list">
<div class="project">
<a class="projects-picture-link" href="projects/discordbot/" target="_self">
<img class="projects-picture" src="images/startpage/picture_coming_soon.png" alt="fab3F Music Discord Bot">
</a>
<h4 class="projects-info"><a href="projects/discordbot/" target="_self">fab3F Discord Bot</a></h4>
<p class="projects-info lead">
Der fab3F Discord Bot ist vollkommen individuell anpassbar und bietet viele besondere Features.
Neben vielen Minigames wie TicTacToe oder Hangman kann der Bot auch jegliche Form von Musik abspielen.
Außerdem gibt es ein eigenes Levelsystem mit automatischer Rollenvergabe, wenn ein neues Level erreicht wurde.
Mit vielen weiteren Funktionen ist der Bot also bestens für deinen Discord-Server geeignet!
</p>
</div>
<div class="project">
<a class="projects-picture-link" href="projects/twitchbot/" target="_self">
<img class="projects-picture" src="images/startpage/twitchbot_preview.png" alt="fab3F Custom Twitch Bot">
</a>
<h4 class="projects-info"><a href="projects/twitchbot/" target="_self">fab3F Twitch Bot</a></h4>
<p class="projects-info lead">
Der fab3F Twitch Bot ist ein eigener selbst ersteller Twitch Bot zum selbst-hosten.
Der Bot beinhalted grundlegende Funktionen und kann selbstständig erweitert und an die eigenen Bedürfnisse angepasst werden.
Den Bot kannst du dann für deinen eigenen Twitch-Kanal zum Beispiel auf einem Raspberry Pi hosten.
Eine genaue Anleitung ist hier mit dabei!
</p>
</div>
</div>
<h3 class="projects-header fw-light">Animationen & Effekte</h3>
<div class="projects-list">
<div class="project">
<a class="projects-picture-link" href="projects/neoncursor" target="_blank">
<img class="projects-picture" src="images/startpage/neoncursor_preview.png" alt="Neon Cursor Projekt Project">
</a>
<h4 class="projects-info"><a href="projects/neoncursor" target="_blank">Neon Cursor</a></h4>
<p class="projects-info lead">
Diese auf JavaScript basierende Seite hat einen neonfarbenen Cursor, der dem Mauszeiger folgt oder auf Touch reagiert.
Die dabei einstehende Leuchtspur hat etwas sehr faszinierendes an sich.
Probiere es doch einfach aus!
</p>
</div>
<div class="project">
<a class="projects-picture-link" href="hyperspace-animation/" target="_blank">
<img class="projects-picture" src="images/startpage/hyperspace_animation_preview.png" alt="HTML CSS Hyperspace Animation">
</a>
<h4 class="projects-info"><a href="hyperspace-animation/" target="_blank">Hyperspace Animation</a></h4>
<p class="projects-info lead">
Diese Animation ist eine coole Hyperspace Animation, die nur mit HTML und CSS erstellt wurde. Mit der Leertaste wechselst du zwischen verschiedenen Animationen. Schau sie dir doch einfach mal an!
</p>
</div>
</div>
<h3 class="projects-header fw-light">Sonstiges</h3>
<div class="projects-list">
<div class="project">
<a class="projects-picture-link" href="eieruhr/" target="_self">
<img class="projects-picture" src="images/startpage/eieruhr_preview.png" alt="Eieruhr Egg Timer Clock">
</a>
<h4 class="projects-info"><a href="eieruhr/" target="_self">Eieruhr</a></h4>
<p class="projects-info lead">
Dies ist eine simple Eieruhr. Damit kannst du einen Timer starten und ein Alarm ertönt, sobald das Ei fertig gekocht ist!
Klein aber fein.
Die Funktionen der Eieruhr wurden ausschließlich mit JavaScript programmiert.
Du kannst die Website auch als App benutzen, indem du im Menü auf "Zum Startbildschrim hinzufügen" tippst!
</p>
</div>
<div class="project">
<a class="projects-picture-link" href="projects/agecalc" target="_self">
<img class="projects-picture" src="images/startpage/picture_coming_soon.png" alt="Alter berechnen Geburtstag">
</a>
<h4 class="projects-info"><a href="projects/agecalc" target="_self">Alter berechnen</a></h4>
<p class="projects-info lead">
Diese Uhr zeigt dir in Echtzeit an, wie alt du bist - auf die Millisekunde genau!
</p>
</div>
<div class="project">
<a class="projects-picture-link" href="link/profikoch" target="_blank">
<img class="projects-picture" src="images/startpage/profikoch_preview.png" alt="Profikoch Kochen Rezepte">
</a>
<h4 class="projects-info"><a href="link/profikoch" target="_blank">Profikoch</a></h4>
<p class="projects-info lead">
Leckere Rezepte, schmackhafte Gerichte! Da ist für jeden was dabei.
Du kannst zwischen leckeren Vorspeisen, Haupspeisen und Desserts auswählen.
Die Zutatenliste lässt sich einfach auf die gewünschte Menge an Portionen anpassen.
Die Zubereitung wird Schritt für Schritt erklärt und kann einfach nachgekocht werden.
</p>
</div>
<div class="project">
<a class="projects-picture-link" href="rickrollprotector/" target="_self">
<img class="projects-picture" src="images/startpage/rickrollprotector_preview.png" alt="RickRollProtector AntiRickRoll Extension Addon Addin Chrome Firefox">
</a>
<h4 class="projects-info"><a href="rickrollprotector/" target="_self">RickRollProtector</a></h4>
<p class="projects-info lead">
Sage Tschüss zu RickRolls! Denn dieses Addon warnt dich jedes Mal, dass der geklickte Link zu einem RickRoll führt,
wenn du einen angeklickt hast. So bist du immer auf der sicheren Seite! Du kannst die Warnung natürlich trotzdem ignorieren
und zur Seite weitergehen.
</p>
</div>
</div>
<p class="lead project">
Viele weitere und vorallem kleinere Projekte findest du auf <a href="link/github" target="_blank">GitHub</a>.
</p>
</div>
</section>
<section id="contact" class="py-4">
<div class="container content">
<h1 class="fw-light">Kontakt und Social Media</h1>
<p class="lead mt-4 mb-1">
Wenn du mich unterstützen möchtest, kannst du mir gerne auf Social Media folgen.
So bleibst du immer auf dem neusten Stand und verpasst auch keine wichtigen Dinge mehr!
</p>
<button onclick="window.open('https://fab3F.github.io/link/x','_blank')" class="glow-on-hover" type="button">X</button>
<button onclick="window.open('https://fab3F.github.io/link/youtube','_blank')" class="glow-on-hover" type="button">YOUTUBE</button>
<button onclick="window.open('https://fab3F.github.io/link/instagram','_blank')" class="glow-on-hover" type="button">INSTAGRAM</button>
<button onclick="window.open('https://fab3F.github.io/link/github','_blank')" class="glow-on-hover" type="button">GITHUB</button>
<button onclick="window.open('https://fab3F.github.io/link/twitch','_blank')" class="glow-on-hover" type="button">TWITCH</button>
<p class="lead mt-4 mb-1">
Wenn du Fragen hast oder gerade nach einem Discord Server suchst, kannst du auch gerne meinem Discord beitreten:
</p>
<button onclick="window.open('https://fab3F.github.io/link/discord','_blank')" class="glow-on-hover" type="button">DISCORD</button>
<p class="lead mt-4 mb-1">
Ansonsten kannst du auch eine E-Mail schreiben an:
</p>
<p class="lead"><a href="mailto:fab3F@programmer.net">fab3F@programmer.net</a></p>
</div>
</section>
</div>
<!-- Footer -->
<footer id="footer" class="footer-distributed">
<div class="footer-right">
<a href="link/youtube"><i class="fa-brands fa-youtube"></i></a>
<a href="link/x"><i class="fa-brands fa-x-twitter"></i></a>
<a href="link/instagram"><i class="fa-brands fa-instagram"></i></a>
<a href="link/github"><i class="fa-brands fa-github"></i></a>
<a href="link/discord"><i class="fa-brands fa-discord"></i></a>
</div>
<div class="footer-left">
<p class="footer-links">
<a href="#home" class="link-1">Home</a>
<a href="#projects">Projekte</a>
<a href="#contact">Kontakt</a>
<a href="idn">Impressum, Datenschutz & Nutzungsbedingungen</a>
<a onclick="showCookiePopup()">Datenschutzeinstellungen</a>
</p>
<p class="footer-emailtext">E-Mail:
<a class="footer-emaillink" href="mailto:fab3F@programmer.net">fab3F@programmer.net</a>
</p>
</div>
</footer>
</body>
</html>