plausible/analytics
1
1
Fork 0
mirror of https://github.com/plausible/analytics.git synced 2024-12-18 23:11:43 +03:00
Code Issues Packages Projects Releases Wiki Activity
267e4042e3
analytics/lib/plausible_web/templates/billing/upgrade.html.eex
Vignesh Joglekar 425975efec
Adds dark mode to entire dashboard (#467) 
* Adds New Dark Mode Assets

* Moves triangle for dropdown to a reasonable position

* Majority .eex dark implementation

* Fixes Logo Positioning

* Adds theme flag to user schema, uses it

* Uses correct variables for theme applicator script

* Minor missed theme changes/fallbacks

* Individual Component Support + Theme Context

* Sources Tab Support

This was a pain to test D:

* Partial Stats Sections Support

* More of stats modules supported

* Modal +table support

* Improves some Flatpickr in light theme, supports dark theme

* Fixes missed settings tab colors

* Finishes Devices module support

* Fixes bar graph colors

* Better colorizes maps module

* Undoes colorized bars

(they looked bad, on second thought)

* Fixes loading indicator

* Finishes conversions module

* Adds changelog entry

The PR number could be wrong, will double check

* Fixes missed header color

* Fixes naming of migration and removes static alter

* Does migration correctly

As I said, my Elixir is pretty weak heh

* Adds support for spike notifications setting

* Improves contrast and visibility for email settings

* Resolves @ukutaht's comments on #467

* Fixes missing dark style

* Found one more missed dark element (shared links)

* Formatting fixes
2020-12-16 11:57:28 +02:00

132 lines
9.6 KiB
Elixir
Raw Blame History

<script>
window.plans = <%= raw Jason.encode!(Plausible.Billing.Plans.plans()) %>
</script>
<div class="mx-auto mt-6 text-center">
<h1 class="text-3xl font-black dark:text-gray-100">Upgrade your free trial</h1>
</div>
<div>
<div class="w-full max-w-4xl px-4 mt-4 mx-auto flex flex-col md:flex-row">
<div x-data="{planSize: '10k', billingCycle: 'monthly'}" class="flex-1 bg-white dark:bg-gray-800 shadow-md rounded px-8 py-4 mb-4 mt-8">
<div class="w-full py-4 dark:text-gray-100">
<span>You've used <b><%= PlausibleWeb.AuthView.delimit_integer(@usage) %></b> pageviews in the last 30 days</span>
</div>
<div class="pt-2"></div>
<span class="relative z-0 inline-flex shadow-sm w-full">
<button type="button" @click="billingCycle = 'monthly'" :class="{'bg-indigo-600 text-white border-indigo-600': billingCycle === 'monthly', 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-200 border-gray-300 dark:border-gray-500': billingCycle === 'yearly'}" class="relative w-full text-center px-4 py-2 rounded-l-md border text-sm leading-5 font-medium focus:outline-none focus:border-blue-300 focus:ring transition ease-in-out duration-150">
Monthly billing
</button>
<button type="button" @click="billingCycle = 'yearly'" :class="{'bg-indigo-600 text-white border-indigo-600': billingCycle === 'yearly', 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-200 border-gray-300 dark:border-gray-500': billingCycle === 'monthly'}" class="-ml-px relative w-full text-center px-4 py-2 rounded-r-md border text-sm leading-5 font-medium focus:outline-none focus:border-blue-300 focus:ring transition ease-in-out duration-150">
Yearly billing
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium leading-4 bg-yellow-200 text-yellow-800 dark:text-yellow-900">
-33%
</span>
</button>
</span>
<div class="pt-6"></div>
<div class="flex flex-col">
<div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
<div class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200 dark:border-t dark:border-l dark:border-r dark:shadow-none">
<table class="min-w-full">
<thead>
<tr>
<th class="px-6 py-3 border-b border-gray-200 bg-gray-100 dark:bg-gray-900 text-left text-xs leading-4 font-medium text-gray-500 dark:text-gray-200 uppercase tracking-wider">
Monthly pageviews
</th>
<th class="px-6 py-3 border-b border-gray-200 bg-gray-100 dark:bg-gray-900 text-left text-xs leading-4 font-medium text-gray-500 dark:text-gray-200 uppercase tracking-wider">
Price per month
</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800">
<tr @click="planSize = '10k'" :class="{'border-2 border-green-300 bg-opacity-20 bg-green-300': planSize === '10k', 'border-b border-gray-200 cursor-pointer': planSize !== '10k'}">
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': planSize === '10k'}">10k</td>
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': planSize === '10k'}">
<span x-show="billingCycle === 'monthly'">$6</span>
<span x-show="billingCycle === 'yearly'">$4</span>
</td>
</tr>
<tr @click="planSize = '100k'" :class="{'border-2 border-green-300 bg-opacity-20 bg-green-300': planSize === '100k', 'border-b border-gray-200 cursor-pointer': planSize !== '100k'}">
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': planSize === '100k'}">100k</td>
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': planSize === '100k'}">
<span x-show="billingCycle === 'monthly'">$12</span>
<span x-show="billingCycle === 'yearly'">$8</span>
</td>
</tr>
<tr @click="planSize = '200k'" :class="{'border-2 border-green-300 bg-opacity-20 bg-green-300': planSize === '200k', 'border-b border-gray-200 cursor-pointer': planSize !== '200k'}">
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': planSize === '200k'}">200k</td>
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': planSize === '200k'}">
<span x-show="billingCycle === 'monthly'">$18</span>
<span x-show="billingCycle === 'yearly'">$12</span>
</td>
</tr>
<tr @click="planSize = '500k'" :class="{'border-2 border-green-300 bg-opacity-20 bg-green-300': planSize === '500k', 'border-b border-gray-200 cursor-pointer': planSize !== '500k'}">
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': planSize === '500k'}">500k</td>
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': planSize === '500k'}">
<span x-show="billingCycle === 'monthly'">$27</span>
<span x-show="billingCycle === 'yearly'">$18</span>
</td>
</tr>
<tr @click="planSize = '1m'" :class="{'border-2 border-green-300 bg-opacity-20 bg-green-300': planSize === '1m', 'border-b border-gray-200 cursor-pointer': planSize !== '1m'}">
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': planSize === '1m'}">1m</td>
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': planSize === '1m'}">
<span x-show="billingCycle === 'monthly'">$48</span>
<span x-show="billingCycle === 'yearly'">$32</span>
</td>
</tr>
<tr @click="planSize = '2m'" :class="{'border-2 border-green-300 bg-opacity-20 bg-green-300': planSize === '2m', 'border-b border-gray-200 cursor-pointer': planSize !== '2m'}">
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': planSize === '2m'}">2m</td>
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': planSize === '2m'}">
<span x-show="billingCycle === 'monthly'">$69</span>
<span x-show="billingCycle === 'yearly'">$46</span>
</td>
</tr>
<tr @click="planSize = '5m'" :class="{'border-2 border-green-300 bg-opacity-20 bg-green-300': planSize === '5m', 'border-b border-gray-200 cursor-pointer': planSize !== '5m'}">
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': planSize === '5m'}">5m</td>
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100" :class="{'font-bold': planSize === '5m'}">
<span x-show="billingCycle === 'monthly'">$99</span>
<span x-show="billingCycle === 'yearly'">$66</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="text-right mt-6">
<div class="mb-4 text-sm font-medium dark:text-gray-100">Due today: <b x-text="window.plans[billingCycle][planSize].due_now">$6</b></div>
<span class="inline-flex rounded-md shadow-sm">
<button type="button" data-theme="none" :data-product="window.plans[billingCycle][planSize].product_id" data-email="<%= @conn.assigns[:current_user].email %>" data-disable-logout="true" data-passthrough="<%= @conn.assigns[:current_user].id %>" data-success="/billing/upgrade-success" class="paddle_button inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:ring active:bg-indigo-700 transition ease-in-out duration-150">
<svg fill="currentColor" viewBox="0 0 20 20" class="w-4 h-4 inline mr-2"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path></svg>
Pay securely via Paddle
</button>
</span>
</div>
</div>
<div class="flex-1 pt-14 pl-8">
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
What happens if I go over my page views limit?
</h3>
<div class="mt-2 text-base leading-6 text-gray-500 dark:text-gray-200">
You will never be charged extra for an occasional traffic spike. There are no surprise fees and your card will never be charged unexpectedly.<br /><br />
If your page views exceed your plan for two consecutive months, we will contact you to upgrade to a higher plan for the following month. You will have two weeks to make a decision. You can decide to continue with a higher plan or to cancel your account at that point.
</div>
</div>
</div>
</div>
<div class="text-center mt-8 dark:text-gray-100">
Questions? Contact <%= link("support@plausible.io", to: "mailto: support@plausible.io", class: "text-indigo-500") %>
</div>
<script type="text/javascript" src="https://cdn.paddle.com/paddle/paddle.js"></script>
<script>Paddle.Setup({vendor: 49430})</script>
Reference in New Issue View Git Blame Copy Permalink