354 lines
19 KiB
HTML
354 lines
19 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- Required meta tags -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<!-- Bootstrap CSS -->
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<link rel="stylesheet" href="css/responsive.css">
|
|
<title>ABC-DASHBOARD</title>
|
|
</head>
|
|
<body class="pushmenu-push pushmenu-push-toright">
|
|
<nav class="admin-nav pushmenu pushmenu-left pushmenu-open" id="sidebar">
|
|
<div class="logo"><img src="https://www.abc.org/Portals/1/abc_logo_svg.svg" alt=""></div>
|
|
<ul>
|
|
<li><a href="index.html"><img src="img/dashboard.png" alt=""> Dashboard</a></li>
|
|
<li><a href="classsetting-names.html"><img src="img/tools.png" alt="">Class Settings</a></li>
|
|
<li class="active"><a href="class-form.html"><img src="img/create.png" alt="">Create Class</a></li>
|
|
<li><a href="admin-users.html"><img src="img/ad.png" alt="">Admin Users</a></li>
|
|
</ul>
|
|
</nav>
|
|
<header>
|
|
<div class="d-flex admin-header">
|
|
<div class="toggle active" id="nav_list"> <img src="img/hamperger.png" alt=""></div>
|
|
<div class="admin ml-auto d-flex">
|
|
<span > <img src="img/admin-logo.png"> Admin</span> <span class="logout"> <img src="img/logout.png">Logout</span>
|
|
<div class="toggle-bar" id="nav-click" onclick="myFunction(this)">
|
|
<div class="bar1"></div>
|
|
<div class="bar2"></div>
|
|
<div class="bar3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<section class="admin-content">
|
|
<div class="container">
|
|
<h2>New Class Form</h2>
|
|
<div class="class-form d-flex">
|
|
<div class="col-lg-7 col-md-12">
|
|
<h3 class="general-h3">General Information</h3>
|
|
<div class="general">
|
|
<div class="form-group d-flex">
|
|
<div class="col-sm-6 d-flex no-pad ">
|
|
<label for="">Class Name</label>
|
|
<select name="" id="target1" style="margin-right: 10px;">
|
|
<option value="Class1">Select</option>
|
|
<option value="Class1">Class1</option>
|
|
<option value="Class1">Class1</option>
|
|
<option value="Class1">Class1</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-sm-6 d-flex no-pad">
|
|
<label for="">Total Seats</label>
|
|
<input type="text" class="general-input" placeholder="Last name">
|
|
</div>
|
|
</div>
|
|
<div class="form-group d-flex">
|
|
<div class="col-sm-6 d-flex no-pad ">
|
|
<label for="">Instructor:</label>
|
|
<select name="" id="target2" style="margin-right: 10px;">
|
|
<option value="Class1">Select</option>
|
|
<option value="Class1">Class1</option>
|
|
<option value="Class1">Class1</option>
|
|
<option value="Class1">Class1</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-sm-6 d-flex no-pad">
|
|
<label for="">Hours:</label>
|
|
<input type="text" class="general-input" placeholder="Last name">
|
|
</div>
|
|
<div class="col-sm-6 d-flex no-pad ">
|
|
</div>
|
|
</div>
|
|
<h3 class="general-h3">Eligible Registrants</h3>
|
|
<div class="form-group d-flex">
|
|
<div class="col-sm-6 d-flex no-pad">
|
|
<span class="chk-abc"> <input type="checkbox" id="start" class="chk-date1"><label for="start"></label>Members / Alumni</span>
|
|
</div>
|
|
<div class="col-sm-6 d-flex no-pad ">
|
|
<label for="">Price:</label>
|
|
<input type="text" class="general-input" placeholder="Last name">
|
|
</div>
|
|
</div>
|
|
<div class="date-time" id="expand1">
|
|
<h3 class="general-h3">Date and Time</h3>
|
|
<div class="form-group d-flex">
|
|
<span class="chk-abc"> <input type="checkbox" id="d1" ><label for="d1"></label>Monday</span>
|
|
<span class="chk-abc"> <input type="checkbox" id="d2" ><label for="d2"></label>Tuesday</span>
|
|
<span class="chk-abc"> <input type="checkbox" id="d3" ><label for="d3"></label>Wednesday</span>
|
|
<span class="chk-abc"> <input type="checkbox" id="d4" ><label for="d4"></label>Thursday</span>
|
|
<span class="chk-abc"> <input type="checkbox" id="d5" ><label for="d5"></label>Friday</span>
|
|
</div>
|
|
<div class="form-group d-flex">
|
|
<div class="col-sm-6 d-flex no-pad ">
|
|
<label for="">Start Date:</label>
|
|
<input type="text" class="general-input m-10" placeholder="Last name">
|
|
</div>
|
|
<div class="col-sm-6 d-flex no-pad ">
|
|
<label for="">End Date:</label>
|
|
<input type="text" class="general-input" placeholder="Last name">
|
|
</div>
|
|
</div>
|
|
<div class="form-group d-flex">
|
|
<div class="col-sm-6 d-flex no-pad ">
|
|
<label for="">Start Time:</label>
|
|
<input type="text" class="general-input m-10" placeholder="Last name">
|
|
</div>
|
|
<div class="col-sm-6 d-flex no-pad ">
|
|
<label for="">End Time:</label>
|
|
<input type="text" class="general-input" placeholder="Last name">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group d-flex">
|
|
<div class="col-sm-6 d-flex no-pad">
|
|
<span class="chk-abc"> <input type="checkbox" id="start1" class="chk-date2"><label for="start1"></label>Non-Member</span>
|
|
</div>
|
|
<div class="col-sm-6 d-flex no-pad ">
|
|
<label for="">Price:</label>
|
|
<input type="text" class="general-input" placeholder="Last name">
|
|
</div>
|
|
</div>
|
|
<div class="date-time" id="expand2">
|
|
<h3 class="general-h3">Date and Time</h3>
|
|
<div class="form-group d-flex">
|
|
<span class="chk-abc"> <input type="checkbox" id="d6" ><label for="d6"></label>Monday</span>
|
|
<span class="chk-abc"> <input type="checkbox" id="d7" ><label for="d7"></label>Tuesday</span>
|
|
<span class="chk-abc"> <input type="checkbox" id="d8" ><label for="d8"></label>Wednesday</span>
|
|
<span class="chk-abc"> <input type="checkbox" id="d9" ><label for="d9"></label>Thursday</span>
|
|
<span class="chk-abc"> <input type="checkbox" id="d10" ><label for="d10"></label>Friday</span>
|
|
</div>
|
|
<div class="form-group d-flex">
|
|
<div class="col-sm-6 d-flex no-pad ">
|
|
<label for="">Start Date:</label>
|
|
<input type="text" class="general-input m-10" placeholder="Last name">
|
|
</div>
|
|
<div class="col-sm-6 d-flex no-pad ">
|
|
<label for="">End Date:</label>
|
|
<input type="text" class="general-input" placeholder="Last name">
|
|
</div>
|
|
</div>
|
|
<div class="form-group d-flex">
|
|
<div class="col-sm-6 d-flex no-pad ">
|
|
<label for="">Start Time:</label>
|
|
<input type="text" class="general-input m-10" placeholder="Last name">
|
|
</div>
|
|
<div class="col-sm-6 d-flex no-pad ">
|
|
<label for="">End Time:</label>
|
|
<input type="text" class="general-input" placeholder="Last name">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group d-flex">
|
|
<div class="col-sm-6 d-flex no-pad">
|
|
<span class="chk-abc"> <input type="checkbox" id="start2" class="chk-date3"><label for="start2"></label>SE</span>
|
|
</div>
|
|
<div class="col-sm-6 d-flex no-pad ">
|
|
<label for="">Price:</label>
|
|
<input type="text" class="general-input" placeholder="Last name">
|
|
</div>
|
|
</div>
|
|
<div class="date-time" id="expand3">
|
|
<h3 class="general-h3">Date and Time</h3>
|
|
<div class="form-group d-flex">
|
|
<span class="chk-abc"> <input type="checkbox" id="d11" ><label for="d11"></label>Monday</span>
|
|
<span class="chk-abc"> <input type="checkbox" id="d12" ><label for="d12"></label>Tuesday</span>
|
|
<span class="chk-abc"> <input type="checkbox" id="d13" ><label for="d13"></label>Wednesday</span>
|
|
<span class="chk-abc"> <input type="checkbox" id="d14" ><label for="d14"></label>Thursday</span>
|
|
<span class="chk-abc"> <input type="checkbox" id="d15" ><label for="d15"></label>Friday</span>
|
|
</div>
|
|
<div class="form-group d-flex">
|
|
<div class="col-sm-6 d-flex no-pad ">
|
|
<label for="">Start Date:</label>
|
|
<input type="text" class="general-input m-10" placeholder="Last name">
|
|
</div>
|
|
<div class="col-sm-6 d-flex no-pad ">
|
|
<label for="">End Date:</label>
|
|
<input type="text" class="general-input" placeholder="Last name">
|
|
</div>
|
|
</div>
|
|
<div class="form-group d-flex">
|
|
<div class="col-sm-6 d-flex no-pad ">
|
|
<label for="">Start Time:</label>
|
|
<input type="text" class="general-input m-10" placeholder="Last name">
|
|
</div>
|
|
<div class="col-sm-6 d-flex no-pad ">
|
|
<label for="">End Time:</label>
|
|
<input type="text" class="general-input" placeholder="Last name">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h3 class="general-h3">Location</h3>
|
|
<div class="form-group d-flex">
|
|
<div class="col-sm-6 d-flex no-pad ">
|
|
<label for="">Location:</label>
|
|
<select name="" style="margin-right: 10px;" id="target3">
|
|
<option value="Class1">Select</option>
|
|
<option value="Class1">Anaheim</option>
|
|
<option value="Class1">LA / Ventura</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-sm-6 d-flex no-pad ">
|
|
<label for="">Room:</label>
|
|
<input type="text" class="general-input" placeholder="Last name">
|
|
</div>
|
|
</div>
|
|
<div class="form-group d-flex">
|
|
<div class="col-sm-6 d-flex no-pad ">
|
|
<label for="">Physical Address:</label>
|
|
<input type="text" class="general-input m-10" placeholder="Last name">
|
|
</div>
|
|
<div class="col-sm-6 d-flex no-pad ">
|
|
<label for="">City:</label>
|
|
<input type="text" class="general-input" placeholder="Last name">
|
|
</div>
|
|
</div>
|
|
<div class="form-group d-flex">
|
|
<div class="col-sm-6 d-flex no-pad ">
|
|
<label for="">State:</label>
|
|
<input type="text" class="general-input m-10" placeholder="Last name">
|
|
</div>
|
|
<div class="col-sm-6 d-flex no-pad ">
|
|
<label for="">Zip Code:</label>
|
|
<input type="text" class="general-input" placeholder="Last name">
|
|
</div>
|
|
</div>
|
|
<div class="form-group d-flex">
|
|
<div class="col-sm-6 d-flex no-pad ">
|
|
<label for="">Phone Number:</label>
|
|
<input type="text" class="general-input m-10" placeholder="Last name">
|
|
</div>
|
|
<div class="col-sm-6 d-flex no-pad ">
|
|
</div>
|
|
</div>
|
|
<h3 class="general-h3">Class Description</h3>
|
|
<textarea class="form-control" rows="5" id="comment"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-5 col-md-12 class-table">
|
|
<h3 class="general-h3">List of Classes</h3>
|
|
<select name="" class="duplicate-sl" id="target4">
|
|
<option value="Class1">select</option>
|
|
<option value="Class1">Duplicate Record</option>
|
|
<option value="Class1">Delete Record</option>
|
|
</select>
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th><span class="chk-abc"> <input type="checkbox" id="tb7" ><label for="tb7"></label></span></th>
|
|
<th>Created </th>
|
|
<th>Class Name</th>
|
|
<th>Edit</th>
|
|
<th>Delete</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><span class="chk-abc"> <input type="checkbox" id="tb1" ><label for="tb1"></label></span></td>
|
|
<td>01/01/2018</td>
|
|
<td>John Smith</td>
|
|
<td><img src="img/edit.png" alt=""></td>
|
|
<td><img src="img/delete.png" alt=""></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="chk-abc"> <input type="checkbox" id="tb2" ><label for="tb2"></label></span></td>
|
|
<td>08/05/2018</td>
|
|
<td>Edgar Yost</td>
|
|
<td><img src="img/edit.png" alt=""></td>
|
|
<td><img src="img/delete.png" alt=""></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="chk-abc"> <input type="checkbox" id="tb3" ><label for="tb3"></label></span></td>
|
|
<td>06/04/2019</td>
|
|
<td>Michael Lennon</td>
|
|
<td><img src="img/edit.png" alt=""></td>
|
|
<td><img src="img/delete.png" alt=""></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="chk-abc"> <input type="checkbox" id="tb4" ><label for="tb4"></label></span></td>
|
|
<td>04/03/2017</td>
|
|
<td>Brian Jones</td>
|
|
<td><img src="img/edit.png" alt=""></td>
|
|
<td><img src="img/delete.png" alt=""></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="submit-class d-flex"> <div class="col6"><input type="submit" value="Create" class="submit"></div> <div class="col6"><input type="reset" value="Reset" class="reset"></div></div>
|
|
</div>
|
|
</section>
|
|
<!-- Optional JavaScript -->
|
|
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
|
|
<script type="text/javascript" src="js/push.js"></script>
|
|
<!-- <script>
|
|
function toggleslidebar() {
|
|
document.getElementById("sidebar").classList.toggle("active");
|
|
}
|
|
</script> -->
|
|
<script type="text/javascript">
|
|
$(document).ready(function(){
|
|
$("#nav_list").click(function(){
|
|
$(".admin-content").toggleClass("main");
|
|
$(".admin-header .admin").toggleClass("main");
|
|
});
|
|
|
|
});
|
|
</script>
|
|
<script>
|
|
function myFunction(x) {
|
|
x.classList.toggle("change");
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
$("#nav-click").click(function(){
|
|
$("#sidebar ul").slideToggle();
|
|
});
|
|
$("#target1").val($("#target1 option:first").val());
|
|
$("#target2").val($("#target2 option:first").val());
|
|
$("#target3").val($("#target3 option:first").val());
|
|
$("#target4").val($("#target4 option:first").val());
|
|
</script>
|
|
<script type="text/javascript">
|
|
$(".date-time").hide();
|
|
$(".chk-date1").click(function() {
|
|
if($(this).is(":checked")) {
|
|
$("#expand1").show();
|
|
} else {
|
|
$("#expand1").hide();
|
|
}
|
|
});
|
|
|
|
$(".chk-date2").click(function() {
|
|
if($(this).is(":checked")) {
|
|
$("#expand2").show();
|
|
} else {
|
|
$("#expand2").hide();
|
|
}
|
|
});
|
|
|
|
$(".chk-date3").click(function() {
|
|
if($(this).is(":checked")) {
|
|
$("#expand3").show();
|
|
} else {
|
|
$("#expand3").hide();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |