Skip to content
This repository has been archived by the owner on Nov 16, 2023. It is now read-only.

Commit

Permalink
Completed Sign Up CSS, and more
Browse files Browse the repository at this point in the history 
- Completed the CSS for the Sign Up Page
- Added About Us, TOS and Privacy Pages
- Rewrote the TOS and partially rewrote the Privacy to in accordance with the new site & mdoern information
  • Loading branch information
@zaccomode
zaccomode committed May 30, 2020
1 parent 999dd8f commit 3d57988
Show file tree
Hide file tree
Showing 8 changed files with 530 additions and 19 deletions.
84 changes: 84 additions & 0 deletions aboutus.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<!-- ABOUT US -->

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

<title>About Us | STiBaRC</title>

<!-- CSS -->
<link rel="stylesheet" href="./css/global.css">
<link rel="stylesheet" href="./css/themes/default.css">

<link rel="stylesheet" href="./css/stibarc-css.css">

<!-- Google Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

</head>

<body>

<!-- Nav Bar -->
<nav class="nav">
<div class="nav-container">
<a class="logo" href="./"><img src="./design_files/logo.png" alt="STiBaRC Logo"></a>
<span class="flex-grow"></span>

<!-- Logged Out Buttons -->
<span id="loggedout">
<span class="nav-items">
<input class="input primaryAlt" placeholder="Search">
<a href="login.html" class="button m-left m-right primaryAlt">Log In</a>
<a href="signup.html" class="button">Sign Up</a>
</span>
</span>

<!-- Logged In Buttons -->
<span id="loggedin">
<span class="nav-items">
<input class="input primaryAlt" placeholder="Search">
<button class="button" style="margin-left: 2rem"><i class="material-icons" style="vertical-align: middle; line-height: 5px;">keyboard_arrow_down</i></button>
</span>
</span>
</div>
</nav>

<!-- Main Body -->
<main class="container nav-margin margin-bottom">

<div class="row">
<div class="col s12">
<br>

<!-- Hero Header -->
<div class="hero large primary center" style="margin-bottom: 1.75rem;">
<h1>About STiBaRC</h1>
</div>
</div>

<div class="col s12 m9">
<p>I was going to come up with some really cool story, but then I realised I know nothing about the history of STiBaRC, lol. Uh, don't mind me. - Isaac</p>
</div>

</div>

</main>

<footer>
<div class="footer-container">
<a href="css.html" style="text-align: center"><i> © 2020 STiBaRC Team</i></a>
<div style="flex-direction: row; margin: 10px;">
<a href="./" class="button footer primary">Home</a>
<button class="button footer alt">About Us</button>
<button class="button footer alt">Terms of Service</button>
<button class="button footer alt">Privacy</button>
</div>
</div>
</footer>

</body>
</html>
80 changes: 80 additions & 0 deletions css/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -264,6 +264,74 @@
border: none;
}

/* Checkboxes */
label {
display: flex;
flex-direction: row;
position: relative;
padding-left: 30px;
margin-bottom: 8px;
margin-right 20px;

cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.label input {
position: absolute;
opacity: 0;
height: 0;
width: 0;

cursor: pointer;
}

.label input:checked ~ .checkmark {
background-color: var(--primaryLight);
}

.label input ~ .checkmark .material-icons {
display: none;
}

.label input:checked ~ .checkmark .material-icons {
display: block;
}

.checkmark {
position: absolute;
top: -25%;
left: 0;
height: 25px;
width: 25px;
border-radius: 50%;

border: 1px solid var(--white);
background-color: var(--primaryLight);

display: flex;
align-items: center;
justify-content: center;
}

.checkmark .material-icons {
vertical-align: middle;
font-size: 15px;
}

.checkmark:after {
content: "";
position: absolute;
display: none;
}

.label input:checked ~ .checkmark:after {
display: block;
}

/* Buttons */
.button{
display: inline-block;
Expand Down Expand Up @@ -412,6 +480,18 @@
}


/* Footer */
.footer-container {
width: 100%;
height: 150px;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}


/* Misc */
.divider {
height: 1px;
Expand Down
21 changes: 14 additions & 7 deletions css/page-specific/login.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,16 +34,15 @@ h4 {

.postconfirmation {
padding-bottom: 2rem;
height: auto;
}

.footer-container {
width: 100%;
height: 150px;

.preconfirmation, .confirmation, .postconfirmation {
display: none;
}

.preconfirmation.visible, .confirmation.visible, .postconfirmation.visible {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

/* Profile Editor */
Expand Down Expand Up @@ -92,6 +91,14 @@ h4 {
margin-top: 0.5rem;
}

.real-name, .email, .birthday {
display: none;
}

.real-name.visible, .email.visible, .birthday.visible {
display: block;
}

/* Inputs */
.input-item {
display: flex;
Expand Down
4 changes: 2 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,8 @@
<div class="hero large primary center" style="margin-bottom: 1.75rem;">
<h1>Welcome to STiBaRC</h1>
<div class="m-bottom">
<button class="button m-right">Sign Up</button>
<button class="button primaryAlt">About Us</button>
<a href="signup.html" class="button m-right">Sign Up</a>
<a href="aboutus.html" class="button primaryAlt">About Us</a>
</div>
</div>
</span>
Expand Down
31 changes: 31 additions & 0 deletions js/signup.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
/* PROFILE CONFIGURATION */
function ToggleEmail() {
var email = document.getElementById("email")
email.classList.toggle("visible");
}

function ToggleRealName() {
var realName = document.getElementById("real-name")
realName.classList.toggle("visible");
}

function ToggleBirthday() {
var birthday = document.getElementById("birthday")
birthday.classList.toggle("visible");
}


/* NAVIGATION */
function SignUp() {
var signUpDiv = document.getElementById("signUpDiv")
var confirmDiv = document.getElementById("confirmDiv")
signUpDiv.classList.toggle("visible")
confirmDiv.classList.toggle("visible")
}

function EmailConfirmed() {
var confirmDiv = document.getElementById("confirmDiv")
var configureDiv = document.getElementById("configureDiv")
confirmDiv.classList.toggle("visible")
configureDiv.classList.toggle("visible")
}
123 changes: 123 additions & 0 deletions privacy.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
<!-- PRIVACY -->

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

<title>Privacy | STiBaRC</title>

<!-- CSS -->
<link rel="stylesheet" href="./css/global.css">
<link rel="stylesheet" href="./css/themes/default.css">

<link rel="stylesheet" href="./css/stibarc-css.css">

<!-- Google Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

</head>

<body>

<!-- Nav Bar -->
<nav class="nav">
<div class="nav-container">
<a class="logo" href="./"><img src="./design_files/logo.png" alt="STiBaRC Logo"></a>
<span class="flex-grow"></span>

<!-- Logged Out Buttons -->
<span id="loggedout">
<span class="nav-items">
<input class="input primaryAlt" placeholder="Search">
<a href="login.html" class="button m-left m-right primaryAlt">Log In</a>
<a href="signup.html" class="button">Sign Up</a>
</span>
</span>

<!-- Logged In Buttons -->
<span id="loggedin">
<span class="nav-items">
<input class="input primaryAlt" placeholder="Search">
<button class="button" style="margin-left: 2rem"><i class="material-icons" style="vertical-align: middle; line-height: 5px;">keyboard_arrow_down</i></button>
</span>
</span>
</div>
</nav>

<!-- Main Body -->
<main class="container nav-margin margin-bottom">

<div class="row">
<div class="col s12">
<br>

<!-- Hero Header -->
<div class="hero large primary center" style="margin-bottom: 1.75rem;">
<h1>Privacy</h1>
</div>
</div>

<div class="col s12 m9">

<p><i>Last Updated 05.30.2020</i></p>

<h1>Definitions</h1>
<p>STiBaRC is a service that can be accessed using the STiBaRC website (stibarc.com), official STiBaRC apps for computers and mobile devices, and third-party software via the STiBaRC API. This service, and any other services created under the STiBaRC branding (such as STiBaRC Records), will be referred to as "the Service". STiBaRC is also the name of the organization that maintains the service, which will be referred to as "the Team". "The Site" refers to stibarc.com and any of its subdomains (such as records.stibarc.com). "The User" refers to any users of the Service. "Official STiBaRC Software" refers to the website and official STiBaRC apps. "Third-party STiBaRC Software" refers to software created by a third party that can be used to access the Service.</p>

<br>

<h1>Use of Information</h1>
<p>The Team has access to the information the User inputs using the Service, including through Official STiBaRC Softwar and Third-party STiBaRC Software. Information that is not public will not be sold, rented, or given to anyone.
<br>
The Team may contact the User using the email address provided on their profile to notify them of events that require action, such as data leaks. The Team will not send automated emails.
<br>
The Team does not use the User's personal information to make automated decisions.</p>

<br>

<h1>Children Under 13</h1>
<p>The Service is not directed to persons under 13 years of age. The User must be at least 13 years of age to create an account or otherwise submit information to the Service.</p>

<br>

<h1>Data Collected</h1>
<p>When the User creates an account, the Service collects the given username, password, name (if provided), email address, birthday, a "bio" and preferences regarding whether this information should be displayed publicly on their profile. If the User donates to STiBaRC, this fact will be stored as part of their profile. The User's IP adress is also collected as part of standard server logs.</p>

<br>

<h1>Security</h1>
<p>All user data is stored separately from the website, on a database not accessibly to the outside world. All access to the database is logged and reviewed frequently.
<br>
In the event that an unauthorized intrusion is detected, all affected Users will be notified appropriately and quickly.
<br>
Information not publicly displayed is not accessible to anybody, even through use of the API, except to the associated User and the Service.</p>

<br>

<h1>Cookies</h1>
<p>The Service may use cookies on the Site and other Official STiBaRC Software. A cookie is a piece of data stored on the device of the User that allows the website to identify a repeat visitor to the Site and improve their access. Use of cookies is not linked to personally identifiable information.
<br>
Cookies may also be used by third parties (see "Tracking"). The Team does not have access to these cookies.</p>

</div>

</div>

</main>

<footer>
<div class="footer-container">
<a href="css.html" style="text-align: center"><i> © 2020 STiBaRC Team</i></a>
<div style="flex-direction: row; margin: 10px;">
<a href="./" class="button footer primary">Home</a>
<button class="button footer alt">About Us</button>
<button class="button footer alt">Terms of Service</button>
<button class="button footer alt">Privacy</button>
</div>
</div>
</footer>
</body>
</html>
Loading

0 comments on commit 3d57988

Please sign in to comment.