Skip to content

Commit

Permalink
Merge pull request #34 from cyanedel/main
Browse files Browse the repository at this point in the history 
Tidy up tower.js, Home page form fix;
  • Loading branch information
@chavi362
chavi362 authored Jan 21, 2024
2 parents f5d22c7 + a8ea77a commit f1ef0ae
Show file tree
Hide file tree
Showing 6 changed files with 446 additions and 371 deletions.
97 changes: 54 additions & 43 deletions css/home-page.css
View file
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
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
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
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

0 comments on commit f1ef0ae

Please sign in to comment.