Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

final/index.html

Go to file
 
 
Cannot retrieve contributors at this time
executable file 736 lines (677 sloc) 38.2 KB
Raw Blame
Open in GitHub Desktop
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Peregrine Glide Designer</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="./img/Peregrine-Logo.png" alt="Logo"></a>
</div>
</div>
</nav>
<div class="container">
<!-- SVG -->
<div class="col-md-5">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 2000 2000" style="enable-background:new 0 0 2000 2000;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
.st1{fill:#FFFFFF;}
.st2{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
.st3{fill:#FFFFFF;}
.st4{fill:#FFFFFF;}
.st5{fill:#080707;}
</style>
<path id="tape" class="st0" d="M393.3,116.1l162.5-76.2C570.7,56.8,736,165.9,780,290c23.5,66.3,48.3,157.2,55.6,289.6
c7.5,135.8,31,239.8,174.6,239.8c152.6,0,163.6-143.1,163.6-143.1s8-41.8,12.2-95.4c7.3-94.1,25.7-211.1,55.6-292.9
c37.1-101.5,159.4-198.4,222.7-249.1l163.6,77l-145.5,247c0,0-90.6,152.5-129.4,294.2c0,0-53.1,115.2-51.4,183.7
c0.6,24.4,14.3,165,25.3,347.8c2.7,45.3,5.6,88.5,7.2,136.4c10.5,302.8,12.5,634.7,12.5,634.7l-671.8,1.2l11.5-635.6l4-81
l26.9-395.9c0,0,1.6-31.8-7.5-71.3c-8.4-36.7-27-79.3-42-122.7c-0.7-2.1-1.5-4.2-2.2-6.4c-14.5-42.5-37.8-116.3-79.7-198.8
C533.4,346.3,456.5,228,393.3,116.1z"/>
<path id="main-container_2_" class="st0" d="M687.7,1297.5c0,0-12.9,243.8-12.9,317c0,73.2,0,346.6,0,346.6H729
c0,0,12.7-32.6,45.7-74.5c34-43.2,89.2-96.2,151.1-133.1l16.1-191.7L687.7,1297.5z"/>
<path id="main-container_1_" class="st0" d="M1332.5,1297.5c0,0,14.1,242.6,14.1,315.8c0,73.2,0,346.6,0,346.6h-54.2
c0,0-13.4-30.9-46.4-72.8c-34-43.2-87.6-95.8-149.5-132.7l-16.9-193.8L1332.5,1297.5z"/>
<path id="main-container" class="st0" d="M922.6,1782.6h175.4c0,0,62.1,33.2,124.3,111.9c15.1,19.1,30.1,40.8,44.3,65.4h-42.2
l0.1-62.5l-428.2,0.3C796.3,1897.7,847.1,1827.4,922.6,1782.6z"/>
<polygon id="main-pincover" class="st0" points="967,1525 1054,1525 1075.2,1782.6 945.6,1782.6 "/>
<polygon id="mid-flap-center" class="st1" points="948.1,1188.7 1077.8,1188.7 1015.4,1502.4 "/>
<polygon id="mid-flap-left" class="st2" points="939.1,1148.5 851.1,1433 917.8,1502.4 1015.4,1502.4 "/>
<polygon id="mid-flap-right" class="st2" points="1084,1156.3 1170.7,1432.9 1103.6,1502.4 1015.4,1502.4 "/>
<polygon id="reserve-pin-cover" class="st2" points="970.5,1188.7 1053.9,1188.7 1109.8,906.6 910.6,906.6 "/>
<path id="pc-top-cap" class="st2" d="M1120.2,982.3l-26,125.8l54.5,178.7c0,0,59.5-52.7,59.5-138.3
C1208.3,1039.1,1120.2,982.3,1120.2,982.3z"/>
<path id="pc-top-cap_1_" class="st2" d="M900.9,982.3l26.3,125.8l-55.5,178c0,0-61.9-52.6-58.8-155
C815.8,1038.4,900.9,982.3,900.9,982.3z"/>
<path id="reserve-container" class="st2" d="M1120.2,982.3l13.8-75.7h35.2c0,0,46.4,126.3,68.7,219.9
c19.3,81.2,43.6,189.5,43.6,189.5l-92.2,98.5l-40.5-127.8c0,0,68.9-58.3,58.5-163.4C1198.4,1033.4,1120.2,982.3,1120.2,982.3z"/>
<path id="reserve-container_1_" class="st2" d="M900.9,982.3l-13.8-75.7H852c0,0-46.4,123.7-68.7,217.3
c-19.3,81.2-43.6,191.6-43.6,191.6l92.2,96.4l39.9-125.9c0,0-69.1-60.3-57.9-165.3C823.1,1033.4,900.9,982.3,900.9,982.3z"/>
<path id="riser-covers" class="st0" d="M1235.2,611.6l-62.9,234.9c0,0,67.3,197.3,89.1,278.2c20.1,74.8,40.5,172.9,40.5,172.9
l29.6-32.3l-22-365.9c0,0-11.7-91.4,17.4-165.3l26.1-76.8c0,0-28.7-4.6-58.1-14.8C1272.2,634.5,1246.2,622.5,1235.2,611.6z"/>
<path id="riser-covers_1_" class="st0" d="M784.9,606.6l62,240c0,0-65.8,194.5-87.6,275.4c-20.1,74.8-40.5,172.9-40.5,172.9
l-29.6-32.3l22-364.6c0,0,11.7-92.7-17.4-166.5l-26.1-76.8c0,0,29-2,58.4-12.2C748.7,634.5,773.9,617.5,784.9,606.6z"/>
<path id="outside-yoke_1_" class="st0" d="M600.2,435.2l126.2-49.9l53.9,203.9c0,0-41.2,33.1-99.8,45.3
C680.5,634.5,640.9,496.8,600.2,435.2z"/>
<path id="outside-yoke" class="st0" d="M1422,435.2l-126.2-49.9l-55.2,205.9c0,0,42.5,31.1,101.1,43.3
C1341.7,634.5,1381.4,496.8,1422,435.2z"/>
<path id="inside-yoke" class="st0" d="M1238.9,363l56.9,22.3l-133.5,498.3H858.1L726.4,385.3l57.1-22.3c0,0,17.2,67.6,25,134
c9.2,78.2,12.9,186.4,34.5,239.7c36.2,89.3,117.7,101.1,167.1,101.1c58.5,0,131.2-18.4,165-95.9c25.6-63.1,28.5-149.6,40.4-256.8
C1222.8,420.8,1238.9,363,1238.9,363z"/>
<path id="ring-cover-right_2_" class="st0" d="M1584,153.1l16.9-29l-132.8-61.8c0,0-26.2,21.3-27.9,23.5L1584,153.1z"/>
<path id="ring-cover-right" class="st0" d="M1422,101.7c0,0-136.9,102.2-162,197.3l192.9,77.1l118.9-203.8L1422,101.7z"/>
<path id="ring-cover-right_1_" class="st0" d="M1251.8,316.5c0,0-6.6,21.3-7.7,26.8l185.3,75.4l13.7-25.1L1251.8,316.5z"/>
<path id="ring-cover-left_2_" class="st0" d="M437.5,152.7l-16.9-29L553.3,62c0,0,26.2,21.3,27.9,23.5L437.5,152.7z"/>
<path id="ring-cover-left" class="st0" d="M599.5,101.4c0,0,136.9,102.2,162,197.3l-192.9,77.1L449.7,171.9L599.5,101.4z"/>
<path id="ring-cover-left_1_" class="st0" d="M769.7,316.1c0,0,6.6,21.3,7.7,26.8l-185.3,75.4l-13.7-25.1L769.7,316.1z"/>
<polygon id="BOC_1_" class="st0" points="1188.5,1920.6 1188.5,1959.5 1224.4,1959.8 1224.4,1920.6 "/>
<path id="BOC" class="st0" d="M780.6,1920.6c0,0-8.5,9.4-13.7,18.6c-5.7,9.8-12.7,21.9-12.7,21.9l416.7-1.2v-39.3H780.6z"/>
<polygon id="pinstripe8A8" style="fill: rgba(0, 0, 0, 0)" class="st3" points="917.8,1501.1 927.2,1501.1 885.1,1327.7 880.6,1342.1 "/>
<polygon id="pinstrip87" style="fill: rgba(0, 0, 0, 0)" class="st3" points="939.7,1142.3 1016.8,1501.1 1008.1,1501.1 933.8,1161.2 "/>
<polygon id="pinstrip79" style="fill: rgba(0, 0, 0, 0)" class="st3" points="1083.8,1150.1 1009.5,1501.1 1018.2,1501.1 1089.6,1168.9 "/>
<polygon id="pinstripe9A9" style="fill: rgba(0, 0, 0, 0)" class="st3" points="1104,1501.1 1094.6,1501.1 1136.5,1328 1140.9,1342.3 "/>
<polygon id="midflap-lower-left" style="fill: rgba(0, 0, 0, 0)" class="st3" points="880.6,1342.1 853.2,1432.4 917.2,1499.8 "/>
<polygon id="midflap-lower-right" style="fill: rgba(0, 0, 0, 0)" class="st3" points="1140.9,1342.3 1104,1501.1 1168.9,1432.7 "/>
<path id="pinstripe6" style="fill: rgba(0, 0, 0, 0)" class="st3" d="M905.1,999.8l-3.8-19.2c-53.9,35.5-90.5,95.5-90.5,164.9c0,55.1,23.5,106,59.8,142l6.4-20.6
c-29.2-31.9-47-74.4-47-121.1C830.1,1085.6,859.7,1032.4,905.1,999.8z M1119.8,980.9l-4,20c44.5,32.7,73.4,85.4,73.4,144.8
c0,46.2-17.4,88.3-46.1,120.1l6.7,21.7c36.4-36,60-86.9,60-142.2C1209.7,1076.3,1173.4,1016.5,1119.8,980.9z"/>
<polygon id="logo-inside" style="fill: rgba(0, 0, 0, 0)" class="st4" points="1308.8,1590.7 1330.3,1641.5 1283.3,1769.5 1150.6,1736.9 1119.1,1689.5 1161,1689.1
1127.2,1647.2 1184.8,1643.5 1222.4,1690.8 1163.9,1698.4 1176.7,1716.5 1249.6,1733.7 1273.8,1750.5 1270.9,1722 1298.8,1653
1290.7,1633.8 1251.6,1676 1234.7,1617.4 1269.9,1572.5 1285.4,1624 "/>
<polygon id="logo-inside_1_" style="fill: rgba(0, 0, 0, 0)" class="st4" points="1207.4,1597.5 1220.8,1651.9 1183.9,1609.8 "/>
<path id="logo-outline" style="fill: rgba(0, 0, 0, 0)" class="st5" d="M1287.8,1609.5l-15.3-50.6l-44.8,57.1l21.1,73l39.7-43.5l3.4,7.7l-27.4,67.9l1.7,16
l-13.2-9.1l-72.4-17l-5.5-7.7l60.1-7.3l-47.3-59.1l-73.4,4.5l33.2,41.3l-40.4,0.4l39.3,59.3l140.6,34.6l50-135.7l-27.1-63.8
L1287.8,1609.5z M1330.3,1641.5l-47.1,128l-132.7-32.7l-31.5-47.3l41.9-0.4l-33.8-41.9l57.7-3.7l37.6,47.2l-58.5,7.7l12.7,18
l72.9,17.2l24.2,16.7l-2.9-28.5l27.9-68.9l-8.1-19.3l-39.1,42.3l-16.9-58.7l35.2-44.8l15.6,51.5l23.3-33.3L1330.3,1641.5z"/>
<path id="logo-outline_1_" style="fill: rgba(0, 0, 0, 0)" class="st5" d="M1173.6,1607.9l59.7,68l-21.8-87.8L1173.6,1607.9z M1183.9,1609.8l23.5-12.3
l13.4,54.4L1183.9,1609.8z"/>
<polygon id="logo-inside_2_" style="fill: rgba(0, 0, 0, 0)" class="st4" points="713.8,1590.8 692.2,1641.5 739.3,1769.6 872,1736.9 903.4,1689.6 861.6,1689.2
895.4,1647.2 837.7,1643.6 800.1,1690.8 858.6,1698.5 845.9,1716.5 772.9,1733.8 748.8,1750.5 751.6,1722 723.8,1653.1
731.9,1633.8 771,1676.1 787.8,1617.4 752.7,1572.6 737.1,1624.1 "/>
<polygon id="logo-inside_3_" style="fill: rgba(0, 0, 0, 0)" class="st4" points="815.2,1597.6 801.7,1652 838.6,1609.8 "/>
<path id="logo-outline_2_" style="fill: rgba(0, 0, 0, 0)" class="st5" d="M712.4,1577.7l-27.1,63.8l50,135.7l140.6-34.6l39.3-59.3l-40.4-0.4l33.2-41.3l-73.4-4.5
l-47.3,59.1l60.1,7.3l-5.5,7.7l-72.4,17l-13.2,9.1l1.7-16l-27.4-67.9l3.4-7.7l39.7,43.4l21.1-73l-44.8-57.1l-15.3,50.6L712.4,1577.7
z M713.8,1590.8l23.3,33.3l15.6-51.5l35.2,44.8l-16.9,58.7l-39.1-42.3l-8.1,19.3l27.9,68.9l-2.9,28.5l24.2-16.7l72.9-17.2l12.7-18
l-58.5-7.7l37.6-47.2l57.7,3.7l-33.8,41.9l41.9,0.4l-31.5,47.3l-132.7,32.7l-47.1-128L713.8,1590.8z"/>
<path id="logo-outline_3_" style="fill: rgba(0, 0, 0, 0)" class="st5" d="M811,1588.1l-21.8,87.8l59.7-68L811,1588.1z M801.7,1652l13.4-54.4l23.5,12.3
L801.7,1652z"/>
</svg>
</div>
<div class="col-md-7">
<!-- SELECT MATERIAL -->
<div class="row material">
<div class="col-md-6">
<form id="material">
<div class="form-group">
<label class="col-md-6 control-label">Material Type</label>
<div class="col-md-6">
<select class="form-control" id="Material">
<option selected="selected" value="500Cordura">500 Cordura</option>
<option value="1000dCordura">1000d Cordura</option>
<option value="Parapak">Parapak</option>
</select>
</div>
</div>
</form>
</div>
<hr>
</div>
<!-- SELECT COLORS LEFT-->
<div class="row">
<div class="col-md-6">
<form>
<!--Left Ring Cover-->
<div class="form-group row">
<label class="col-md-6 control-label">Left Ring Cover</label>
<div class="col-md-6">
<select data-target="#ring-cover-left #ring-cover-left_1_ #ring-cover-left_2_" class="form-control color" id="leftRingCover">
<option selected="selected" value="#FFFFFF">White</option>
<option value="#000000">Black</option>
<option value="#26732c">Green</option>
<option value="#949494">Grey</option>
<option value="#e66300">Orange</option>
<option value="#eb7891">Pink</option>
<option value="#6e4668">Purple</option>
<option value="#bf0208">Red</option>
<option value="#3d4899">Royal Blue</option>
<option value="#36a6a8">Teal</option>
<option value="#edea1c">Yellow</option>
</select>
</div>
</div>
<!--Right Ring Cover-->
<div class="form-group row">
<label class="col-md-6 control-label">Right Ring Cover</label>
<div class="col-md-6">
<select data-target="#ring-cover-right #ring-cover-right_1_ #ring-cover-right_2_" class="form-control color" id="rightRingCover">
<option selected="selected" value="#FFFFFF">White</option>
<option value="#000000">Black</option>
<option value="#26732c">Green</option>
<option value="#949494">Grey</option>
<option value="#e66300">Orange</option>
<option value="#eb7891">Pink</option>
<option value="#6e4668">Purple</option>
<option value="#bf0208">Red</option>
<option value="#3d4899">Royal Blue</option>
<option value="#36a6a8">Teal</option>
<option value="#edea1c">Yellow</option>
</select>
</div>
</div>
<!--Inside Yoke-->
<div class="form-group row">
<label class="col-md-6 control-label">Inside Yoke</label>
<div class="col-md-6">
<select data-target="#inside-yoke" class="form-control color" id="insideYoke">
<option selected="selected" value="#FFFFFF">White</option>
<option value="#000000">Black</option>
<option value="#26732c">Green</option>
<option value="#949494">Grey</option>
<option value="#e66300">Orange</option>
<option value="#eb7891">Pink</option>
<option value="#6e4668">Purple</option>
<option value="#bf0208">Red</option>
<option value="#3d4899">Royal Blue</option>
<option value="#36a6a8">Teal</option>
<option value="#edea1c">Yellow</option>
</select>
</div>
</div>
<!--Outside Yoke-->
<div class="form-group row">
<label class="col-md-6 control-label">Outside Yoke</label>
<div class="col-md-6">
<select data-target="#outside-yoke #outside-yoke_1_" class="form-control color" id="outsideYoke">
<option selected="selected" value="#FFFFFF">White</option>
<option value="#000000">Black</option>
<option value="#26732c">Green</option>
<option value="#949494">Grey</option>
<option value="#e66300">Orange</option>
<option value="#eb7891">Pink</option>
<option value="#6e4668">Purple</option>
<option value="#bf0208">Red</option>
<option value="#3d4899">Royal Blue</option>
<option value="#36a6a8">Teal</option>
<option value="#edea1c">Yellow</option>
</select>
</div>
</div>
<!--Riser Covers-->
<div class="form-group row">
<label class="col-md-6 control-label">Riser Covers</label>
<div class="col-md-6">
<select data-target="#riser-covers #riser-covers_1_" class="form-control color" id="riserCovers">
<option selected="selected" value="#FFFFFF">White</option>
<option value="#000000">Black</option>
<option value="#26732c">Green</option>
<option value="#949494">Grey</option>
<option value="#e66300">Orange</option>
<option value="#eb7891">Pink</option>
<option value="#6e4668">Purple</option>
<option value="#bf0208">Red</option>
<option value="#3d4899">Royal Blue</option>
<option value="#36a6a8">Teal</option>
<option value="#edea1c">Yellow</option>
</select>
</div>
</div>
<!--Reserve Pin Cover-->
<div class="form-group row">
<label class="col-md-6 control-label">Res Pin Cover</label>
<div class="col-md-6">
<select data-target="#reserve-pin-cover" class="form-control color" id="reservePinCover">
<option selected="selected" value="#FFFFFF">White</option>
<option value="#000000">Black</option>
<option value="#26732c">Green</option>
<option value="#949494">Grey</option>
<option value="#e66300">Orange</option>
<option value="#eb7891">Pink</option>
<option value="#6e4668">Purple</option>
<option value="#bf0208">Red</option>
<option value="#3d4899">Royal Blue</option>
<option value="#36a6a8">Teal</option>
<option value="#edea1c">Yellow</option>
</select>
</div>
</div>
<!-- Pilot Chute Top Cap -->
<div class="form-group row">
<label class="col-md-6 control-label">PC Top Cap</label>
<div class="col-md-6">
<select data-target="#pc-top-cap #pc-top-cap_1_" class="form-control color" id="PCTopCap">
<option selected="selected" value="#FFFFFF">White</option>
<option value="#000000">Black</option>
<option value="#26732c">Green</option>
<option value="#949494">Grey</option>
<option value="#e66300">Orange</option>
<option value="#eb7891">Pink</option>
<option value="#6e4668">Purple</option>
<option value="#bf0208">Red</option>
<option value="#3d4899">Royal Blue</option>
<option value="#36a6a8">Teal</option>
<option value="#edea1c">Yellow</option>
</select>
</div>
</div>
<!-- Mid Flap Center -->
<div class="form-group row">
<label class="col-md-6 control-label">Mid Flap Center</label>
<div class="col-md-6">
<select data-target ="#mid-flap-center" class="form-control color" id="MidFlapCenter">
<option selected="selected" value="#FFFFFF">White</option>
<option value="#000000">Black</option>
<option value="#26732c">Green</option>
<option value="#949494">Grey</option>
<option value="#e66300">Orange</option>
<option value="#eb7891">Pink</option>
<option value="#6e4668">Purple</option>
<option value="#bf0208">Red</option>
<option value="#3d4899">Royal Blue</option>
<option value="#36a6a8">Teal</option>
<option value="#edea1c">Yellow</option>
</select>
</div>
</div>
</form>
</div>
<!-- SELECT COLORS RIGHT-->
<div class="col-md-6">
<form>
<!--Mid Flap Left-->
<div class="form-group row">
<label class="col-md-6 control-label">Mid Flap Left</label>
<div class="col-md-6">
<select data-target="#mid-flap-left" class="form-control color" id="midFlapLeft">
<option selected="selected" value="#FFFFFF">White</option>
<option value="#000000">Black</option>
<option value="#26732c">Green</option>
<option value="#949494">Grey</option>
<option value="#e66300">Orange</option>
<option value="#eb7891">Pink</option>
<option value="#6e4668">Purple</option>
<option value="#bf0208">Red</option>
<option value="#3d4899">Royal Blue</option>
<option value="#36a6a8">Teal</option>
<option value="#edea1c">Yellow</option>
</select>
</div>
</div>
<!--Mid Flap Right-->
<div class="form-group row">
<label class="col-md-6 control-label">Mid Flap Right</label>
<div class="col-md-6">
<select data-target="#mid-flap-right" class="form-control color" id="midFlapRight">
<option selected="selected" value="#FFFFFF">White</option>
<option value="#000000">Black</option>
<option value="#26732c">Green</option>
<option value="#949494">Grey</option>
<option value="#e66300">Orange</option>
<option value="#eb7891">Pink</option>
<option value="#6e4668">Purple</option>
<option value="#bf0208">Red</option>
<option value="#3d4899">Royal Blue</option>
<option value="#36a6a8">Teal</option>
<option value="#edea1c">Yellow</option>
</select>
</div>
</div>
<!--Reserve Container-->
<div class="form-group row">
<label class="col-md-6 control-label">Res Container</label>
<div class="col-md-6">
<select data-target="#reserve-container #reserve-container_1_" class="form-control color" id="reserveContainer">
<option selected="selected" value="#FFFFFF">White</option>
<option value="#000000">Black</option>
<option value="#26732c">Green</option>
<option value="#949494">Grey</option>
<option value="#e66300">Orange</option>
<option value="#eb7891">Pink</option>
<option value="#6e4668">Purple</option>
<option value="#bf0208">Red</option>
<option value="#3d4899">Royal Blue</option>
<option value="#36a6a8">Teal</option>
<option value="#edea1c">Yellow</option>
</select>
</div>
</div>
<!--Main Container-->
<div class="form-group row">
<label class="col-md-6 control-label">Main Container</label>
<div class="col-md-6">
<select data-target="#main-container #main-container_2_ #main-container_1_ " class="form-control color" id="mainContainer">
<option selected="selected" value="#FFFFFF">White</option>
<option value="#000000">Black</option>
<option value="#26732c">Green</option>
<option value="#949494">Grey</option>
<option value="#e66300">Orange</option>
<option value="#eb7891">Pink</option>
<option value="#6e4668">Purple</option>
<option value="#bf0208">Red</option>
<option value="#3d4899">Royal Blue</option>
<option value="#36a6a8">Teal</option>
<option value="#edea1c">Yellow</option>
</select>
</div>
</div>
<!-- Main Pincover -->
<div class="form-group row">
<label class="col-md-6 control-label">Main Pincover</label>
<div class="col-md-6">
<select data-target="#main-pincover" class="form-control color" id="mainPincover">
<option selected="selected" value="#FFFFFF">White</option>
<option value="#000000">Black</option>
<option value="#26732c">Green</option>
<option value="#949494">Grey</option>
<option value="#e66300">Orange</option>
<option value="#eb7891">Pink</option>
<option value="#6e4668">Purple</option>
<option value="#bf0208">Red</option>
<option value="#3d4899">Royal Blue</option>
<option value="#36a6a8">Teal</option>
<option value="#edea1c">Yellow</option>
</select>
</div>
</div>
<!-- BOC Pocket -->
<div class="form-group row">
<label class="col-md-6 control-label">BOC Pocket</label>
<div class="col-md-6">
<select data-target="#BOC #BOC_1_" class="form-control color" id="BOCPocket">
<option selected="selected" value="#FFFFFF">White</option>
<option value="#000000">Black</option>
<option value="#26732c">Green</option>
<option value="#949494">Grey</option>
<option value="#e66300">Orange</option>
<option value="#eb7891">Pink</option>
<option value="#6e4668">Purple</option>
<option value="#bf0208">Red</option>
<option value="#3d4899">Royal Blue</option>
<option value="#36a6a8">Teal</option>
<option value="#edea1c">Yellow</option>
</select>
</div>
</div>
<!-- Binding Tape -->
<div class="form-group row">
<label class="col-md-6 control-label">Binding Tape</label>
<div class="col-md-6">
<select data-target="#tape" class="form-control color" id="BindingTape">
<option selected="selected" value="#FFFFFF">White</option>
<option value="#000000">Black</option>
<option value="#26732c">Green</option>
<option value="#949494">Grey</option>
<option value="#e66300">Orange</option>
<option value="#eb7891">Pink</option>
<option value="#6e4668">Purple</option>
<option value="#bf0208">Red</option>
<option value="#3d4899">Royal Blue</option>
<option value="#36a6a8">Teal</option>
<option value="#edea1c">Yellow</option>
</select>
</div>
</div>
</form>
</div>
</div>
<hr>
</div><!-- end right half -->
<!-- OPTIONS-->
<div class="row">
<div class="col-md-4">
<form>
<h3>Lower Mid Flaps (+$40 each)</h3>
<!--Mid Flap Lower Left-->
<div class="form-group row">
<label class="col-md-6 control-label">Mid Flap Lower Left</label>
<div class="col-md-6">
<select data-target="#midflap-lower-left" class="form-control color" id="midFlapLowerLeft" name="midFlapLowerLeft">
<option selected="selected" value="none">None</option>
<option value="#FFFFFF">White</option>
<option value="#000000">Black</option>
<option value="#26732c">Green</option>
<option value="#949494">Grey</option>
<option value="#e66300">Orange</option>
<option value="#eb7891">Pink</option>
<option value="#6e4668">Purple</option>
<option value="#bf0208">Red</option>
<option value="#3d4899">Royal Blue</option>
<option value="#36a6a8">Teal</option>
<option value="#edea1c">Yellow</option>
</select>
</div>
</div>
<!--Mid Flap Lower Right-->
<div class="form-group row">
<label class="col-md-6 control-label">Mid Flap Lower Right</label>
<div class="col-md-6">
<select data-target="#midflap-lower-right" class="form-control color" id="midFlapLowerRight" name="midFlapLowerRight">
<option selected="selected" value="none">None</option>
<option value="#FFFFFF">White</option>
<option value="#000000">Black</option>
<option value="#26732c">Green</option>
<option value="#949494">Grey</option>
<option value="#e66300">Orange</option>
<option value="#eb7891">Pink</option>
<option value="#6e4668">Purple</option>
<option value="#bf0208">Red</option>
<option value="#3d4899">Royal Blue</option>
<option value="#36a6a8">Teal</option>
<option value="#edea1c">Yellow</option>
</select>
</div>
</div>
</div>
<div class="col-md-4">
<h3>Pinstripes (+$20 each)</h3>
<!--Pinstripe 6-->
<div class="form-group row">
<label class="col-md-6 control-label">Pinstripe 6</label>
<div class="col-md-6">
<select data-target="#pinstripe6" class="form-control color">
<option selected="selected" value="rgba(0, 0, 0, 0)">None</option>
<option value="#FFFFFF">White</option>
<option value="#000000">Black</option>
<option value="#26732c">Green</option>
<option value="#949494">Grey</option>
<option value="#e66300">Orange</option>
<option value="#eb7891">Pink</option>
<option value="#6e4668">Purple</option>
<option value="#bf0208">Red</option>
<option value="#3d4899">Royal Blue</option>
<option value="#36a6a8">Teal</option>
<option value="#edea1c">Yellow</option>
</select>
</div>
</div>
<!--Pinstripe 8A/8-->
<div class="form-group row">
<label class="col-md-6 control-label">Pinstripe 8A/8</label>
<div class="col-md-6">
<select data-target="#pinstripe8A8" class="form-control color" >
<option selected="selected" value="rgba(0, 0, 0, 0)">None</option>
<option value="#FFFFFF">White</option>
<option value="#000000">Black</option>
<option value="#26732c">Green</option>
<option value="#949494">Grey</option>
<option value="#e66300">Orange</option>
<option value="#eb7891">Pink</option>
<option value="#6e4668">Purple</option>
<option value="#bf0208">Red</option>
<option value="#3d4899">Royal Blue</option>
<option value="#36a6a8">Teal</option>
<option value="#edea1c">Yellow</option>
</select>
</div>
</div>
<!--Pinstripe 8/7-->
<div class="form-group row">
<label class="col-md-6 control-label">Pinstripe 8/7</label>
<div class="col-md-6">
<select data-target="#pinstrip87" class="form-control color">
<option selected="selected" value="rgba(0, 0, 0, 0)">None</option>
<option value="#FFFFFF">White</option>
<option value="#000000">Black</option>
<option value="#26732c">Green</option>
<option value="#949494">Grey</option>
<option value="#e66300">Orange</option>
<option value="#eb7891">Pink</option>
<option value="#6e4668">Purple</option>
<option value="#bf0208">Red</option>
<option value="#3d4899">Royal Blue</option>
<option value="#36a6a8">Teal</option>
<option value="#edea1c">Yellow</option>
</select>
</div>
</div>
<!--Pinstripe 7/9-->
<div class="form-group row">
<label class="col-md-6 control-label">Pinstripe 7/9</label>
<div class="col-md-6">
<select data-target="#pinstrip79" class="form-control color">
<option selected="selected" value="rgba(0, 0, 0, 0)">None</option>
<option value="#FFFFFF">White</option>
<option value="#000000">Black</option>
<option value="#26732c">Green</option>
<option value="#949494">Grey</option>
<option value="#e66300">Orange</option>
<option value="#eb7891">Pink</option>
<option value="#6e4668">Purple</option>
<option value="#bf0208">Red</option>
<option value="#3d4899">Royal Blue</option>
<option value="#36a6a8">Teal</option>
<option value="#edea1c">Yellow</option>
</select>
</div>
</div>
<!--Pinstripe 9/9A-->
<div class="form-group row">
<label class="col-md-6 control-label">Pinstripe 9/9A</label>
<div class="col-md-6">
<select data-target="#pinstripe9A9" class="form-control color">
<option selected="selected" value="rgba(0, 0, 0, 0)">None</option>
<option value="#FFFFFF">White</option>
<option value="#000000">Black</option>
<option value="#26732c">Green</option>
<option value="#949494">Grey</option>
<option value="#e66300">Orange</option>
<option value="#eb7891">Pink</option>
<option value="#6e4668">Purple</option>
<option value="#bf0208">Red</option>
<option value="#3d4899">Royal Blue</option>
<option value="#36a6a8">Teal</option>
<option value="#edea1c">Yellow</option>
</select>
</div>
</div>
</div>
<div class="col-md-4">
<h3>Logo</h3>
<!--Peregrine Logo Fill-->
<div class="form-group row">
<label class="col-md-6 control-label">Peregrine Logo Fill</label>
<div class="col-md-6">
<select data-target="#logo-inside #logo-inside_1_ #logo-inside_2_ #logo-inside_3_" class="form-control color">
<option selected="selected" value="rgba(0, 0, 0, 0)">None</option>
<option value="#FFFFFF">White</option>
<option value="#000000">Black</option>
<option value="#26732c">Green</option>
<option value="#949494">Grey</option>
<option value="#e66300">Orange</option>
<option value="#eb7891">Pink</option>
<option value="#6e4668">Purple</option>
<option value="#bf0208">Red</option>
<option value="#3d4899">Royal Blue</option>
<option value="#36a6a8">Teal</option>
<option value="#edea1c">Yellow</option>
</select>
</div>
</div>
<!--Peregrine Logo Outline-->
<div class="form-group row">
<label class="col-md-6 control-label">Peregrine Logo Outline</label>
<div class="col-md-6">
<select data-target="#logo-outline #logo-outline_1_ #logo-outline_2_ #logo-outline_3_" class="form-control color">
<option selected="selected" value="rgba(0, 0, 0, 0)">None</option>
<option value="#FFFFFF">White</option>
<option value="#000000">Black</option>
<option value="#26732c">Green</option>
<option value="#949494">Grey</option>
<option value="#e66300">Orange</option>
<option value="#eb7891">Pink</option>
<option value="#6e4668">Purple</option>
<option value="#bf0208">Red</option>
<option value="#3d4899">Royal Blue</option>
<option value="#36a6a8">Teal</option>
<option value="#edea1c">Yellow</option>
</select>
</div>
</div>
</div>
</form>
</div>
</div>
<hr>
</div><!-- end right half -->
</div> <!-- end container-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
$("#ddlMaterial").change(function () {
if ($(this).val() == "Parapak") {
$("#fabricCameroon").hide();
$("#fabricZP").hide();
$("#fabricParapak").show();
$('#fabricParapak .color').each(function () {
$(this).change();
});
} else if ($(this).val() == "BalloonZP") {
$("#fabricCameroon").hide();
$("#fabricZP").show();
$("#fabricParapak").hide();
$('#fabricZP .color').each(function () {
$(this).change();
});
} else if ($(this).val() == "CameroonUntraLight") {
$("#fabricCameroon").show();
$("#fabricZP").hide();
$("#fabricParapak").hide();
$('#fabricCameroon .color').each(function () {
$(this).change();
});
}
});
</script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>