abc/HTML/abc-front/index.html
Ian Christensen 6822968785 added files
2019-06-27 08:19:59 -07:00

331 lines
16 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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">
<title>ABC</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<header>
<div class="container">
<div class="logo d-flex">
<img src="img/logo.jpg" alt="">
<span class="d-flex align-items-center justify-content-center">
<h1>Continuing Education Registration</h1>
</span>
</div>
</div>
</header>
<section class="abc-tab">
<div class="container">
<div class="d-flex flex-row nav">
<div><a href="index.html" class="active">Anaheim</a></div>
<div> <a href="laventura.html" >LA / Ventura</a></div>
</div>
<!-- first item -->
<div class="abc-detail d-flex">
<div class="title">
<h2 class="justify-content-center d-flex">Class Title</h2>
<div class="adv"> Advanced Mechanic's Lien Hrs<span class="hr-span">4</span></div>
<div class="date"><span> <input type="checkbox" id="start" class="check_box" placeholder="start"><label for="start"></label>Start Date:</span>
<span>10/12/2018</span>
<span>3pm </span>
<span>M, W, F</span>
</div>
</div>
<div class="seat">
<h2 class="justify-content-center d-flex">Seats Remaining</h2>
<span> 25</span>
</div>
</div>
<div class="abc-expand start">
<div class="member d-flex"> <span>Member / Alumni: $165.00 </span> <span> Non -Member: $265.00 </span> <span>SE: $0.00</span></div>
<div class="d-flex class-des">
<div class="col-md-5 no-pad">
<h2>Class Description</h2>
<p>Class follows the American Traffic Safety Services Association curriculum.</p>
<span>Instructor: Samuel Smith</span>
</div>
<div class="col-md-7">
<h2>Class Details</h2>
<p>Start Date: 08/06/2018<br>
End Date: 08/30/2018<br>
Time: 5:00 pm 9:00 pm<br>
Location: Room 102<br>
Days of Week: M, T, W, TH, F<br>
Seats Available: 28<br>
</p>
</div>
</div>
<div class="attendee">
<h3>Attendee Info</h3>
<label>Member / Alumni</label>
<div class="member flex-row d-flex flex-wrap">
<div class="col-sm-10 no-pad">
<ul class="d-flex">
<li><input type="text" placeholder="First Name*"></li>
<li><input type="text" placeholder="Last Name*"></li>
<li><input type="text" placeholder="Email Address*"></li>
<li><input type="text" placeholder="Phone Number*"></li>
</ul>
</div>
<div class="col-sm-2 enroll-btn">
<label class="d-flex">
<span>+</span>
<p>Enroll Attendee</p>
</label>
</div>
<div class="col-sm-10 clone-append no-pad"> </div>
</div>
<label>Non-Member</label>
<div class="member flex-row d-flex flex-wrap">
<div class="col-sm-10 no-pad">
<ul class="d-flex">
<li><input type="text" placeholder="First Name*"></li>
<li><input type="text" placeholder="Last Name*"></li>
<li><input type="text" placeholder="Email Address*"></li>
<li><input type="text" placeholder="Phone Number*"></li>
</ul>
</div>
<div class="col-sm-2 enroll-btn">
<label class="d-flex">
<span>+</span>
<p>Enroll Attendee</p>
</label>
</div>
<div class="col-sm-10 clone-append no-pad"> </div>
</div>
<label>Subscribing Employer</label>
<div class="member flex-row d-flex flex-wrap">
<div class="col-sm-10 no-pad">
<ul class="d-flex">
<li><input type="text" placeholder="First Name*"></li>
<li><input type="text" placeholder="Last Name*"></li>
<li><input type="text" placeholder="Email Address*"></li>
<li><input type="text" placeholder="Phone Number*"></li>
</ul>
</div>
<div class="col-sm-2 enroll-btn">
<label class="d-flex">
<span>+</span>
<p>Enroll Attendee</p>
</label>
</div>
<div class="col-sm-10 clone-append no-pad"> </div>
</div>
</div>
<div class="class-total">
<h3>Class Totals</h3>
<div class="alumi">
<label>Member / Alumni</label>
<div class="d-flex alumi-content">
<div class="col-sm-8">Joe Smith jsmith@yahoo.com (714) 293-2310 <span> X </span></div>
<div class="col-sm-4">$ 196.00</div>
</div>
<label>Non-Member</label>
<div class="d-flex alumi-content">
<div class="col-sm-8">Sam Smith ssmith@yahoo.com (909) 797-1234 <span> X </span></div>
<div class="col-sm-4">$ 254.00</div>
</div>
<div class="d-flex alumi-content">
<div class="col-sm-8">Bob Jones bobjones@msn.com (714) 555-2222 <span> X </span></div>
<div class="col-sm-4">$ 254.00</div>
</div>
<div class="d-flex alumi-content">
<div class="col-sm-8">Sam Smith ssmith@yahoo.com (909) 797-1234 <span> X </span></div>
<div class="col-sm-4">$ 254.00</div>
</div>
<label>Subscribing Employer</label>
<div class="d-flex alumi-content">
<div class="col-sm-8">Joe Smith jsmith@yahoo.com (714) 293-2310 <span> X </span></div>
<div class="col-sm-4">$ 254.00</div>
</div>
<div class="d-flex alumi-content class-sum">
<div class="col-sm-8">Class Total</div>
<div class="col-sm-4">$ 958.00</div>
</div>
</div>
</div>
</div>
<!-- /first item -->
<!-- second item-->
<div class="abc-detail d-flex">
<div class="title">
<h2 class="justify-content-center d-flex">Class Title</h2>
<div class="adv"> Advanced Mechanic's Lien Hrs<span class="hr-span">4</span></div>
<div class="date"><span> <input type="checkbox" id="start1" class="check_box" placeholder="start1"><label for="start1"></label>Start Date:</span>
<span>10/12/2018</span>
<span>3pm </span>
<span>M, W, F</span>
</div>
</div>
<div class="seat">
<h2 class="justify-content-center d-flex">Seats Remaining</h2>
<span> 25</span>
</div>
</div>
<div class="abc-expand start1">
<div class="member"> <span>Member / Alumni: $165.00 </span> <span> Non -Member: $265.00 </span> <span>SE: $0.00</span></div>
<div class="d-flex class-des">
<div class="col-md-5 no-pad">
<h2>Class Description</h2>
<p>Class follows the American Traffic Safety Services Association curriculum.</p>
<span>Instructor: Samuel Smith</span>
</div>
<div class="col-md-7">
<h2>Class Details</h2>
<p>Start Date: 08/06/2018<br>
End Date: 08/30/2018<br>
Time: 5:00 pm 9:00 pm<br>
Location: Room 102<br>
Days of Week: M, T, W, TH, F<br>
Seats Available: 28<br>
</p>
</div>
</div>
<div class="attendee">
<h3>Attendee Info</h3>
<label>Member / Alumni</label>
<div class="member flex-row d-flex flex-wrap">
<div class="col-sm-10 no-pad">
<ul class="d-flex">
<li><input type="text" placeholder="First Name*"></li>
<li><input type="text" placeholder="Last Name*"></li>
<li><input type="text" placeholder="Email Address*"></li>
<li><input type="text" placeholder="Phone Number*"></li>
</ul>
</div>
<div class="col-sm-2 enroll-btn">
<label class="d-flex">
<span>+</span>
<p>Enroll Attendee</p>
</label>
</div>
<div class="col-sm-10 clone-append no-pad"> </div>
</div>
<label>Non-Member</label>
<div class="member flex-row d-flex flex-wrap">
<div class="col-sm-10 no-pad">
<ul class="d-flex">
<li><input type="text" placeholder="First Name*"></li>
<li><input type="text" placeholder="Last Name*"></li>
<li><input type="text" placeholder="Email Address*"></li>
<li><input type="text" placeholder="Phone Number*"></li>
</ul>
</div>
<div class="col-sm-2 enroll-btn">
<label class="d-flex">
<span>+</span>
<p>Enroll Attendee</p>
</label>
</div>
<div class="col-sm-10 clone-append no-pad"> </div>
</div>
<label>Subscribing Employer</label>
<div class="member flex-row d-flex flex-wrap">
<div class="col-sm-10 no-pad">
<ul class="d-flex">
<li><input type="text" placeholder="First Name*"></li>
<li><input type="text" placeholder="Last Name*"></li>
<li><input type="text" placeholder="Email Address*"></li>
<li><input type="text" placeholder="Phone Number*"></li>
</ul>
</div>
<div class="col-sm-2 enroll-btn">
<label class="d-flex">
<span>+</span>
<p>Enroll Attendee</p>
</label>
</div>
<div class="col-sm-10 clone-append no-pad"> </div>
</div>
</div>
<div class="class-total">
<h3>Class Totals</h3>
<div class="alumi">
<label>Member / Alumni</label>
<div class="d-flex alumi-content">
<div class="col-sm-8">Joe Smith jsmith@yahoo.com (714) 293-2310 <span> X </span></div>
<div class="col-sm-4">$ 196.00</div>
</div>
<label>Non-Member</label>
<div class="d-flex alumi-content">
<div class="col-sm-8">Sam Smith ssmith@yahoo.com (909) 797-1234 <span> X </span></div>
<div class="col-sm-4">$ 254.00</div>
</div>
<div class="d-flex alumi-content">
<div class="col-sm-8">Bob Jones bobjones@msn.com (714) 555-2222 <span> X </span></div>
<div class="col-sm-4">$ 254.00</div>
</div>
<div class="d-flex alumi-content">
<div class="col-sm-8">Sam Smith ssmith@yahoo.com (909) 797-1234 <span> X </span></div>
<div class="col-sm-4">$ 254.00</div>
</div>
<label>Subscribing Employer</label>
<div class="d-flex alumi-content">
<div class="col-sm-8">Joe Smith jsmith@yahoo.com (714) 293-2310 <span> X </span></div>
<div class="col-sm-4">$ 254.00</div>
</div>
<div class="d-flex alumi-content class-sum">
<div class="col-sm-8">Class Total</div>
<div class="col-sm-4">$ 958.00</div>
</div>
</div>
</div>
</div>
<!-- /seconditem -->
<div class="d-flex justify-content-between abc-btn">
<div class="p-2"><button type="button" class="btn" style="background: #899ec4;">Back</button></div>
<div class="p-2"><button type="button" class="btn" style="background: #ff0000; color: #fff; ">Reset</button></div>
<div class="p-2"><button type="button" class="btn" style="background: #333366; color: #fff;">Review Order</button></div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<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">
$(document).ready(function() {
$(".enroll-btn").click(function(){
var html="";
html+='<div><ul class="d-flex">'
html+='<li><input type="text" placeholder="First Name*"></li>'
html+='<li><input type="text" placeholder="Last Name*"></li>'
html+=' <li><input type="text" placeholder="Email Address*"></li>'
html+=' <li><input type="text" placeholder="Phone Number*"></li> <button class="cls-btn"> X </button></ul></div>'
$(this).parent().find('.clone-append').append(html).html();
});
$('body').delegate(".cls-btn", "click",function(){
$(this).closest('div').hide();
// // $(this).parent().hide();
// $(this).parent().hide();
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
var inputValue = $(this).attr("placeholder");
$("." + inputValue).toggle();
});
});
</script>
</body>
</html>