Skip to content
Snippets Groups Projects
client.html 4.23 KiB
Newer Older
  • Learn to ignore specific revisions
  • Gustav Elmqvist's avatar
    Gustav Elmqvist committed
    <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">
    
    
    			<div class="welcome">
    				<img src="wimage.png" alt="logo and slogan">
    				<div class="form-elements" id="login">
    
    Oliver Green's avatar
    Oliver Green committed
    					<form id="loginform">
    
    Gustav Elmqvist's avatar
    Gustav Elmqvist committed
    						<h2>Login</h2>
    
    						<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>
    
    Oliver Green's avatar
    Oliver Green committed
    							<input type="password" id="password" name="password" size="18">
    
    						</div>
    						<input type="submit" value="Login">
    
    Oliver Green's avatar
    Oliver Green committed
    						<div id="message"></div>
    
    Oliver Green's avatar
    Oliver Green committed
    					<form id="signupform">
    
    						<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>
    
    Oliver Green's avatar
    Oliver Green committed
    							<input type="password" id="password" name="password" size="18">
    
    						</div>
    						<div class="form-input">
    							<label for="password2">Repeat PSW</label>
    
    Oliver Green's avatar
    Oliver Green committed
    							<input type="password" id="password2" name="password2" size="18">
    
    						</div>
    						<div class="form-input">
    							<input type="submit" value="Sign Up">
    						</div>
    
    Oliver Green's avatar
    Oliver Green committed
    						<div id="message"></div>
    
    					</form>
    				</div>
    			</div>
    		</script>
    
    	<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">
    
    Oliver Green's avatar
    Oliver Green committed
    				<h3 id=home-username>Home</h3>
    
    				<div class="user-data-elements">
    					<div class="data-field">	
    						<label for="home-gender"></label>
    						<p id=home-gender></p>
    					</div>
    
    					<div class="data-field">	
    						<label for="home-location"></label>
    						<p id=home-location></p>
    					</div>
    
    					<div class="data-field">	
    						<label for="home-email"></label>
    						<p id=home-email></p>
    					</div>
    				</div>
    
    			</div>
    
    			<div id="Browse" class="tabcontent">
    				<h3>Browse</h3>
    				<p>Here you can browse very cool stuff.</p>
    			</div>
    
    			<div id="Account" class="tabcontent">
    
    				<button id="logoutbutton">Log out</button>
    				<div id="message1"></div>
    
    				<h3>Account</h3>
    				<p>Here you can change your account information</p>
    
    
    				<form id="changepassform">
    					<h2>Change password</h2>
    					<div class="form-input">
    						<label for="oldpassword">Old password</label>
    						<input type="password" id="oldpassword" name="oldpassword" size="18">
    					</div>
    					<div class="form-input">
    						<label for="password">New password</label>
    						<input type="password" id="password" name="password" size="18">
    					</div>
    					<div class="form-input">
    						<label for="password2">Confirm password</label>
    						<input type="password" id="password2" name="password2" size="18">
    					</div>
    					<input type="submit" value="Confirm change">
    					<div id="message2"></div>
    				</form>
    
    			</div>
    	</script>
    </head>
    
    <body style="background-color: antiquewhite;">
    	<div id="pagecontent">
    
    	</div>
    </body>
    
    
    Gustav Elmqvist's avatar
    Gustav Elmqvist committed
    </html>