Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tidy up tower.js, Home page form fix; #34

Merged
merged 5 commits into from
Jan 21, 2024
Merged

Tidy up tower.js, Home page form fix; #34

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9002346
Tidy up tower.js
cyanedel Jan 19, 2024
0c16325
Home page form fix
cyanedel Jan 19, 2024
244de05
Tidy up tower.js
cyanedel Jan 19, 2024
d954bff
Remove unused function;
cyanedel Jan 19, 2024
a8ea77a
Form modal placement fixes;
cyanedel Jan 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 26 additions & 32 deletions css/home-page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
* {
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
}

body {
margin: 0%;
Expand All @@ -11,9 +15,8 @@ body {
font-family: 'Pacifico', cursive;
}

form {
text-align: center;
}
.mt-16px { margin-top: 16px; }
.mb-16px { margin-bottom: 16px; }

.main-heading {
text-align: center;
Expand Down Expand Up @@ -85,36 +88,27 @@ form {
}

.form {
width: 27%;
background-color: white;
color: black;
border-radius: 16px;
border: 3px solid #31a2ff;
margin-top: -7%;
margin-left: 37%;
z-index: 99;
align-self: center;
bottom: 0;
color: black;
height: fit-content;
left: 0;
margin: auto;
max-width: 400px;
padding: 16px;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 100%;
z-index: 99;
position: fixed;
}

@media screen and (max-width: 1200px) {
.form {
width: 47%;
margin-left: 25%;
}
}

@media screen and (max-width: 600px) {
.form {
width: 96%;
margin-left: 2%;
}
}

.form input {
width: 96%;
padding: 3%;
margin: 0.5% 1% 0px 1%;
width: 100%;
padding: 16px;
border: none;
background: #bfb8b8;
}
Expand All @@ -124,13 +118,13 @@ form {
}

.submit {
width: 96%;
border: none;
margin: 0.5% 1% 0px 1%;
padding: 3.5%;
background: linear-gradient(magenta, #31a2ff, rgb(138, 12, 65));
border: none;
color: white;
font-size: 1.8em;
padding: 3.5%;
width: 100%;
border-radius: 16px;
}

.form input :focus {
Expand Down Expand Up @@ -179,8 +173,8 @@ form {

.container img {
border-radius: 30px;
width: 450px;
height: 350px;
width: 450px;
}

@media screen and (max-width: 1150px) {
Expand Down
2 changes: 1 addition & 1 deletion html/difficulty-levels.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<div class="all-levels">
<img src="../image/icyTower.png" />
<h1>Choose your level</h1>
<a href="../html/tower.html?level=beginer" class="levels" id="level-one"
<a href="../html/tower.html?level=beginner" class="levels" id="level-one"
>Beginner level</a
>
<a href="../html/tower.html?level=advanced" class="levels" id="level-two"
Expand Down
63 changes: 30 additions & 33 deletions html/home-page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
</head>

<body>
<header>
<header style="position: absolute; width: 100%;">
<div class="hide" id="hello-user">
<span id="user-first-name"></span><br>
<span id="user-name"> </span>
Expand All @@ -38,27 +38,29 @@
<br>
<button class="change-form js-toggle-form" data-toggle-to="login" id="change-to-login" type="button">already have an acount? click to login</button>
<form method="get">
<div> <label for="first-name">first name</label>
<div class="mt-16px mb-16px">
<label for="first-name">first name</label>
<input type="text" id="first-name" name="first-name">
</div><br>
<br>
<div> <label for="email">email</label>
</div>
<div class="mt-16px mb-16px">
<label for="email">email</label>
<input name="email-user-name" type="email" id="user-name" placeholder="this will be your user name">
</div><br>
<br>
<div> <label for="pwd">Password</label>
</div>
<div class="mt-16px mb-16px">
<label for="pwd">Password</label>
<br>
<input type="password" id="pasword-first" name="pwd">
<input type="password" id="pasword-first" name="pwd" placeholder="your password">
<span id="message" class="message"></span>
</div> <br>
<br>
<div><label for="verify password">verify Password</label>
<input type="password" id="verify-pwd" name="verify password">
</div>
<div class="mt-16px mb-16px">
<label for="verify password">verify Password</label>
<input type="password" id="verify-pwd" name="verify password" placeholder="retype your password">
<span class="hide" id="verify-message">**Enter the password here again</span>
</div> <br>
<br> <button class="submit" id="sign-in-submit">sign-up</button>
<br>
</div>
<button class="submit" id="sign-in-submit">sign-up</button>
<br />
<span class="message" id="submit-error-message"></span>
</form>
</div>

<div class="form hide" id="login-form" data-form-type="login">
Expand All @@ -67,20 +69,19 @@
<button class="change-form js-toggle-form" data-toggle-to="register" id="change-to-sign" type="button">don't have an account? sign-up</button>
<h2>we are happy to see you again!</h2>
<form>
<div> <label for="user">email</label>
<div class="mt-16px mb-16px">
<label for="user">email</label>
<input type="email" id="email" name="user" required="required">
</div><br>
<br>
<div> <label for="pwd">Password</label>
<br>
</div>
<div class="mt-16px mb-16px">
<label for="pwd">Password</label>
<input type="password" id="pwd" name="pwd" required="required">
</div> <br>
<br>
<div class="hide" id="error-massage">** The
identification process
failed ,one or more of the details is incorrect<br></span>
</div>
<div class="hide" id="error-massage">
<p>** The identification process failed,<br />one or more of the details is incorrect</p>
</div>
<div> <button class="submit" id="login-submit" type="submit">login</button></div>
</form>
</div>
<div id="you-must-login">
<button id="close-modal">
Expand All @@ -92,15 +93,11 @@ <h2>we are happy to see you again!</h2>
<img class="icy-tower-img" src="../image/stone-wall.jpg">
</div>

<div class="container">
<div class="row">
<div class="image">
<a href="../html/icy-tower-home.html" class="game"><img class="icy-img" src="../image/icy-tower-start1.png"></a>
</div>
</div>
<div style="display: flex; height: 100%; width: 100%; justify-content: center; align-items: center;">
<a href="../html/icy-tower-home.html" class="game"><img class="icy-img" src="../image/icy-tower-start1.png" style="margin-top: 50px; width: 40vw;"></a>
</div>

<script src="../js/login-sign-in.js"></script>
<script src="../js/home-page.js"></script>
</body>

</html>
4 changes: 2 additions & 2 deletions html/tower.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,11 @@ <h2>what do you want to do next?</h2>
<a class="link" href="../html/game-scores.html">high scores</a>
</div>
<div id="agree-to-sound" class="overModal">
<button id="close-modal-agreement">
<button class="btn-close">
<img src="../image/x.png" alt="x" />
</button>
<h2>Would you like to play music?</h2>
<button id="agreement" class="link">yes!!!</button>
<button class="btn-agree link">yes!!!</button>
</div>

<footer class="game-score">
Expand Down
Loading