diff --git a/README.md b/README.md index d9ba625..5d8fbd7 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,35 @@ A special 🇮🇳 Happy Independence Day greeting for your friends and Family M - Vite.js - Typescript - Tailwind CSS -- Free Hosting on Netlify : **** +- 🇮🇳 CSS Flag +- Hosting at Netlify : **** + +## Setup and Usage + +- Clone or Download the Repo + +```sh +git clone https://github.com/mskian/independence-day-app +cd independence-day-app +``` + +- Install dependencies + +```sh +pnpm install +``` + +- Test + +```sh +pnpm dev +``` + +- Build the App + +```sh +pnpm build +``` ## LICENSE diff --git a/src/components/Greeting.tsx b/src/components/Greeting.tsx index e283c85..02bb9f4 100644 --- a/src/components/Greeting.tsx +++ b/src/components/Greeting.tsx @@ -1,5 +1,6 @@ import { useState } from 'preact/hooks'; import slugify from 'slugify'; +import IndianFlag from './IndianFlag'; const Greeting = () => { const [name, setName] = useState(''); @@ -48,7 +49,8 @@ const Greeting = () => {
-

🇮🇳

+ +

Independence Day Greeting

Enter your name to receive a personalized greeting

@@ -72,7 +74,8 @@ const Greeting = () => {
-

Built Using Preact and Vite.js
+

+

Built Using 🥳 Preact and Vite 🔥
🥤 View on GitHub

diff --git a/src/components/GreetingPage.tsx b/src/components/GreetingPage.tsx index 900a154..c52ad2b 100644 --- a/src/components/GreetingPage.tsx +++ b/src/components/GreetingPage.tsx @@ -3,6 +3,7 @@ import { JSX } from 'preact'; import DOMPurify from 'dompurify'; import slugify from 'slugify'; import { useEffect, useState } from 'preact/hooks'; +import IndianFlag from './IndianFlag'; interface GreetingPageProps { name?: string; @@ -47,16 +48,27 @@ const Snackbar = ({ message, onClose }: { message: string; onClose: () => void } ); const GreetingPage = (props: GreetingPageProps & JSX.IntrinsicElements['div']) => { + const [loading, setLoading] = useState(true); const [snackbarMessage, setSnackbarMessage] = useState(null); + const [toggleState, setToggleState] = useState(false); const { name } = props; const sanitizedName = sanitizeName(name || ''); const currentTime = getFormattedTime(); const currentUrl = window.location.href; useEffect(() => { + const savedToggleState = localStorage.getItem('toggleState'); + if (savedToggleState !== null) { + setToggleState(JSON.parse(savedToggleState)); + } + + setTimeout(() => { + setLoading(false); + }, 2000); + const metaTitle = `${sanitizedName ? `${sanitizedName}` : ''} - Independence Day Greeting 🇮🇳`; const metaDescription = `Wishing you a very Happy Independence Day From ${sanitizedName ? `${sanitizedName}` : ''} - Check out your personalized greeting page.`; - + document.title = metaTitle; let metaDescriptionTag = document.querySelector('meta[name="description"]') as HTMLMetaElement; @@ -80,7 +92,7 @@ const GreetingPage = (props: GreetingPageProps & JSX.IntrinsicElements['div']) = } return () => { - document.title = 'Default Title'; + document.title = 'Independence Day Greeting 🇮🇳'; const metaDescriptionTag = document.querySelector('meta[name="description"]') as HTMLMetaElement; if (metaDescriptionTag) metaDescriptionTag.content = ''; const linkCanonicalTag = document.querySelector('link[rel="canonical"]') as HTMLLinkElement; @@ -95,7 +107,12 @@ const GreetingPage = (props: GreetingPageProps & JSX.IntrinsicElements['div']) = }; const redirectToHome = () => { - window.location.href = '/'; + try { + window.location.href = '/'; + } catch (error) { + console.error('Error redirecting to home:', error); + setSnackbarMessage('Failed to redirect. Please try again.'); + } }; useEffect(() => { @@ -108,36 +125,61 @@ const GreetingPage = (props: GreetingPageProps & JSX.IntrinsicElements['div']) = return () => clearTimeout(timer); }, [snackbarMessage]); + useEffect(() => { + localStorage.setItem('toggleState', JSON.stringify(toggleState)); + }, [toggleState]); + return (
+ {loading ? ( +
+
+
+ ) : ( + <>
-
-
- {sanitizedName ? `${sanitizedName} 🇮🇳` : '🇮🇳 Your Name Here'} -
{currentTime}
-
-
-

Wishing you a very Happy Independence Day 🇮🇳

-
{currentTime}
+ +
+
+ {sanitizedName ? `${sanitizedName} 🇮🇳` : '🇮🇳 Your Name Here'} +
{currentTime}
+
+
+

Wishing you a very Happy Independence Day 🇮🇳

+
{currentTime}
+
+
+

Let us remember the sacrifices of our great leaders and honor their legacy by working towards a brighter future for our nation

+
{currentTime}
+
+
+

May the flag of India always fly high and may our country continue to grow stronger and more united

+
{currentTime}
+
+
-
-

Let us remember the sacrifices of our great leaders and honor their legacy by working towards a brighter future for our nation

-
{currentTime}
+
+
-
-

May the flag of India always fly high and may our country continue to grow stronger and more united

-
{currentTime}
-
-
-
-
- - -
+ {toggleState && ( +
+ + +
+ )} + + )} {snackbarMessage && ( { + return ( +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ); +}; + +export default IndianFlag; diff --git a/src/style.css b/src/style.css index aec9565..f72d9a0 100644 --- a/src/style.css +++ b/src/style.css @@ -147,4 +147,110 @@ html { color: #888; margin-top: 0.5rem; text-align: right; - } \ No newline at end of file + } + .custom-flag-container { + display: flex; + align-items: flex-start; + justify-content: center; + padding-top: 20px; +} + +.custom-flag-pole { + width: 5px; + height: 100px; + background-color: #000; + border-radius: 2px; + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); +} + +.custom-flag { + width: 96px; + height: 64px; + box-shadow: 0px 0px 90px 1px #989; + background-color: transparent; + position: relative; +} + +.custom-stripe { + height: 21.33px; + display: flex; + align-items: center; + justify-content: center; +} + +.custom-stripe-orange { + background-color: #FF9933; +} + +.custom-stripe-white { + background-color: #FFFFFF; + position: relative; +} + +.custom-stripe-green { + background-color: #138808; +} + +.custom-ashoka-chakra { + height: 22px; + width: 22px; + border: 1px solid darkblue; + border-radius: 50%; + position: relative; + margin: 0 auto; +} + +.custom-ashoka-chakra .line { + height: 100%; + width: 1px; + display: inline-block; + position: absolute; + left: 50%; + background: darkblue; +} + +.custom-ashoka-chakra .line:nth-child(1) { transform: rotate(15deg); } +.custom-ashoka-chakra .line:nth-child(2) { transform: rotate(30deg); } +.custom-ashoka-chakra .line:nth-child(3) { transform: rotate(45deg); } +.custom-ashoka-chakra .line:nth-child(4) { transform: rotate(60deg); } +.custom-ashoka-chakra .line:nth-child(5) { transform: rotate(75deg); } +.custom-ashoka-chakra .line:nth-child(6) { transform: rotate(90deg); } +.custom-ashoka-chakra .line:nth-child(7) { transform: rotate(105deg); } +.custom-ashoka-chakra .line:nth-child(8) { transform: rotate(120deg); } +.custom-ashoka-chakra .line:nth-child(9) { transform: rotate(135deg); } +.custom-ashoka-chakra .line:nth-child(10) { transform: rotate(150deg); } +.custom-ashoka-chakra .line:nth-child(11) { transform: rotate(165deg); } +.custom-ashoka-chakra .line:nth-child(12) { transform: rotate(180deg); } + +@keyframes custom-wave { + 0% { transform: rotate(0deg); } + 25% { transform: rotate(4deg); } + 50% { transform: rotate(-4deg); } + 75% { transform: rotate(4deg); } + 100% { transform: rotate(0deg); } +} + +.wave { + position: absolute; + height: 100%; + width: 100%; + background-image: linear-gradient( + 128deg, rgba(89, 72, 21, 0) 39%, + rgba(250, 245, 245, 0.8474025974025974) + 46%, rgba(89, 72, 21, 0) 53%); + animation-name: wavy; + animation-duration: 10s; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +@keyframes wavy { + 0% { + background-position: -400px 0px, + -400px 0px, -400px 0px, -400px 0px; + } + 100% { + background-position: 800px 0px, + 800px 0px, 800px 0px, 800px 0px; + } +} \ No newline at end of file