-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
172 lines (139 loc) · 5.73 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
<!DOCTYPE html>
<html lang="it">
<!--
TO WEB DESIGNERS AND DEVELOPERS OUT THERE: If you're reading this, I'm a bit nervous, but while I'm at it, let me tell you that this page simply works, and that's about it.
I'm not a web designer, so I'm just trying to create something functional, but there may be errors or lack of efficiency, of course.
-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Enrico Bettella - Work in progress...</title>
<link rel="apple-touch-icon" sizes="180x180" href="IMG/FAVICON/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="IMG/FAVICON/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="IMG/FAVICON/favicon-16x16.png">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
<!-- Custom CSS -->
<style>
body {
--bg-color-light: #ffffff;
--text-color-light: #000000;
--bg-color-dark: #1a1a1a;
--text-color-dark: #ffffff;
font-family: 'Poppins', sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s ease, color 0.3s ease;
}
#coming-soon-container {
text-align: center;
margin-top: 10%;
}
#coming-soon-image {
width: 80%;
max-width: 400px;
height: auto;
}
.langSelector {
color: inherit;
cursor: pointer;
margin-right: 5px;
margin-left: 5px;
}
a[href^="mailto:"] {
color: #C636B8;
}
.footer {
width: 100%;
background-color: #9a9a9a7f;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<script async>
// Function to fetch language data
async function fetchLanguageData(lang) {
const response = await fetch(`LANG/${lang}.json`);
return response.json();
}
// Function to set the language preference
function setLanguagePreference(lang) {
localStorage.setItem('language', lang);
location.reload();
}
// Function to update content based on selected language
function updateContent(langData) {
document.querySelectorAll('[data-i18n]').forEach(element => {
const key = element.getAttribute('data-i18n');
element.textContent = langData[key];
});
}
// Function to change language
async function changeLanguage(lang) {
await setLanguagePreference(lang);
const langData = await fetchLanguageData(lang);
updateContent(langData);
}
// Call updateContent() on page load
window.addEventListener('DOMContentLoaded', async () => {
const userPreferredLanguage = localStorage.getItem('language') || navigator.language.substring(0, 2) || 'en';
console.log('User Preferred Language:', userPreferredLanguage);
console.log('navigator language:', navigator.language.substring(0, 2));
const langData = await fetchLanguageData(userPreferredLanguage);
console.log('Language Data:', langData);
updateContent(langData);
});
function setLanguagePreference(lang) {
if (!localStorage.getItem('language')) {
localStorage.setItem('language', lang);
} else {
localStorage.removeItem('language');
localStorage.setItem('language', lang);
}
location.reload();
}
</script>
</head>
<body class="d-flex flex-column min-vh-100">
<div class="container mb-auto">
<div id="coming-soon-container">
<img id="coming-soon-image" src="IMG/WIP_grafica_dark.svg" alt="Coming Soon">
<h2 data-i18n="title"></h2>
<p data-i18n="paragraph"></p>
<p>
<span data-i18n="contact–me"></span>
<a href="mailto:[email protected]?subject=Richiesta di contatto">[email protected]</a>
</p>
</div>
</div>
<footer class="footer mt-5">
<span>© <script>document.write(new Date().getFullYear())</script> Enrico Bettella • </span>
<a onclick="changeLanguage('it')" class="langSelector">IT</a>
<a onclick="changeLanguage('en')" class="langSelector">EN</a>
</footer>
<!-- Color mode -->
<script>
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
const comingSoonImage = document.getElementById("coming-soon-image");
function updateColors() {
if (prefersDarkScheme.matches) {
document.body.style.setProperty('--bg-color', 'var(--bg-color-dark)');
document.body.style.setProperty('--text-color', 'var(--text-color-dark)');
comingSoonImage.src = "IMG/WIP_grafica_dark.svg";
} else {
document.body.style.setProperty('--bg-color', 'var(--bg-color-light)');
document.body.style.setProperty('--text-color', 'var(--text-color-light)');
comingSoonImage.src = "IMG/WIP_grafica_light.svg";
}
}
// Initial update
updateColors();
// Listen for changes in color scheme preference
prefersDarkScheme.addEventListener("change", updateColors);
</script>
</body>
</html>