Progress with homepage
This commit is contained in:
Stelian Tsekov
parent
a34bc75190
commit
c6fff10745
6 changed files with 173 additions and 2 deletions
|
|
@ -32,6 +32,7 @@ section {
|
|||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 2em 0 2em;
|
||||
}
|
||||
|
||||
.header h1,
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
:root {
|
||||
--color-primary: #00A0E4;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0em;
|
||||
|
|
|
|||
79
assets/css/signup.css
Normal file
79
assets/css/signup.css
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
button.nopadding {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.blur {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
position: absolute;
|
||||
backdrop-filter: blur(8px) brightness(80%);
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.signup.form {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.signup.container {
|
||||
padding: 2em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.signup.banner {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
content: '';
|
||||
width: 50%;
|
||||
height: 100vh;
|
||||
background: url(/assets/img/banner-tbz-tower-1600x879.jpg) no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.optional {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.content-container {
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.signup.content.container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.blur {
|
||||
width: 100%;
|
||||
height: 25vh;
|
||||
}
|
||||
|
||||
.signup.banner {
|
||||
width: 100%;
|
||||
height: 25vh;
|
||||
}
|
||||
|
||||
.signup.form {
|
||||
min-width: min-content;
|
||||
max-width: max-content;
|
||||
}
|
||||
}
|
||||
16
assets/img/favicon.svg
Normal file
16
assets/img/favicon.svg
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1_2)">
|
||||
<mask id="mask0_1_2" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="101" width="512" height="310">
|
||||
<path d="M256 101.558C275.803 101.558 294.795 109.409 308.797 123.385C322.8 137.362 330.667 156.317 330.667 176.082C330.667 195.847 322.8 214.803 308.797 228.779C294.795 242.755 275.803 250.606 256 250.606C236.197 250.606 217.205 242.755 203.203 228.779C189.2 214.803 181.333 195.847 181.333 176.082C181.333 156.317 189.2 137.362 203.203 123.385C217.205 109.409 236.197 101.558 256 101.558ZM106.667 154.789C118.613 154.789 129.707 157.983 139.307 163.732C136.107 194.181 145.067 224.417 163.413 248.051C152.747 268.492 131.413 282.545 106.667 282.545C89.6928 282.545 73.4142 275.816 61.4118 263.836C49.4095 251.857 42.6667 235.609 42.6667 218.667C42.6667 201.726 49.4095 185.478 61.4118 173.499C73.4142 161.519 89.6928 154.789 106.667 154.789ZM405.333 154.789C422.307 154.789 438.586 161.519 450.588 173.499C462.591 185.478 469.333 201.726 469.333 218.667C469.333 235.609 462.591 251.857 450.588 263.836C438.586 275.816 422.307 282.545 405.333 282.545C380.587 282.545 359.253 268.492 348.587 248.051C366.933 224.417 375.893 194.181 372.693 163.732C382.293 157.983 393.387 154.789 405.333 154.789ZM117.333 373.039C117.333 328.964 179.413 293.192 256 293.192C332.587 293.192 394.667 328.964 394.667 373.039V410.302H117.333V373.039ZM0 410.302V378.363C0 348.766 40.32 323.853 94.9333 316.614C82.3467 331.093 74.6667 351.108 74.6667 373.039V410.302H0ZM512 410.302H437.333V373.039C437.333 351.108 429.653 331.093 417.067 316.614C471.68 323.853 512 348.766 512 378.363V410.302Z" fill="black"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_1_2)">
|
||||
<path d="M0 511.93H512L0 -0.070343V511.93Z" fill="#00A0E4"/>
|
||||
<path d="M512 -0.070343H0L512 511.93V-0.070343Z" fill="white"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1_2">
|
||||
<rect width="512" height="512" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2 KiB |
|
|
@ -3,17 +3,18 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>TBZ Community Hub</title>
|
||||
<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" />
|
||||
<link rel="icon" href="/assets/img/favicon.svg" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="header-container">
|
||||
<h1>Welcome to the TBZ Community!</h1>
|
||||
<p>A student-driven hub for the TBZ students to collaborate and innovate.</p>
|
||||
<p>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>
|
||||
|
|
|
|||
70
signup/index.html
Normal file
70
signup/index.html
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>TBZ Community | Registration</title>
|
||||
<link rel="stylesheet" href="https://unpkg.com/chota@latest">
|
||||
<link rel="stylesheet" href="/assets/css/main.css" />
|
||||
<link rel="stylesheet" href="/assets/css/signup.css" />
|
||||
<link rel="icon" href="/assets/img/favicon.svg" />
|
||||
<script>
|
||||
function validateEmail() {
|
||||
var email = document.forms["registrationForm"]["email"].value;
|
||||
var regex = /^[a-zA-Z0-9._%+-]+@(edu\.tbz\.ch|tbz\.ch)$/;
|
||||
if (!regex.test(email)) {
|
||||
alert("Please provide a TBZ Email address.\nEnds with '@edu.tbz.ch' or '@tbz.ch'.");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<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>
|
||||
|
||||
<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 for="username">Username: <span class="required">*</span></label><br>
|
||||
<input type="text" id="username" name="username" 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 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>
|
||||
|
||||
<p>
|
||||
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>
|
||||
|
||||
<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>
|
||||
|
||||
<p><span class="required">*</span> = required</p>
|
||||
|
||||
<div class="button-container">
|
||||
<input type="submit" value="Register">
|
||||
<a class="button secondary outline" href="#">Login</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue