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.
422 lines
19 KiB
HTML
422 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" ng-app="instantQuote">
|
|
|
|
<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>Instant Quote</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"
|
|
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular-csp.css"
|
|
integrity="sha512-f7WVHp6iaZ7iOx9duYm67KLwCFJ9KirfMIK0MAOxf1wq5M8Ogdw5ljbCxlk/BtWIbyXWMsIaDaqwUpXttPQ/5g=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.2/dist/semantic.min.js"
|
|
integrity="sha256-k89McqiQeAeH3zwEUu8tOiKsHSYgZ4cvxaYhPtPOg34=" crossorigin="anonymous"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"
|
|
integrity="sha512-KZmyTq3PLx9EZl0RHShHQuXtrvdJ+m35tuOiwlcZfs/rE7NZv29ygNA8SFCkMXTnYZQK2OX0Gm2qKGfvWEtRXA=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.2/dist/semantic.min.css"
|
|
integrity="sha256-ot9Eohfi9t3iQkCNQKYTu9O9kjKx5iJ5hkQ0u1xZLik=" crossorigin="anonymous">
|
|
<script src="pbx.js"></script>
|
|
<script>
|
|
$(document)
|
|
.ready(function () {
|
|
// $('.special.card .image').dimmer({
|
|
// on: 'hover'
|
|
// });
|
|
|
|
// $('.card .dimmer')
|
|
// .dimmer({
|
|
// on: 'hover'
|
|
// });
|
|
|
|
$('#numberofstaff').slider({
|
|
min: 1, max: 6,
|
|
interpretLabel: function (value) {
|
|
return ["1-5", "5-10", "10-20", "20-50", "50-100", "100+"][value];
|
|
}
|
|
});
|
|
$('#numberofsites').slider({
|
|
min: 1, max: 6,
|
|
interpretLabel: function (value) {
|
|
return ["1", "2", "3", "4", "5-10", "10+"][value];
|
|
}
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
<style>
|
|
.ui.dividing.header {
|
|
margin-top: 3em;
|
|
}
|
|
|
|
.masthead {
|
|
padding: 3em 0em !important;
|
|
}
|
|
|
|
.allcaps {
|
|
text-transform: uppercase !important;
|
|
}
|
|
|
|
#why .icon {
|
|
color: rgb(0, 44, 117) !important;
|
|
}
|
|
|
|
/* icons in cards */
|
|
.card .image > i.icon {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 50%;
|
|
margin-bottom: 25%;
|
|
margin-top: 25%;
|
|
|
|
}
|
|
/* .yellow {
|
|
color: rgb(245, 209, 47);
|
|
} */
|
|
</style>
|
|
</head>
|
|
|
|
<body ng-controller="PBX">
|
|
<div class="ui container">
|
|
<h2 class="ui dividing header">Why choose a Chris Humphrey Office National phone system?</h2>
|
|
<br>
|
|
<div class="ui three column grid" id="why">
|
|
<div class="column">
|
|
<i class="massive blue map marker alternate icon"></i>
|
|
<h3 class="ui header">Local support</h3>
|
|
<p>Our team is based right here in Traralgon, providing top-tier support for local businesses like
|
|
yours.</p>
|
|
</div>
|
|
<div class="column">
|
|
<i class="massive blue sliders horizontal icon"></i>
|
|
<h3 class="ui header">Totally customized</h3>
|
|
<p>With a powerful featureset and mryiad of customization options, we'll make the phone system work
|
|
perfectly for your business.</p>
|
|
</div>
|
|
<div class="column">
|
|
<i class="massive blue cloud icon"></i>
|
|
<h3 class="ui header">Cloud flexible</h3>
|
|
<p>Our phone systems are not tied to your office, or even an internet connection - our services will
|
|
work just about everywhere.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<div class="ui inverted vertical masthead left aligned segment" style="background-color: rgb(0, 44, 117)">
|
|
<div class="ui container">
|
|
<img class="ui medium right floated image" src="yealink-cordless.png" style="margin-top: -5em">
|
|
<h3 class="ui inverted yellow header">
|
|
Exclusive offer
|
|
</h3>
|
|
<h1 class="ui inverted header allcaps">
|
|
Get your first month free
|
|
</h1>
|
|
<h3>When you order a new phone system and commit to 12 months; you could save up to <b>$120!</b></h3>
|
|
<a class="ui huge yellow button" href="#aboutyourbusiness">Get Started <i class="right arrow icon"></i></a>
|
|
<a class="ui huge yellow basic button" href="tel:61351730911">Call us now <i
|
|
class="phone icon"></i></a>
|
|
<br>
|
|
<br>
|
|
<p class="ui small text">Conditions apply, subject to eligibility criteria and availability.</p>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="ui container" id="aboutyourbusiness">
|
|
<h4 class="ui dividing header">About your business</h4>
|
|
<div class="ui stackable grid">
|
|
<div class="left floated seven wide column">
|
|
<p>How many staff do you have?</p>
|
|
<div class="ui labeled ticked slider" id="numberofstaff"></div>
|
|
</div>
|
|
<!-- <div class="two wide column"></div> -->
|
|
<div class="right floated seven wide column">
|
|
<p>How many sites do you have?</p>
|
|
<div class="ui labeled ticked slider" id="numberofsites"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui container" id="phonenumbers">
|
|
<h4 class="ui dividing header">Phone Numbers</h4>
|
|
<p>We'll make switching to us easy - we just need to know what numbers you currently have and who they're with.
|
|
</p>
|
|
<table class="ui celled table">
|
|
<thead>
|
|
<tr>
|
|
<th>Phone Number</th>
|
|
<th>Account Number</th>
|
|
<th>Current Carrier</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr ng-repeat="number in options.phoneNumbers">
|
|
<td data-label="Phone Number">
|
|
<div class="ui fluid transparent input">
|
|
<input type="text" placeholder="Phone Number" ng-model="number.phone">
|
|
</div>
|
|
</td>
|
|
<td data-label="Account Number">
|
|
<div class="ui fluid transparent input">
|
|
<input type="text" placeholder="Account Number" ng-model="number.account">
|
|
</div>
|
|
</td>
|
|
<td data-label="Current Carrier">
|
|
<div class="ui fluid transparent input">
|
|
<input type="text" placeholder="Current Carrier" ng-model="number.carrier">
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<a class="ui blue button" ng-click="addNumber()">Add</a>
|
|
|
|
<h4 class="ui dividing header">Call types</h4>
|
|
<p>Tell us how you use your current phone system so we can tailor a new system to your needs.</p>
|
|
<div class="ui four stackable cards">
|
|
<div class="ui card" ng-repeat="call in options.calls">
|
|
<div class="image dimmable">
|
|
<div class="ui blurring inverted dimmer transition hidden" style="display: none;">
|
|
<div class="content">
|
|
<div class="center">
|
|
<!-- <div class="ui teal button">Add</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<i class="massive {{call.icon}} icon"></i>
|
|
</div>
|
|
<div class="content">
|
|
<div class="header">{{call.name}}</div>
|
|
<div class="description">
|
|
{{call.description}}
|
|
</div>
|
|
</div>
|
|
<div class="ui one bottom attached buttons">
|
|
<div ng-class="{'ui blue button': (options.callsSelection == $index),'ui button': (options.callsSelection !== $index)}"
|
|
ng-click="selectOption('callsSelection',$index)">{{(options.callsSelection == $index) ?
|
|
"Selected" : "Select"}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h4 class="ui dividing header">Handset options</h4>
|
|
<p>Mix and match as you see fit!</p>
|
|
<div class="ui five stackable cards">
|
|
<div class="ui card" ng-repeat="phone in options.phones">
|
|
<div class="image dimmable">
|
|
<div class="ui blurring inverted dimmer transition hidden" style="display: none;">
|
|
<div class="content">
|
|
<div class="center">
|
|
<div class="ui teal button">Add</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui {{phone.tag.color}} ribbon label" ng-if="phone.tag">
|
|
<i class="{{phone.tag.icon}} icon"></i> {{phone.tag.text}}
|
|
</div>
|
|
<img ng-src="{{phone.image}}" alt="{{phone.tagline}}">
|
|
<!-- <img src="https://placehold.co/600x400"> -->
|
|
</div>
|
|
<div class="content">
|
|
<div class="header">{{phone.name}}</div>
|
|
<div class="meta">
|
|
<a class="group">{{phone.tagline}}</a>
|
|
</div>
|
|
<div class="description">
|
|
{{phone.description}}
|
|
</div>
|
|
</div>
|
|
<div class="ui one bottom attached buttons" ng-if="!phone.count">
|
|
<div class="ui button" ng-click="addOption(phone)">Add</div>
|
|
</div>
|
|
<div class="ui three bottom attached buttons" ng-if="phone.count">
|
|
<div class="red ui secondary button" ng-click="addOption(phone,-1)"><i class="minus icon"></i></div>
|
|
<div class="ui button">{{phone.count}}</div>
|
|
<div class="green ui button" ng-click="addOption(phone)"><i class="plus icon"></i></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h4 class="ui dividing header">Accessories</h4>
|
|
<p>Mix and match as you see fit!</p>
|
|
<div class="ui five stackable cards">
|
|
<div class="ui card" ng-repeat="phone in options.accessories">
|
|
<div class="image dimmable">
|
|
<div class="ui blurring inverted dimmer transition hidden" style="display: none;">
|
|
<div class="content">
|
|
<div class="center">
|
|
<div class="ui teal button">Add</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img ng-src="{{phone.image}}">
|
|
<!-- <img src="https://placehold.co/600x400"> -->
|
|
</div>
|
|
<div class="content">
|
|
<div class="header">{{phone.name}}</div>
|
|
<div class="meta">
|
|
<a class="group">{{phone.tagline}}</a>
|
|
</div>
|
|
<div class="description">
|
|
{{phone.description}}
|
|
</div>
|
|
</div>
|
|
<div class="ui one bottom attached buttons" ng-if="!phone.count">
|
|
<div class="ui button" ng-click="addOption(phone)">Add</div>
|
|
</div>
|
|
<div class="ui three bottom attached buttons" ng-if="phone.count">
|
|
<div class="red ui secondary button" ng-click="addOption(phone,-1)"><i class="minus icon"></i></div>
|
|
<div class="ui button">{{phone.count}}</div>
|
|
<div class="green ui button" ng-click="addOption(phone)"><i class="plus icon"></i></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<div class="ui inverted vertical masthead center aligned segment" style="background-color: rgb(0, 44, 117)">
|
|
<div class="ui container">
|
|
<!-- <img class="ui medium right floated image" src="yealink-cordless.png"> -->
|
|
<h3 class="ui inverted yellow header">
|
|
View your results
|
|
</h3>
|
|
<h1 class="ui inverted header allcaps">
|
|
Get an instant quote on your voice service
|
|
</h1>
|
|
<h3>Click the button below to get your quote!</h3>
|
|
<!-- <a class="ui huge yellow button" href="#aboutyourbusiness">Get my instant quote<i class="right arrow icon"></i></a> -->
|
|
<a class="ui huge yellow basic button" ng-click="viewResult()">Get my instant quote <i
|
|
class="right arrow icon"></i></a>
|
|
<br>
|
|
<br>
|
|
<p class="ui small text">Conditions apply, subject to eligibility criteria and availability.</p>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="ui vertical masthead left aligned segment">
|
|
<div class="ui container">
|
|
<h3 class="ui header ">Work from anywhere</h3>
|
|
<img class="ui medium right floated image" src="3cx-webui.png">
|
|
<h1 class="ui header allcaps" style="color: rgb(0, 44, 117)">
|
|
3CX web app makes working from anywhere a breeze
|
|
</h1>
|
|
|
|
<p>The 3CX web app lets you handle calls, check colleagues' status and much more, all from your
|
|
browser!</p>
|
|
<p>It's easy for your team to use both in- and out-of-the-office, with a simple
|
|
user interface and powerful features, you won't know how you got by without it before.</p>
|
|
|
|
<div class="ui list">
|
|
<div class="item">
|
|
<i class="check blue icon"></i>
|
|
<div class="content">
|
|
Make and recieve calls from your web browser
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="check blue icon"></i>
|
|
<div class="content">
|
|
Set your status and check your colleagues' status
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="check blue icon"></i>
|
|
<div class="content">
|
|
Manage your voicemail messages
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="check blue icon"></i>
|
|
<div class="content">
|
|
Queues and wallboards let you see what's happening in your phone system
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="ui inverted vertical masthead center aligned segment" style="background-color: rgb(0, 44, 117)">
|
|
<div class="ui container">
|
|
<!-- <img class="ui medium right floated image" src="yealink-cordless.png"> -->
|
|
<h3 class="ui inverted header">
|
|
Our flexible hosted phone systems cater from small business large enterprises
|
|
</h3>
|
|
<h1 class="ui inverted yellow header allcaps">
|
|
Empower your team with powerful features
|
|
</h1>
|
|
<br>
|
|
<div class="ui stackable four column grid" id="who">
|
|
<div class="column">
|
|
<i class="huge hashtag icon"></i>
|
|
<h3 class="ui inverted header">Keep your numbers</h3>
|
|
<p>We'll port your phone numbers across from your existing carriers to our platform to ensure you
|
|
don't miss any calls.</p>
|
|
</div>
|
|
<div class="column">
|
|
<i class="huge mobile alternate icon"></i>
|
|
<h3 class="ui inverted header">Mobile apps</h3>
|
|
<p>For Android and iOS. Never miss a call - take and make calls from your office phone number when
|
|
you're out and about. </p>
|
|
</div>
|
|
<div class="column">
|
|
<i class="huge window restore outline icon"></i>
|
|
<h3 class="ui inverted header">Web portal</h3>
|
|
<p>The 3CX web app lets you handle calls, check colleagues' status and much more, all from your
|
|
browser!</p>
|
|
</div>
|
|
<div class="column">
|
|
<i class="huge music icon"></i>
|
|
<h3 class="ui inverted header">Custom hold music</h3>
|
|
<p>Keep your hold music on-brand with custom hold music. Add personalized message or greetings.</p>
|
|
</div>
|
|
<div class="column">
|
|
<i class="huge users icon"></i>
|
|
<h3 class="ui inverted header">Call queues</h3>
|
|
<p>Fully-featured call centre solution, with advanced call flow options.</p>
|
|
</div>
|
|
<div class="column">
|
|
<i class="huge voicemail icon"></i>
|
|
<h3 class="ui inverted header">Voicemail to email</h3>
|
|
<p>Voicemail to email service, with optional speech-to-text transcription.</p>
|
|
</div>
|
|
<div class="column">
|
|
<i class="huge dollar sign icon"></i>
|
|
<h3 class="ui inverted header">Cut your telco costs</h3>
|
|
<p>Combine your individual phone systems across multiple sites into one. Get more features for less
|
|
cost.</p>
|
|
</div>
|
|
<div class="column">
|
|
<i class="huge address card outline icon"></i>
|
|
<h3 class="ui inverted header">Know who's calling</h3>
|
|
<p>Connect your phone system to your customer database - know who's calling!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui vertical masthead center aligned segment">
|
|
<div class="ui container">
|
|
<img src="3cx_logo.svg" style="width: 180px; height: auto;">
|
|
</div>
|
|
</div>
|
|
<!-- modals-->
|
|
<div class="ui modal">
|
|
<div class="header">
|
|
Processing your quote...
|
|
</div>
|
|
<div class="image content">
|
|
<div class="description">
|
|
<div class="ui header">Thanks for using our quote builder!</div>
|
|
<p>Please wait while we calculate your quote based on the options you've selected.</p>
|
|
<p>This is the part where we ask for the customer's details?</p>
|
|
<div class="ui blue indeterminate progress">
|
|
<div class="bar">
|
|
<div class="progress">Calculating...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |