Skip to content

Commit

Permalink
Wrote html file for the UI
Browse files Browse the repository at this point in the history
  • Loading branch information
Carzgil committed Apr 12, 2024
1 parent 6144a65 commit b9a8912
Showing 1 changed file with 155 additions and 0 deletions.
155 changes: 155 additions & 0 deletions service/static/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
<!DOCTYPE html>
<html>
<head>
<title>Customer DataBase</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="static/images/newapp-icon.png">
<link rel="stylesheet" href="static/css/cerulean_bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Customer DataBase</h1>
</div>

<!-- Flash Message -->
<div class="table-responsive">
<table class="table">
<tr><td>Status:</td><td><span id="flash_message"></span></td></tr>
</table>
</div>

<!-- FORM -->
<div class="col-md-12" id="form_data">
<h3>Create, Retrieve, Update, and Delete a Customer:</h3>
<div class="well">
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="customer_id">Customer ID:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="customer_id" placeholder="Enter Customer ID">
</div>
<div class="col-sm-4">
<button type="submit" class="btn btn-primary" id="retrieve-btn">Retrieve</button>
<button type="submit" class="btn btn-danger" id="delete-btn">Delete</button>
</div>
</div>
</div> <!-- form horizontal -->

<div class="form-horizontal">

<!-- USERNAME -->
<div class="form-group">
<label class="control-label col-sm-2" for="username">Username:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" placeholder="Enter Username">
</div>
</div>

<!-- PASSWORD -->
<div class="form-group">
<label class="control-label col-sm-2" for="password">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="Enter Password">
</div>
</div>

<!-- FIRST NAME -->
<div class="form-group">
<label class="control-label col-sm-2" for="first_name">First Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="first_name" placeholder="Enter First Name">
</div>
</div>

<!-- LAST NAME -->
<div class="form-group">
<label class="control-label col-sm-2" for="last_name">Last Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="last_name" placeholder="Enter Last Name">
</div>
</div>

<!-- GENDER -->
<div class="form-group">
<label class="control-label col-sm-2" for="gender">Gender:</label>
<div class="col-sm-10">
<select class="form-control" id="gender">
<option value="UNKNOWN">Unknown</option>
<option value="MALE">Male</option>
<option value="FEMALE">Female</option>
</select>
</div>
</div>

<!-- ACTIVE STATUS -->
<div class="form-group">
<label class="control-label col-sm-2" for="active">Active:</label>
<div class="col-sm-10">
<select class="form-control" id="active">
<option value="false">No</option>
<option value="true">Yes</option>
</select>
</div>
</div>

<!-- ADDRESS -->
<div class="form-group">
<label class="control-label col-sm-2" for="address">Address:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="address" placeholder="Enter Address">
</div>
</div>

<!-- EMAIL -->
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter Email">
</div>
</div>

<!-- SUBMIT BUTTONS -->
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success" id="create-btn">Create</button>
</div>
</div>
</div> <!-- form horizontal -->
</div> <!-- end well -->
</div> <!-- end Form -->

<!-- Search Results -->
<div class="table-responsive col-md-12" id="search_results">
<table class="table table-striped">
<thead>
<tr>
<th class="col-md-1">ID</th>
<th class="col-md-2">Username</th>
<th class="col-md-2">Name</th>
<th class="col-md-2">Gender</th>
<th class="col-md-2">Active</th>
<th class="col-md-3">Address</th>
<th class="col-md-3">Email</th>
</tr>
</thead>
</table>
</div>

<footer>
<br><br>
<p>&copy; NYU DevOps Company 2024</p>
</footer>

</div> <!-- container -->

<script type="text/javascript" src = "static/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src = "static/js/bootstrap.min.js"></script>

<!-- YOUR REST API -->
<script type="text/javascript" src="static/js/rest_api.js"></script>

</body>
</html>

0 comments on commit b9a8912

Please sign in to comment.