mirror of
https://gitea.gofwd.group/dstrawsb/ballistic-builder.git
synced 2025-12-06 02:36:44 -05:00
fresh AF login page
This commit is contained in:
@@ -2,16 +2,25 @@ import { Provider } from "../components/ui/provider"
|
|||||||
import "../styles/globals.css";
|
import "../styles/globals.css";
|
||||||
import Navbar from "../components/Navbar";
|
import Navbar from "../components/Navbar";
|
||||||
import PopNav from "@src/components/PopNav/page";
|
import PopNav from "@src/components/PopNav/page";
|
||||||
|
import { Inter } from 'next/font/google'
|
||||||
|
|
||||||
|
|
||||||
export const metadata = {
|
export const metadata = {
|
||||||
title: 'Ballistic Builder',
|
title: 'Ballistic Builder',
|
||||||
description: 'Freedom On',
|
description: 'Freedom On',
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const inter = Inter({
|
||||||
|
subsets: ['latin'],
|
||||||
|
display: 'swap',
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
export default function RootLayout(props: { children: React.ReactNode }) {
|
export default function RootLayout(props: { children: React.ReactNode }) {
|
||||||
const { children } = props;
|
const { children } = props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<html suppressHydrationWarning>
|
<html suppressHydrationWarning className={inter.className}>
|
||||||
<body className="bg-slate-200 ">
|
<body className="bg-slate-200 ">
|
||||||
<Provider>
|
<Provider>
|
||||||
<Navbar />
|
<Navbar />
|
||||||
|
|||||||
16
src/app/register/layout.tsx
Normal file
16
src/app/register/layout.tsx
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
export const metadata = {
|
||||||
|
title: 'Ballistic Bu8ilder',
|
||||||
|
description: 'Generated by Forward Group, LLC',
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<html lang="en">
|
||||||
|
<body>{children}</body>
|
||||||
|
</html>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -44,75 +44,125 @@ export default function SignupPage() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="p-4 pt-16 mx-auto max-w-md">
|
<div className="flex min-h-screen flex-1">
|
||||||
<div className="bg-white rounded-lg shadow-md p-6">
|
<div className="flex flex-1 flex-col justify-center px-4 py-12 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
|
||||||
<form onSubmit={handleSubmit} className="space-y-4">
|
<div className="mx-auto w-full max-w-sm lg:w-96">
|
||||||
{error && (
|
|
||||||
<div className="bg-red-50 text-red-500 p-3 rounded-md">{error}</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<div>
|
<div>
|
||||||
<h1>Sign Up</h1>
|
<img
|
||||||
<p>Create an account to get started building.</p>
|
alt="Ballistic Builder"
|
||||||
|
src="https://tailwindui.com/plus/img/logos/mark.svg?color=lime&shade=600"
|
||||||
|
className="h-10 w-auto"
|
||||||
|
/>
|
||||||
|
<h2 className="mt-8 text-2xl/9 font-bold tracking-tight text-gray-900">Sign in to your account</h2>
|
||||||
|
<p className="mt-2 text-sm/6 text-gray-500">
|
||||||
|
Not a member?{' '}
|
||||||
|
<a href="#" className="font-semibold text-lime-700 hover:text-lime-800">
|
||||||
|
Create An Account
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<label className="block text-sm font-medium text-gray-700">Name</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
required
|
|
||||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
|
||||||
value={formData.name}
|
|
||||||
onChange={(e) => setFormData({...formData, name: e.target.value})}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
<div className="mt-10">
|
||||||
<label className="block text-sm font-medium text-gray-700">Email</label>
|
<div>
|
||||||
<input
|
<form action="#" method="POST" className="space-y-6">
|
||||||
type="email"
|
<div>
|
||||||
required
|
<label htmlFor="email" className="block text-sm/6 font-medium text-gray-900">
|
||||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
Email address
|
||||||
value={formData.email}
|
</label>
|
||||||
onChange={(e) => setFormData({...formData, email: e.target.value})}
|
<div className="mt-2">
|
||||||
/>
|
<input
|
||||||
</div>
|
id="email"
|
||||||
|
name="email"
|
||||||
|
type="email"
|
||||||
|
required
|
||||||
|
autoComplete="email"
|
||||||
|
className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700">Password</label>
|
<label htmlFor="password" className="block text-sm/6 font-medium text-gray-900">
|
||||||
<input
|
Password
|
||||||
type="password"
|
</label>
|
||||||
required
|
<div className="mt-2">
|
||||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
<input
|
||||||
value={formData.password}
|
id="password"
|
||||||
onChange={(e) => setFormData({...formData, password: e.target.value})}
|
name="password"
|
||||||
/>
|
type="password"
|
||||||
</div>
|
required
|
||||||
|
autoComplete="current-password"
|
||||||
|
className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
<div className="flex items-center justify-between">
|
||||||
<label className="block text-sm font-medium text-gray-700">Confirm Password</label>
|
<div className="flex gap-3">
|
||||||
<input
|
<div className="flex h-6 shrink-0 items-center">
|
||||||
type="password"
|
<div className="group grid size-4 grid-cols-1">
|
||||||
required
|
<input
|
||||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
id="remember-me"
|
||||||
value={formData.confirmPassword}
|
name="remember-me"
|
||||||
onChange={(e) => setFormData({...formData, confirmPassword: e.target.value})}
|
type="checkbox"
|
||||||
/>
|
className="col-start-1 row-start-1 appearance-none rounded border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
|
||||||
</div>
|
/>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 14 14"
|
||||||
|
className="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M3 8L6 11L11 3.5"
|
||||||
|
strokeWidth={2}
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
className="opacity-0 group-has-[:checked]:opacity-100"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M3 7H11"
|
||||||
|
strokeWidth={2}
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
className="opacity-0 group-has-[:indeterminate]:opacity-100"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<label htmlFor="remember-me" className="block text-sm/6 text-gray-900">
|
||||||
|
Remember me
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
<button
|
<div className="text-sm/6">
|
||||||
type="submit"
|
<a href="#" className="font-semibold text-lime-700 hover:text-lime-800">
|
||||||
className="w-full bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors"
|
Forgot password?
|
||||||
>
|
</a>
|
||||||
Create Account
|
</div>
|
||||||
</button>
|
</div>
|
||||||
</form>
|
|
||||||
<div>OR</div>
|
<div>
|
||||||
<button
|
<button
|
||||||
type='button'
|
type="submit"
|
||||||
>
|
className="flex w-full justify-center rounded-md bg-lime-700 px-3 py-1.5 text-sm/6 font-semibold text-white shadow-sm hover:bg-lime-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-lime-800"
|
||||||
Login
|
>
|
||||||
</button>
|
Sign in
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="relative hidden w-0 flex-1 lg:block">
|
||||||
|
<img
|
||||||
|
alt=""
|
||||||
|
src="https://images.unsplash.com/photo-1682876747535-a13486e9a726?q=80&w=1364&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||||
|
className="absolute inset-0 size-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user