diff --git a/src/app/page.tsx b/src/app/page.tsx index 1ddf057..ad753cb 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -3,193 +3,200 @@ import off from '@/assets/images/off-button.svg'; import { useState, useEffect } from 'react'; import on from '@/assets/images/on-button.svg'; -import press from '@/assets/images/press-button.svg' -import green from '@/assets/images/press-green.svg' +import press from '@/assets/images/press-button.svg'; +import green from '@/assets/images/press-green.svg'; import Image from 'next/image'; -import bg from '@/assets/images/backgroundL.svg' - -import './styles.css' - -const loadingPage = () => { - - const [button1, setButton1] = useState(false); - const [button2, setButton2] = useState(true); - const [buttonClicked, setButtonClicked] = useState(false); - const [buttonClicked1, setButtonClicked1] = useState(false); - const [buttonClicked2, setButtonClicked2] = useState(false); - const [intervalId, setIntervalId] = useState(null); - const [intervalDuration, setIntervalDuration] = useState(1000); - const [year, setYear] = useState(String(new Date().getFullYear()).padStart(4, '0')); - const [month, setMonth] = useState(new Date().toLocaleString('default', { month: 'short' })); - const [date, setDate] = useState(String(new Date().getDate()).padStart(2, '0')); - const [hours, setHours] = useState(String(new Date().getHours()).padStart(2, '0')); - const [minutes, setMinutes] = useState(String(new Date().getMinutes()).padStart(2, '0')); - - useEffect(() => { - if (!buttonClicked2) { - const timer = setInterval(() => { - setYear(String(new Date().getFullYear()).padStart(4, '0')); - setMonth(new Date().toLocaleString('default', { month: 'short' })); - setDate(String(new Date().getDate()).padStart(2, '0')); - setHours(String(new Date().getHours()).padStart(2, '0')); - setMinutes(String(new Date().getMinutes()).padStart(2, '0')); - }, 1000); - - return () => clearInterval(timer); - } - }, [buttonClicked2]); - - const generateRandomCharacters = (length: number) => { - let result = ''; - const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; - for (let i = 0; i < length; i++) { - result += characters.charAt(Math.floor(Math.random() * characters.length)); - } - return result; - } - - const generateRandomNumber = (length: number) => { - let result = ''; - for (let i = 0; i < length; i++) { - result += Math.floor(Math.random() * 10).toString(); - } - return result; - } - - useEffect(() => { - if (buttonClicked && !intervalId) { - const id = setInterval(() => { - setButton1(prevButton1 => !prevButton1); - setButton2(prevButton2 => !prevButton2); - }, intervalDuration); - setIntervalId(id); - - const timer = setInterval(() => { - setYear(generateRandomNumber(4)); - setMonth(generateRandomCharacters(3)); - setDate(generateRandomNumber(2)); - setHours(generateRandomNumber(2)); - setMinutes(generateRandomNumber(2)); - }, 50); - - setIntervalId(timer); - - setTimeout(() => { - setButtonClicked(false); - clearInterval(id); - clearInterval(timer); - setIntervalId(null); - setYear("----"); - setMonth("---"); - setDate("--"); - setHours("--"); - setMinutes("--"); - var ready = document.getElementById('ready-text') - ready!.innerHTML = '???? ???? ???? ????' - }, 1690); - } else if (!buttonClicked && intervalId) { - clearInterval(intervalId); - setIntervalId(null); - } - }, [buttonClicked, intervalId]); - - - const handlePress = () => { - - setButtonClicked(true); - setButtonClicked1(true); - setButtonClicked2(true); - var button = document.getElementById('press'); - if (button?.className === 'press') button.className = 'after' - setIntervalDuration(prevDuration => prevDuration / 4); - - } - - return ( - <> -
- -
- -
- -
- -
-
-
- Button 1 -
-
- Button 2 -
+import bg from '@/assets/images/backgroundL.svg'; + +import './styles.css'; + +const LoadingPage = () => { + const [button1, setButton1] = useState(false); + const [button2, setButton2] = useState(true); + const [buttonClicked, setButtonClicked] = useState(false); + const [buttonClicked1, setButtonClicked1] = useState(false); + const [buttonClicked2, setButtonClicked2] = useState(false); + const [intervalId, setIntervalId] = useState(null); + const [intervalDuration, setIntervalDuration] = useState(1000); + const [year, setYear] = useState(String(new Date().getFullYear()).padStart(4, '0')); + const [month, setMonth] = useState(new Date().toLocaleString('default', { month: 'short' })); + const [date, setDate] = useState(String(new Date().getDate()).padStart(2, '0')); + const [hours, setHours] = useState(String(new Date().getHours()).padStart(2, '0')); + const [minutes, setMinutes] = useState(String(new Date().getMinutes()).padStart(2, '0')); + + useEffect(() => { + if (!buttonClicked2) { + const timer = setInterval(() => { + setYear(String(new Date().getFullYear()).padStart(4, '0')); + setMonth(new Date().toLocaleString('default', { month: 'short' })); + setDate(String(new Date().getDate()).padStart(2, '0')); + setHours(String(new Date().getHours()).padStart(2, '0')); + setMinutes(String(new Date().getMinutes()).padStart(2, '0')); + }, 1000); + + return () => clearInterval(timer); + } + }, [buttonClicked2]); + + const generateRandomCharacters = (length: number) => { + let result = ''; + const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; + for (let i = 0; i < length; i++) { + result += characters.charAt(Math.floor(Math.random() * characters.length)); + } + return result; + }; + + const generateRandomNumber = (length: number) => { + let result = ''; + for (let i = 0; i < length; i++) { + result += Math.floor(Math.random() * 10).toString(); + } + return result; + }; + + useEffect(() => { + if (buttonClicked && !intervalId) { + const id = setInterval(() => { + setButton1(prevButton1 => !prevButton1); + setButton2(prevButton2 => !prevButton2); + }, intervalDuration); + setIntervalId(id); + + const timer = setInterval(() => { + setYear(generateRandomNumber(4)); + setMonth(generateRandomCharacters(3)); + setDate(generateRandomNumber(2)); + setHours(generateRandomNumber(2)); + setMinutes(generateRandomNumber(2)); + }, 50); + + setIntervalId(timer); + + setTimeout(() => { + setButtonClicked(false); + clearInterval(id); + clearInterval(timer); + setIntervalId(null); + setYear('----'); + setMonth('---'); + setDate('--'); + setHours('--'); + setMinutes('--'); + const ready = document.getElementById('ready-text'); + ready!.innerHTML = '???? ???? ???? ????'; + }, 1690); + } else if (!buttonClicked && intervalId) { + clearInterval(intervalId); + setIntervalId(null); + } + }, [buttonClicked, intervalId, intervalDuration]); + + const handlePress = () => { + setButtonClicked(true); + setButtonClicked1(true); + setButtonClicked2(true); + const button = document.getElementById('press'); + if (button?.className === 'press') button.className = 'after'; + setIntervalDuration(prevDuration => prevDuration / 4); + }; + + return ( + <> +
+
+ +
+ +
+
+
+
+ Button 1 +
+
+ Button 2 +
+
+
+ +
+
+
PRESENT TIME
+
+
+ +
+
+
+
+ {month} +
+
888
+
+
+
+ {date} +
+
88
+
+
+
+ {year} +
+
8888
+
+
+
+
+
+ {hours} +
+
88
+
+
+
:
+
+
+
+ {minutes} +
+
88
+
+
+
+ +
+
+
+ READY TO TRAVEL ? +
+
+
+ +
+
+ +
+
+
-
- -
-
-
- PRESENT TIME -
-
-
- - - - -
-
-
-
{month}
-
888
-
-
-
{date}
-
88
-
-
-
{year}
-
8888
-
-
-
-
-
{hours}
-
88
-
-
-
:
-
-
-
{minutes}
-
88
-
-
-
- - - - - -
-
-
- READY TO TRAVEL ? -
-
-
- -
-
- -
-
-
-
- - ); + + ); }; -export default loadingPage; \ No newline at end of file +export default LoadingPage; diff --git a/src/assets/images/backgroundL.svg b/src/assets/images/backgroundL.svg deleted file mode 100644 index 5298f8b..0000000 --- a/src/assets/images/backgroundL.svg +++ /dev/null @@ -1,127 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/backgroundL.svg.svg b/src/assets/images/backgroundL.svg.svg new file mode 100644 index 0000000..288b2db --- /dev/null +++ b/src/assets/images/backgroundL.svg.svg @@ -0,0 +1,137 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +