mirrors/oneuptime
1
0
Fork 0
mirror of https://github.com/OneUptime/oneuptime synced 2024-11-24 00:12:06 +00:00
Code Issues Packages Projects Releases Wiki Activity
c6b4399030
oneuptime/Home/views/product-compare.ejs
Simon Larsen 319b23f43e
add compare buttons to compare table
2023-01-29 14:28:47 +00:00

287 lines
13 KiB
Plaintext
Raw Blame History

<!DOCTYPE html>
<html lang="en" id="home">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<title>OneUptime | Compare <%= productConfig.productName %> with OneUptime. </title>
<meta name="description"
content="OneUptime monitors websites, API's, and servers and alerts your team if something goes wrong. It also keeps your customers updated about any downtime.">
<%- include('head') -%>
<script type="module" async>
if(posthog){
posthog.capture('PAGE VIEW: 404');
}
</script>
</head>
<body>
<%- include('nav') -%>
<div class="bg-white">
<div class="mx-auto max-w-7xl py-24 px-6 lg:px-8">
<div class="sm:align-center sm:flex sm:flex-col">
<h1 class="text-5xl font-bold tracking-tight text-gray-900 sm:text-center">Compare <%= productConfig.productName %> with OneUptime</h1>
<p class="mt-5 text-xl text-gray-500 sm:text-center"><%= productConfig.description %></p></p>
<p class="mt-5 text-xl text-gray-500 sm:text-center"><%= productConfig.descriptionLine2 %></p></p>
</div>
</div>
<div class="bg-white">
<div class="mx-auto max-w-7xl bg-white py-16 sm:py-24 sm:px-6 lg:px-8">
<!-- xs to lg -->
<div class="mx-auto max-w-2xl space-y-16 lg:hidden">
<section>
<div class="mb-8 px-6 sm:px-4">
<h2 class="text-lg font-medium leading-6 text-gray-900"><%= productConfig.productName %></h2>
<p class="mt-4">
<span class="text-4xl font-bold tracking-tight text-gray-900 free-plan-price"><%= productConfig.price %></span>
<span class="text-base font-medium text-gray-500 billing-period">/mo</span>
</p>
<p class="mt-4 text-sm text-gray-500"><%= productConfig.productDescription %></p>
</div>
<% for(var i=0; i<productConfig.items.length; i++) {%>
<table class="w-full">
<caption class="border-t border-gray-200 bg-gray-50 py-3 px-6 text-left text-sm font-medium text-gray-900 sm:px-4">
<%= productConfig.items[i].name %>
</caption>
<thead>
<tr>
<th class="sr-only" scope="col">Feature</th>
<th class="sr-only" scope="col">Included</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<% for(var j=0; j<productConfig.items[i].data.length; j++) {%>
<tr class="border-t border-gray-200">
<th class="py-5 px-6 text-left text-sm font-normal text-gray-500 sm:px-4" scope="row"><%= productConfig.items[i].data[j].title %></th>
<td class="py-5 pr-6 sm:pr-4">
<% if(productConfig.items[i].data[j].productColumn === "tick"){ %>
<!-- Heroicon name: mini/check -->
<svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
</svg>
<% } else if(productConfig.items[i].data[j].productColumn === ""){ %>
<!-- Heroicon name: mini/check -->
<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z" clip-rule="evenodd" />
</svg>
<% } else { %>
<!-- Heroicon name: mini/check -->
<span class="text-sm text-gray-700"><%= productConfig.items[i].data[j].productColumn %></span>
<% } %>
</td>
</tr>
<% } %>
</tbody>
</table>
<% } %>
</section>
<section>
<div class="mb-8 px-6 sm:px-4">
<h2 class="text-lg font-medium leading-6 text-gray-900">OneUptime</h2>
<p class="mt-4">
<span class="text-4xl font-bold tracking-tight text-gray-900 growth-plan-price"><%= productConfig.oneuptimePrice %></span>
<span class="text-base font-medium text-gray-500 billing-period">/mo</span>
</p>
<p class="mt-4 text-sm text-gray-500"><%= productConfig.oneUptimeDescription %></p>
</div>
<% for(var i=0; i<productConfig.items.length; i++) {%>
<table class="w-full">
<caption class="border-t border-gray-200 bg-gray-50 py-3 px-6 text-left text-sm font-medium text-gray-900 sm:px-4">
<%= productConfig.items[i].name %>
</caption>
<thead>
<tr>
<th class="sr-only" scope="col">Feature</th>
<th class="sr-only" scope="col">Included</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<% for(var j=0; j<productConfig.items[i].data.length; j++) {%>
<tr class="border-t border-gray-200">
<th class="py-5 px-6 text-left text-sm font-normal text-gray-500 sm:px-4" scope="row"><%= productConfig.items[i].data[j].title %></th>
<td class="py-5 pr-6 sm:pr-4">
<% if(productConfig.items[i].data[j].oneuptimeColumn === "tick"){ %>
<!-- Heroicon name: mini/check -->
<svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
</svg>
<% } else if(productConfig.items[i].data[j].oneuptimeColumn === ""){ %>
<!-- Heroicon name: mini/check -->
<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z" clip-rule="evenodd" />
</svg>
<% } else { %>
<!-- Heroicon name: mini/check -->
<span class="text-sm text-gray-700"><%= productConfig.items[i].data[j].oneuptimeColumn %></span>
<% } %>
</td>
</tr>
<% } %>
</tbody>
</table>
<% } %>
</section>
</div>
<!-- lg+ -->
<div class="hidden lg:block">
<table class="h-px w-full table-fixed">
<caption class="sr-only">
Compare Products
</caption>
<thead>
<tr>
<th class="w-1/3 px-6 pb-4 text-left text-sm font-medium text-gray-900" scope="col">
<span class="sr-only">Feature by</span>
<span>Products</span>
</th>
<th class="w-1/3 px-6 pb-4 text-left text-lg font-medium leading-6 text-gray-900" scope="col"><%= productConfig.productName %></th>
<th class="w-1/3 px-6 pb-4 text-left text-lg font-medium leading-6 text-gray-900" scope="col">OneUptime</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 border-t border-gray-200">
<tr>
<th class="py-8 px-6 text-left align-top text-sm font-medium text-gray-900" scope="row">Pricing</th>
<td class="h-full py-8 px-6 align-top">
<div class="relative table h-full">
<p>
<span class="text-4xl font-bold tracking-tight text-gray-900 free-plan-price"><%= productConfig.price %></span>
<span class="text-base font-medium text-gray-500 billing-period">/mo</span>
</p>
<p class="mt-4 mb-16 text-sm text-gray-500"><%= productConfig.productDescription %></p>
</div>
</td>
<td class="h-full py-8 px-6 align-top">
<div class="relative table h-full">
<p>
<span class="text-4xl font-bold tracking-tight text-gray-900 growth-plan-price"><%= productConfig.oneuptimePrice %></span>
<span class="text-base font-medium text-gray-500 billing-period">/mo</span>
</p>
<p class="mt-4 mb-16 text-sm text-gray-500"><%= productConfig.oneUptimeDescription %></p>
</div>
</td>
</tr>
<% for(var i=0; i<productConfig.items.length; i++) {%>
<tr>
<th class="bg-gray-50 py-3 pl-6 text-left text-sm font-medium text-gray-900" colspan="5" scope="colgroup"><%= productConfig.items[i].name %></th>
</tr>
<% for(var j=0; j<productConfig.items[i].data.length; j++) {%>
<tr>
<th class="py-5 px-6 text-left text-sm font-normal text-gray-500" scope="row"><%= productConfig.items[i].data[j].title %></th>
<td class="py-5 px-6">
<% if(productConfig.items[i].data[j].productColumn === "tick"){ %>
<!-- Heroicon name: mini/check -->
<svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
</svg>
<% } else if(productConfig.items[i].data[j].productColumn === ""){ %>
<!-- Heroicon name: mini/check -->
<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z" clip-rule="evenodd" />
</svg>
<% } else { %>
<!-- Heroicon name: mini/check -->
<span class="text-sm text-gray-700"><%= productConfig.items[i].data[j].productColumn %></span>
<% } %>
</td>
<td class="py-5 px-6">
<% if(productConfig.items[i].data[j].oneuptimeColumn === "tick"){ %>
<!-- Heroicon name: mini/check -->
<svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
</svg>
<% } else if(productConfig.items[i].data[j].oneuptimeColumn === ""){ %>
<!-- Heroicon name: mini/check -->
<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z" clip-rule="evenodd" />
</svg>
<% } else { %>
<!-- Heroicon name: mini/check -->
<span class="text-sm text-gray-700"><%= productConfig.items[i].data[j].oneuptimeColumn %></span>
<% } %>
</td>
</tr>
<% } %>
<% } %>
</tbody>
</table>
</div>
</div>
</div>
<div class="bg-white">
<div class="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:py-40 lg:px-8">
<div class="mx-auto max-w-4xl divide-y divide-gray-900/10">
<h2 class="text-2xl font-bold leading-10 tracking-tight text-gray-900">Frequently asked questions</h2>
<dl class="mt-10 space-y-6 divide-y divide-gray-900/10">
<% for(var i=0; i < productConfig.faq.length; i++) { %>
<div class="pt-6">
<dt>
<!-- Expand/collapse question button -->
<div class="flex w-full items-start justify-between text-left text-gray-900" aria-controls="faq-0" aria-expanded="false">
<span class="text-base font-semibold leading-7"><%= productConfig.faq[i].question %></span>
</div>
</dt>
<dd class="mt-2 pr-12" id="faq-0">
<p class="text-base leading-7 text-gray-600"><%= productConfig.faq[i].answer %></p>
</dd>
</div>
<% } %>
</dl>
</div>
</div>
</div>
<%- include('cta') -%>
<%- include('footer') -%>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink