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

PBX

Browse Source
master
Ben Grabau 3 years ago
parent 215c37c36b
commit cdd42550e8
3 changed files with 196 additions and 74 deletions
Show Stats Download Patch File Download Diff File

194
pbx.html
Unescape Escape View File

@ -1,17 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<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 () {
@ -29,64 +36,122 @@
})
;
</script>
<style>
.ui.dividing.header {
margin-top: 3em;
}
.masthead {
padding: 3em 0em !important;
}
.allcaps {
text-transform: uppercase !important;
}
/* .yellow {
color: rgb(245, 209, 47);
} */
</style>
</head>
<body>
<body ng-controller="PBX">
<div class="ui container">
<div class="ui four cards">
<div class="ui card">
<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
src="https://play-lh.googleusercontent.com/Ff_zjm74KtzCogwBAJLjUO6mGGYFlVIiQyr6tAegB9eXs1-c5e85ptj7Z5zE96wrtvA">
<!-- <img src="https://placehold.co/600x400"> -->
</div>
<div class="content">
<div class="header">Softphone only</div>
<div class="meta">
<a class="group">Use an app as your phone</a>
</div>
<div class="description">Use a powerful app as your office phone. For Windows, Mac, iOS and Android
</div>
</div>
<div class="ui three bottom attached basic buttons">
<div class="ui button"><i class="minus icon"></i></div>
<div class="ui button">0</div>
<div class="ui button"><i class="plus icon"></i></div>
</div>
<h2 class="ui dividing header">Why choose a Chris Humphrey Office National phone system?</h2>
<br>
<div class="ui three column grid">
<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 class="ui card">
</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">
<h3 class="ui inverted yellow header">
Exclusive offer
</h3>
<h1 class="ui inverted header allcaps">
Get your first three months 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>
</div>
</div>
<div class="ui container">
<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 class="ui teal button">Add</div> -->
</div>
</div>
</div>
<img src="https://fanvil.com/upload/images/20220413/10124btj44.png">
<i class="massive {{call.icon}} icon"></i>
</div>
<div class="content">
<div class="header">Basic Deskphone</div>
<div class="meta">
<a class="group">Fanvil X3S Lite</a>
<div class="header">{{call.name}}</div>
<div class="description">
{{call.description}}
</div>
<div class="description">A modern, Enterprise-ready phone</div>
</div>
<div class="ui three bottom attached basic buttons">
<div class="ui button"><i class="minus icon"></i></div>
<div class="ui button">0</div>
<div class="ui button"><i class="plus icon"></i></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 class="ui card">
</div>
<h4 class="ui dividing header">Handset options</h4>
<div class="ui four 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">
@ -95,44 +160,25 @@
</div>
</div>
</div>
<img src="https://fanvil.com/upload/images/20210629/1500rx2r62.png">
<img ng-src="{{phone.image}}">
<!-- <img src="https://placehold.co/600x400"> -->
</div>
<div class="content">
<div class="header">Advanced Deskphone</div>
<div class="header">{{phone.name}}</div>
<div class="meta">
<a class="group">Fanvil X6U</a>
<a class="group">{{phone.tagline}}</a>
</div>
<div class="description">A high-end modern, Enterprise-ready phone</div>
</div>
<div class="ui three bottom attached basic buttons">
<div class="ui button"><i class="minus icon"></i></div>
<div class="ui button">0</div>
<div class="ui button"><i class="plus icon"></i></div>
</div>
</div>
<div class="ui card">
<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 class="description">
{{phone.description}}
</div>
<img src="https://fanvil.com/upload/images/20210628/1127hv2046.png">
</div>
<div class="content">
<div class="header">Executive Deskphone</div>
<div class="meta">
<a class="group">Fanvil X210</a>
</div>
<div class="description">A high-end modern, Enterprise-ready phone</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">
<div class="red ui button"><i class="minus icon"></i></div>
<div class="ui button">0</div>
<div class="green ui button"><i class="plus icon"></i></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>

76
pbx.js
Unescape Escape View File

@ -0,0 +1,76 @@
var app = angular.module('instantQuote', []);
app.controller('PBX', function ($scope) {
$scope.options = {
callsSelection: 1,
"calls": [
{
"name": "Mostly inbound",
"description": "Most calls that come through my phone system come from external parties",
"icon": "angle double down"
},
{
"name": "Balanced",
"description": "There's a good balance of inbound and outbound calls",
"icon": "balance scale"
},
{
"name": "Mostly outbound",
"description": "We make a lot of calls compared to how many we receive.",
"icon": "angle double up"
},
{
"name": "Not sure",
"description": "Help me analyse my bill",
"icon": "question circle outline"
},
],
"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"
},
{
"name": "Standard deskphone",
"tagline": "Fanvil X3S Lite",
"description": "A modern, Enterprise-ready phone",
"image": "https://fanvil.com/upload/images/20220413/10124btj44.png"
},
{
"name": "Advanced Deskphone",
"tagline": "Fanvil X6U",
"description": "A high-end modern, Enterprise-ready phone",
"image": "https://fanvil.com/upload/images/20210629/1500rx2r62.png"
},
{
"name": "Executive Deskphone",
"tagline": "Fanvil X210",
"description": "A high-end modern, Enterprise-ready phone",
"image": "https://fanvil.com/upload/images/20210628/1127hv2046.png"
},
],
"phoneNumbers": [
{
"phone": "",
"account": "",
"carrier": ""
}
]
}
$scope.addOption = (item, increment = 1) => {
if (typeof item.count === "undefined") {
item.count = 1
} else {
item.count+=increment
}
}
$scope.selectOption = (object,value) => {
$scope.options[object] = value;
}
$scope.addNumber = () => {
$scope.options.phoneNumbers.push({phone: '', account: '', carrier: ''})
}
$scope.firstName = "John";
$scope.lastName = "Doe";
});

BIN
yealink-cordless.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

Write Preview
Loading…
Cancel
Save