Auto commit: 2026-04-15T15:06:49.025Z
This commit is contained in:
Flatlogic Bot
parent
8982afd0ea
commit
c2e2a1bb5f
@ -1,6 +1,5 @@
|
|||||||
import React, {useEffect, useRef} from 'react'
|
import React, { useEffect, useRef, useState } from 'react'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import { useState } from 'react'
|
|
||||||
import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
|
import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
|
||||||
import BaseDivider from './BaseDivider'
|
import BaseDivider from './BaseDivider'
|
||||||
import BaseIcon from './BaseIcon'
|
import BaseIcon from './BaseIcon'
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
import React, { ReactNode, useEffect } from 'react'
|
import React, { ReactNode, useEffect, useState } from 'react'
|
||||||
import { useState } from 'react'
|
|
||||||
import jwt from 'jsonwebtoken';
|
import jwt from 'jsonwebtoken';
|
||||||
import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
|
import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
|
||||||
import menuAside from '../menuAside'
|
import menuAside from '../menuAside'
|
||||||
|
|||||||
@ -7,6 +7,11 @@ const menuAside: MenuAsideItem[] = [
|
|||||||
icon: icon.mdiViewDashboardOutline,
|
icon: icon.mdiViewDashboardOutline,
|
||||||
label: 'Dashboard',
|
label: 'Dashboard',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
href: '/watch-hub',
|
||||||
|
icon: icon.mdiPlayCircle,
|
||||||
|
label: 'Watch Hub',
|
||||||
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
href: '/users/users-list',
|
href: '/users/users-list',
|
||||||
|
|||||||
@ -1,166 +1,145 @@
|
|||||||
|
import {
|
||||||
import React, { useEffect, useState } from 'react';
|
mdiBookmarkOutline,
|
||||||
import type { ReactElement } from 'react';
|
mdiCheckCircleOutline,
|
||||||
|
mdiFire,
|
||||||
|
mdiPlayCircle,
|
||||||
|
mdiStarOutline,
|
||||||
|
mdiTelevisionClassic,
|
||||||
|
} from '@mdi/js';
|
||||||
import Head from 'next/head';
|
import Head from 'next/head';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
|
import type { ReactElement } from 'react';
|
||||||
|
import React from 'react';
|
||||||
import BaseButton from '../components/BaseButton';
|
import BaseButton from '../components/BaseButton';
|
||||||
import CardBox from '../components/CardBox';
|
import BaseIcon from '../components/BaseIcon';
|
||||||
import SectionFullScreen from '../components/SectionFullScreen';
|
|
||||||
import LayoutGuest from '../layouts/Guest';
|
import LayoutGuest from '../layouts/Guest';
|
||||||
import BaseDivider from '../components/BaseDivider';
|
|
||||||
import BaseButtons from '../components/BaseButtons';
|
|
||||||
import { getPageTitle } from '../config';
|
import { getPageTitle } from '../config';
|
||||||
import { useAppSelector } from '../stores/hooks';
|
|
||||||
import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
|
|
||||||
import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
|
|
||||||
|
|
||||||
|
const featureCards = [
|
||||||
|
{
|
||||||
|
icon: mdiPlayCircle,
|
||||||
|
title: 'Browse & search titles',
|
||||||
|
description: 'Explore a movie and TV catalog with a cinematic layout built for quick discovery.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: mdiBookmarkOutline,
|
||||||
|
title: 'Build personal watchlists',
|
||||||
|
description: 'Save titles into your own queue and keep a clear next-up list instead of scattered notes.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: mdiCheckCircleOutline,
|
||||||
|
title: 'Track watching progress',
|
||||||
|
description: 'Move titles from plan to watch, to watching, to watched with a clean, focused workflow.',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const highlightPills = [
|
||||||
|
{ icon: mdiFire, label: 'Trending rails' },
|
||||||
|
{ icon: mdiStarOutline, label: 'Recommendations' },
|
||||||
|
{ icon: mdiTelevisionClassic, label: 'Movies + TV shows' },
|
||||||
|
];
|
||||||
|
|
||||||
export default function Starter() {
|
export default function Starter() {
|
||||||
const [illustrationImage, setIllustrationImage] = useState({
|
|
||||||
src: undefined,
|
|
||||||
photographer: undefined,
|
|
||||||
photographer_url: undefined,
|
|
||||||
})
|
|
||||||
const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
|
|
||||||
const [contentType, setContentType] = useState('video');
|
|
||||||
const [contentPosition, setContentPosition] = useState('left');
|
|
||||||
const textColor = useAppSelector((state) => state.style.linkColor);
|
|
||||||
|
|
||||||
const title = 'Movies & TV Tracker'
|
|
||||||
|
|
||||||
// Fetch Pexels image/video
|
|
||||||
useEffect(() => {
|
|
||||||
async function fetchData() {
|
|
||||||
const image = await getPexelsImage();
|
|
||||||
const video = await getPexelsVideo();
|
|
||||||
setIllustrationImage(image);
|
|
||||||
setIllustrationVideo(video);
|
|
||||||
}
|
|
||||||
fetchData();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const imageBlock = (image) => (
|
|
||||||
<div
|
|
||||||
className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
|
|
||||||
style={{
|
|
||||||
backgroundImage: `${
|
|
||||||
image
|
|
||||||
? `url(${image?.src?.original})`
|
|
||||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
|
||||||
}`,
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundPosition: 'left center',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className='flex justify-center w-full bg-blue-300/20'>
|
|
||||||
<a
|
|
||||||
className='text-[8px]'
|
|
||||||
href={image?.photographer_url}
|
|
||||||
target='_blank'
|
|
||||||
rel='noreferrer'
|
|
||||||
>
|
|
||||||
Photo by {image?.photographer} on Pexels
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const videoBlock = (video) => {
|
|
||||||
if (video?.video_files?.length > 0) {
|
|
||||||
return (
|
|
||||||
<div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
|
|
||||||
<video
|
|
||||||
className='absolute top-0 left-0 w-full h-full object-cover'
|
|
||||||
autoPlay
|
|
||||||
loop
|
|
||||||
muted
|
|
||||||
>
|
|
||||||
<source src={video?.video_files[0]?.link} type='video/mp4'/>
|
|
||||||
Your browser does not support the video tag.
|
|
||||||
</video>
|
|
||||||
<div className='flex justify-center w-full bg-blue-300/20 z-10'>
|
|
||||||
<a
|
|
||||||
className='text-[8px]'
|
|
||||||
href={video?.user?.url}
|
|
||||||
target='_blank'
|
|
||||||
rel='noreferrer'
|
|
||||||
>
|
|
||||||
Video by {video.user.name} on Pexels
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>)
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<>
|
||||||
style={
|
|
||||||
contentPosition === 'background'
|
|
||||||
? {
|
|
||||||
backgroundImage: `${
|
|
||||||
illustrationImage
|
|
||||||
? `url(${illustrationImage.src?.original})`
|
|
||||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
|
||||||
}`,
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundPosition: 'left center',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
}
|
|
||||||
: {}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Head>
|
<Head>
|
||||||
<title>{getPageTitle('Starter Page')}</title>
|
<title>{getPageTitle('Movies & TV Tracker')}</title>
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<SectionFullScreen bg='violet'>
|
<div className='min-h-screen bg-[#07080d] text-white'>
|
||||||
<div
|
<div className='mx-auto flex min-h-screen max-w-7xl flex-col px-6 py-6 sm:px-8 lg:px-10'>
|
||||||
className={`flex ${
|
<header className='flex flex-col gap-4 rounded-full border border-white/10 bg-white/5 px-5 py-4 backdrop-blur md:flex-row md:items-center md:justify-between'>
|
||||||
contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
|
<div>
|
||||||
} min-h-screen w-full`}
|
<div className='text-xs font-semibold uppercase tracking-[0.28em] text-violet-200'>Movies & TV Tracker</div>
|
||||||
>
|
<div className='mt-1 text-sm text-slate-400'>Modern, dark, cinematic watchlist experience.</div>
|
||||||
{contentType === 'image' && contentPosition !== 'background'
|
|
||||||
? imageBlock(illustrationImage)
|
|
||||||
: null}
|
|
||||||
{contentType === 'video' && contentPosition !== 'background'
|
|
||||||
? videoBlock(illustrationVideo)
|
|
||||||
: null}
|
|
||||||
<div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
|
|
||||||
<CardBox className='w-full md:w-3/5 lg:w-2/3'>
|
|
||||||
<CardBoxComponentTitle title="Welcome to your Movies & TV Tracker app!"/>
|
|
||||||
|
|
||||||
<div className="space-y-3">
|
|
||||||
<p className='text-center '>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
|
|
||||||
<p className='text-center '>For guides and documentation please check
|
|
||||||
your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className='flex flex-wrap gap-3'>
|
||||||
|
<BaseButton href='/login' color='whiteDark' label='Login' />
|
||||||
|
<BaseButton href='/dashboard' color='info' label='Admin interface' />
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
<BaseButtons>
|
<main className='flex flex-1 items-center py-10 lg:py-16'>
|
||||||
<BaseButton
|
<div className='grid w-full gap-8 lg:grid-cols-[1.15fr_0.85fr] lg:items-center'>
|
||||||
href='/login'
|
<section>
|
||||||
label='Login'
|
<span className='inline-flex items-center rounded-full border border-violet-400/25 bg-violet-500/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.24em] text-violet-100'>
|
||||||
color='info'
|
Your own movie & TV app starts here
|
||||||
className='w-full'
|
</span>
|
||||||
/>
|
<h1 className='mt-6 max-w-3xl text-4xl font-semibold leading-tight sm:text-5xl lg:text-6xl'>
|
||||||
|
Track what to watch next with a dark, youthful, cinema-inspired product shell.
|
||||||
|
</h1>
|
||||||
|
<p className='mt-6 max-w-2xl text-base leading-8 text-slate-300 sm:text-lg'>
|
||||||
|
Turn the seed SaaS app into a viewer-facing experience: discover titles, save them to a personal watchlist,
|
||||||
|
mark progress, and keep a polished admin back office for managing the catalog.
|
||||||
|
</p>
|
||||||
|
|
||||||
</BaseButtons>
|
<div className='mt-8 flex flex-wrap gap-3'>
|
||||||
</CardBox>
|
<BaseButton href='/watch-hub' color='info' label='Open watch hub' icon={mdiPlayCircle} />
|
||||||
|
<BaseButton href='/login' color='whiteDark' label='Sign in to continue' />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='mt-8 flex flex-wrap gap-3'>
|
||||||
|
{highlightPills.map((pill) => (
|
||||||
|
<div
|
||||||
|
key={pill.label}
|
||||||
|
className='inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm text-slate-200'
|
||||||
|
>
|
||||||
|
<BaseIcon path={pill.icon} size={15} className='text-violet-200' />
|
||||||
|
{pill.label}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className='relative'>
|
||||||
|
<div className='absolute inset-0 rounded-[2rem] bg-[radial-gradient(circle_at_top_left,_rgba(99,102,241,0.35),_transparent_35%),radial-gradient(circle_at_bottom_right,_rgba(244,63,94,0.22),_transparent_36%)] blur-2xl' />
|
||||||
|
<div className='relative overflow-hidden rounded-[2rem] border border-white/10 bg-[linear-gradient(145deg,rgba(10,12,18,0.98),rgba(30,27,75,0.65))] p-6 shadow-2xl shadow-black/40'>
|
||||||
|
<div className='mb-5 flex items-center justify-between'>
|
||||||
|
<div>
|
||||||
|
<div className='text-xs uppercase tracking-[0.24em] text-slate-400'>First MVP slice</div>
|
||||||
|
<div className='mt-2 text-2xl font-semibold'>Watch hub</div>
|
||||||
|
</div>
|
||||||
|
<span className='rounded-full bg-emerald-500/15 px-3 py-1 text-xs font-medium text-emerald-200'>Live workflow</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='grid gap-4'>
|
||||||
|
{featureCards.map((feature, index) => (
|
||||||
|
<div key={feature.title} className='rounded-3xl border border-white/10 bg-black/20 p-5'>
|
||||||
|
<div className='flex items-center gap-3'>
|
||||||
|
<div className='flex h-11 w-11 items-center justify-center rounded-2xl bg-white/5'>
|
||||||
|
<BaseIcon path={feature.icon} className='text-violet-200' />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className='text-xs uppercase tracking-[0.24em] text-slate-500'>Step {index + 1}</div>
|
||||||
|
<h2 className='mt-1 text-lg font-semibold text-white'>{feature.title}</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className='mt-4 text-sm leading-7 text-slate-300'>{feature.description}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer className='flex flex-col items-start justify-between gap-4 border-t border-white/10 py-6 text-sm text-slate-400 sm:flex-row sm:items-center'>
|
||||||
|
<p>Built for movie nights, TV binges, and a cleaner personal watch queue.</p>
|
||||||
|
<div className='flex flex-wrap gap-4'>
|
||||||
|
<Link href='/privacy-policy' className='transition hover:text-white'>
|
||||||
|
Privacy Policy
|
||||||
|
</Link>
|
||||||
|
<Link href='/terms-of-use' className='transition hover:text-white'>
|
||||||
|
Terms of Use
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</SectionFullScreen>
|
</>
|
||||||
<div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
|
|
||||||
<p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
|
|
||||||
<Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
|
|
||||||
Privacy Policy
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
Starter.getLayout = function getLayout(page: ReactElement) {
|
Starter.getLayout = function getLayout(page: ReactElement) {
|
||||||
return <LayoutGuest>{page}</LayoutGuest>;
|
return <LayoutGuest>{page}</LayoutGuest>;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
1115
frontend/src/pages/watch-hub.tsx
Normal file
1115
frontend/src/pages/watch-hub.tsx
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user