Skip to content

Commit

Permalink
finished the preregistration page and made it mobile compatible
Browse files Browse the repository at this point in the history
  • Loading branch information
@hetk987
hetk987 committed Sep 1, 2024
1 parent 220f7d4 commit d54e194
Show file tree
Hide file tree
Showing 4 changed files with 59 additions and 55 deletions.
90 changes: 46 additions & 44 deletions my-turborepo/apps/nextjs/src/app/_components/customCss.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,14 +50,16 @@ $total: 10;
}

.xpBorder {
background-image: linear-gradient(to bottom, #b6ddf9, #dfe2e5, #6ba2fe);
border-width: 1px;
border-style: solid;
position: relative;
padding: 1rem;
border-color: #000;
color: inherit;
box-shadow: 0 -20px 10px -20px rgba(0, 0, 0, 0.5) inset, 20px 0 10px -20px rgba(0, 0, 0, 0.5) inset;
@media screen and (min-width: 1025px) {
background-image: linear-gradient(to bottom, #b6ddf9, #dfe2e5, #6ba2fe);
border-width: 1px;
border-style: solid;
position: relative;
padding: 1rem;
border-color: #000;
color: inherit;
box-shadow: 0 -20px 10px -20px rgba(0, 0, 0, 0.5) inset, 20px 0 10px -20px rgba(0, 0, 0, 0.5) inset;
}
}

.horizontal-line {
Expand All @@ -72,54 +74,54 @@ $total: 10;


.compStyling {
background-color: #e4e3e4;
border-color: black;
border-width: 2px;
border-style: solid;
position: relative;
padding: 0.5rem;


&::before {
content: '';
position: absolute;
inset: 0; // equivalent to top: 0; right: 0; bottom: 0; left: 0;
@media screen and (min-width: 1025px) {
background-color: #e4e3e4;
border-color: black;
border-width: 2px;
border-style: solid;
border-right-color: #9c9c9c;
border-top-color: #9c9c9c;
border-left-color: #fff;
border-bottom-color: #fff;
position: relative;
padding: 0.5rem;

}

&:hover {
background-color: #e4e3e4;
}

&:focus {

background-color: #c2c2c2;

.close {
margin-top: 2px;
}

&::before {
content: '';
position: absolute;
inset: 0; // equivalent to top: 0; right: 0; bottom: 0; left: 0;
border-width: 2px;
border-style: solid;
border-right-color: #fff;
border-top-color: #fff;
border-left-color: #797878;
border-bottom-color: #797878;
border-right-color: #9c9c9c;
border-top-color: #9c9c9c;
border-left-color: #fff;
border-bottom-color: #fff;

}
}

&:hover {
background-color: #e4e3e4;
}

&:focus {

background-color: #c2c2c2;

.close {
margin-top: 2px;
}

&::before {
content: '';
position: absolute;
inset: 0; // equivalent to top: 0; right: 0; bottom: 0; left: 0;
border-width: 2px;
border-style: solid;
border-right-color: #fff;
border-top-color: #fff;
border-left-color: #797878;
border-bottom-color: #797878;

}
}
}
}

.submitBtn {
Expand All @@ -133,7 +135,7 @@ $total: 10;
}

&:hover {
background-image: linear-gradient(to bottom, rgba(182, 221, 249, 0.5), rgba(224, 227, 230, 0.5), rgba(107, 162, 254, 0.5));
background-image: linear-gradient(to bottom, rgba(182, 221, 249, 0.5), rgba(224, 227, 230, 0.5), rgba(107, 162, 254, 0.5));

}
}
20 changes: 10 additions & 10 deletions my-turborepo/apps/nextjs/src/app/_components/preregistration-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,11 @@ export const CreatePreregistrationForm = () => {
}

return (
<div className="font-XPfont font-bold">
<div className="font-XPfont font-bold bg-large-device bg-cover bg-no-repeat bg-center ">
<div className="flex h-screen items-center justify-center">
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col items-center text-center w-2/5 text-lg xpBorder">
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col items-center text-center w-2/5 text-lg xpBorder ">
<div className="flex flex-row w-full items-center justify-center">
<div className="w-full pr-3"> {/**Random Lines */}
<div className="w-full pr-3 lg:visible invisible"> {/**Random Lines */}
<div className="horizontal-line"></div>
<div className="horizontal-line"></div>
<div className="horizontal-line"></div>
Expand All @@ -40,15 +40,15 @@ export const CreatePreregistrationForm = () => {
<div className="horizontal-line"></div>
<div className="horizontal-line"></div>
</div>
<Button className="compStyling"><AiOutlineClose className="close" /></Button>
<Button className="compStyling lg:visible invisible"><AiOutlineClose className="close" /></Button>
</div>
<div className="flex flex-col items-center bg-[#e4e3e4] w-full mt-3 border-[#585958] border-[1px]">
<div className="flex flex-col items-center lg:bg-[#e4e3e4] w-full mt-3 lg:border-[#585958] lg:border-[1px] border-0">
<h1 className="text-6xl p-10 pb-5">
<span className="odd:text-teal-400">T</span>
<span className="even:text-cyan-700">A</span>
<span className="odd:text-teal-400 ">M</span>
<span className="even:text-cyan-700">U</span> Datathon Preregistration</h1>
<label className="flex flex-row justify-center">
<label className="flex flex-row justify-center ">
<h1 className="pr-4">Enter Email: </h1>
<div className="flex rounded-sm bg-black p-0.5">
<input {...register("email", { required: true, maxLength: 256 })} className=" border-cyan-600" />
Expand All @@ -62,8 +62,8 @@ export const CreatePreregistrationForm = () => {
<div className="text-sm text-red-600">
Invalid Email
</div>)}
<label>
<input type="checkbox" value={"on"} {...register("confirmation", { required: true, })} />
<label className="lg:text-black text-white ">
<input className="m-1" type="checkbox" value={"on"} {...register("confirmation", { required: true, })} />
<span>I agree to the terms and conditions.</span>
</label>
{errors.confirmation?.message != undefined && (
Expand All @@ -72,13 +72,13 @@ export const CreatePreregistrationForm = () => {
</div>
)}
<Button
className="xpBorder text-xl font-extrabold my-4 submitBtn w-fit"
className="xpBorder text-xl font-extrabold my-4 submitBtn w-fit bg-cyan-700"
type="submit"
disabled={!isDirty || isSubmitting}
>
{
isSubmitting ?
<Image src="loading.svg" className="animate-spin w-6 h-6" aria-hidden="true" alt="loading..." />
<Image src="loading.svg" className="animate-spin" width={24} height={24} aria-hidden="true" alt="loading..." />
: "Submit"
}
</Button>
Expand Down
1 change: 0 additions & 1 deletion my-turborepo/apps/nextjs/src/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,6 @@ export default function RootLayout(props: { children: React.ReactNode }) {
>
<TRPCReactProvider>{props.children}</TRPCReactProvider>
<div className="absolute bottom-4 right-4">
<ThemeToggle />
</div>
<Toaster />
</body>
Expand Down
3 changes: 3 additions & 0 deletions my-turborepo/apps/nextjs/tailwind.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ export default {
// important: true, // This will add !important to all Tailwind utilities
theme: {
extend: {
backgroundImage:{
'large-device': "url('./assets/wallpaper.jpg')",
},
fontFamily: {
sans: ["var(--font-geist-sans)", ...fontFamily.sans],
mono: ["var(--font-geist-mono)", ...fontFamily.mono],
Expand Down

0 comments on commit d54e194

Please sign in to comment.