mirror of
https://github.com/OneUptime/oneuptime
synced 2024-11-21 22:59:07 +00:00
Refactor cookie banner code
This commit is contained in:
Simon Larsen
parent
81fa79ac57
commit
16fe15ac22
@ -47,8 +47,7 @@
|
||||
document.getElementById('cookie').style.display = 'block';
|
||||
}
|
||||
|
||||
// Check the user's choice on page load
|
||||
window.onload = function () {
|
||||
function checkCookies () {
|
||||
var cookiesAccepted = localStorage.getItem('cookiesAccepted');
|
||||
if (cookiesAccepted === 'true') {
|
||||
hideBanner();
|
||||
@ -59,5 +58,8 @@
|
||||
}
|
||||
};
|
||||
|
||||
// Check the user's choice on page load
|
||||
window.onload = checkCookies;
|
||||
|
||||
|
||||
</script>
|
||||
51
Home/views/partials/tooltip.ejs
Normal file
51
Home/views/partials/tooltip.ejs
Normal file
@ -0,0 +1,51 @@
|
||||
<style>
|
||||
/* Tooltip container taken from https://www.w3schools.com/css/css_tooltip.asp */
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border-bottom: 1px dotted black;
|
||||
cursor: pointer;
|
||||
/* If you want dots under the hoverable text */
|
||||
}
|
||||
|
||||
/* Tooltip text */
|
||||
.tooltip .tooltiptext {
|
||||
visibility: hidden;
|
||||
width: 120px;
|
||||
background-color: black;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
border-radius: 6px;
|
||||
|
||||
/* Position the tooltip text - see examples below! */
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Show the tooltip text when you mouse over the tooltip container */
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext {
|
||||
width: 320px;
|
||||
padding: 10px;
|
||||
bottom: 100%;
|
||||
left: 10%;
|
||||
margin-left: -100px;
|
||||
/* Use half of the width (120/2 = 60), to center the tooltip */
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
/* At the bottom of the tooltip */
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: black transparent transparent transparent;
|
||||
}
|
||||
</style>
|
||||
@ -36,7 +36,7 @@
|
||||
<p class="mt-4 text-sm text-gray-500">All the basics you need to get started</p>
|
||||
<p class="mt-8">
|
||||
<span class="text-4xl font-bold tracking-tight text-gray-900 free-plan-price">$0</span>
|
||||
<span class="text-base font-medium text-gray-500 billing-period">/mo per seat</span>
|
||||
<span class="text-base font-medium text-gray-500 billing-period"></span>
|
||||
</p>
|
||||
<a href="/accounts/register"
|
||||
class="mt-8 block hover:text-white w-full rounded-md border border-gray-800 bg-gray-800 py-2 text-center text-sm font-semibold text-white hover:bg-gray-900">Get
|
||||
@ -67,7 +67,7 @@
|
||||
<span class="text-sm text-gray-500">Unlimited Subscribers</span>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="flex space-x-3">
|
||||
@ -102,7 +102,7 @@
|
||||
</svg>
|
||||
<span class="text-sm text-gray-500">Active Monitors at $1/month</span>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -113,7 +113,7 @@
|
||||
<p class="mt-4 text-sm text-gray-500">Advanced Workflows, Integrations, API Access and more included.</p>
|
||||
<p class="mt-8">
|
||||
<span class="text-4xl font-bold tracking-tight text-gray-900 growth-plan-price">$22</span>
|
||||
<span class="text-base font-medium text-gray-500 billing-period">/mo per seat</span>
|
||||
<span class="text-base font-medium text-gray-500 billing-period"></span>
|
||||
</p>
|
||||
<a href="/accounts/register"
|
||||
class="mt-8 block w-full hover:text-white rounded-md border border-gray-800 bg-gray-800 py-2 text-center text-sm font-semibold text-white hover:bg-gray-900">Free
|
||||
@ -197,7 +197,8 @@
|
||||
<p class="mt-4 text-sm text-gray-500">SSO, Advanced Access Control, Better Support for your team.</p>
|
||||
<p class="mt-8">
|
||||
<span class="text-4xl font-bold tracking-tight text-gray-900 scale-plan-price">$99</span>
|
||||
<span class="text-base font-medium text-gray-500 billing-period">/mo per seat</span>
|
||||
|
||||
<span class="text-base font-medium text-gray-500 billing-period"></span>
|
||||
</p>
|
||||
<a href="/accounts/register"
|
||||
class="mt-8 block w-full hover:text-white rounded-md border border-gray-800 bg-gray-800 py-2 text-center text-sm font-semibold text-white hover:bg-gray-900">Free
|
||||
@ -460,25 +461,31 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-20 flex flex-col items-start gap-x-8 gap-y-6 rounded-md p-8 ring-1 ring-gray-900/10 sm:gap-y-10 sm:p-10 lg:col-span-2 lg:flex-row lg:items-center">
|
||||
<div
|
||||
class="mt-20 flex flex-col items-start gap-x-8 gap-y-6 rounded-md p-8 ring-1 ring-gray-900/10 sm:gap-y-10 sm:p-10 lg:col-span-2 lg:flex-row lg:items-center">
|
||||
<div class="lg:min-w-0 lg:flex-1">
|
||||
<h3 class="text-lg font-semibold leading-8 tracking-tight text-gray-600">SMS Pricing</h3>
|
||||
<p class="mt-1 text-base leading-7 text-gray-600">We bill you on per SMS sent. Our pricing starts at $0.10 USD per SMS sent to United States, Canada, UK and EU. For other countries, please contact support. Email alerts are free and always will be.</p>
|
||||
<p class="mt-1 text-base leading-7 text-gray-600">We bill you on per SMS sent. Our pricing starts at $0.10
|
||||
USD per SMS sent to United States, Canada, UK and EU. For other countries, please contact support. Email
|
||||
alerts are free and always will be.</p>
|
||||
</div>
|
||||
<!-- <a href="#" class="rounded-md px-3.5 py-2 text-sm font-semibold leading-6 text-gray-600 ring-1 ring-inset ring-indigo-200 hover:ring-indigo-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">See SMS Pricing <span aria-hidden="true">→</span></a> -->
|
||||
</div>
|
||||
|
||||
<div class="mt-5 flex flex-col items-start gap-x-8 gap-y-6 rounded-md p-8 ring-1 ring-gray-900/10 sm:gap-y-10 sm:p-10 lg:col-span-2 lg:flex-row lg:items-center">
|
||||
<div
|
||||
class="mt-5 flex flex-col items-start gap-x-8 gap-y-6 rounded-md p-8 ring-1 ring-gray-900/10 sm:gap-y-10 sm:p-10 lg:col-span-2 lg:flex-row lg:items-center">
|
||||
<div class="lg:min-w-0 lg:flex-1">
|
||||
<h3 class="text-lg font-semibold leading-8 tracking-tight text-gray-600">Call Pricing</h3>
|
||||
<p class="mt-1 text-base leading-7 text-gray-600">We bill you on per call we make. Our pricing starts at $0.10 USD per minute per call we make to United States, Canada, UK and EU. For other countries, please contact support. Email alerts are free and always will be.</p>
|
||||
<p class="mt-1 text-base leading-7 text-gray-600">We bill you on per call we make. Our pricing starts at
|
||||
$0.10 USD per minute per call we make to United States, Canada, UK and EU. For other countries, please
|
||||
contact support. Email alerts are free and always will be.</p>
|
||||
</div>
|
||||
<!-- <a href="#" class="rounded-md px-3.5 py-2 text-sm font-semibold leading-6 text-gray-600 ring-1 ring-inset ring-indigo-200 hover:ring-indigo-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">See SMS Pricing <span aria-hidden="true">→</span></a> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -566,7 +573,7 @@
|
||||
<h2 class="text-lg font-medium leading-6 text-gray-900">Free</h2>
|
||||
<p class="mt-4">
|
||||
<span class="text-4xl font-bold tracking-tight text-gray-900 free-plan-price">$0</span>
|
||||
<span class="text-base font-medium text-gray-500 billing-period">/mo per seat</span>
|
||||
<span class="text-base font-medium text-gray-500 billing-period"></span>
|
||||
</p>
|
||||
<p class="mt-4 text-sm text-gray-500">All the basics you need to get started.</p>
|
||||
<a href="#"
|
||||
@ -641,7 +648,7 @@
|
||||
<h2 class="text-lg font-medium leading-6 text-gray-900">Growth</h2>
|
||||
<p class="mt-4">
|
||||
<span class="text-4xl font-bold tracking-tight text-gray-900 growth-plan-price">$22</span>
|
||||
<span class="text-base font-medium text-gray-500 billing-period">/mo per seat</span>
|
||||
<span class="text-base font-medium text-gray-500 billing-period"></span>
|
||||
</p>
|
||||
<p class="mt-4 text-sm text-gray-500">Advanced Workflows, Integrations, API Access and more included.
|
||||
</p>
|
||||
@ -716,7 +723,7 @@
|
||||
<h2 class="text-lg font-medium leading-6 text-gray-900 ">Scale</h2>
|
||||
<p class="mt-4">
|
||||
<span class="text-4xl font-bold tracking-tight text-gray-900 scale-plan-price">$99</span>
|
||||
<span class="text-base font-medium text-gray-500 billing-period">/mo per seat</span>
|
||||
<span class="text-base font-medium text-gray-500 billing-period"></span>
|
||||
</p>
|
||||
<p class="mt-4 text-sm text-gray-500">SSO, Advanced Access Control, Better Support for your team.</p>
|
||||
<a href="/accounts/register"
|
||||
@ -894,7 +901,8 @@
|
||||
<div class="relative table h-full">
|
||||
<p>
|
||||
<span class="text-4xl font-bold tracking-tight text-gray-900 free-plan-price">$0</span>
|
||||
<span class="text-base font-medium text-gray-500 billing-period">/mo per seat</span>
|
||||
|
||||
<span class="text-base font-medium text-gray-500 billing-period"></span>
|
||||
</p>
|
||||
<p class="mt-4 mb-16 text-sm text-gray-500">All the basics you need to get started.</p>
|
||||
<a href="/accounts/register"
|
||||
@ -907,7 +915,7 @@
|
||||
<div class="relative table h-full">
|
||||
<p>
|
||||
<span class="text-4xl font-bold tracking-tight text-gray-900 growth-plan-price">$22</span>
|
||||
<span class="text-base font-medium text-gray-500 billing-period">/mo per seat</span>
|
||||
<span class="text-base font-medium text-gray-500 billing-period"></span>
|
||||
</p>
|
||||
<p class="mt-4 mb-16 text-sm text-gray-500">Advanced Workflows, Integrations, API Access and more
|
||||
included.</p>
|
||||
@ -921,7 +929,7 @@
|
||||
<div class="relative table h-full">
|
||||
<p>
|
||||
<span class="text-4xl font-bold tracking-tight text-gray-900 scale-plan-price">$99</span>
|
||||
<span class="text-base font-medium text-gray-500 billing-period">/mo per seat</span>
|
||||
<span class="text-base font-medium text-gray-500 billing-period"></span>
|
||||
</p>
|
||||
<p class="mt-4 mb-16 text-sm text-gray-500">SSO, Advanced Access Control, Better Support for your
|
||||
team.</p>
|
||||
@ -1116,12 +1124,12 @@
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1215,6 +1223,9 @@
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function switchToYearlyBilling() {
|
||||
document.getElementById("yearly-billing-btn").classList = "relative w-1/2 whitespace-nowrap rounded-md border-gray-200 bg-white py-2 text-sm font-medium text-gray-900 shadow-sm focus:z-10 focus:outline-none focus:ring-2 focus:ring-indigo-500 sm:w-auto sm:px-8"
|
||||
document.getElementById("monthly-billing-btn").classList = "relative ml-0.5 w-1/2 whitespace-nowrap rounded-md border border-transparent py-2 text-sm font-medium text-gray-700 focus:z-10 focus:outline-none focus:ring-2 focus:ring-indigo-500 sm:w-auto sm:px-8"
|
||||
@ -1229,7 +1240,7 @@
|
||||
}
|
||||
|
||||
for (let i = 0; i < document.getElementsByClassName("billing-period").length; i++) {
|
||||
document.getElementsByClassName("billing-period")[i].innerHTML = "/mo per seat billed yearly"
|
||||
document.getElementsByClassName("billing-period")[i].innerHTML = "<div class='tooltip'>/mo per user billed yearly<span class='tooltiptext'>Users are people in your team who create and manage OneUptime resources like monitors, incidents, etc. They are NOT Status Page Subscribers or Status Page Private Viewers (these are free).</span></div>"
|
||||
}
|
||||
|
||||
}
|
||||
@ -1248,14 +1259,25 @@
|
||||
}
|
||||
|
||||
for (let i = 0; i < document.getElementsByClassName("billing-period").length; i++) {
|
||||
document.getElementsByClassName("billing-period")[i].innerHTML = "/mo per seat"
|
||||
document.getElementsByClassName("billing-period")[i].innerHTML = "<div class='tooltip'>/mo per user<span class='tooltiptext'>Users are people in your team who create and manage OneUptime resources like monitors, incidents, etc. They are NOT Status Page Subscribers or Status Page Private Viewers (these are free).</span></div>"
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<%- include('footer') -%>
|
||||
<%- include('./partials/tooltip') -%>
|
||||
|
||||
|
||||
<script>
|
||||
window.onload = function () {
|
||||
switchToYearlyBilling();
|
||||
checkCookies();
|
||||
};
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user