Added servers
parent
79b0c9c8f7
commit
0a373a36b3
@ -0,0 +1,67 @@
|
||||
{
|
||||
"extras": {
|
||||
"firewall": true,
|
||||
"quota": 1500,
|
||||
"rdscals": 0
|
||||
},
|
||||
"servers": [
|
||||
{
|
||||
"cost": 914,
|
||||
"name": "GPG-RDS-01",
|
||||
"vcpus": 8,
|
||||
"ram": 32,
|
||||
"disk": 200,
|
||||
"windows": true
|
||||
},
|
||||
{
|
||||
"cost": 914,
|
||||
"name": "GPG-RDS-02",
|
||||
"vcpus": 8,
|
||||
"ram": 32,
|
||||
"disk": 200,
|
||||
"windows": true
|
||||
},
|
||||
{
|
||||
"cost": 236,
|
||||
"name": "GPG-BRK-02",
|
||||
"vcpus": 2,
|
||||
"ram": 8,
|
||||
"disk": 100,
|
||||
"windows": true
|
||||
},
|
||||
{
|
||||
"cost": 1837,
|
||||
"name": "GPG-SQL-02",
|
||||
"vcpus": 4,
|
||||
"ram": 16,
|
||||
"disk": 500,
|
||||
"windows": true,
|
||||
"sql": true
|
||||
},
|
||||
{
|
||||
"cost": 236,
|
||||
"name": "GPG-DC-03",
|
||||
"vcpus": 2,
|
||||
"ram": 8,
|
||||
"disk": 100,
|
||||
"windows": true
|
||||
},
|
||||
{
|
||||
"cost": 245.25,
|
||||
"name": "GPG-XG-02",
|
||||
"vcpus": 4,
|
||||
"ram": 8,
|
||||
"disk": 100,
|
||||
"windows": false,
|
||||
"ip": true
|
||||
},
|
||||
{
|
||||
"cost": 75.75,
|
||||
"name": "GPG-L2T-01",
|
||||
"vcpus": 2,
|
||||
"ram": 2,
|
||||
"disk": 10,
|
||||
"ip": true
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,400 @@
|
||||
<!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="servers.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="Servers">
|
||||
<div class="ui container">
|
||||
<h2 class="ui dividing header">Why choose servers from Chris Humphrey Office National?</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 customizable</h3>
|
||||
<p>With a powerful featureset and myriad of customization options, we'll make migrating to cloud servers
|
||||
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>With the ability to scale up and down as required, you can enjoy the flexibility of cloud servers
|
||||
without worrying about long term commitments.</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">
|
||||
Save 3% when you commit to 12 months
|
||||
</h1>
|
||||
<h3>When you order a minimum of $3,000/month in cloud servers, with savings of over <b>$900!</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="servers">
|
||||
<h4 class="ui dividing header">Virtual Servers</h4>
|
||||
<p>Choose your vCPU count, memory and disk space.</p>
|
||||
<table class="ui celled table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th class="two wide">vCPUs</th>
|
||||
<th class="two wide">RAM (GB)</th>
|
||||
<th class="two wide">Disk (GB)</th>
|
||||
<th class="one wide" style="text-align: center" title="This VM will run Windows Server"><i class="windows icon"></i>
|
||||
</th>
|
||||
<th class="one wide" style="text-align: center" title="This VM will run Microsoft SQL Server"><i
|
||||
class="database icon"></i></th>
|
||||
<th class="one wide" style="text-align: center" title="This VM will need a public IP address"><i
|
||||
class="globe asia icon"></i></th>
|
||||
<th class="two wide">Price/Month</th>
|
||||
<th class="one wide" style="text-align: center" title="Delete line"><i class="trash alternate outline icon"></i></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="server in servers">
|
||||
<td data-label="Server Name">
|
||||
<div class="ui fluid transparent input">
|
||||
<input type="text" placeholder="MY-SVR-01" ng-model="server.name">
|
||||
</div>
|
||||
</td>
|
||||
<td data-label="vCPUs">
|
||||
<div class="ui fluid transparent input">
|
||||
<input type="number" placeholder="4" ng-model="server.vcpus" step="2" min="2">
|
||||
</div>
|
||||
</td>
|
||||
<td data-label="RAM">
|
||||
<div class="ui fluid transparent input">
|
||||
<input type="number" placeholder="8" ng-model="server.ram">
|
||||
</div>
|
||||
</td>
|
||||
<td data-label="Disk">
|
||||
<div class="ui fluid transparent input">
|
||||
<input type="number" placeholder="200" ng-model="server.disk">
|
||||
</div>
|
||||
</td>
|
||||
<td data-label="Windows">
|
||||
<div class="ui fluid transparent input">
|
||||
<input type="checkbox" ng-model="server.windows">
|
||||
</div>
|
||||
</td>
|
||||
<td data-label="SQL Server">
|
||||
<div class="ui fluid transparent input">
|
||||
<input type="checkbox" ng-model="server.sql">
|
||||
</div>
|
||||
</td>
|
||||
<td data-label="Public IP Address">
|
||||
<div class="ui fluid transparent input">
|
||||
<input type="checkbox" ng-model="server.ip">
|
||||
</div>
|
||||
</td>
|
||||
<td data-label="Cost">
|
||||
<div class="ui fluid transparent input">
|
||||
{{serverCost(server) | currency }}
|
||||
</div>
|
||||
</td>
|
||||
<td data-label="Delete">
|
||||
<button ng-click="deleteServer($index)"><i class="trash alternate outline icon"></i></button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th><b>Subtotal</b></th>
|
||||
<th>{{serverTotals('vcpus')}}</th>
|
||||
<th>{{serverTotals('ram')}} GB</th>
|
||||
<th>{{serverTotals('disk')}} GB</th>
|
||||
<th style="text-align: center">{{serverTotals('windows')}}</th>
|
||||
<th style="text-align: center">{{serverTotals('sql')}}</th>
|
||||
<th style="text-align: center">{{serverTotals('ip')}}</th>
|
||||
<th>{{serverTotals('cost') | currency}}</th>
|
||||
<th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<a class="ui blue button" ng-click="addServer()">Add</a>
|
||||
|
||||
<div class="field">
|
||||
<div class="ui toggle checkbox">
|
||||
<input type="checkbox" tabindex="0" class="hidden">
|
||||
<label>Commit to a 12 month term and save 3% - that's ${{serverTotals('cost') * 12 * 0.03 | number :
|
||||
2}} in savings!</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="ui dividing header">Additional services/licenses</h4>
|
||||
<table class="ui definition table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Service firewall (required)</td>
|
||||
<td>
|
||||
<div class="ui fluid transparent input">
|
||||
<input type="checkbox" ng-model="extras.firewall" disabled="disabled">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Transfer quota (GB)</td>
|
||||
<td>
|
||||
<div class="ui fluid transparent input">
|
||||
<input type="number" placeholder="10000" value="100" ng-model="extras.quota" min="100">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> Microsoft Remote Desktop Client Licenses</td>
|
||||
<td>
|
||||
<div class="ui fluid transparent input">
|
||||
<input type="number" placeholder="150" value="0" ng-model="extras.rdscals">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Subtotal</td>
|
||||
<td class="three wide">{{servicesTotals() | currency}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</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">
|
||||
Request an official quote now!
|
||||
</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()">Request official 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>
|
||||
@ -0,0 +1,61 @@
|
||||
var app = angular.module('instantQuote', []);
|
||||
app.controller('Servers', function ($scope, $window, $http) {
|
||||
$scope.servers = JSON.parse(localStorage.getItem("servers")) ?? [{ cost: 0 }]
|
||||
$scope.extras = JSON.parse(localStorage.getItem("extras")) ?? {firewall: true, quota: 100}
|
||||
|
||||
params = new URLSearchParams(window.location.search)
|
||||
preload = params.get('preload')
|
||||
|
||||
if (preload && preload.match(/[0-9A-Z\-]+/g)) {
|
||||
$http({
|
||||
url: `preload/${preload}.json`
|
||||
}).then((data) => {
|
||||
$scope.servers = data.servers;
|
||||
$scope.extras = data.extras;
|
||||
})
|
||||
}
|
||||
|
||||
$scope.addServer = () => {
|
||||
$scope.servers.push({ cost: 0 })
|
||||
}
|
||||
$scope.serverPricing = {
|
||||
"vcpu": 10.5,
|
||||
"ram": 22.5,
|
||||
"disk": 0.15,
|
||||
"windows": 10,
|
||||
"sql": 329.6,
|
||||
"ip": 8.25,
|
||||
"quota": 0.09,
|
||||
"rdscals": 14.25,
|
||||
"firewall": 75
|
||||
}
|
||||
$scope.serverCost = (server) => {
|
||||
server.cost = (
|
||||
((server.vcpus || 0) * $scope.serverPricing.vcpu) +
|
||||
((server.ram || 0) * $scope.serverPricing.ram) +
|
||||
((server.disk || 0) * $scope.serverPricing.disk) +
|
||||
(Math.ceil((server.windows ? 1 : 0) * $scope.serverPricing.windows * (server.vcpus || 0) / 2) * 2) +
|
||||
(Math.ceil((server.sql ? 1 : 0) * $scope.serverPricing.sql * (server.vcpus || 0) / 2) * 2) +
|
||||
((server.ip ? 1 : 0) * $scope.serverPricing.ip)
|
||||
);
|
||||
// console.log(server.cost)
|
||||
return Math.round((server.cost || 0) * 100) / 100;
|
||||
}
|
||||
$scope.serverTotals = (type) => {
|
||||
localStorage.setItem("servers", angular.toJson($scope.servers));
|
||||
return $scope.servers.reduce(function (a, b) {
|
||||
return a + (b?.[type] ?? 0);
|
||||
}, 0);
|
||||
}
|
||||
$scope.servicesTotals = () => {
|
||||
localStorage.setItem("extras", angular.toJson($scope.extras));
|
||||
return (
|
||||
($scope.extras.firewall * $scope.serverPricing.firewall) +
|
||||
($scope.extras.rdscals * $scope.serverPricing.rdscals) +
|
||||
($scope.extras.quota * $scope.serverPricing.quota)
|
||||
)
|
||||
}
|
||||
$scope.deleteServer = (server) => {
|
||||
$scope.servers.splice(server,1);
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue