Skip to content

Commit

Permalink
feat: misc visual improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@AlejandroAkbal
AlejandroAkbal committed Nov 18, 2023
1 parent c47cfd0 commit 1eac22e
Show file tree
Hide file tree
Showing 3 changed files with 139 additions and 132 deletions.
22 changes: 7 additions & 15 deletions app.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,19 +103,11 @@
<NuxtPage />
</NuxtLayout>

<script type="text/partytown">
var _paq = window._paq = window._paq || [];

_paq.push(["disableCookies"]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);

(function() {
var u="https://matomo.akbal.dev/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- Matomo -->
<Script type="text/partytown">
var _paq = window._paq = window._paq || []; _paq.push(["disableCookies"]); _paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']); (function() { var u="https://matomo.akbal.dev/"; _paq.push(['setTrackerUrl',
u+'matomo.php']); _paq.push(['setSiteId', '1']); var d=document, g=d.createElement('script'),
s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })();
</Script>
</template>
4 changes: 2 additions & 2 deletions pages/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -393,7 +393,7 @@
<template>
<main class="container mx-auto max-w-3xl flex-1 px-4 py-4 sm:px-6 lg:px-8">
<!-- Header -->
<div class="-mt-6 text-center">
<div class="-mt-3 text-center">
<h1
class="flex justify-center gap-2 text-2xl font-bold uppercase leading-10 tracking-tight text-base-content-highlight"
>
Expand All @@ -411,7 +411,7 @@
App
</h1>

<p class="mt-2">
<p class="mt-4 leading-relaxed">
Stream and download Rule 34 porn videos, GIFs, and images from multiple Boorus in a mobile-first web app
</p>
</div>
Expand Down
245 changes: 130 additions & 115 deletions pages/premium/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,199 +1,210 @@
<script lang='ts' setup>
import { CheckIcon, StarIcon } from '@heroicons/vue/20/solid'
import { InformationCircleIcon } from '@heroicons/vue/24/outline'
import { ArrowRightOnRectangleIcon } from '@heroicons/vue/24/solid'
import { completeBooruList, defaultBooruList } from '~/assets/lib/rule-34-shared-resources/src/util/BooruUtils'
const mainFeatures = [
{ title: 'Hide promoted content', additionalInfo: undefined },
{ title: 'Access additional Boorus (websites)', additionalInfo: '#additional-boorus' },
{ title: 'Save posts', additionalInfo: '#save-posts' },
{ title: 'Download posts with one click', additionalInfo: '#download-posts' },
{ title: 'Find original source of a post', additionalInfo: '#find-source' },
{ title: 'Create tag collections', additionalInfo: '#tag-collections' },
{ title: 'Resume browsing', additionalInfo: '#history' },
{ title: 'Integrated proxy to bypass website blocks', additionalInfo: '#proxy' },
{ title: 'Backup your data', additionalInfo: '#backup' },
{ title: '“Premium” Discord role', additionalInfo: undefined },
{ title: 'Support the development', additionalInfo: '#support-development' }
]
useSeoMeta({
title: 'Premium',
description: 'Enhance your experience with additional features'
})
definePageMeta({
middleware: 'auth',
auth: {
unauthenticatedOnly: true,
navigateAuthenticatedTo: '/premium/dashboard'
}
})
<script lang="ts" setup>
import { CheckIcon, StarIcon } from '@heroicons/vue/20/solid'
import { QuestionMarkCircleIcon } from '@heroicons/vue/24/outline'
import { ArrowRightOnRectangleIcon } from '@heroicons/vue/24/solid'
import { completeBooruList, defaultBooruList } from '~/assets/lib/rule-34-shared-resources/src/util/BooruUtils'
const mainFeatures = [
{ title: 'Hide promoted content', additionalInfo: undefined },
{ title: 'Access additional Boorus (websites)', additionalInfo: '#additional-boorus' },
{ title: 'Save posts', additionalInfo: '#save-posts' },
{ title: 'Download posts with one click', additionalInfo: '#download-posts' },
{ title: 'Find original source of a post', additionalInfo: '#find-source' },
{ title: 'Create tag collections', additionalInfo: '#tag-collections' },
{ title: 'Resume browsing', additionalInfo: '#history' },
{ title: 'Integrated proxy to bypass website blocks', additionalInfo: '#proxy' },
{ title: 'Backup your data', additionalInfo: '#backup' },
{ title: '“Premium” Discord role', additionalInfo: undefined },
{ title: 'Support the development', additionalInfo: '#support-development' }
]
useSeoMeta({
title: 'Premium',
description: 'Enhance your experience with additional features'
})
definePageMeta({
middleware: 'auth',
auth: {
unauthenticatedOnly: true,
navigateAuthenticatedTo: '/premium/dashboard'
}
})
</script>

<template>
<!-- Sign in -->
<!-- TODO: Make more obvious? -->
<SafeTeleport to='#navbar-actions'>
<SafeTeleport to="#navbar-actions">
<NuxtLink
class='focus-visible:focus-outline-util hover:hover-bg-util hover:hover-text-util relative rounded-md p-2'
href='/premium/sign-in'
class="focus-visible:focus-outline-util hover:hover-bg-util hover:hover-text-util relative rounded-md p-2"
href="/premium/sign-in"
>
<span class='sr-only'>Sign in</span>
<span class="sr-only">Sign in</span>

<ArrowRightOnRectangleIcon class='h-6 w-6 text-base-content-highlight' />
<ArrowRightOnRectangleIcon class="h-6 w-6 text-base-content-highlight" />
</NuxtLink>
</SafeTeleport>

<main class='flex-1'>
<main class="flex-1">
<!-- Pricing -->
<section class='isolate overflow-hidden'>
<div class='flow-root overflow-hidden py-6 sm:py-16 lg:pb-0'>
<div class='container mx-auto max-w-3xl flex-1 px-4 py-4 sm:px-6 lg:px-8'>
<section class="isolate overflow-hidden">
<div class="flow-root overflow-hidden py-6 sm:py-16 lg:pb-0">
<div class="container mx-auto max-w-3xl flex-1 px-4 py-4 sm:px-6 lg:px-8">
<!-- Header -->
<div class='relative z-10'>
<div class="relative z-10">
<!-- Title -->
<h1 class='mx-auto max-w-4xl text-center text-4xl font-bold tracking-tight text-base-content-highlight'>
<h1 class="mx-auto max-w-4xl text-center text-4xl font-bold tracking-tight text-base-content-highlight">
Premium
</h1>

<p class='mx-auto mt-4 lg:mt-3 max-w-2xl text-center text-base leading-8'>
<p class="mx-auto mt-4 max-w-2xl text-center text-base leading-8 lg:mt-3">
<!-- TODO: Improve description -->
Get access to {{ completeBooruList.length - defaultBooruList.length }} additional Boorus,
and {{ mainFeatures.length }} exclusive features!
Get access to {{ completeBooruList.length - defaultBooruList.length }} additional Boorus, and
{{ mainFeatures.length }} exclusive features!
</p>
</div>

<!-- Rating -->
<NuxtLink class='pb-4 mt-12 flex flex-col gap-2.5 justify-center items-center focus-visible:focus-outline-util hover:hover-text-util'
href='https://gum.co/Rule34App#Ratings' target='_blank'>
<div class='flex items-center'>
<StarIcon v-for='rating in [0, 1, 2, 3]' :key='rating' aria-hidden='true' class='h-5 w-5 flex-shrink-0 text-base-content-highlight' />
<NuxtLink
class="focus-visible:focus-outline-util hover:hover-text-util mt-12 flex flex-col items-center justify-center gap-2.5 pb-4"
href="https://gum.co/Rule34App#Ratings"
target="_blank"
>
<div class="flex items-center">
<StarIcon
v-for="rating in [0, 1, 2, 3]"
:key="rating"
aria-hidden="true"
class="h-5 w-5 flex-shrink-0 text-base-content-highlight"
/>

<!-- Fix for half star https://github.com/tailwindlabs/heroicons/discussions/424 -->
<svg
aria-hidden='true'
class='h-5 w-5 flex-shrink-0'
fill='none'
viewBox='0 0 20 20'
xmlns='http://www.w3.org/2000/svg'
aria-hidden="true"
class="h-5 w-5 flex-shrink-0"
fill="none"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<linearGradient id='something'>
<stop offset='60%' stop-color='#e5e7eb' />
<stop offset='60%' stop-color='#9ca3af' />
<linearGradient id="something">
<stop
offset="60%"
stop-color="#e5e7eb"
/>
<stop
offset="60%"
stop-color="#9ca3af"
/>
</linearGradient>
</defs>
<path clip-rule='evenodd'
d='M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z'
fill='url(#something)'
fill-rule='evenodd'
<path
clip-rule="evenodd"
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
fill="url(#something)"
fill-rule="evenodd"
/>
</svg>

<p class='sr-only'>4.6 out of 5 stars</p>
<p class="sr-only">4.6 out of 5 stars</p>
</div>

<span>
Trusted by 900+ customers
</span>
<span> Trusted by 900+ customers </span>
</NuxtLink>

<!-- TODO: Images of user profiles -->
<!-- TODO: Testimonials -->

<!-- Body -->
<div class='relative mx-auto my-10 grid max-w-md grid-cols-1 gap-y-8 lg:mx-0 lg:max-w-none'>
<div class="relative mx-auto my-10 grid max-w-md grid-cols-1 gap-y-8 lg:mx-0 lg:max-w-none">
<!-- Background -->
<svg
aria-hidden='true'
class='absolute -bottom-48 left-1/2 h-[64rem] -translate-x-1/2 translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)]'
viewBox='0 0 1208 1024'
aria-hidden="true"
class="absolute -bottom-48 left-1/2 h-[64rem] -translate-x-1/2 translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)]"
viewBox="0 0 1208 1024"
>
<ellipse
cx='604'
cy='512'
fill='url(#d25c25d4-6d43-4bf9-b9ac-1842a30a4867)'
rx='604'
ry='512'
cx="604"
cy="512"
fill="url(#d25c25d4-6d43-4bf9-b9ac-1842a30a4867)"
rx="604"
ry="512"
/>
<defs>
<radialGradient id='d25c25d4-6d43-4bf9-b9ac-1842a30a4867'>
<stop stop-color='#7775D6' />
<radialGradient id="d25c25d4-6d43-4bf9-b9ac-1842a30a4867">
<stop stop-color="#7775D6" />
<stop
offset='1'
stop-color='#E935C1'
offset="1"
stop-color="#E935C1"
/>
</radialGradient>
</defs>
</svg>

<!-- Tier -->
<div class='relative rounded-2xl bg-base-1000/70 ring-1 ring-base-0/10 backdrop-blur'>
<div class='p-8 lg:pt-12 xl:p-10'>
<div class="relative rounded-2xl bg-base-1000/70 ring-1 ring-base-0/10 backdrop-blur">
<div class="p-8 lg:pt-12 xl:p-10">
<!-- -->

<div>
<h2 class='text-2xl font-bold tracking-wide text-base-content-highlight'>Premium</h2>
<h2 class="text-2xl font-bold tracking-wide text-base-content-highlight">Premium</h2>

<p class='mt-2 text-sm leading-7'>
Enhance your experience with additional features
</p>
<p class="mt-2 text-sm leading-7">Enhance your experience with additional features</p>
</div>

<!-- Features -->
<div class='mt-4 flow-root sm:mt-8'>
<div class="mt-4 flow-root sm:mt-8">
<ol
id='premium-features'
class='space-y-1'
role='list'
id="premium-features"
class="space-y-1"
role="list"
>
<li
v-for='mainFeature in mainFeatures'
:key='mainFeature.title'
class='flex items-center gap-x-3 py-2'
v-for="mainFeature in mainFeatures"
:key="mainFeature.title"
class="flex items-center gap-x-3 py-2"
>
<CheckIcon class='h-6 w-5 flex-none text-primary-600' />
<CheckIcon class="h-6 w-5 flex-none text-primary-600" />

<span class='flex-auto text-sm leading-6 text-base-content-highlight'>
<span class="flex-auto text-sm leading-6 text-base-content-highlight">
{{ mainFeature.title }}
</span>

<!-- TODO: Better linking -->
<a
v-if='mainFeature.additionalInfo'
:href='mainFeature.additionalInfo'
class='focus-visible:focus-outline-util hover:hover-text-util text-base-content'
v-if="mainFeature.additionalInfo"
:href="mainFeature.additionalInfo"
class="focus-visible:focus-outline-util hover:hover-text-util text-base-content"
>
<span class='sr-only'>Learn more about this feature</span>
<span class="sr-only">Learn more about this feature</span>

<InformationCircleIcon class='h-5 w-5 flex-none' />
<QuestionMarkCircleIcon class="h-5 w-5 flex-none" />
</a>
</li>
</ol>
</div>

<!-- CTA -->
<div
class='mt-10 flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between lg:flex-col lg:items-stretch'
class="flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between lg:flex-col lg:items-stretch"
>
<div class='flex items-center justify-center gap-x-4'>
<p class='text-4xl font-bold tracking-tight text-base-content-highlight'>€4.9</p>
<!-- Price -->
<div class="mt-10 flex items-center justify-center gap-x-4">
<p class="text-4xl font-bold tracking-tight text-base-content-highlight">€4.9</p>

<div class='text-sm leading-5'>
<p class='text-base-content'>EUR</p>
<div class="text-sm leading-5">
<p class="text-base-content">EUR</p>
<p>Billed monthly</p>
</div>
</div>

<div class='text-center text-sm leading-6'>
<div class="mb-1 text-center text-sm leading-6">
✨ Up to

<span
class='inline-flex items-center gap-x-1.5 rounded-full bg-primary-400/20 px-2 py-0.5 font-medium leading-normal text-primary-400'
class="inline-flex items-center gap-x-1.5 rounded-full bg-primary-400/20 px-2 py-0.5 font-medium leading-normal text-primary-400"
>
60% Off
</span>
Expand All @@ -202,12 +213,12 @@ definePageMeta({
</div>

<NuxtLink
aria-describedby='premium-features'
class='focus-visible:focus-outline-util hover:hover-text-util rounded-md bg-primary-700 px-3 py-2 text-center text-sm font-semibold leading-6 text-base-content-highlight hover:bg-primary-600 focus-visible:ring-offset-2'
href='https://gum.co/Rule34App'
target='_blank'
aria-describedby="premium-features"
class="focus-visible:focus-outline-util hover:hover-text-util rounded-md bg-primary-700 px-3 py-2 text-center text-sm font-semibold leading-6 text-base-content-highlight hover:bg-primary-600 focus-visible:ring-offset-2"
href="https://gum.co/Rule34App"
target="_blank"
>
Subscribe
Get Premium
</NuxtLink>
</div>
</div>
Expand All @@ -217,8 +228,12 @@ definePageMeta({
</div>
</section>

<!-- Feature description -->
<section>
<!-- TODO: GIFs of features -->
<!-- TODO: GIFs -->
</section>

<!-- Contact -->
<section></section>
</main>
</template>

0 comments on commit 1eac22e

Please sign in to comment.