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 all 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
97 changes: 54 additions & 43 deletions css/home-page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,36 @@
box-sizing: border-box;
}

html, body {
height: 100%;
width: 100%;
}

body {
margin: 0%;
background-image: url('../image/background-for-game.png');
background-repeat: no-repeat;
background-size: cover;
text-align: center;
font-family: 'Pacifico', cursive;
margin: 0%;
text-align: center;
}

form {
text-align: center;
body.modal-open {
overflow: hidden;
}

.modal-overlay {
background-color: rgba(0, 0, 0, 0.2);
height: 100%;
position: absolute;
top: 0;
width: 100%;
}

.mt-16px { margin-top: 16px; }
.mb-16px { margin-bottom: 16px; }
.text-start { text-align: left; }

.main-heading {
text-align: center;
font-size: 8.5em;
Expand Down Expand Up @@ -84,37 +101,36 @@ form {
position: relative;
}

.form {
width: 27%;
background-color: white;
color: black;
border: 3px solid #31a2ff;
margin-top: -7%;
margin-left: 37%;
z-index: 99;
align-self: center;
z-index: 99;
.modal {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
position: fixed;
visibility: hidden;
width: 100%;
z-index: -1;
}
.modal.show {
visibility: visible;
z-index: 999;
}

@media screen and (max-width: 1200px) {
.form {
width: 47%;
margin-left: 25%;
}
.modal-dialog {
margin: 80px auto auto auto;
max-width: 500px;
position: relative;
}

@media screen and (max-width: 600px) {
.form {
width: 96%;
margin-left: 2%;
}
.modal-content {
background-color: white;
border-radius: 16px;
border: 3px solid #31a2ff;
padding: 16px;
}

.form input {
width: 96%;
padding: 3%;
margin: 0.5% 1% 0px 1%;
width: 100%;
padding: 16px;
border: none;
background: #bfb8b8;
}
Expand All @@ -124,13 +140,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 +195,8 @@ form {

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

@media screen and (max-width: 1150px) {
Expand Down Expand Up @@ -236,24 +252,19 @@ form {
}

.change-form {
color: #315bff;
border: 1px solid #ccc;
border-radius: 30px;
height: 29px;
border: 1px solid #ccc;
color: #315bff;
font-family: 'Pacifico', cursive;
font-size: 1.1em;
}

.btn-close {
border: none;
position: absolute;
top: 14px;
left: 14px;
display: block;
width: 28px;
height: 28px;
background: url(../image/close-window.png) no-repeat;
font-family: 'Pacifico', cursive;
border: none;
cursor: pointer;
height: 22px;
width: 29px;
}
#close-modal {
color: #aaa;
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
115 changes: 60 additions & 55 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 @@ -30,57 +30,66 @@
<li class="c-rainbow__layer c-rainbow__layer--blue">Icy-Tower</li>
<li class="c-rainbow__layer c-rainbow__layer--green">Icy-Tower</li>
<li class="c-rainbow__layer c-rainbow__layer--yellow">Icy-Tower</li>
</ul>
</div>
</ul>
</div>
</header>
<div class="form hide" id="sign-in-form" data-form-type="register">
<button class="btn-close" type="button"></button>
<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>
<input type="text" id="first-name" name="first-name">
</div><br>
<br>
<div> <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>
<br>
<input type="password" id="pasword-first" name="pwd">
<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">
<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>
<span class="message" id="submit-error-message"></span>


<div id="modal-register" class="modal hide" data-form-type="register">
<div class="modal-dialog">
<div class="form modal-content">
<div class="text-start"><button class="btn-close btn-close-modal" type="button"></button></div>
<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 class="mt-16px mb-16px">
<label for="first-name">first name</label>
<input type="text" id="first-name" name="first-name">
</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>
<div class="mt-16px mb-16px">
<label for="pwd">Password</label>
<br>
<input type="password" id="pasword-first" name="pwd" placeholder="your password">
<span id="message" class="message"></span>
</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>
<button class="submit" id="sign-in-submit">sign-up</button>
<br />
<span class="message" id="submit-error-message"></span>
</form>
</div>
</div>
</div>

<div class="form hide" id="login-form" data-form-type="login">
<button class="btn-close" type="button"></button>
<br>
<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>
<input type="email" id="email" name="user" required="required">
</div><br>
<br>
<div> <label for="pwd">Password</label>
<br>
<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 id="modal-login" class="modal hide" data-form-type="login">
<div class="modal-dialog">
<div class="form modal-content">
<div class="text-start"><button class="btn-close btn-close-modal" type="button"></button></div>
<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 class="mt-16px mb-16px">
<label for="user">email</label>
<input type="email" id="email" name="user" required="required">
</div>
<div class="mt-16px mb-16px">
<label for="pwd">Password</label>
<input type="password" id="pwd" name="pwd" required="required">
</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> <button class="submit" id="login-submit" type="submit">login</button></div>
</div>
</div>
<div id="you-must-login">
<button id="close-modal">
Expand All @@ -92,15 +101,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