Skip to content

Commit

Permalink
new/edit contact page changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Vanillacruz
Vanillacruz committed May 21, 2020
1 parent c9c4869 commit 3b0bf54
Show file tree
Hide file tree
Showing 4 changed files with 168 additions and 24 deletions.
43 changes: 39 additions & 4 deletions createNewContact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,50 @@

<h1 id="title">Create New Knightact</h1>

<div id="contact">
<input type="text" id="loginName" placeholder="Create a username" /><br />

<div class="container">
<div class="row">
<div class="col-left">
<label for="firstname">First Name*</label></div>
<div class="col-right">
<input type="text" id="firstname" name= "firstname" placeholder="First Name"></div>
</div>
<div class="row">
<div class="col-left">
<label for="lastname">Last Name*</label></div>
<div class="col-right">
<input type="text" id="lastname" name= "lastname" placeholder="Last Name"></div>
</div>
<div class="row">
<div class="col-left">
<label for="email">Email*</label></div>
<div class="col-right">
<input type="text" id="email" name= "email" placeholder="Email"></div>
</div>
<div class="row">
<div class="col-left">
<label for="number">Phone Number*</label></div>
<div class="col-right">
<input type="text" id="number" name="number" placeholder="123-456-7890"></div>
</div>
<div class="row">
<div class="col-left">
<label for="address">Address*</label></div>
<div class="col-right">
<input type="text" id="address" name="address" placeholder="1234 NW 59TH ST."></div>
</div>
<div class="row">
<div class="col-left">
<label for="notes">Notes</label></div>
<div class="col-right">
<textarea id="notes" name="notes" placeholder=""></textarea></div>
</div>
<span id="required">*These are required fields.</span><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>
105 changes: 89 additions & 16 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,18 +38,6 @@ body
margin: auto;
}

#accessUIDiv /* big block in main contact page*/
{
border-radius: 2em;
font-size: 30px;
width: 80%;
margin-top: 2%;
margin-left: 8%;
align-self: center;
padding: 25px;
background-color: goldenrod;
}

#searchOrAdd
{
border-radius: 2em;
Expand All @@ -74,6 +62,7 @@ body
margin-left: 38%;

width: 25%;
cursor: pointer;
}

.buttons:hover
Expand All @@ -87,10 +76,12 @@ body
{
font-size: 27px;
}

#loginPassword
{
font-size: 27px;
}

#searchBar
{
background: url(../images/search_icon.png) no-repeat scroll .5px .5px;
Expand All @@ -103,7 +94,6 @@ body
display: inline-block;
}


#addContact
{
width: 20%;
Expand All @@ -121,7 +111,7 @@ body
background-color: goldenrod;
}

input[type="text"],input[type="password"]
input[type="text"], input[type="password"]
{
border-radius: 25px;
border-color: goldenrod;
Expand Down Expand Up @@ -263,8 +253,6 @@ input[type="text"],input[type="password"]
background-color: red;
}



select
{
width: 30%;
Expand All @@ -291,3 +279,88 @@ select
font-family: 'Varela Round', 'Calibri', Arial;
color: #95060a;
}

#notes
{
font-family: 'Varela Round', 'Calibri', Arial;
width: 85%;
border: 2px solid black;
border-radius: 4px;
outline: 0;
padding-left: 2%;
margin-top: 4%;
margin-left: 12%;
resize: none;
font-size: 0.5em;
max-height: 400%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-border-image: border-box;
border-image: auto;
height: 70px;
}

.container
{
font-family: 'Varela Round', 'Calibri', Arial;
border-radius: .5em;
font-size: 25px;
width: 50%;
margin-top: 2%;
margin: auto;
padding : 15px;
padding-left: 1%;
background-color: goldenrod;
}

/* Clear floats after the columns */
.row:after
{
content: "";
display: table;
clear: both;
}

label
{
padding-left: 8%;
padding-top: 6%;
display: inline-block;
}

.col-left
{
float: left;
width: 40%;
margin-top: 2px;
margin-right: -10%;
}

.col-right
{
font-size: 150%;
float: left;
margin-top: 2px;
width: 70%;
margin-right: 0;
}

#required
{
font-family: 'Varela Round', 'Calibri', Arial;
color: darkred;
font-size: 0.6em;
}

#firstname, #lastname, #email, #number, #address{
border-color: black;
padding-left: 3.5%;
text-align: justify;
font-size-adjust: initial;
width: 80%;
margin-left: 12%;
margin-bottom: 2%;
font-size: 0.5em;
outline: 0;
font-family: 'Varela Round', 'Calibri', Arial;
}
44 changes: 40 additions & 4 deletions editContact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,46 @@

<h1 id="title">Edit Knightact</h1>

<div id="">


</div>
<div class="container">
<div id="littleDo">
<div class="row">
<div class="col-left">
<label for="firstname">First Name*</label></div>
<div class="col-right">
<input type="text" id="firstname" name= "firstname" placeholder="Knightro"></div>
</div>
<div class="row">
<div class="col-left">
<label for="lastname">Last Name*</label></div>
<div class="col-right">
<input type="text" id="lastname" name= "lastname" placeholder="Pegasus"></div>
</div>
<div class="row">
<div class="col-left">
<label for="email">Email*</label></div>
<div class="col-right">
<input type="text" id="email" name= "email" placeholder="[email protected]"></div>
</div>
<div class="row">
<div class="col-left">
<label for="number">Phone Number*</label></div>
<div class="col-right">
<input type="text" id="number" name="number" placeholder="123-456-7890"></div>
</div>
<div class="row">
<div class="col-left">
<label for="address">Address*</label></div>
<div class="col-right">
<input type="text" id="address" name="address" placeholder="1234 NW 59th st."></div>
</div>
<div class="row">
<div class="col-left">
<label for="notes">Notes</label></div>
<div class="col-right">
<textarea id="notes" name="notes" placeholder="I love UCF!"></textarea></div>
</div>
<span id="required">*These are required fields.</span><br>
</div></div>

<div id = "buttonDiv">
<div class="inner-2"><button type="button" id="backButton" class="buttons" onclick= "returnToContactPage()";> Back </button></div>
Expand Down
Binary file added images/logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 3b0bf54

Please sign in to comment.