Merge pull request #31 from KaosElegent/ui-login

Minor changes made to the UI

.gitignore

@@ -1,2 +1,3 @@
 .DS_Store
-*.DS_Store
+*.DS_Store
+node_modules

CONTRIBUTING.md

@@ -1,15 +1,19 @@
 <!-- documentation start -->
+
 # Contributing
+
 We love pull requests from everyone. By participating in this project, you agree to abide by the [**`Code Of Conduct`**](CODE_OF_CONDUCT.md).
 
 ## Steps
+
 1. [**Fork**](https://help.github.com/articles/fork-a-repo/) this project
 2. [**Clone**](https://help.github.com/articles/fork-a-repo/#step-2-create-a-local-clone-of-your-fork) your forked version
-5. **Create a [branch](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches#working-with-branches)**
-6. **[Commit](https://help.github.com/articles/adding-a-file-to-a-repository-using-the-command-line/) your changes** *(write a short descriptive message of what you have done)*
-7. **Run prettier** `npx prettier . --write ` [(Guide to install prettier on your machine)](https://prettier.io/docs/en/install)
-8. [**Push**](https://help.github.com/articles/pushing-to-a-remote/) your changes to your forked version
-9. Go to the original project on GitHub & **Create a [Pull Request](https://help.github.com/articles/about-pull-requests/)**
+3. **Create a [branch](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches#working-with-branches)**
+4. **[Commit](https://help.github.com/articles/adding-a-file-to-a-repository-using-the-command-line/) your changes** _(write a short descriptive message of what you have done)_
+5. **Run prettier** `npx prettier . --write ` [(Guide to install prettier on your machine)](https://prettier.io/docs/en/install)
+6. [**Push**](https://help.github.com/articles/pushing-to-a-remote/) your changes to your forked version
+7. Go to the original project on GitHub & **Create a [Pull Request](https://help.github.com/articles/about-pull-requests/)**
 
 ## Done 🥳🎉
+
 <!-- documentation end -->

README.md

@@ -60,6 +60,7 @@ We welcome contributions from the community to help improve the Icy Tower Game.
 Please ensure that your contributions adhere to our [Code of Conduct](CODE_OF_CONDUCT.md).
 
 ## Contributers
+
 Thank you to:
 
 <a href="https://github.com/chavi362/Icy-Tower/graphs/contributors">

css/home-page.css

@@ -32,18 +32,18 @@ form {
   -webkit-text-fill-color: transparent;
   -moz-text-fill-color: transparent;
 }
-.icy-tower-wrap{
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    z-index: -1;
-    margin: auto;
-    width: 100vw;
-    align-items: center;
+.icy-tower-wrap {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+  margin: auto;
+  width: 100vw;
+  align-items: center;
 }
-.icy-tower-img{
-    width: 60vw;
-    margin-inline: 20vw;
+.icy-tower-img {
+  width: 60vw;
+  margin-inline: 20vw;
 }
 
 @media screen and (max-width: 1200px) {
@@ -217,7 +217,7 @@ form {
   background: white;
   font-family: 'Pacifico', cursive;
 }
-#open-form:hover{
+#open-form:hover {
   transform: scale(1.1);
 }
 
@@ -276,12 +276,12 @@ form {
   margin-left: 42.5%;
 }
 
-.rainbow-text{
+.rainbow-text {
   z-index: 50;
-	position: relative;
-	color: #000;
-	background: #fff;
-	mix-blend-mode: multiply;
+  position: relative;
+  color: #000;
+  background: #fff;
+  mix-blend-mode: multiply;
   overflow: hidden;
   font-size: 8.5em;
   /* text-shadow: 0 2px 4px rgba(0,0,0,0.5); */
@@ -290,71 +290,86 @@ form {
   font-weight: bold; /* Added to make the text bold */
   opacity: 8000000; /* Adjust the opacity value as needed */
 }
-.rainbow-text::before{
-	content: "";
-	position: absolute;
-	top:0;right:0;bottom:0;left:-100%;
-	background: white repeating-linear-gradient(90deg, #14ffe9 0%, #ffc800 16.66666%, #ff00e0 33.33333%, #14ffe9 50.0%);
-	mix-blend-mode: screen;
-	pointer-events: none;
+.rainbow-text::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: -100%;
+  background: white
+    repeating-linear-gradient(
+      90deg,
+      #14ffe9 0%,
+      #ffc800 16.66666%,
+      #ff00e0 33.33333%,
+      #14ffe9 50%
+    );
+  mix-blend-mode: screen;
+  pointer-events: none;
   animation: move 1s linear infinite;
 }
 
-@keyframes move{
-  0%{transform: translateX(0);}
-  100%{transform: translateX(50%);}
+@keyframes move {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(50%);
+  }
 }
 
 @supports not (mix-blend-mode: multiply) {
-	.rainbow-text{
-	-webkit-text-fill-color: transparent;
-	background-clip: text !important;
-	background: white repeating-linear-gradient(90deg, #14ffe9, #ffc800, #ff00e0, #14ffe9);
+  .rainbow-text {
+    -webkit-text-fill-color: transparent;
+    background-clip: text !important;
+    background: white
+      repeating-linear-gradient(90deg, #14ffe9, #ffc800, #ff00e0, #14ffe9);
     text-shadow: none;
-	}
-	.rainbow-text::before{ content: none; }
+  }
+  .rainbow-text::before {
+    content: none;
+  }
 }
 
-.icy-img:hover{
-
-    animation: shake 0.5s infinite;
-    animation-timing-function: ease-in-out;
+.icy-img:hover {
+  animation: shake 0.5s infinite;
+  animation-timing-function: ease-in-out;
 }
 
-
 @keyframes shake {
   0% {
-      transform: translate(1px, 1px) rotate(0deg);
+    transform: translate(1px, 1px) rotate(0deg);
   }
   10% {
-      transform: translate(2px, -2px) rotate(-1deg);
+    transform: translate(2px, -2px) rotate(-1deg);
   }
   20% {
-      transform: translate(3px, 0px) rotate(1deg);
+    transform: translate(3px, 0px) rotate(1deg);
   }
   30% {
-      transform: translate(-4px, 2px) rotate(0deg);
+    transform: translate(-4px, 2px) rotate(0deg);
   }
   40% {
-      transform: translate(5px, -1px) rotate(1deg);
+    transform: translate(5px, -1px) rotate(1deg);
   }
   50% {
-      transform: translate(6px, 2px) rotate(-1deg);
+    transform: translate(6px, 2px) rotate(-1deg);
   }
   60% {
-      transform: translate(-3px, 1px) rotate(0deg);
+    transform: translate(-3px, 1px) rotate(0deg);
   }
   70% {
-      transform: translate(3px, 1px) rotate(-1deg);
+    transform: translate(3px, 1px) rotate(-1deg);
   }
   80% {
-      transform: translate(-1px, -1px) rotate(1deg);
+    transform: translate(-1px, -1px) rotate(1deg);
   }
   90% {
-      transform: translate(1px, 2px) rotate(0deg);
+    transform: translate(1px, 2px) rotate(0deg);
   }
   100% {
-      transform: translate(1px, -2px) rotate(0deg);
+    transform: translate(1px, -2px) rotate(0deg);
   }
 }
 :root {
@@ -388,7 +403,12 @@ form {
   counter-increment: rainbow;
   font-size: 3rem;
   color: var(--text-color);
-  text-shadow: -1px -1px 0 var(--color-black), 1px -1px 0 var(--color-black), -1px 1px 0 var(--color-black), 1px 1px 0 var(--color-black), 4px 4px 0 rgba(0, 0, 0, .2);
+  text-shadow:
+    -1px -1px 0 var(--color-black),
+    1px -1px 0 var(--color-black),
+    -1px 1px 0 var(--color-black),
+    1px 1px 0 var(--color-black),
+    4px 4px 0 rgba(0, 0, 0, 0.2);
   animation: rainbow 1.5s ease-in-out infinite;
   font-size: 150px;
   /* margin: 15px; */
@@ -456,10 +476,11 @@ form {
   --text-color: var(--color-yellow);
 }
 @keyframes rainbow {
-  0%, 100% {
-      transform: translatey(var(--axis-y));
- }
+  0%,
+  100% {
+    transform: translatey(var(--axis-y));
+  }
   50% {
-      transform: translatey(calc(var(--axis-y) * -1));
- }
+    transform: translatey(calc(var(--axis-y) * -1));
+  }
 }

css/instructions.css

@@ -50,7 +50,7 @@ body {
 
 #explanation1 {
   margin-top: -33%;
-  margin-left: 2%
+  margin-left: 2%;
 }
 
 #explanation2 {

html/characters.html

@@ -9,7 +9,7 @@
       rel="stylesheet"
     />
     <link rel="stylesheet" href="../css/characters.css" />
-    <link rel="icon" href="../image/icyTower.png">
+    <link rel="icon" href="../image/icyTower.png" />
 
     <title>Choose charecter</title>
   </head>

html/difficulty-levels.html

@@ -10,7 +10,7 @@
     />
     <link rel="stylesheet" href="../css/difficulty-levels.css" />
     <title>Difficulty</title>
-    <link rel="icon" href="../image/icyTower.png">
+    <link rel="icon" href="../image/icyTower.png" />
   </head>
 
   <body>

html/game-scores.html

@@ -6,7 +6,7 @@
     />
     <link href="../css/game-scores.css" rel="stylesheet" />
     <title>Game Scores</title>
-    <link rel="icon" href="../image/icyTower.png">
+    <link rel="icon" href="../image/icyTower.png" />
   </head>
 
   <body>

html/home-page.html

@@ -43,7 +43,7 @@
             </div><br>
             <br>
             <div> <label for="email">email</label>
-                <input  name="email-user-name" type="email" id="user-name" placeholder="this w'll be your user name">
+                <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>
@@ -56,18 +56,18 @@
                 <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-in</button>
+            <br> <button class="submit" id="sign-in-submit">sign-up</button>
             <br>
             <span class="message" id="submit-error-message"></span>
     </div>
 
     <div class="form hide" id="login-form">
         <button class="btn-close" type="button"></button>
         <br>
-        <button class="change-form" id="change-to-sign" type="button">don't have an account? sign in</button>
+        <button class="change-form" 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">user name</label>
+            <div> <label for="user">email</label>
                 <input type="email" id="email" name="user" required="required">
             </div><br>
             <br>

html/icy-tower-home.html

@@ -9,7 +9,7 @@
       rel="stylesheet"
     />
     <link rel="stylesheet" href="../css/icy-tower-home.css" />
-    <link rel="icon" href="../image/icyTower.png">
+    <link rel="icon" href="../image/icyTower.png" />
   </head>
 
   <body>

html/iframe-hello-user.html

@@ -10,7 +10,7 @@
     />
     <link href="../css/iframe-hello-user.css" rel="stylesheet" />
     <title>Icy Tower</title>
-    <link rel="icon" href="../image/icyTower.png">
+    <link rel="icon" href="../image/icyTower.png" />
   </head>
   <body>
     <div id="hello-user">

html/instructions.html

@@ -10,7 +10,7 @@
     />
     <link rel="stylesheet" href="../css/instructions.css" />
     <title>Instructions</title>
-    <link rel="icon" href="../image/icyTower.png">
+    <link rel="icon" href="../image/icyTower.png" />
   </head>
 
   <body>