Skip to content
Snippets Groups Projects
Commit b72fd83b authored by Oliver Green's avatar Oliver Green
Browse files

Merge branch 'main' of github.com:OliverGreen27/TDDD97-Webprog into main

parents 8972dbdd 0e12a2da
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
client.css
+ 44
− 0
View file @ b72fd83b
/* CSS for the welcome page */
.welcome {
display: flex;
justify-content: center;
......@@ -5,6 +7,10 @@
margin-top: 100px;
}
.welcome img {
mix-blend-mode: color-burn;
}
.form-elements {
display: flex;
flex-direction: column;
......@@ -20,4 +26,42 @@
input[type=text]:focus {
background-color: white;
}
/* CSS for the profile page */
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
\ No newline at end of file
client.html
+ 39
− 14
View file @ b72fd83b
<html>
<head>
<link href="client.css" type="text/css" rel="stylesheet">
<script src="client.js" type="text/javascript"></script>
<script src="serverstub.js" type="text/javascript"></script>
<script type="text/view" id="welcomeview">
<head>
<link href="client.css" type="text/css" rel="stylesheet">
<script src="client.js" type="text/javascript"></script>
<script src="serverstub.js" type="text/javascript"></script>
<script type="text/view" id="welcomeview">
<div class="welcome">
<img src="wimage.png" alt="logo and slogan">
<div class="form-elements" id="login">
<form id="loginform">
<h2>Login</h2>
<div class="form-input">
<label for="email">Email</label>
<input type="text" id="email" name="email" size="18">
......@@ -67,13 +69,36 @@
</div>
</div>
</script>
<script type="text/view" id="profileview">
<h1>lOGIN SIDA</h1>
</script>
</head>
<body style="background-color: antiquewhite;">
<div id="pagecontent">
</div>
</body>
<script type="text/view" id="profileview">
<!-- Tab links -->
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Home')" id="defaultOpen">Home</button>
<button class="tablinks" onclick="openTab(event, 'Browse')">Browse</button>
<button class="tablinks" onclick="openTab(event, 'Account')">Account</button>
</div>
<!-- Tab content -->
<div id="Home" class="tabcontent">
<h3>Home</h3>
<p>Welcome to your homepage.</p>
</div>
<div id="Browse" class="tabcontent">
<h3>Browse</h3>
<p>Here you can browse very cool stuff.</p>
</div>
<div id="Account" class="tabcontent">
<h3>Account</h3>
<p>Here you can change your account information</p>
</div>
</script>
</head>
<body style="background-color: antiquewhite;">
<div id="pagecontent">
</div>
</body>
</html>
\ No newline at end of file
client.js
+ 26
− 1
View file @ b72fd83b
......@@ -131,4 +131,29 @@ function validatePassword(form, formID) {
return false;
}
return true;
}
\ No newline at end of file
}
function openTab(event, tabName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(tabName).style.display = "block";
event.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
\ No newline at end of file
welcome.html deleted 100644 → 0
+ 0
− 69
View file @ 8972dbdd
<html style="background-color: antiquewhite;">
<head>
<link href="welcome.css" type="text/css" rel="stylesheet">
<script src="client.js" type="text/javascript"></script>
<script src="serverstub.js" type="text/javascript"></script>
</head>
<body>
<div class="welcome">
<img src="wimage.png" alt="logo and slogan">
<div class="form-elements" id="login">
<form>
<div class="form-input">
<label for="email">Email</label>
<input type="text" id="email" name="email" size="18">
</div>
<div class="form-input">
<label for="password">Password</label>
<input type="text" id="password" name="password" size="18">
</div>
<input type="submit" value="Login">
</form>
<form>
<h2>Sign up here</h2>
<div class="form-input">
<label for="fname">First name</label>
<input type="text" id="fname" name="fname" size="18">
</div>
<div class="form-input">
<label for="lname">Family name</label>
<input type="text" id="lname" name="lname" size="18">
</div>
<div class="form-input">
<label for="gender">Gender</label>
<select id="gender" name="gender" style="width:169;">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-input">
<label for="city">City</label>
<input type="text" id="city" name="city" size="18">
</div>
<div class="form-input">
<label for="country">Country</label>
<input type="text" id="country" name="country" size="18">
</div>
<div class="form-input">
<label for="email">Email</label>
<input type="text" id="email" name="email" size="18">
</div>
<div class="form-input">
<label for="password">Password</label>
<input type="text" id="password" name="password" size="18">
</div>
<div class="form-input">
<label for="password2">Repeat PSW</label>
<input type="text" id="password2" name="password2" size="18">
</div>
<div class="form-input">
<input type="submit" value="Sign Up">
</div>
</form>
</div>
</div>
</body>
</html
>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment