-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
140 lines (121 loc) · 6.18 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
<!DOCTYPE html>
<html lang="de">
<head prefix="og: https://ogp.me/ns#">
<title>Hyperspace Animation - fab3F Homepage</title>
<!-- meta -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Coole Hyperspace Animation | 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, space, hyper, animation, hyperspace, anim">
<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="hyperspace-animation/styles1.css" type="text/css" id="styles">
<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="Hyperspace Animation - fab3F Homepage" />
<meta property="og:url" content="https://fab3F.github.io/hyperspace-animation/" />
<meta property="og:description" content="Coole Hyperspace Animation | 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/hyperspace-animation/" />
<!-- 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>
<div class="scene">
<div class="wrap">
<div class="wall wall-right"></div>
<div class="wall wall-left"></div>
<div class="wall wall-top"></div>
<div class="wall wall-bottom"></div>
<div class="wall wall-back"></div>
</div>
<div class="wrap">
<div class="wall wall-right"></div>
<div class="wall wall-left"></div>
<div class="wall wall-top"></div>
<div class="wall wall-bottom"></div>
<div class="wall wall-back"></div>
</div>
</div>
<script type="text/javascript" defer>
document.addEventListener('keydown', function(event) {
if (event.code === 'Space') {
switch_style();
}
});
document.addEventListener('click', function(event) {
switch_style();
});
function switch_style(){
let styles = document.getElementById('styles');
let href = "hyperspace-animation/styles";
if(styles.getAttribute("href").includes("styles5")){
href += "1.css"
} else {
var num = styles.getAttribute("href").match(/\d/g);
num = parseInt(num) + 1;
href = href + num +".css";
}
console.log(href);
styles.setAttribute("href", href);
}
</script>
</body>
</html>