bengrabau
/
Instant-Quote
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

New photos, features section

Browse Source
master
Ben Grabau 3 years ago
parent cdd42550e8
commit daff88c4bf
9 changed files with 262 additions and 30 deletions
Show Stats Download Patch File Download Diff File

BIN
3cx-softphone.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 90 KiB

BIN
3cx-webui.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
mb-pro-2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 392 KiB

246
pbx.html
Unescape Escape View File

@ -25,27 +25,45 @@
$('.special.card .image').dimmer({
on: 'hover'
});
$('.star.rating')
.rating()
;
$('.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 {
.masthead {
padding: 3em 0em !important;
}
.allcaps {
text-transform: uppercase !important;
}
#why .icon {
color: rgb(0, 44, 117) !important;
}
/* .yellow {
color: rgb(245, 209, 47);
} */
@ -56,21 +74,24 @@
<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">
<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>
<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>
<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>
<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>
@ -82,17 +103,35 @@
Exclusive offer
</h3>
<h1 class="ui inverted header allcaps">
Get your first three months free
Get your first month free
</h1>
<h4>When you order a new phone system and commit to 12 months; you could save up to <b>$120!</b></h4>
<div class="ui huge yellow button">Get Started <i class="right arrow icon"></i></div>
<div class="ui huge yellow basic button">Call us now &nbsp;&nbsp;<i class="phone icon"></i></div>
<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 &nbsp;&nbsp;<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">
<div class="ui container" id="aboutyourbusiness">
<h4 class="ui dividing header">About your business</h4>
<div class="ui grid">
<div class="eight wide column">
<p>How many staff do you have?</p>
<div class="ui labeled ticked slider" id="numberofstaff"></div>
</div>
<div class="eight 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>
<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>
@ -122,6 +161,7 @@
</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">
@ -150,6 +190,7 @@
</div>
</div>
<h4 class="ui dividing header">Handset options</h4>
<p>Mix and match as you see fit!</p>
<div class="ui four stackable cards">
<div class="ui card" ng-repeat="phone in options.phones">
<div class="image dimmable">
@ -183,6 +224,175 @@
</div>
</div>
</div>
<h4 class="ui dividing header">Accessories</h4>
<p>Mix and match as you see fit!</p>
<div class="ui four 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"><i class="minus icon" ng-click="addOption(phone,-1)"></i></div>
<div class="ui button">{{phone.count}}</div>
<div class="green ui button"><i class="plus icon" ng-click="addOption(phone)"></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&nbsp;&nbsp;<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>
<!-- 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>
<div class="ui blue indeterminate progress">
<div class="bar">
<div class="progress">Calculating...</div>
</div>
</div>
</div>
</div>
</div>
</body>

46
pbx.js
Unescape Escape View File

@ -24,30 +24,44 @@ app.controller('PBX', function ($scope) {
"icon": "question circle outline"
},
],
"accessories": [
{
"name": "Stereo wireless headset",
"tagline": "Sennheiser Impact MB Pro 2",
"description": "A comfortable, stero headset with 8 hours battery life, so you can talk all day",
"image": "mb-pro-2.png"
},
],
"phones": [
{
"name": "Softphone only",
"tagline": "Use an app as your phone",
"description": "Use a powerful app as your office phone. For Windows, Mac, iOS and Android",
"image": "https://placehold.co/400x400"
"image": "3cx-softphone.png"
},
{
"name": "Standard deskphone",
"name": "Basic deskphone",
"tagline": "Fanvil X3S Lite",
"description": "A modern, Enterprise-ready phone",
"image": "https://fanvil.com/upload/images/20220413/10124btj44.png"
"image": "x3slite.png"
},
{
"name": "Advanced Deskphone",
"name": "Standard Deskphone",
"tagline": "Fanvil X6U",
"description": "A high-end modern, Enterprise-ready phone",
"image": "https://fanvil.com/upload/images/20210629/1500rx2r62.png"
"image": "x6u.png"
},
{
"name": "Executive Deskphone",
"name": "Advanced Deskphone",
"tagline": "Fanvil X210",
"description": "A high-end modern, Enterprise-ready phone",
"image": "https://fanvil.com/upload/images/20210628/1127hv2046.png"
"image": "x210.png"
},
{
"name": "Cordless phone",
"tagline": "Yealink W73P",
"description": "A professional, business DECT cordless phone system.",
"image": "w73p.png"
},
],
"phoneNumbers": [
@ -62,15 +76,23 @@ app.controller('PBX', function ($scope) {
if (typeof item.count === "undefined") {
item.count = 1
} else {
item.count+=increment
item.count += increment
}
}
$scope.selectOption = (object,value) => {
$scope.selectOption = (object, value) => {
$scope.options[object] = value;
}
$scope.addNumber = () => {
$scope.options.phoneNumbers.push({phone: '', account: '', carrier: ''})
$scope.options.phoneNumbers.push({ phone: '', account: '', carrier: '' })
}
$scope.viewResult = () => {
$('.ui.modal')
.modal({
blurring: true
})
.modal('show');
setTimeout(()=>{
},5000);
}
$scope.firstName = "John";
$scope.lastName = "Doe";
});

BIN
w73p.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 186 KiB

BIN
x210.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
x3slite.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

BIN
x6u.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

Write Preview
Loading…
Cancel
Save