<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MailBook</title>
<link rel="stylesheet" href="ADBA.css">
<!--Font Awesome Icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<!--Form Modal-->
<div id="fullscreen-div"></div>
<form class="modal" id="modal">
<div class="modal-content">
<div class="modal-head">
<h3 id="modal-title">Add Address</h3>
<button type="button" id="close-btn">
<i class="fas fa-times"></i>
</button>
</div>
<div class="modal-main">
<div class="modal-row">
<div class="modal-col">
<label for="">How should your mail be addressed?</label>
<input type="text" placeholder="e.g. The Smith Family" class="form-control"
name="addr_ing_name">
</div>
</div>
<div class="modal-row grid-row">
<div class="modal-col">
<label for="">First Name</label>
<input type="text" placeholder="e.g. John" class="form-control" name="first_name">
</div>
<div class="modal-col">
<label for="">Last Name</label>
<input type="text" placeholder="e.g. Smith" class="form-control" name="last_name">
</div>
</div>
<div class="modal-row grid-row">
<div class="modal-col">
<label for="">Email</label>
<input type="email" placeholder="e.g. john123@xyz.com" class="form-control" name="email">
</div>
<div class="modal-col">
<label for="">Phone</label>
<input type="phone" placeholder="(111)-234-5678" class="form-control" name="phone">
</div>
</div>
<div class="modal-row grid-row">
<div class="modal-col">
<label for="">Street Address</label>
<input type="text" placeholder="Street address, apartment, house no, etc." class="form-control"
name="street_addr">
</div>
<div class="modal-col">
<label for="">Postal Code</label>
<input type="text" placeholder="e.g. 32714" class="form-control" name="postal_code">
</div>
</div>
<div class="modal-row grid-row">
<div class="modal-col">
<label for="">City</label>
<input type="text" placeholder="e.g. St.Petersburg" class="form-control" name="city">
</div>
<div class="modal-col">
<label for="">Country</label>
<select id="country-list" name="country">
<!--<option>China</option>
<option>Russia</option>
<option>USA</option>-->
</select>
</div>
</div>
<div class="modal-row">
<div class="modal-col">
<label for="">Labels</label>
<select name="labels">
<option value="Family">Family</option>
<option value="Friends">Friends</option>
<option value="Colleagues">Colleagues</option>
</select>
</div>
</div>
<div class="modal-row" id="modal-btns">
<button type="submit" id="save-btn">Save</button>
</div>
</div>
</div>
</form>
<!--End of form modal-->
<!--Address Book Home-->
<div class="addr-book" id="addr-book">
<div class="addr-book-content">
<div class="addr-book-head">
<i class="fa-solid fa-address-book fa-2x"></i>
<h2>Address <span>Book</span></h2>
</div>
<div class="addr-book-top">
<button type="button" class="btn" id="add-btn">
<span><i class="class fas fa-plus"></i>Add Address</span>
</button>
</div>
<div class="addr-book-list" id="addr-book-list">
<table class="addr-table">
<thead>
<tr>
<th>ID</th>
<th>Address</th>
<th>Labels</th>
<th>By Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>1</td>
<td>
<span class="addressing-name">Smith Family</span><br><span class="address">Johnson
Street - 5668, Lake side</span>
</td>
<td><span>Colleagues</span></td>
<td>Mark Smith</td>
<td>123-456-7890</td>
</tr>-->
</tbody>
</table>
</div>
</div>
</div>
<!--End of Address Book Home-->
<script src="ADBA.js"></script>
</body>
</html>