jivanrij/go-no-go
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adds the whole disclaimer feature

Browse Source
This commit is contained in:
Jonathan van Rij
2026-03-16 15:22:17 +01:00
parent 29a94899da
commit 7f380303ab
12 changed files with 499 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

257
resources/js/Pages/Disclaimer.vue Normal file
View File

@@ -0,0 +1,257 @@
<script setup>
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { Head } from '@inertiajs/vue3'
import { ArrowLeftIcon } from '@heroicons/vue/24/outline'
import { marked } from 'marked'
import AppLayout from '@/Layouts/AppLayout.vue'
import AppButton from '@/Components/AppButton.vue'
defineOptions({ layout: AppLayout })
const props = defineProps({
content: String,
})
const parsedContent = computed(() => {
if (!props.content) return ''
return marked(props.content)
})
const bottomBackButtonRef = ref(null)
const showStickyBack = ref(false)
let observer = null
onMounted(() => {
if (!bottomBackButtonRef.value) return
observer = new IntersectionObserver(
([entry]) => { showStickyBack.value = !entry.isIntersecting },
{ threshold: 0 }
)
observer.observe(bottomBackButtonRef.value.$el || bottomBackButtonRef.value)
})
onUnmounted(() => {
observer?.disconnect()
})
</script>
<template>
<Head title="Disclaimer" />
<div class="max-w-3xl mx-auto px-4 py-10">
<!-- Sticky back button — appears when bottom back button scrolls out of view -->
<Transition
enter-active-class="transition-all duration-200 ease-out"
enter-from-class="opacity-0 translate-x-4"
enter-to-class="opacity-100 translate-x-0"
leave-active-class="transition-all duration-150 ease-in"
leave-from-class="opacity-100 translate-x-0"
leave-to-class="opacity-0 translate-x-4"
>
<div v-if="showStickyBack" class="fixed top-[88px] right-6 z-40">
<AppButton variant="ghost" size="lg" href="/">
<ArrowLeftIcon class="h-5 w-5" />
Back
</AppButton>
</div>
</Transition>
<!-- Page heading -->
<div class="mb-10">
<h1 class="text-2xl font-bold text-white">Disclaimer</h1>
<div class="h-px bg-gradient-to-r from-primary/40 via-primary/10 to-transparent mt-4"></div>
</div>
<!-- Rendered markdown content -->
<div class="prose-dark" v-html="parsedContent" />
<!-- Bottom back button -->
<div class="mt-12 pt-8 border-t border-white/[0.06]">
<AppButton ref="bottomBackButtonRef" variant="ghost" size="lg" href="/">
<ArrowLeftIcon class="h-5 w-5" />
Back
</AppButton>
</div>
</div>
</template>
<style scoped>
.prose-dark :deep(h1) {
color: #ffffff;
font-size: 1.875rem;
font-weight: 700;
line-height: 1.3;
margin-top: 2rem;
margin-bottom: 1rem;
}
.prose-dark :deep(h2) {
color: #ffffff;
font-size: 1.5rem;
font-weight: 700;
line-height: 1.35;
margin-top: 1.75rem;
margin-bottom: 0.875rem;
}
.prose-dark :deep(h3) {
color: #ffffff;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.4;
margin-top: 1.5rem;
margin-bottom: 0.75rem;
}
.prose-dark :deep(h4) {
color: #ffffff;
font-size: 1.1rem;
font-weight: 600;
line-height: 1.4;
margin-top: 1.25rem;
margin-bottom: 0.625rem;
}
.prose-dark :deep(p) {
color: #d1d5db; /* text-gray-300 */
line-height: 1.75;
margin-bottom: 1rem;
}
.prose-dark :deep(a) {
color: #d1ec51; /* text-primary */
text-decoration: underline;
text-underline-offset: 2px;
transition: color 0.15s ease;
}
.prose-dark :deep(a:hover) {
color: #b5d136; /* text-primary-dark */
}
.prose-dark :deep(ul) {
color: #d1d5db;
list-style: none;
padding-left: 1.5rem;
margin-bottom: 1rem;
}
.prose-dark :deep(ul li) {
position: relative;
margin-bottom: 0.5rem;
line-height: 1.75;
}
.prose-dark :deep(ul li::before) {
content: '—';
color: #d1ec51; /* text-primary */
position: absolute;
left: -1.5rem;
font-weight: 600;
}
.prose-dark :deep(ol) {
color: #d1d5db;
list-style: none;
padding-left: 2rem;
margin-bottom: 1rem;
counter-reset: ol-counter;
}
.prose-dark :deep(ol li) {
position: relative;
margin-bottom: 0.5rem;
line-height: 1.75;
counter-increment: ol-counter;
}
.prose-dark :deep(ol li::before) {
content: counter(ol-counter) '.';
color: #d1ec51; /* text-primary */
position: absolute;
left: -2rem;
font-weight: 600;
}
.prose-dark :deep(blockquote) {
border-left: 3px solid #d1ec51; /* border-primary */
padding-left: 1.25rem;
margin: 1.5rem 0;
font-style: italic;
color: #9ca3af; /* text-gray-400 */
}
.prose-dark :deep(blockquote p) {
color: #9ca3af;
margin-bottom: 0;
}
.prose-dark :deep(pre) {
background-color: rgba(31, 41, 55, 0.5); /* bg-gray-800/50 */
border: 1px solid rgba(75, 85, 99, 0.4);
border-radius: 0.5rem;
padding: 1.25rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.prose-dark :deep(pre code) {
background-color: transparent;
padding: 0;
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, Consolas, monospace;
font-size: 0.875rem;
color: #d1d5db;
}
.prose-dark :deep(code) {
background-color: rgba(31, 41, 55, 0.5); /* bg-gray-800/50 */
border: 1px solid rgba(75, 85, 99, 0.3);
border-radius: 0.25rem;
padding: 0.125rem 0.375rem;
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, Consolas, monospace;
font-size: 0.875em;
color: #d1ec51; /* text-primary */
}
.prose-dark :deep(strong) {
color: #ffffff;
font-weight: 600;
}
.prose-dark :deep(em) {
color: #d1d5db;
font-style: italic;
}
.prose-dark :deep(hr) {
border: none;
border-top: 1px solid #4b5563; /* border-gray-600 */
margin: 2rem 0;
}
.prose-dark :deep(table) {
width: 100%;
border-collapse: collapse;
margin-bottom: 1.5rem;
font-size: 0.9rem;
}
.prose-dark :deep(th) {
color: #ffffff;
font-weight: 600;
text-align: left;
padding: 0.625rem 0.875rem;
border-bottom: 2px solid #4b5563;
}
.prose-dark :deep(td) {
color: #d1d5db;
padding: 0.625rem 0.875rem;
border-bottom: 1px solid rgba(75, 85, 99, 0.4);
}
.prose-dark :deep(tr:last-child td) {
border-bottom: none;
}
</style>