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.
400 lines
18 KiB
HTML
400 lines
18 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="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 Cloud 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" title="Total number of Windows VMs * vCPU cores / 2">{{serverTotals('windows')}}</th>
|
|
<th style="text-align: center" title="Total number of Windows VMs with SQL Server Standard * vCPU cores / 2">{{serverTotals('sql')}}</th>
|
|
<th style="text-align: center">{{serverTotals('ip')}}</th>
|
|
<th>{{serverTotals('cost') | currency}}</th>
|
|
<th>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
|
|
|
|
<div class="field">
|
|
<a class="ui blue button" ng-click="addServer()">Add</a>
|
|
<div class="ui toggle checkbox" ng-if="serverTotals('cost') > 3000">
|
|
<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>
|
|
<h2 style="text-align: center; margin: 50px;">
|
|
Your estimated monthly total:<br>{{(serverTotals('cost') + servicesTotals()) | currency}}
|
|
</h2>
|
|
</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 ">CHON Cloud Servers</h3>
|
|
<!-- <img class="ui medium right floated image" src="3cx-webui.png"> -->
|
|
<h1 class="ui header allcaps" style="color: rgb(0, 44, 117)">
|
|
High-speed, reliable and secure cloud servers
|
|
</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 cloud servers cater from small business to 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 lock icon"></i>
|
|
<h3 class="ui inverted header">Encrypted at Rest</h3>
|
|
<p>All of our virtual server offerings offer encrypted-at-rest storage, to help meet your security requirements.</p>
|
|
</div>
|
|
<div class="column">
|
|
<i class="huge signal icon"></i>
|
|
<h3 class="ui inverted header">Infinitely Scalable</h3>
|
|
<p>Scale your servers along with your requirements; up or down as you need.</p>
|
|
</div>
|
|
<div class="column">
|
|
<i class="huge tachometer alternate icon"></i>
|
|
<h3 class="ui inverted header">High-speed Connecitvity</h3>
|
|
<p>Our virtual server platforms have high speed 10GbE interfaces and fast NVMe storage available across all our nodes.</p>
|
|
</div>
|
|
<div class="column">
|
|
<i class="huge upload icon"></i>
|
|
<h3 class="ui inverted header">Managed Backups</h3>
|
|
<p>Let us take care of your backups, with off-site and instant-restore options.</p>
|
|
</div>
|
|
<div class="column">
|
|
<i class="huge shield alternate icon"></i>
|
|
<h3 class="ui inverted header">DDOS Protection</h3>
|
|
<p>Keep your services running with our advanced DDOS protection platform.</p>
|
|
</div>
|
|
<div class="column">
|
|
<i class="huge fire alternate icon"></i>
|
|
<h3 class="ui inverted header">Advanced Firewall</h3>
|
|
<p>With an advanced firewall, we can protect your internal services from external threats.</p>
|
|
</div>
|
|
<div class="column">
|
|
<i class="huge windows icon"></i>
|
|
<h3 class="ui inverted header">Windows Friendly</h3>
|
|
<p>We can provide all sorts of Windows licensing, including Windows Server, SQL Server, Remote Desktop licenses and more.</p>
|
|
</div>
|
|
<div class="column">
|
|
<i class="huge shipping fast icon"></i>
|
|
<h3 class="ui inverted header">Migration Services</h3>
|
|
<p>Need help moving to cloud servers? We've got your back!</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> |