tbz/website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

i18n + Navbar

Browse source
This commit is contained in:
Stelian Tsekov 2024-03-06 15:19:33 +01:00
parent c6fff10745
commit 312b536944
11 changed files with 377 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
assets/css/home.css
View file

@ -66,17 +66,6 @@ section {
/* margin: 1em; */
}
/* grid styles
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(18em, 1fr));
gap: 1.5em;
justify-items: center;
align-items: center;
width: 56em;
} */
.row {
/* margin: 0 16em 0 16em; */
margin: 0 auto 0 auto;
@ -86,7 +75,7 @@ section {
display: flex;
flex-direction: column;
text-align: center;
background-color: lightgray;
background-color: var(--bg-secondary-color);
border-radius: 1em;
padding: 0.8em;
transition: all ease-in-out 0.2s;

60
assets/css/main.css
View file

@ -14,6 +14,64 @@ body {
padding: 0.5em 1em 0.5em 1em;
} */
nav {
display: flex;
gap: 1em;
position: fixed;
padding: 0.5em;
width: 100%;
transition: all 0.2s ease;
z-index: 99;
}
nav .button#navButton {
margin: 0;
}
/* nav .button.primary {
margin-left: auto;
} */
nav > .language-switcher {
display: flex;
justify-content: flex-end;
gap: 1em;
margin-left: auto;
width: 100%;
}
nav > .language-switcher > select {
width: 8em;
}
nav.scrolled {
background: var(--bg-color); /* Change as needed */
box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Example shadow, adjust as needed */
}
nav a.nav-logo {
display: flex;
justify-content: center;
align-items: center;
padding: 0.1em;
width: 2.5em;
}
nav a.nav-logo > img {
width: 100%;
}
nav .nav-container {
display: flex;
flex-direction: row;
gap: 1em;
}
.button.light {
border-color: white !important;
color: white;
}
.content {
display: flex;
flex-direction: column;
@ -34,4 +92,4 @@ div.notice {
div.notice p {
margin: 0;
}
}

2
assets/css/signup.css
View file

@ -40,10 +40,12 @@ button.nopadding {
}
.optional {
margin-left: 0.2em;
opacity: 0.75;
}
.required {
margin-left: 0.2em;
color: red;
}

75
assets/i18n/de.json Normal file
View file

@ -0,0 +1,75 @@
{
"nav": {
"links": {
"git": "Git",
"forum": "Forum",
"signup": "Registrieren"
}
},
"home": {
"header": {
"welcome": "Willkommen an der TBZ Community!",
"description": "Eine von Lernenden geleitete Community für die Lernenden der Technischen Berufsschule Zürich zur Zusammenarbeit und Innovation."
},
"services": {
"title": "Dienstleistungen",
"subtitle": "Von Lernenden - für Lernenden gehosteten Dienste an der TBZ.",
"forum": {
"title": "Forum",
"description": "Trete den Unterhaltungen bei! Unser Forum ist deine go-to Destination für alles betreffend der TBZ."
},
"git": {
"title": "Git Forge",
"description": "Arbeite an deinen Projekten oder Modulen mit unserem Git Forge. Powered by Forgejo."
},
"sso": {
"title": "SSO",
"description": "Ein Konto für alle Sachen TBZ Community! Logge dich mit einem einheitlichem Konto ein, und vergiss es, überall einzeln Passwörter zu ändern."
}
},
"join": {
"title": "Worauf wartest du noch?",
"subtitle": "Bereit einzutauchen? Trete jetzt bei und beginne, zur TBZ Community Hub beizutragen."
},
"notice": {
"content": "Dies ist eine inoffizielle Community-Plattform, betrieben von Lerndenden für Lerndende der TBZ. Für Anfragen und Unterstützung, bitte kontaktiere uns <a href='/contact'>hier</a>."
},
"footer": {
"source": "Diese Webseite wurde mit dem <a href='https://jenil.github.io/chota/'>chota</a> CSS Framework erstellt. Den Quellcode dieser Seite findest du <a href='https://git.tbz-it.com/community/website'>hier</a>."
},
"buttons": {
"visit": "Besuchen",
"join": "Beitreten",
"explore": "Projekte erkunden"
}
},
"signup": {
"header": {
"title": "TBZ Community Registrierungsformular",
"back": "← Zurück"
},
"form": {
"labels": {
"fullname": "Vollständiger Name:",
"fullnamePlaceholder": "Vollständiger Name",
"username": "Benutzername:",
"usernamePlaceholder": "Benutzername",
"email": "E-Mail:",
"emailPlaceholder": "vollstaendiger.name@edu.tbz.ch",
"ssh": "SSH-Schlüssel:",
"sshPlaceholder": "ssh-ed25519 AAAAXXXXXXXYYYYYYYZZZZZZZ+00a"
},
"legends": {
"required": "*",
"requiredText": " = erforderlich",
"optional": "(optional)",
"optionalText": " = optional"
},
"legal": {
"codeofconduct": "Mit der Anmeldung erklärst du dich damit einverstanden, unseren Verhaltenskodex zu befolgen.<br>Kein Drama. Sei respektvoll. Hab Spass. Wir alle versuchen es, und wir sitzen alle im selben Boot :)",
"apprenticeVerify": "Ich besuche die TBZ und habe eine Lehre.",
"termsVerify": "Ich stimme zu, dass ich die Dienstbedingungen und die Datenschutzrichtlinie gelesen und verstanden habe."
}
}
}
}

75
assets/i18n/en.json Normal file
View file

@ -0,0 +1,75 @@
{
"nav": {
"links": {
"git": "Git",
"forum": "Forum",
"signup": "Sign Up"
}
},
"home": {
"header": {
"welcome": "Welcome to the TBZ Community!",
"description": "A student-driven hub for the students of the Technische Berufsschule Zürich to collaborate and innovate."
},
"services": {
"title": "Services",
"subtitle": "Services hosted by students, for students, at the TBZ.",
"forum": {
"title": "Forum",
"description": "Join the conversation! Our forum is your go-to destination for all things TBZ."
},
"git": {
"title": "Git Forge",
"description": "Collaborate on projects with our Git repository. Powered by Forgejo."
},
"sso": {
"title": "SSO",
"description": "One Account for all things TBZ Community! Log in with a singular account, and forget to re-set passwords individually (because you don't have to, anymore)."
}
},
"join": {
"title": "What're you waiting for?",
"subtitle": "Ready to dive in? Join us now and start contributing to the TBZ Community Hub."
},
"notice": {
"content": "This is an unofficial community platform run by students, for students of the TBZ. For inquiries and support, please contact us <a href='/contact'>here</a>."
},
"footer": {
"source": "This website's been made using the <a href='https://jenil.github.io/chota/'>chota</a> CSS framework. You can find this site's source code <a href='https://git.tbz-it.com/community/website'>here</a>."
},
"buttons": {
"visit": "Visit",
"join": "Join us",
"explore": "Explore Projects"
}
},
"signup": {
"header": {
"title": "TBZ Community Signup Form",
"back": "← Back"
},
"form": {
"labels": {
"fullname": "Full Name:",
"fullnamePlaceholder": "Full Name",
"username": "Username:",
"usernamePlaceholder": "Username",
"email": "Email:",
"emailPlaceholder": "full.name@edu.tbz.ch",
"ssh": "SSH-Key:",
"sshPlaceholder": "ssh-ed25519 AAAAXXXXXXXYYYYYYYZZZZZZZ+00a"
},
"legends": {
"required": "*",
"requiredText": " = required",
"optional": "(optional)",
"optionalText": " = optional"
},
"legal": {
"codeofconduct": "Signing up implies that you agree to abide by our code of conduct.<br>No drama. Be respectful. Have fun. We're all trying, and we're all in this together :)",
"apprenticeVerify": "I visit the TBZ and have an apprenticeship.",
"termsVerify": "I agree that I have read and understood the terms of service and privacy policy."
}
}
}
}

17
assets/img/nav-logo.svg Normal file
View file

@ -0,0 +1,17 @@
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5_2)">
<mask id="mask0_5_2" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="34" y="122" width="444" height="268">
<path d="M256 122.06C273.173 122.06 289.642 128.869 301.785 140.989C313.928 153.109 320.75 169.547 320.75 186.687C320.75 203.827 313.928 220.265 301.785 232.385C289.642 244.505 273.173 251.313 256 251.313C238.827 251.313 222.358 244.505 210.215 232.385C198.072 220.265 191.25 203.827 191.25 186.687C191.25 169.547 198.072 153.109 210.215 140.989C222.358 128.869 238.827 122.06 256 122.06ZM126.5 168.222C136.86 168.222 146.48 170.992 154.805 175.977C152.03 202.382 159.8 228.602 175.71 249.098C166.46 266.824 147.96 279.011 126.5 279.011C111.78 279.011 97.6638 273.174 87.2556 262.786C76.8473 252.398 71 238.308 71 223.616C71 208.925 76.8473 194.835 87.2556 184.447C97.6638 174.058 111.78 168.222 126.5 168.222ZM385.5 168.222C400.22 168.222 414.336 174.058 424.744 184.447C435.153 194.835 441 208.925 441 223.616C441 238.308 435.153 252.398 424.744 262.786C414.336 273.174 400.22 279.011 385.5 279.011C364.04 279.011 345.54 266.824 336.29 249.098C352.2 228.602 359.97 202.382 357.195 175.977C365.52 170.992 375.14 168.222 385.5 168.222ZM135.75 357.486C135.75 319.264 189.585 288.243 256 288.243C322.415 288.243 376.25 319.264 376.25 357.486V389.799H135.75V357.486ZM34 389.799V362.102C34 336.436 68.965 314.832 116.325 308.554C105.41 321.11 98.75 338.467 98.75 357.486V389.799H34ZM478 389.799H413.25V357.486C413.25 338.467 406.59 321.11 395.675 308.554C443.035 314.832 478 336.436 478 362.102V389.799Z" fill="black"/>
</mask>
<g mask="url(#mask0_5_2)">
<path d="M34 477.93H478L34 33.9297V477.93Z" fill="#00A0E4"/>
<path d="M478 33.9297H34L478 477.93V33.9297Z" fill="white"/>
</g>
<path d="M172.209 177.806L173.376 166.701L163.796 160.964C152.773 154.363 140.049 150.722 126.5 150.722C107.15 150.722 88.5857 158.394 74.893 172.061C61.1992 185.728 53.5 204.273 53.5 223.616C53.5 242.96 61.1992 261.504 74.893 275.172C83.0359 283.3 92.9015 289.307 103.631 292.841C82.2587 296.747 62.9409 303.725 47.9614 313.323C31.0066 324.186 16.5 340.662 16.5 362.102V389.799V407.299H34H98.75H116.25V389.799V357.486C116.25 342.503 121.504 329.271 129.532 320.035L155.019 290.717C170.658 284.055 183.45 272.093 191.225 257.194L196.42 247.238L189.534 238.367C176.342 221.372 169.915 199.636 172.209 177.806ZM322.466 238.367L315.58 247.238L320.775 257.194C328.55 272.093 341.342 284.055 356.981 290.717L382.468 320.035C390.496 329.271 395.75 342.503 395.75 357.486V389.799V407.299H413.25H478H495.5V389.799V362.102C495.5 340.662 480.993 324.186 464.039 313.323C449.059 303.725 429.741 296.747 408.369 292.841C419.098 289.307 428.964 283.3 437.107 275.172C450.801 261.504 458.5 242.96 458.5 223.616C458.5 204.273 450.801 185.728 437.107 172.061C423.414 158.394 404.85 150.722 385.5 150.722C371.951 150.722 359.227 154.363 348.204 160.964L338.624 166.701L339.791 177.806C342.085 199.636 335.658 221.372 322.466 238.367ZM376.25 407.299H393.75V389.799V357.486C393.75 329.451 374.156 307.415 349.765 293.366C324.901 279.046 291.713 270.743 256 270.743C220.287 270.743 187.099 279.046 162.235 293.366C137.844 307.415 118.25 329.451 118.25 357.486V389.799V407.299H135.75H376.25ZM314.148 128.603C298.72 113.205 277.803 104.56 256 104.56C234.197 104.56 213.28 113.205 197.852 128.603C182.424 144.002 173.75 164.895 173.75 186.687C173.75 208.479 182.424 229.372 197.852 244.771C213.28 260.169 234.197 268.813 256 268.813C277.803 268.813 298.72 260.169 314.148 244.771C329.576 229.372 338.25 208.479 338.25 186.687C338.25 164.895 329.576 144.002 314.148 128.603Z" stroke="black" stroke-width="35"/>
</g>
<defs>
<clipPath id="clip0_5_2">
<rect width="512" height="512" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.7 KiB

4
assets/js/dark-mode.js Normal file
View file

@ -0,0 +1,4 @@
if (window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark');
}

57
assets/js/i18n.js Normal file
View file

@ -0,0 +1,57 @@
function getTranslation(obj, path) {
return path.reduce((xs, x) => (xs && xs[x] !== undefined) ? xs[x] : undefined, obj);
}
function changeLanguage(lang) {
document.cookie = `lang=${lang};path=/;max-age=31536000;SameSite=None${window.location.protocol === 'https:' ? '; Secure' : ''}`;
fetch(`/assets/i18n/${lang}.json`)
.then(response => response.json())
.then(translations => {
document.querySelectorAll('[data-i18n]').forEach(elem => {
const keys = elem.getAttribute('data-i18n').split('.');
const translation = getTranslation(translations, keys);
if (translation !== undefined) {
elem.innerHTML = translation;
}
});
document.querySelectorAll('[data-i18n-placeholder]').forEach(elem => {
const keys = elem.getAttribute('data-i18n-placeholder').split('.');
const translation = getTranslation(translations, keys);
if (translation !== undefined) {
elem.placeholder = translation;
}
});
});
document.getElementById('languageSelect').value = lang;
}
function getCookie(name) {
let cookieArray = document.cookie.split(';');
for(let i = 0; i < cookieArray.length; i++) {
let cookiePair = cookieArray[i].split('=');
if(name == cookiePair[0].trim()) {
return decodeURIComponent(cookiePair[1]);
}
}
return null;
}
function initializeLanguage() {
const availableLanguages = ['en', 'de']; // Extend as necessary
let userLang = getCookie('lang');
if (!userLang) {
let systemLang = navigator.language.split('-')[0];
userLang = availableLanguages.includes(systemLang) ? systemLang : 'en';
}
changeLanguage(userLang);
}
// Run the initialization function when the page loads
initializeLanguage();

17
assets/js/nav-scroll.js Normal file
View file

@ -0,0 +1,17 @@
window.addEventListener('scroll', function() {
const navbar = document.getElementById('navbar');
const buttons = document.querySelectorAll('#navButton'); // Select all nav buttons
if (window.scrollY > 0) {
navbar.classList.add('scrolled');
buttons.forEach(button => {
button.classList.remove('light');
button.classList.add('dark');
});
} else {
navbar.classList.remove('scrolled');
buttons.forEach(button => {
button.classList.remove('dark');
button.classList.add('light');
});
}
});

69
index.html
View file

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TBZ Community</title>
<title data-i18n="title">TBZ Community</title>
<link rel="stylesheet" href="https://unpkg.com/chota@latest">
<link rel="stylesheet" href="/assets/css/main.css" />
<link rel="stylesheet" href="/assets/css/home.css" />
@ -11,52 +11,73 @@
</head>
<body>
<nav id="navbar">
<div class="nav-container">
<a href="/" class="nav-logo">
<img src="/assets/img/nav-logo.svg" alt="TBZ Community Logo">
</a>
<a data-i18n="nav.links.git" id="navButton" class="button outline light">Git</a>
<a data-i18n="nav.links.forum" id="navButton" class="button outline light">Forum</a>
</div>
<div class="language-switcher">
<a data-i18n="nav.links.signup" class="button primary" href="/signup/">Sign Up</a>
<select id="languageSelect" onchange="changeLanguage(this.value)">
<option value="en">🇬🇧 English</option>
<option value="de">🇨🇭 German</option>
</select>
</div>
</nav>
<div class="header">
<div class="header-container">
<h1>Welcome to the TBZ Community!</h1>
<p>A student-driven hub for the students of the Technische Berufsschule Zürich to collaborate and innovate.</p>
<h1 data-i18n="home.header.welcome">Welcome to the TBZ Community!</h1>
<p data-i18n="home.header.description">A student-driven hub for the students of the Technische Berufsschule Zürich to collaborate and innovate.</p>
</div>
<!-- <img class="banner" src="" alt="The TBZ Tower, with Zurich's Hard Tower in the background." /> -->
</div>
<div class="content home">
<section class="services">
<h2>Services</h2>
<p class="subtitle">Services hosted by students, for students, at the TBZ.</p>
<h2 data-i18n="home.services.title">Services</h2>
<p class="subtitle" data-i18n="home.services.subtitle">Services hosted by students, for students, at the TBZ.</p>
<div class="row">
<div class="col-4 service">
<h3>Forum</h3>
<p>Join the conversation! Our forum is your go-to destination for all things TBZ.</p>
<h3 data-i18n="home.services.forum.title">Forum</h3>
<p data-i18n="home.services.forum.description">Join the conversation! Our forum is your go-to destination for all things TBZ.</p>
<div class="button-container">
<a class="button primary" href="#">Visit</a>
<a class="button primary" href="#" data-i18n="home.buttons.visit">Visit</a>
</div>
</div>
<div class="col-4 service">
<h3>Git Forge</h3>
<p>Collaborate on projects with our Git repository. Powered by Forgejo.</p>
<h3 data-i18n="home.services.git.title">Git Forge</h3>
<p data-i18n="home.services.git.description">Collaborate on projects with our Git repository. Powered by Forgejo.</p>
<div class="button-container">
<a class="button primary" href="#">Visit</a>
<a class="button primary" href="#" data-i18n="home.buttons.visit">Visit</a>
</div>
</div>
<div class="col-4 service">
<h3>Test</h3>
<p>Lorem Ipsum Dolor Sit Amet This Is Random Bullshit To Fill This Card.</p>
<h3 data-i18n="home.services.sso.title">SSO</h3>
<p data-i18n="home.services.sso.description">One Account for all things TBZ Community! Log in with a singular account, and forget to re-set passwords individually (because you don't have to, anymore).</p>
<div class="button-container">
<a class="button primary" href="#">Visit</a>
<a class="button primary" href="#" data-i18n="home.buttons.visit">Visit</a>
</div>
</div>
</div>
</section>
<section class="join">
<h2>What're you waiting for?</h2>
<p class="subtitle">Ready to dive in? Join us now and start contributing to the TBZ Community Hub.</p>
<h2 data-i18n="home.join.title">What're you waiting for?</h2>
<p class="subtitle" data-i18n="home.join.subtitle">Ready to dive in? Join us now and start contributing to the TBZ Community Hub.</p>
<div class="button-container">
<a class="button primary" href="#">Join us</a>
<a class="button secondary" href="#">Explore Projects</a>
<a class="button primary" href="/signup/" data-i18n="home.buttons.join">Join us</a>
<a class="button secondary" href="#" data-i18n="home.buttons.explore">Explore Projects</a>
</div>
</section>
</div>
<div class="notice">
<p>This is an unofficial community platform run by students, for students of the <a href="https://tbz.ch">TBZ</a>. For inquiries and support, please contact us <a href="/contact">here</a>.</p>
<p>This website's been made using the <a href="https://jenil.github.io/chota/">chota</a> CSS framework. You can find this site's source code <a href="https://gitpot.dev">here</a>.</p>
</div>
</body>
<footer>
<div class="notice">
<p data-i18n="home.notice.content">This is an unofficial community platform run by students, for students of the TBZ. For inquiries and support, please contact us <a href='/contact'>here</a>.</p>
<p data-i18n="home.footer.source">This website's been made using the <a href='https://jenil.github.io/chota/'>chota</a> CSS framework. You can find this site's source code <a href='https://git.tbz-it.com/community/website'>here</a>.</p>
</div>
</footer>
</body>
<script src="/assets/js/dark-mode.js"></script>
<script src="/assets/js/nav-scroll.js"></script>
<script src="/assets/js/i18n.js"></script>
</html>

41
signup/index.html
View file

@ -21,42 +21,50 @@
</script>
</head>
<body>
<nav>
<div class="language-switcher">
<select id="languageSelect" onchange="changeLanguage(this.value)">
<option value="en">🇬🇧 English</option>
<option value="de">🇨🇭 German</option>
</select>
</div>
</nav>
<div class="content-container">
<div class="blur"></div>
<div class="signup content banner"></div>
<div class="signup content container">
<div class="signup form">
<button class="button clear nopadding" onclick="window.history.back()">← Back</button>
<h2>TBZ Community Signup Form</h2>
<button data-i18n="signup.header.back" class="button clear nopadding" onclick="window.history.back()">← Back</button>
<h2 data-i18n="signup.header.title">TBZ Community Signup Form</h2>
<form name="registrationForm" onsubmit="return validateEmail()" method="post">
<label for="fullName">Full Name: <span class="required">*</span></label><br>
<input type="text" id="fullName" name="fullName" placeholder="Full Name" required><br>
<label data-i18n="signup.form.labels.fullname" for="fullName">Full Name:</label><span data-i18n="signup.form.legends.required" class="required">*</span><br>
<input type="text" id="fullName" name="fullName" data-i18n-placeholder="signup.form.labels.fullnamePlaceholder" placeholder="Full Name" required><br>
<label for="username">Username: <span class="required">*</span></label><br>
<input type="text" id="username" name="username" placeholder="Username" required><br>
<label data-i18n="signup.form.labels.username" for="username">Username:</label><span data-i18n="signup.form.legends.required" class="required">*</span><br>
<input type="text" id="username" name="username" data-i18n-placeholder="signup.form.labels.usernamePlaceholder" placeholder="Username" required><br>
<label for="email">Email: <span class="required">*</span></label><br>
<input type="email" id="email" name="email" placeholder="full.name@edu.tbz.ch" required><br>
<label data-i18n="signup.form.labels.email" for="email">Email:</label><span data-i18n="signup.form.legends.required" class="required">*</span><br>
<input type="email" id="email" name="email" data-i18n-placeholder="signup.form.labels.emailPlaceholder" placeholder="full.name@edu.tbz.ch" required><br>
<label for="sshKey">SSH-Key: <span class="optional">(optional)</span></label><br>
<textarea id="sshKey" name="sshKey" placeholder="ssh-ed25519 AAAAXXXXXXXYYYYYYYZZZZZZZ+00a" rows="4"></textarea><br>
<label data-i18n="signup.form.labels.ssh" for="sshKey">SSH-Key:</label><span class="optional">(optional)</span><br>
<textarea id="sshKey" name="sshKey" data-i18n-placeholder="signup.form.labels.sshPlaceholder" placeholder="ssh-ed25519 AAAAXXXXXXXYYYYYYYZZZZZZZ+00a" rows="4"></textarea><br>
<p>
<p data-i18n="signup.form.legal.codeofconduct">
Signing up implies that you agree to abide by our code of conduct.<br>
No drama. Be respectful. Have fun. We're all trying, and we're all in this together :)
</p>
<input type="checkbox" id="apprenticeship" name="apprenticeship">
<label for="apprenticeship">I visit the TBZ and have an apprenticeship. <span class="required">*</span></label><br>
<label data-i18n="signup.form.legal.apprenticeVerify" for="apprenticeship">I visit the TBZ and have an apprenticeship.</label><span data-i18n="signup.form.legends.required" class="required">*</span><br>
<input type="checkbox" id="terms" name="terms" required>
<label for="terms">I agree! I have read and understood the terms of service and privacy policy. <span class="required">*</span></label><br><br>
<label data-i18n="signup.form.legal.termsVerify" for="terms">I agree! I have read and understood the terms of service and privacy policy.</label><span data-i18n="signup.form.legends.required" class="required">*</span><br><br>
<p><span class="required">*</span> = required</p>
<p><span data-i18n="signup.form.legends.required" class="required">*</span><span data-i18n="signup.form.legends.requiredText"> = required</span><br>
<span data-i18n="signup.form.legends.optional" class="optional">*</span><span data-i18n="signup.form.legends.optionalText"> = optional</span></p>
<div class="button-container">
<input type="submit" value="Register">
<a class="button secondary outline" href="#">Login</a>
@ -66,5 +74,6 @@
</div>
</div>
<script src="/assets/js/i18n.js"></script>
</body>
</html>