klevze/SkinbaseNova
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Current state with latest updates

Browse Source
This commit is contained in:
klevze
2026-08-23 13:28:34 +02:00
parent 5af95f6533
commit f52879edbb
74 changed files with 5174 additions and 960 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Pages/Academy/Billing/Account.jsx
+5 -4
View File
@@ -1,6 +1,7 @@
import React, { useState, useRef, useEffect } from 'react'
import { Head, Link, useForm, usePage } from '@inertiajs/react'
import { Link, useForm, usePage } from '@inertiajs/react'
import AccessBadge from '../../../components/academy/billing/AccessBadge'
import SeoHead from '../../../components/seo/SeoHead'
function formatDate(iso) {
if (!iso) return null
@@ -11,7 +12,7 @@ function formatDate(iso) {
}
}
export default function AcademyBillingAccount({ currentTier, isSubscribed, subscription, activePlan = null, links = {} }) {
export default function AcademyBillingAccount({ seo, currentTier, isSubscribed, subscription, activePlan = null, links = {} }) {
const { flash, auth } = usePage().props
const { data, setData, post, processing } = useForm({
issue_type: 'billing',
@@ -84,7 +85,7 @@ export default function AcademyBillingAccount({ currentTier, isSubscribed, subsc
return (
<main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.14),_transparent_24%),radial-gradient(circle_at_bottom_right,_rgba(251,191,36,0.14),_transparent_26%),linear-gradient(180deg,_#07111f_0%,_#0f172a_45%,_#111827_100%)] px-4 py-8 sm:px-6 lg:px-8">
<Head title="Academy Subscription" />
<SeoHead seo={seo || {}} title="Academy Subscription" />
<div className="mx-auto max-w-[1280px] space-y-8">
{flash?.error ? (
@@ -280,4 +281,4 @@ export default function AcademyBillingAccount({ currentTier, isSubscribed, subsc
</div>
</main>
)
}
}
resources/js/Pages/Academy/Billing/Cancel.jsx
+5 -4
View File
@@ -1,10 +1,11 @@
import React from 'react'
import { Head, Link } from '@inertiajs/react'
import { Link } from '@inertiajs/react'
import SeoHead from '../../../components/seo/SeoHead'
export default function AcademyBillingCancel({ message, links = {} }) {
export default function AcademyBillingCancel({ seo, message, links = {} }) {
return (
<main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(251,191,36,0.14),_transparent_24%),radial-gradient(circle_at_bottom_right,_rgba(148,163,184,0.14),_transparent_26%),linear-gradient(180deg,_#07111f_0%,_#0f172a_45%,_#111827_100%)] px-4 py-8 sm:px-6 lg:px-8">
<Head title="Academy Billing Canceled" />
<SeoHead seo={seo || {}} title="Academy Billing Canceled" />
<div className="mx-auto max-w-[920px] space-y-8">
<section className="rounded-[40px] border border-white/10 bg-[linear-gradient(135deg,rgba(7,17,31,0.95),rgba(12,24,45,0.9),rgba(67,20,7,0.78))] p-8 shadow-[0_32px_100px_rgba(2,6,23,0.42)] md:p-10">
@@ -20,4 +21,4 @@ export default function AcademyBillingCancel({ message, links = {} }) {
</div>
</main>
)
}
}
resources/js/Pages/Academy/Billing/Success.jsx
+5 -4
View File
@@ -1,15 +1,16 @@
import React from 'react'
import { Head, Link, usePage, useForm } from '@inertiajs/react'
import { Link, usePage, useForm } from '@inertiajs/react'
import AccessBadge from '../../../components/academy/billing/AccessBadge'
import SeoHead from '../../../components/seo/SeoHead'
export default function AcademyBillingSuccess({ currentTier, isSubscribed, links = {} }) {
export default function AcademyBillingSuccess({ seo, currentTier, isSubscribed, links = {} }) {
const { auth } = usePage().props
const sessionId = usePage().props.sessionId || null
const userEmail = auth?.user?.email ?? null
const { data, setData, post, processing } = useForm({ message: '', session_id: sessionId })
return (
<main className="flex min-h-screen items-center bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.14),_transparent_24%),radial-gradient(circle_at_bottom_right,_rgba(16,185,129,0.14),_transparent_24%),linear-gradient(180deg,_#07111f_0%,_#0f172a_45%,_#111827_100%)] px-4 py-8 sm:px-6 lg:px-8">
<Head title="Subscription Confirmed" />
<SeoHead seo={seo || {}} title="Academy Subscription Confirmed" />
<div className="mx-auto w-full max-w-[640px] space-y-6">
<section className="rounded-[40px] border border-emerald-300/20 bg-[linear-gradient(135deg,rgba(7,17,31,0.95),rgba(12,24,45,0.92),rgba(6,78,59,0.82))] p-8 shadow-[0_32px_100px_rgba(2,6,23,0.42)] md:p-10">
@@ -65,4 +66,4 @@ export default function AcademyBillingSuccess({ currentTier, isSubscribed, links
</div>
</main>
)
}
}
resources/js/Pages/Academy/ChallengeSubmit.jsx
+2 -3
View File
@@ -1,5 +1,5 @@
import React from 'react'
import { Head, useForm } from '@inertiajs/react'
import { useForm } from '@inertiajs/react'
import SeoHead from '../../components/seo/SeoHead'
import NovaSelect from '../../components/ui/NovaSelect'
@@ -17,7 +17,6 @@ export default function AcademyChallengeSubmit({ seo, challenge, artworks, submi
return (
<main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.15),_transparent_24%),radial-gradient(circle_at_bottom_right,_rgba(251,191,36,0.16),_transparent_24%),linear-gradient(180deg,_#0f172a_0%,_#111827_100%)] px-4 py-8 sm:px-6 lg:px-8">
<Head title={`Submit to ${challenge.title}`} />
<SeoHead seo={seo || {}} title={`Submit to ${challenge.title}`} description={challenge.excerpt || challenge.description} />
<div className="mx-auto max-w-[960px] space-y-6">
@@ -65,4 +64,4 @@ export default function AcademyChallengeSubmit({ seo, challenge, artworks, submi
</div>
</main>
)
}
}
resources/js/Pages/Academy/Index.jsx
+16 -3
View File
@@ -106,13 +106,26 @@ function MetricCard({ label, value, accent }) {
}
function FeaturedCourseCard({ course }) {
const cover = course?.cover_image_url || course?.teaser_image_url || course?.cover_image || course?.teaser_image || ''
const cover = course?.cover_image_thumb_url || course?.cover_image_url || course?.teaser_image_thumb_url || course?.teaser_image_url || course?.cover_image || course?.teaser_image || ''
const coverSrcSet = course?.cover_image_srcset || course?.teaser_image_srcset || ''
return (
<Link href={course.public_url} className="group relative overflow-hidden rounded-[28px] border border-sky-200/12 bg-[linear-gradient(180deg,rgba(15,23,42,0.9),rgba(15,23,42,0.72))] transition hover:-translate-y-1 hover:border-sky-300/24 hover:shadow-[0_24px_72px_rgba(2,6,23,0.3)]">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(125,211,252,0.14),transparent_24%),linear-gradient(135deg,transparent_0%,transparent_48%,rgba(125,211,252,0.05)_48%,rgba(125,211,252,0.05)_52%,transparent_52%,transparent_100%)] opacity-80" />
<div className="relative h-44 overflow-hidden bg-[linear-gradient(135deg,rgba(14,165,233,0.24),rgba(15,23,42,0.92))]">
{cover ? <img src={cover} alt="" aria-hidden="true" className="h-full w-full object-cover" /> : null}
{cover ? (
<img
src={cover}
srcSet={coverSrcSet || undefined}
sizes="(min-width: 1280px) 31vw, (min-width: 768px) 50vw, 100vw"
alt=""
aria-hidden="true"
loading="lazy"
decoding="async"
fetchPriority="low"
className="h-full w-full object-cover"
/>
) : null}
<div className="absolute inset-0 bg-[linear-gradient(180deg,transparent,rgba(2,6,23,0.82))]" />
<div className="absolute left-4 top-4 flex flex-wrap gap-2">
<span className="rounded-full border border-white/10 bg-black/30 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-sky-100">{course.difficulty}</span>
@@ -552,4 +565,4 @@ export default function AcademyIndex({ seo, pricingUrl, academyAccess = null, li
</div>
</main>
)
}
}
resources/js/Pages/Academy/Show.jsx
+16 -16
View File
@@ -628,7 +628,7 @@ function PromptFilledExampleCard({ example, analytics, contentId, index }) {
</div>
) : null}
{example?.prompt ? <pre className="mt-5 whitespace-pre-wrap rounded-[24px] border border-white/10 bg-slate-950/80 p-4 text-sm leading-7 text-slate-100">{example.prompt}</pre> : null}
{example?.prompt ? <pre className="mt-5 max-w-full overflow-x-auto whitespace-pre-wrap break-words rounded-[24px] border border-white/10 bg-slate-950/80 p-4 text-sm leading-7 text-slate-100 [overflow-wrap:anywhere]">{example.prompt}</pre> : null}
{example?.negative_prompt ? (
<div className="mt-4 rounded-[24px] border border-white/10 bg-slate-950/60 p-4">
@@ -803,7 +803,7 @@ function PromptHelperPromptCard({ helperPrompt, analytics, contentId }) {
<p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-400">Prompt text</p>
<PromptCopyButton prompt={helperPrompt.prompt} label="Copy helper prompt" analytics={analytics} contentId={contentId} eventType="academy_prompt_helper_copy" metadata={{ copy_type: 'helper_prompt', helper_prompt_title: helperPrompt.title || '', source: 'prompt_helper' }} />
</div>
<pre className="mt-4 whitespace-pre-wrap rounded-[22px] border border-white/10 bg-slate-950/70 p-4 text-sm leading-7 text-slate-100">{helperPrompt.prompt}</pre>
<pre className="mt-4 max-w-full overflow-x-auto whitespace-pre-wrap break-words rounded-[22px] border border-white/10 bg-slate-950/70 p-4 text-sm leading-7 text-slate-100 [overflow-wrap:anywhere]">{helperPrompt.prompt}</pre>
</div>
</details>
)
@@ -839,7 +839,7 @@ function PromptVariantCard({ variant, analytics, contentId }) {
<p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-400">Variant prompt</p>
<PromptCopyButton prompt={variant.prompt} label="Copy variant" analytics={analytics} contentId={contentId} eventType="academy_prompt_variant_copy" metadata={{ copy_type: 'prompt_variant', variant_title: variant.title || '', source: 'prompt_variant' }} />
</div>
<pre className="mt-4 whitespace-pre-wrap rounded-[22px] border border-white/10 bg-slate-950/70 p-4 text-sm leading-7 text-slate-100">{variant.prompt}</pre>
<pre className="mt-4 max-w-full overflow-x-auto whitespace-pre-wrap break-words rounded-[22px] border border-white/10 bg-slate-950/70 p-4 text-sm leading-7 text-slate-100 [overflow-wrap:anywhere]">{variant.prompt}</pre>
</div>
{variant.negative_prompt ? (
@@ -848,7 +848,7 @@ function PromptVariantCard({ variant, analytics, contentId }) {
<p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-400">Negative prompt</p>
<PromptCopyButton prompt={variant.negative_prompt} label="Copy negative" analytics={analytics} contentId={contentId} eventType="academy_prompt_variant_negative_copy" metadata={{ copy_type: 'prompt_variant_negative', variant_title: variant.title || '', source: 'prompt_variant' }} />
</div>
<pre className="mt-4 whitespace-pre-wrap rounded-[22px] border border-white/10 bg-slate-950/70 p-4 text-sm leading-7 text-slate-200">{variant.negative_prompt}</pre>
<pre className="mt-4 max-w-full overflow-x-auto whitespace-pre-wrap break-words rounded-[22px] border border-white/10 bg-slate-950/70 p-4 text-sm leading-7 text-slate-200 [overflow-wrap:anywhere]">{variant.negative_prompt}</pre>
</div>
) : null}
@@ -1082,7 +1082,7 @@ function AiComparisonSection({ block }) {
</div>
<PromptCopyButton prompt={payload.prompt} />
</div>
<pre className="mt-4 whitespace-pre-wrap rounded-[22px] border border-white/10 bg-slate-950/70 p-4 text-sm leading-7 text-slate-100">{payload.prompt}</pre>
<pre className="mt-4 max-w-full overflow-x-auto whitespace-pre-wrap break-words rounded-[22px] border border-white/10 bg-slate-950/70 p-4 text-sm leading-7 text-slate-100 [overflow-wrap:anywhere]">{payload.prompt}</pre>
{hasNegativePrompt ? (
<div className="mt-4 rounded-[22px] border border-white/10 bg-white/[0.03] p-4">
<p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-400">Negative prompt</p>
@@ -1735,7 +1735,7 @@ export default function AcademyShow({ pageType, item, relatedLessons = [], relat
<main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.16),_transparent_24%),radial-gradient(circle_at_bottom_right,_rgba(59,130,246,0.14),_transparent_26%),linear-gradient(180deg,_#0b1220_0%,_#111827_46%,_#0f172a_100%)] px-4 py-8 sm:px-6 lg:px-8">
<SeoHead seo={seo || {}} title={item?.title} description={item?.excerpt || item?.description} />
<div className="mx-auto max-w-[1320px] space-y-6">
<div className="mx-auto min-w-0 max-w-[1320px] space-y-6">
{flash.success ? <div className="rounded-2xl border border-emerald-300/20 bg-emerald-300/10 px-4 py-3 text-sm text-emerald-100">{flash.success}</div> : null}
{flash.error ? <div className="rounded-2xl border border-rose-300/20 bg-rose-300/10 px-4 py-3 text-sm text-rose-100">{flash.error}</div> : null}
@@ -2017,13 +2017,13 @@ export default function AcademyShow({ pageType, item, relatedLessons = [], relat
</div>
</div>
) : pageType === 'prompt' ? (
<div className="space-y-8">
<section className="relative overflow-hidden rounded-[40px] border border-rose-200/12 bg-[linear-gradient(150deg,rgba(244,63,94,0.14),rgba(15,23,42,0.96)_36%,rgba(45,212,191,0.14))] shadow-[0_24px_90px_rgba(15,23,42,0.34)]">
<div className="min-w-0 max-w-full space-y-8 overflow-x-clip">
<section className="relative w-full min-w-0 max-w-full overflow-hidden rounded-[40px] border border-rose-200/12 bg-[linear-gradient(150deg,rgba(244,63,94,0.14),rgba(15,23,42,0.96)_36%,rgba(45,212,191,0.14))] shadow-[0_24px_90px_rgba(15,23,42,0.34)]">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_18%_14%,rgba(251,113,133,0.15),transparent_24%),linear-gradient(90deg,rgba(255,255,255,0.04)_1px,transparent_1px),linear-gradient(180deg,rgba(255,255,255,0.04)_1px,transparent_1px)] bg-[length:auto,24px_24px,24px_24px] opacity-75" />
<div className="absolute -left-8 top-10 h-36 w-36 rounded-full bg-rose-300/16 blur-3xl" />
<div className="absolute -right-10 bottom-0 h-40 w-40 rounded-full bg-cyan-300/14 blur-3xl" />
<div className="relative grid gap-6 p-5 md:p-6 lg:grid-cols-[minmax(0,1fr)_minmax(320px,0.72fr)] lg:p-7">
<div className="relative grid min-w-0 grid-cols-1 gap-6 p-5 md:p-6 lg:grid-cols-[minmax(0,1fr)_minmax(320px,0.72fr)] lg:p-7">
<div className="min-w-0">
{academyBreadcrumbs.length ? (
<div className="mb-5">
@@ -2092,7 +2092,7 @@ export default function AcademyShow({ pageType, item, relatedLessons = [], relat
</div>
<div className="grid gap-4 lg:pt-2">
<div className="grid min-w-0 w-full gap-4 lg:pt-2">
<div className="flex h-full flex-col rounded-[30px] border border-white/10 bg-black/20 p-4 shadow-[0_18px_42px_rgba(2,6,23,0.18)] backdrop-blur-sm md:p-5">
<div className="flex items-center justify-between gap-3">
<p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-rose-100/80">Preview artwork</p>
@@ -2102,7 +2102,7 @@ export default function AcademyShow({ pageType, item, relatedLessons = [], relat
<button
type="button"
onClick={openPromptPreviewImage}
className="group mt-4 flex min-h-[420px] flex-1 flex-col overflow-hidden rounded-[28px] border border-white/10 bg-black/30 text-left shadow-[0_24px_80px_rgba(2,6,23,0.26)] transition hover:border-sky-300/25 focus:outline-none focus:ring-2 focus:ring-sky-300/35 lg:min-h-[640px]"
className="group mt-4 flex min-h-[420px] w-full min-w-0 flex-1 flex-col overflow-hidden rounded-[28px] border border-white/10 bg-black/30 text-left shadow-[0_24px_80px_rgba(2,6,23,0.26)] transition hover:border-sky-300/25 focus:outline-none focus:ring-2 focus:ring-sky-300/35 lg:min-h-[640px]"
disabled={!promptPreviewImage}
aria-label={promptPreviewImage ? `Open preview image for ${item.title}` : 'Preview image unavailable'}
>
@@ -2135,8 +2135,8 @@ export default function AcademyShow({ pageType, item, relatedLessons = [], relat
</div>
</section>
<div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_360px]">
<div className="space-y-8">
<div className="grid min-w-0 grid-cols-1 gap-8 lg:grid-cols-[minmax(0,1fr)_360px]">
<div className="min-w-0 space-y-8">
{!promptHasFullAccess && (promptPreviewImage || promptPublicExamples.length) ? (
<section className="academy-public-examples rounded-[32px] border border-white/10 bg-[linear-gradient(180deg,rgba(255,255,255,0.045),rgba(148,163,184,0.03))] p-6 text-slate-200 shadow-[0_24px_70px_rgba(2,6,23,0.2)] md:p-8">
<div className="flex flex-wrap items-end justify-between gap-4">
@@ -2228,7 +2228,7 @@ export default function AcademyShow({ pageType, item, relatedLessons = [], relat
/>
) : null}
</div>
<pre className="mt-4 whitespace-pre-wrap rounded-[24px] border border-white/10 bg-slate-950/80 p-4 text-sm leading-7 text-slate-100 md:p-5">{promptBody || 'Prompt text is not available yet.'}</pre>
<pre className="mt-4 max-w-full overflow-x-auto whitespace-pre-wrap break-words rounded-[24px] border border-white/10 bg-slate-950/80 p-4 text-sm leading-7 text-slate-100 [overflow-wrap:anywhere] md:p-5">{promptBody || 'Prompt text is not available yet.'}</pre>
{!promptHasFullAccess ? (
<div className="mt-4 rounded-[24px] border border-amber-300/20 bg-amber-300/10 p-4 text-amber-50">
<p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-amber-100/80">{promptUnlockTitle || 'Unlock the full prompt'}</p>
@@ -2251,7 +2251,7 @@ export default function AcademyShow({ pageType, item, relatedLessons = [], relat
metadata={{ copy_type: 'negative_prompt', source: 'prompt_body' }}
/>
</div>
<pre className="mt-4 whitespace-pre-wrap rounded-[24px] border border-white/10 bg-slate-950/70 p-4 text-sm leading-7 text-slate-200 md:p-5">{item.negative_prompt}</pre>
<pre className="mt-4 max-w-full overflow-x-auto whitespace-pre-wrap break-words rounded-[24px] border border-white/10 bg-slate-950/70 p-4 text-sm leading-7 text-slate-200 [overflow-wrap:anywhere] md:p-5">{item.negative_prompt}</pre>
</div>
) : null}
</div>
@@ -2401,7 +2401,7 @@ export default function AcademyShow({ pageType, item, relatedLessons = [], relat
) : null}
</div>
<aside className="space-y-6 lg:sticky lg:top-6 lg:self-start">
<aside className="min-w-0 space-y-6 lg:sticky lg:top-6 lg:self-start">
{lessonTags.length ? (
<section className="rounded-[32px] border border-white/10 bg-[linear-gradient(180deg,rgba(15,23,42,0.92),rgba(15,23,42,0.84))] p-6 text-slate-200 shadow-[0_18px_50px_rgba(2,6,23,0.18)]">
<p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-400">Microtags</p>