updates to front end

Vanillacruz · May 20, 2020 · c9c4869 · c9c4869
1 parent d66942a
commit c9c4869
Show file tree

Hide file tree

Showing 13 changed files with 151 additions and 56 deletions.
diff --git a/contactPage.html b/contactPage.html
@@ -7,16 +7,27 @@
     <link href="https://fonts.googleapis.com/css?family=Varela+Round|Calibri" rel="stylesheet">
 
 </head>    
-<body style =   "background-image: url('images/ucf6.jpg'),url('images/ucf6b.jpg'); 
-				background-repeat: no-repeat, repeat-y;
-				background-position-x: 50%;
-                background-position-y: 20%;">
+<body>
+    <h1 id="title">My Knightacts</h1>
 
-    <h1 id="white-title">My Knightacts</h1>
+    <button type="button" id="logoutButton" class="buttons" onclick="doLogout();"> </button>
 
-    <div id="">
+    <div id="searchOrAdd">
+        <!--Perform add contact on click-->
+        <button type="button" id="addContact" class="buttons" onclick="addContact();"> Add New Knightact </button><br />
+        <span id="contactAddResult"></span>
 
+        <!--The search bar automatically updates with each character -->
+       <input type="text" id="searchBar" placeholder="Search..." oninput="searchContacts(this.value);"/>
+        <span id="contactSearchResult"></span>
+    </div>
 
+    <div id="accessUIDiv">
+        <br />
+        <p id="colorList">
+        </p><br /><br />
+        <!--Here-->
+
     </div>
 
 </body>

diff --git a/createNewContact.html b/createNewContact.html
@@ -7,16 +7,19 @@
     <link href="https://fonts.googleapis.com/css?family=Varela+Round|Calibri" rel="stylesheet">
 
 </head>    
-<body style =   "background-image: url('images/ucf7.jpg'),url('images/ucf7b.jpg'); 
-                background-repeat: no-repeat, repeat-y;
-                background-position-y: 30%;";>
+<body>
 
-    <h1 id="white-title">Create New Knightact</h1>
+    <h1 id="title">Create New Knightact</h1>
 
-    <div id="">
+    <div id="contact">
+        <input type="text" id="loginName" placeholder="Create a username" /><br />
 
+    </div>
 
+    <div id = "buttonDiv">
+        <div class="inner"><button type="button" id="backButton" class="buttons" onclick= "returnToContactPage()";> Back </button></div>
+        <div class="inner"><button type="button" id="okButton" class="buttons" onclick= "saveContact()";> Charge On! </button></div>
     </div>
-
+     
 </body>
 </html>
diff --git a/css/styles.css b/css/styles.css
@@ -1,8 +1,11 @@
 
 body
 {
-    background-color: darkblue;
-    background-position: top left;
+    background-color: darkblue; /*back-up color if pictures don't load*/
+    background-image: url('../images/ucf1.jpg'),url('../images/ucf1b.jpg'); 
+	background-repeat: no-repeat, repeat-y;
+	background-position-x: 50%;
+    background-position-y: 20%;
     margin: 0;
     padding: 0;
     overflow: hidden;
@@ -15,18 +18,7 @@ body
     text-align: center;
     color:black;
     width: 100%;
-    text-shadow: 2px 2px gray;
-    margin-bottom: 1.5%;
-}
-
-#white-title
-{
-    font-size: 55px;
-    font-family: 'Varela Round', 'Calibri', Arial;
-    text-align: center;
-    color:white;
-    text-shadow: 2px 3px black;
-    width: 100%;
+    text-shadow: 1px 2px goldenrod;
     margin-bottom: 1.5%;
 }
 
@@ -39,34 +31,37 @@ body
     margin-bottom: 2%;
 }
 
-#loginDiv
+#loginDiv /*Welcome back Knight!*/
 {
     font-size: 30px;
     width: 70%;
     margin: auto;
 }
 
-#loggedInDiv
+#accessUIDiv /* big block in main contact page*/
 {
+    border-radius: 2em;
     font-size: 30px;
-    width: 70%;
-    margin-left: 15%;
+    width: 80%;
+    margin-top: 2%;
+    margin-left: 8%;
+    align-self: center;
     padding: 25px;
-    background-color: #b2b2b2;
+    background-color: goldenrod;
 }
 
-#accessUIDiv
+#searchOrAdd
 {
+    border-radius: 2em;
     font-size: 30px;
-    width: 70%;
-    margin-left: 15%;
-    padding: 25px;
-    background-color: #b2b2b2;
+    width: 80%;
+    margin-left: 8%;
+    align-self: center;
 }
 
 .buttons
 {
-    font-size: 0.7em;
+    font-size: 70%;
     font-family: 'Varela Round', 'Calibri', Arial;
     text-align: center;
     color: white;
@@ -96,13 +91,34 @@ body
 {
 	font-size: 27px;
 }
-#searchText
+#searchBar
 {
-	font-size: 30px;
+    background: url(../images/search_icon.png) no-repeat scroll .5px .5px;
+    background-color: white;
+    background-size: 40px 40px;
+    background-repeat: no-repeat; 
+    padding-left:45px;
+    font-size: 30px;
+    text-align: justify;
+    display: inline-block;
 }
-#colorText
+
+
+#addContact
 {
-	font-size: 30px;
+    width: 20%;
+}
+
+#contact
+{
+    border-radius: 2em;
+    font-size: 30px;
+    width: 80%;
+    margin-top: 2%;
+    margin-left: 8%;
+    align-self: center;
+    padding: 25px;
+    background-color: goldenrod;
 }
 
 input[type="text"],input[type="password"]
@@ -157,11 +173,10 @@ input[type="text"],input[type="password"]
     font-size: 0.7em;
     text-align: center;
     font-family: 'Varela Round', 'Calibri', Arial;
-    color: white;
-    text-shadow: 1px 1px black;
+    color:black;
 }
 
-#loginResult
+#loginResult /* I'm not sure what this does*/
 {
     display: inline-block;
     font-size: 0.8em;
@@ -183,10 +198,73 @@ input[type="text"],input[type="password"]
 
 #logoutButton
 {
-    width: 20%;
+    border-radius:20%;
+    width: 10%;
     margin-left: 40%;
+    width: 5em;
+    height: 3.5em;
+    margin-left: 38%;
+    border-color: transparent;
+    background-color: transparent;
+    background-repeat: no-repeat;
+    background-size: 50px 50px;
+    height: 60px;  
+    width: 60px;
+    position:absolute;
+    top:1%;
+    right:1%;
+    background-image: url('../images/logOut.png');
+}
+
+#logoutButton:hover
+{
+    background-color: goldenrod;
+    border-color: gray;
+    opacity: 100%;
+}
+
+#buttonDiv
+{
+    margin-top: 2%;
+    margin-left: 10%;
+    width:80%;
+    text-align: left;
+    background-color: transparent;
+}
+
+.inner
+{
+    margin-left: 12%;
+    font-family: 'Varela Round', 'Calibri', Arial;
+    font-size: 150%;
+    display: inline-block;
+    width: 20em;
+    margin-right: -30%;
+    text-size-adjust: 30%;
 }
 
+.inner-2
+{
+    margin-left: 5%;
+    font-family: 'Varela Round', 'Calibri', Arial;
+    font-size: 150%;
+    display: inline-block;
+    width: 20em;
+    margin-right: -30%;
+    text-size-adjust: 30%;
+}
+
+#searchOrAdd
+{
+    border-radius: 0;
+    margin-top: 2%;
+    margin-left: 0;
+    width:100%;
+    background-color: red;
+}
+
+
+
 select
 {
     width: 30%;

diff --git a/editContact.html b/editContact.html
@@ -7,17 +7,19 @@
     <link href="https://fonts.googleapis.com/css?family=Varela+Round|Calibri" rel="stylesheet">
 
 </head>    
-<body style =   "background-image: url('images/ucf3.jpg'),url('images/ucf3b.jpg'); 
-                background-repeat: no-repeat, repeat-y;
-				background-position-x: 65%;
-                background-position-y: 15%;">
+<body>
 
-    <h1 id="white-title">Edit Knightact</h1>
+    <h1 id="title">Edit Knightact</h1>
 
     <div id="">
 
 
     </div>
-
+
+    <div id = "buttonDiv">
+        <div class="inner-2"><button type="button" id="backButton" class="buttons" onclick= "returnToContactPage()";> Back </button></div>
+        <div class="inner-2"><button type="button" id="saveButton" class="buttons" onclick= "updateContact()";> Save </button></div>
+        <div class="inner-2"><button type="button" id="deleteButton" class="buttons" onclick= "deleteContact()";> Delete </button></div>
+    </div>
 </body>
 </html>
diff --git a/images/logOut.png b/images/logOut.png
diff --git a/images/ucf3.jpg b/images/ucf3.jpg
diff --git a/images/ucf3b.jpg b/images/ucf3b.jpg
diff --git a/images/ucf6.jpg b/images/ucf6.jpg
diff --git a/images/ucf6b.jpg b/images/ucf6b.jpg
diff --git a/images/ucf7.jpg b/images/ucf7.jpg
diff --git a/images/ucf7b.jpg b/images/ucf7b.jpg
diff --git a/index.html b/index.html
@@ -16,7 +16,7 @@ <h1 id="title">Knightacts Manager</h1>
     <h2 id="inner-title">The Unofficial UCF Ultimate Contact Manager<br> Made by Knights for Knights</h2>
 
     <div id="loginDiv">
-        <span id="welcome">Welcome back Knight!</span><br>
+        <span id="welcome">Welcome Back Knight!</span><br>
         <input type="text" id="loginName" placeholder="Enter your username" /><br />
         <input type="password" id="loginPassword" placeholder="Enter your password"/><br />
         <button type="button" id="loginButton" class="buttons" onclick="doLogin();"> Charge On! </button><br>

diff --git a/signUp.html b/signUp.html
@@ -8,14 +8,15 @@
     <link href="https://fonts.googleapis.com/css?family=Varela+Round|Calibri" rel="stylesheet">
 
 </head>    
-<body style =   "background-image: url('images/ucf1.jpg'),url('images/ucf1b.jpg'); 
-                background-repeat: no-repeat, repeat-y";>
+<body style =   "background-image: url('images/ucf2.jpg'),url('images/ucf2b.jpg'); 
+                background-repeat: no-repeat, repeat-y;
+                background-position: center right;">
 
     <h1 id="title">Create an Account</h1>
-    <h2 id="inner-title">U Can't Find <br> your contacts so let us store them for you!<br> </h2>
+    <h2 id="inner-title">U Can't Find your contacts <br> so let us store them for you!<br> </h2>
 
     <div id="loginDiv">
-        <span id="welcome">Welcome new Knight!</span><br>
+        <span id="welcome">Welcome New Knight!</span><br>
         <input type="text" id="loginName" placeholder="Create a username" /><br />
         <input type="password" id="loginPassword" placeholder="Create a password"/><br />
         <button type="button" id="loginButton" class="buttons" onclick="doLogin();"> Charge On! </button><br>