You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
235 lines
11 KiB
Plaintext
235 lines
11 KiB
Plaintext
<!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>Document</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"
|
|
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.2/dist/semantic.min.js"
|
|
integrity="sha256-k89McqiQeAeH3zwEUu8tOiKsHSYgZ4cvxaYhPtPOg34=" crossorigin="anonymous"></script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.2/dist/semantic.min.css"
|
|
integrity="sha256-ot9Eohfi9t3iQkCNQKYTu9O9kjKx5iJ5hkQ0u1xZLik=" crossorigin="anonymous">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="ui container">
|
|
<form class="ui form">
|
|
<h4 class="ui dividing header">Instant Quote</h4>
|
|
<div class="field">
|
|
<label>Name</label>
|
|
<div class="two fields">
|
|
<div class="field">
|
|
<input type="text" name="shipping[first-name]" placeholder="First Name">
|
|
</div>
|
|
<div class="field">
|
|
<input type="text" name="shipping[last-name]" placeholder="Last Name">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Service Address</label>
|
|
<div class="fields">
|
|
<div class="twelve wide field">
|
|
<input type="text" name="shipping[address]" placeholder="Street Address">
|
|
</div>
|
|
<div class="four wide field">
|
|
<input type="text" name="shipping[address-2]" placeholder="Apt #">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="two fields">
|
|
<div class="ten wide field">
|
|
<label>State</label>
|
|
<select class="ui fluid dropdown">
|
|
<option value="">State</option>
|
|
<option value="ACT">Australian Capital Territory</option>
|
|
<option value="NSW">New South Wales</option>
|
|
<option value="NT">Northern Territory</option>
|
|
<option value="QLD">Queensland</option>
|
|
<option value="SA">South Australia</option>
|
|
<option value="TAS">Tasmania</option>
|
|
<option value="VIC" selected="selected">Victoria</option>
|
|
<option value="WA">Western Australia</option>
|
|
</select>
|
|
</div>
|
|
<div class="six wide field">
|
|
<label>Postcode</label>
|
|
<input type="text" name="shipping[postcode]" placeholder="3000">
|
|
</div>
|
|
</div>
|
|
<h4 class="ui dividing header">Usage information</h4>
|
|
<div class="ui cards">
|
|
<label>What kind of calls do you handle?</label><br><br>
|
|
<div class="ui card">
|
|
<div class="image">
|
|
<i class="massive angle double down icon"></i>
|
|
</div>
|
|
<div class="content">
|
|
<a class="header">Receieve</a>
|
|
<div class="description">
|
|
We mostly receieve calls, with few outbound calls
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui card">
|
|
<div class="image">
|
|
<i class="massive balance scale icon"></i>
|
|
</div>
|
|
<div class="content">
|
|
<a class="header">Balanced</a>
|
|
<div class="description">
|
|
We have a good balance of inbound and outbound calls
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui card">
|
|
<div class="image">
|
|
<i class="massive angle double up icon"></i>
|
|
</div>
|
|
<div class="content">
|
|
<a class="header">Make</a>
|
|
<div class="description">
|
|
We mostly make outbound calls
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br><br>
|
|
<div class="ui cards">
|
|
<div class="ui card">
|
|
<div class="image">
|
|
<i class="massive headset icon"></i>
|
|
</div>
|
|
<div class="content">
|
|
<a class="header">Receieve</a>
|
|
<div class="description">
|
|
We mostly receieve calls, with few outbound calls
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui card">
|
|
<div class="image">
|
|
<i class="massive balance scale icon"></i>
|
|
</div>
|
|
<div class="content">
|
|
<a class="header">Balanced</a>
|
|
<div class="description">
|
|
We have a good balance of inbound and outbound calls
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui card">
|
|
<div class="image">
|
|
<i class="massive angle double up icon"></i>
|
|
</div>
|
|
<div class="content">
|
|
<a class="header">Make</a>
|
|
<div class="description">
|
|
We mostly make outbound calls
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br><br>
|
|
<div class="field">
|
|
<label>How many staff do you have?</label>
|
|
<div class="ui labeled ticked slider" id="interpretedlabel"></div>
|
|
<script>
|
|
var labels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10+'];
|
|
$('#interpretedlabel')
|
|
.slider({
|
|
min: 1, max: 10,
|
|
interpretLabel: function (value) {
|
|
return labels[value];
|
|
}
|
|
})
|
|
;
|
|
</script>
|
|
</div>
|
|
<div class="fields">
|
|
<div class="seven wide field">
|
|
<label>Card Number</label>
|
|
<input type="text" name="card[number]" maxlength="16" placeholder="Card #">
|
|
</div>
|
|
<div class="three wide field">
|
|
<label>CVC</label>
|
|
<input type="text" name="card[cvc]" maxlength="3" placeholder="CVC">
|
|
</div>
|
|
<div class="six wide field">
|
|
<label>Expiration</label>
|
|
<div class="fields">
|
|
<div class="eight wide field">
|
|
<select class="ui fluid search dropdown" name="card[expire-month]">
|
|
<option value="">Month</option>
|
|
<option value="1">January</option>
|
|
<option value="2">February</option>
|
|
<option value="3">March</option>
|
|
<option value="4">April</option>
|
|
<option value="5">May</option>
|
|
<option value="6">June</option>
|
|
<option value="7">July</option>
|
|
<option value="8">August</option>
|
|
<option value="9">September</option>
|
|
<option value="10">October</option>
|
|
<option value="11">November</option>
|
|
<option value="12">December</option>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<input type="text" name="card[expire-year]" maxlength="4" placeholder="Year">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h4 class="ui dividing header">Receipt</h4>
|
|
<div class="field">
|
|
<label>Send Receipt To:</label>
|
|
<div class="ui fluid multiple search selection dropdown">
|
|
<input type="hidden" name="receipt">
|
|
<i class="dropdown icon"></i>
|
|
<div class="default text">Saved Contacts</div>
|
|
<div class="menu">
|
|
<div class="item" data-value="jenny" data-text="Jenny">
|
|
<img class="ui mini avatar image" src="/images/avatar/small/jenny.jpg">
|
|
Jenny Hess
|
|
</div>
|
|
<div class="item" data-value="elliot" data-text="Elliot">
|
|
<img class="ui mini avatar image" src="/images/avatar/small/elliot.jpg">
|
|
Elliot Fu
|
|
</div>
|
|
<div class="item" data-value="stevie" data-text="Stevie">
|
|
<img class="ui mini avatar image" src="/images/avatar/small/stevie.jpg">
|
|
Stevie Feliciano
|
|
</div>
|
|
<div class="item" data-value="christian" data-text="Christian">
|
|
<img class="ui mini avatar image" src="/images/avatar/small/christian.jpg">
|
|
Christian
|
|
</div>
|
|
<div class="item" data-value="matt" data-text="Matt">
|
|
<img class="ui mini avatar image" src="/images/avatar/small/matt.jpg">
|
|
Matt
|
|
</div>
|
|
<div class="item" data-value="justen" data-text="Justen">
|
|
<img class="ui mini avatar image" src="/images/avatar/small/justen.jpg">
|
|
Justen Kitsune
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui segment">
|
|
<div class="field">
|
|
<div class="ui toggle checkbox">
|
|
<input type="checkbox" name="gift" tabindex="0" class="hidden">
|
|
<label>Do not include a receipt in the package</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui button" tabindex="0">Submit Order</div>
|
|
</form>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |