diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 93205f6..d98f176 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -60,16 +60,16 @@ packages: resolution: {integrity: sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==} engines: {node: '>=6.9.0'} - '@babel/compat-data@7.25.2': - resolution: {integrity: sha512-bYcppcpKBvX4znYaPEeFau03bp89ShqNMLs+rmdptMw+heSZh9+z84d2YG+K7cYLbWwzdjtDoW/uqZmPjulClQ==} + '@babel/compat-data@7.25.4': + resolution: {integrity: sha512-+LGRog6RAsCJrrrg/IO6LGmpphNe5DiK30dGjCoxxeGv49B10/3XYGxPsAwrDlMFcFEvdAUavDT8r9k/hSyQqQ==} engines: {node: '>=6.9.0'} '@babel/core@7.25.2': resolution: {integrity: sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==} engines: {node: '>=6.9.0'} - '@babel/generator@7.25.0': - resolution: {integrity: sha512-3LEEcj3PVW8pW2R1SR1M89g/qrYk/m/mB/tLqn7dn4sbBUQyTqnlod+II2U4dqiGtUmkcnAmkMDralTFZttRiw==} + '@babel/generator@7.25.4': + resolution: {integrity: sha512-NFtZmZsyzDPJnk9Zg3BbTfKKc9UlHYzD0E//p2Z3B9nCwwtJW9T0gVbCz8+fBngnn4zf1Dr3IK8PHQQHq0lDQw==} engines: {node: '>=6.9.0'} '@babel/helper-compilation-targets@7.25.2': @@ -114,8 +114,8 @@ packages: resolution: {integrity: sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==} engines: {node: '>=6.9.0'} - '@babel/parser@7.25.3': - resolution: {integrity: sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==} + '@babel/parser@7.25.4': + resolution: {integrity: sha512-nq+eWrOgdtu3jG5Os4TQP3x3cLA8hR8TvJNjD8vnPa20WGycimcparWnLK4jJhElTK6SDyuJo1weMKO/5LpmLA==} engines: {node: '>=6.0.0'} hasBin: true @@ -135,12 +135,12 @@ packages: resolution: {integrity: sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==} engines: {node: '>=6.9.0'} - '@babel/traverse@7.25.3': - resolution: {integrity: sha512-HefgyP1x754oGCsKmV5reSmtV7IXj/kpaE1XYY+D9G5PvKKoFfSbiS4M77MdjuwlZKDIKFCffq9rPU+H/s3ZdQ==} + '@babel/traverse@7.25.4': + resolution: {integrity: sha512-VJ4XsrD+nOvlXyLzmLzUs/0qjFS4sK30te5yEFlvbbUNEgKaVb2BHZUpAL+ttLPQAHNrsI3zZisbfha5Cvr8vg==} engines: {node: '>=6.9.0'} - '@babel/types@7.25.2': - resolution: {integrity: sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==} + '@babel/types@7.25.4': + resolution: {integrity: sha512-zQ1ijeeCXVEh+aNL0RlmkPkG8HUiDcU2pzQQFjtbntgAczRASFzj4H+6+bV+dy1ntKR14I/DypeuRG1uma98iQ==} engines: {node: '>=6.9.0'} '@biomejs/biome@1.8.3': @@ -687,8 +687,8 @@ packages: resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==} engines: {node: '>=8'} - is-core-module@2.15.0: - resolution: {integrity: sha512-Dd+Lb2/zvk9SKy1TGCt1wFJFo/MWBPMX5x7KcvLajWTGuomczdQX61PvY5yK6SVACwpoexWo81IfFyoKY2QnTA==} + is-core-module@2.15.1: + resolution: {integrity: sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==} engines: {node: '>= 0.4'} is-extglob@2.1.1: @@ -1061,20 +1061,20 @@ snapshots: '@babel/highlight': 7.24.7 picocolors: 1.0.1 - '@babel/compat-data@7.25.2': {} + '@babel/compat-data@7.25.4': {} '@babel/core@7.25.2': dependencies: '@ampproject/remapping': 2.3.0 '@babel/code-frame': 7.24.7 - '@babel/generator': 7.25.0 + '@babel/generator': 7.25.4 '@babel/helper-compilation-targets': 7.25.2 '@babel/helper-module-transforms': 7.25.2(@babel/core@7.25.2) '@babel/helpers': 7.25.0 - '@babel/parser': 7.25.3 + '@babel/parser': 7.25.4 '@babel/template': 7.25.0 - '@babel/traverse': 7.25.3 - '@babel/types': 7.25.2 + '@babel/traverse': 7.25.4 + '@babel/types': 7.25.4 convert-source-map: 2.0.0 debug: 4.3.6 gensync: 1.0.0-beta.2 @@ -1083,16 +1083,16 @@ snapshots: transitivePeerDependencies: - supports-color - '@babel/generator@7.25.0': + '@babel/generator@7.25.4': dependencies: - '@babel/types': 7.25.2 + '@babel/types': 7.25.4 '@jridgewell/gen-mapping': 0.3.5 '@jridgewell/trace-mapping': 0.3.25 jsesc: 2.5.2 '@babel/helper-compilation-targets@7.25.2': dependencies: - '@babel/compat-data': 7.25.2 + '@babel/compat-data': 7.25.4 '@babel/helper-validator-option': 7.24.8 browserslist: 4.23.3 lru-cache: 5.1.1 @@ -1100,8 +1100,8 @@ snapshots: '@babel/helper-module-imports@7.24.7': dependencies: - '@babel/traverse': 7.25.3 - '@babel/types': 7.25.2 + '@babel/traverse': 7.25.4 + '@babel/types': 7.25.4 transitivePeerDependencies: - supports-color @@ -1111,7 +1111,7 @@ snapshots: '@babel/helper-module-imports': 7.24.7 '@babel/helper-simple-access': 7.24.7 '@babel/helper-validator-identifier': 7.24.7 - '@babel/traverse': 7.25.3 + '@babel/traverse': 7.25.4 transitivePeerDependencies: - supports-color @@ -1119,8 +1119,8 @@ snapshots: '@babel/helper-simple-access@7.24.7': dependencies: - '@babel/traverse': 7.25.3 - '@babel/types': 7.25.2 + '@babel/traverse': 7.25.4 + '@babel/types': 7.25.4 transitivePeerDependencies: - supports-color @@ -1133,7 +1133,7 @@ snapshots: '@babel/helpers@7.25.0': dependencies: '@babel/template': 7.25.0 - '@babel/types': 7.25.2 + '@babel/types': 7.25.4 '@babel/highlight@7.24.7': dependencies: @@ -1142,9 +1142,9 @@ snapshots: js-tokens: 4.0.0 picocolors: 1.0.1 - '@babel/parser@7.25.3': + '@babel/parser@7.25.4': dependencies: - '@babel/types': 7.25.2 + '@babel/types': 7.25.4 '@babel/plugin-transform-react-jsx-self@7.24.7(@babel/core@7.25.2)': dependencies: @@ -1159,22 +1159,22 @@ snapshots: '@babel/template@7.25.0': dependencies: '@babel/code-frame': 7.24.7 - '@babel/parser': 7.25.3 - '@babel/types': 7.25.2 + '@babel/parser': 7.25.4 + '@babel/types': 7.25.4 - '@babel/traverse@7.25.3': + '@babel/traverse@7.25.4': dependencies: '@babel/code-frame': 7.24.7 - '@babel/generator': 7.25.0 - '@babel/parser': 7.25.3 + '@babel/generator': 7.25.4 + '@babel/parser': 7.25.4 '@babel/template': 7.25.0 - '@babel/types': 7.25.2 + '@babel/types': 7.25.4 debug: 4.3.6 globals: 11.12.0 transitivePeerDependencies: - supports-color - '@babel/types@7.25.2': + '@babel/types@7.25.4': dependencies: '@babel/helper-string-parser': 7.24.8 '@babel/helper-validator-identifier': 7.24.7 @@ -1375,24 +1375,24 @@ snapshots: '@types/babel__core@7.20.5': dependencies: - '@babel/parser': 7.25.3 - '@babel/types': 7.25.2 + '@babel/parser': 7.25.4 + '@babel/types': 7.25.4 '@types/babel__generator': 7.6.8 '@types/babel__template': 7.4.4 '@types/babel__traverse': 7.20.6 '@types/babel__generator@7.6.8': dependencies: - '@babel/types': 7.25.2 + '@babel/types': 7.25.4 '@types/babel__template@7.4.4': dependencies: - '@babel/parser': 7.25.3 - '@babel/types': 7.25.2 + '@babel/parser': 7.25.4 + '@babel/types': 7.25.4 '@types/babel__traverse@7.20.6': dependencies: - '@babel/types': 7.25.2 + '@babel/types': 7.25.4 '@types/estree@1.0.5': {} @@ -1625,7 +1625,7 @@ snapshots: dependencies: binary-extensions: 2.3.0 - is-core-module@2.15.0: + is-core-module@2.15.1: dependencies: hasown: 2.0.2 @@ -1738,9 +1738,8 @@ snapshots: postcss-load-config@4.0.2(postcss@8.4.41): dependencies: lilconfig: 3.1.2 - yaml: 2.5.0 - optionalDependencies: postcss: 8.4.41 + yaml: 2.5.0 postcss-nested@6.2.0(postcss@8.4.41): dependencies: @@ -1784,7 +1783,7 @@ snapshots: resolve@1.22.8: dependencies: - is-core-module: 2.15.0 + is-core-module: 2.15.1 path-parse: 1.0.7 supports-preserve-symlinks-flag: 1.0.0 diff --git a/src/App.tsx b/src/App.tsx index fef335c..63fa435 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,9 +1,6 @@ +import Home from './screens/Home' const App = () => { - return ( -
-

Init Break

-
- ) + return } export default App diff --git a/src/assets/Icons/backwardBtn.png b/src/assets/Icons/backwardBtn.png new file mode 100644 index 0000000..97df701 Binary files /dev/null and b/src/assets/Icons/backwardBtn.png differ diff --git a/src/assets/Icons/chevron.png b/src/assets/Icons/chevron.png new file mode 100644 index 0000000..c786895 Binary files /dev/null and b/src/assets/Icons/chevron.png differ diff --git a/src/assets/Icons/fireHandle.png b/src/assets/Icons/fireHandle.png new file mode 100644 index 0000000..2d4bf5a Binary files /dev/null and b/src/assets/Icons/fireHandle.png differ diff --git a/src/assets/Icons/fireLogoSelected.png b/src/assets/Icons/fireLogoSelected.png new file mode 100644 index 0000000..4d364c7 Binary files /dev/null and b/src/assets/Icons/fireLogoSelected.png differ diff --git a/src/assets/Icons/fireLogoUnSelect.png b/src/assets/Icons/fireLogoUnSelect.png new file mode 100644 index 0000000..6b44351 Binary files /dev/null and b/src/assets/Icons/fireLogoUnSelect.png differ diff --git a/src/assets/Icons/forwardBtn.png b/src/assets/Icons/forwardBtn.png new file mode 100644 index 0000000..37d47e7 Binary files /dev/null and b/src/assets/Icons/forwardBtn.png differ diff --git a/src/assets/Icons/handle.png b/src/assets/Icons/handle.png new file mode 100644 index 0000000..a060655 Binary files /dev/null and b/src/assets/Icons/handle.png differ diff --git a/src/assets/Icons/handleMusicPlayer.png b/src/assets/Icons/handleMusicPlayer.png new file mode 100644 index 0000000..f0d7d22 Binary files /dev/null and b/src/assets/Icons/handleMusicPlayer.png differ diff --git a/src/assets/Icons/menuBtn.png b/src/assets/Icons/menuBtn.png new file mode 100644 index 0000000..b05c31d Binary files /dev/null and b/src/assets/Icons/menuBtn.png differ diff --git a/src/assets/Icons/musicHandle.png b/src/assets/Icons/musicHandle.png new file mode 100644 index 0000000..c1afd39 Binary files /dev/null and b/src/assets/Icons/musicHandle.png differ diff --git a/src/assets/Icons/musicOff.png b/src/assets/Icons/musicOff.png new file mode 100644 index 0000000..14b431e Binary files /dev/null and b/src/assets/Icons/musicOff.png differ diff --git a/src/assets/Icons/musicPlayer.png b/src/assets/Icons/musicPlayer.png new file mode 100644 index 0000000..321aba3 Binary files /dev/null and b/src/assets/Icons/musicPlayer.png differ diff --git a/src/assets/Icons/musicon.png b/src/assets/Icons/musicon.png new file mode 100644 index 0000000..febad4f Binary files /dev/null and b/src/assets/Icons/musicon.png differ diff --git a/src/assets/Icons/pauseBtn.png b/src/assets/Icons/pauseBtn.png new file mode 100644 index 0000000..6158993 Binary files /dev/null and b/src/assets/Icons/pauseBtn.png differ diff --git a/src/assets/Icons/playBtn.png b/src/assets/Icons/playBtn.png new file mode 100644 index 0000000..4bfe74c Binary files /dev/null and b/src/assets/Icons/playBtn.png differ diff --git a/src/assets/Icons/rainHandle.png b/src/assets/Icons/rainHandle.png new file mode 100644 index 0000000..c3a369b Binary files /dev/null and b/src/assets/Icons/rainHandle.png differ diff --git a/src/assets/Icons/rainLogoSelected.png b/src/assets/Icons/rainLogoSelected.png new file mode 100644 index 0000000..0c68374 Binary files /dev/null and b/src/assets/Icons/rainLogoSelected.png differ diff --git a/src/assets/Icons/rainUnselect.png b/src/assets/Icons/rainUnselect.png new file mode 100644 index 0000000..10e0f83 Binary files /dev/null and b/src/assets/Icons/rainUnselect.png differ diff --git a/src/assets/Icons/settings.png b/src/assets/Icons/settings.png new file mode 100644 index 0000000..e668aa2 Binary files /dev/null and b/src/assets/Icons/settings.png differ diff --git a/src/assets/Icons/startbutton.png b/src/assets/Icons/startbutton.png new file mode 100644 index 0000000..539d02d Binary files /dev/null and b/src/assets/Icons/startbutton.png differ diff --git a/src/assets/Icons/stop button.png b/src/assets/Icons/stop button.png new file mode 100644 index 0000000..b6579c0 Binary files /dev/null and b/src/assets/Icons/stop button.png differ diff --git a/src/assets/Icons/toxicity img.jpg b/src/assets/Icons/toxicity img.jpg new file mode 100644 index 0000000..b26dda3 Binary files /dev/null and b/src/assets/Icons/toxicity img.jpg differ diff --git a/src/assets/Sounds/Abhiman - Albatross (Barahsinghe Acoustic Sessions).mp3 b/src/assets/Sounds/Abhiman - Albatross (Barahsinghe Acoustic Sessions).mp3 new file mode 100644 index 0000000..27bdd26 Binary files /dev/null and b/src/assets/Sounds/Abhiman - Albatross (Barahsinghe Acoustic Sessions).mp3 differ diff --git a/src/assets/Sounds/Narisawna-Tribal Rain(Official).mp3 b/src/assets/Sounds/Narisawna-Tribal Rain(Official).mp3 new file mode 100644 index 0000000..cca6426 Binary files /dev/null and b/src/assets/Sounds/Narisawna-Tribal Rain(Official).mp3 differ diff --git a/src/assets/Sounds/Sparsha Sangeet.mp3 b/src/assets/Sounds/Sparsha Sangeet.mp3 new file mode 100644 index 0000000..46e4929 Binary files /dev/null and b/src/assets/Sounds/Sparsha Sangeet.mp3 differ diff --git a/src/assets/Sounds/Toxicity.mp3 b/src/assets/Sounds/Toxicity.mp3 new file mode 100644 index 0000000..bb2248b Binary files /dev/null and b/src/assets/Sounds/Toxicity.mp3 differ diff --git a/src/assets/Sounds/fire-sound-222359.mp3 b/src/assets/Sounds/fire-sound-222359.mp3 new file mode 100644 index 0000000..9219ff6 Binary files /dev/null and b/src/assets/Sounds/fire-sound-222359.mp3 differ diff --git a/src/assets/Sounds/rain-sound-188158.mp3 b/src/assets/Sounds/rain-sound-188158.mp3 new file mode 100644 index 0000000..d8b95c7 Binary files /dev/null and b/src/assets/Sounds/rain-sound-188158.mp3 differ diff --git a/src/assets/background/inputbg.png b/src/assets/background/inputbg.png new file mode 100644 index 0000000..36042bf Binary files /dev/null and b/src/assets/background/inputbg.png differ diff --git a/src/assets/background/musicPlayerBg.png b/src/assets/background/musicPlayerBg.png new file mode 100644 index 0000000..ec174e6 Binary files /dev/null and b/src/assets/background/musicPlayerBg.png differ diff --git a/src/assets/background/settingBg.png b/src/assets/background/settingBg.png new file mode 100644 index 0000000..0bcf3cf Binary files /dev/null and b/src/assets/background/settingBg.png differ diff --git a/src/assets/fonts/PixelOperator8-Bold.ttf b/src/assets/fonts/PixelOperator8-Bold.ttf new file mode 100644 index 0000000..10225eb Binary files /dev/null and b/src/assets/fonts/PixelOperator8-Bold.ttf differ diff --git a/src/assets/fonts/PixelOperator8.ttf b/src/assets/fonts/PixelOperator8.ttf new file mode 100644 index 0000000..f9146ac Binary files /dev/null and b/src/assets/fonts/PixelOperator8.ttf differ diff --git a/src/assets/wallpapers/alt.png b/src/assets/wallpapers/alt.png new file mode 100644 index 0000000..db09591 Binary files /dev/null and b/src/assets/wallpapers/alt.png differ diff --git a/src/assets/wallpapers/fifth.gif b/src/assets/wallpapers/fifth.gif new file mode 100644 index 0000000..8c43ccf Binary files /dev/null and b/src/assets/wallpapers/fifth.gif differ diff --git a/src/assets/wallpapers/forth.gif b/src/assets/wallpapers/forth.gif new file mode 100644 index 0000000..d548e23 Binary files /dev/null and b/src/assets/wallpapers/forth.gif differ diff --git a/src/assets/wallpapers/giphy.gif b/src/assets/wallpapers/giphy.gif new file mode 100644 index 0000000..3aee35b Binary files /dev/null and b/src/assets/wallpapers/giphy.gif differ diff --git a/src/assets/wallpapers/rain.gif b/src/assets/wallpapers/rain.gif new file mode 100644 index 0000000..a17568d Binary files /dev/null and b/src/assets/wallpapers/rain.gif differ diff --git a/src/assets/wallpapers/sec.gif b/src/assets/wallpapers/sec.gif new file mode 100644 index 0000000..73473fd Binary files /dev/null and b/src/assets/wallpapers/sec.gif differ diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 0000000..f20468f --- /dev/null +++ b/src/components/Button.tsx @@ -0,0 +1,42 @@ +import { useState } from 'react' +import './button.css' +type ButtonProps = { + text: string + anotherText?: string + onclick: () => void + width: number + height: number + size: number + padding?: number +} +export default function Button({ + text, + anotherText, + onclick, + width, + height, + size, + padding = 10, +}: ButtonProps) { + const [isPlaying, setIsPlaying] = useState(false) + function toggleStartStop() { + setIsPlaying(!isPlaying) + onclick() + } + return ( +
+ +
+ ) +} diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx new file mode 100644 index 0000000..6e767bd --- /dev/null +++ b/src/components/IconButton.tsx @@ -0,0 +1,32 @@ +type IconsProps = { + activeIcon?: string + inActiveIcon?: string + size?: number + onChange: (isActive: boolean) => void + isActive?: boolean +} + +export default function IconButton({ + activeIcon, + inActiveIcon, + size = 40, + isActive, + onChange, +}: IconsProps) { + function handleClick() { + onChange(!isActive) + } + return ( + + ) +} diff --git a/src/components/InputBar.tsx b/src/components/InputBar.tsx new file mode 100644 index 0000000..2eda587 --- /dev/null +++ b/src/components/InputBar.tsx @@ -0,0 +1,18 @@ +import './inputBar.css' +import InputBg from '../assets/background/inputbg.png' + +type InputBarProps = { + value: number +} +export default function InputBar({ value }: InputBarProps) { + return ( +
+ +
+ ) +} diff --git a/src/components/MusicItem.tsx b/src/components/MusicItem.tsx new file mode 100644 index 0000000..85686bb --- /dev/null +++ b/src/components/MusicItem.tsx @@ -0,0 +1,38 @@ +export type Music = { + audio: HTMLAudioElement + title: string + artist: string + cover: string +} + +type MusicItemProps = { + music: Music + onChange: (music: Music) => void +} + +const MusicItem = ({ music, onChange }: MusicItemProps) => { + function playAudio() { + onChange(music) + } + + return ( +
+ +
+

+ {music.title} +

+
{music.artist}
+
+
+ ) +} +export default MusicItem diff --git a/src/components/SliderBar.tsx b/src/components/SliderBar.tsx new file mode 100644 index 0000000..7f20fcc --- /dev/null +++ b/src/components/SliderBar.tsx @@ -0,0 +1,63 @@ +import './sliderBar.css' + +type SliderBarProps = { + value: number + onChange: (duration: number) => void + steps?: number + height?: number + isVertical?: boolean + color?: string + handleImg: string + backgroundColor?: string + width?: number + minWidth?: number +} + +const SliderBar = ({ + value, + onChange, + steps = 1, + isVertical = false, + height = 0.5, + color = 'black', + handleImg, + backgroundColor, + width = 1.2, + minWidth = 1, +}: SliderBarProps) => { + const handleChange = (e: React.MouseEvent) => { + const duration = (e.nativeEvent.offsetX / e.currentTarget.clientWidth) * 100 + onChange(Math.ceil(duration / steps) * steps) + } + + return ( +
+
+
+
+
+ ) +} + +export default SliderBar diff --git a/src/components/button.css b/src/components/button.css new file mode 100644 index 0000000..e5c2bc6 --- /dev/null +++ b/src/components/button.css @@ -0,0 +1,19 @@ +.button { + box-sizing: border-box; + background: linear-gradient(to top, #9352a1 60%, #a460b2 20%); + box-shadow: 0 5px #534775, 0 -5px #a460b2, 0 10px #000, 0 -10px #000, + -5px 0 #534775, -10px 0 #000, 5px 0 #534775, 10px 0 #000, 5px 5px #000, + -5px -5px #000, -5px 5px #000, 5px -5px #000, inset 0 -5px #534775; + font-family: "eightBitBold"; +} +.button:active, +.button:hover { + box-sizing: border-box; + background: linear-gradient(to top, #b175be 60%, #c38cce 20%); + box-shadow: 0 5px #6b5d92, 0 -5px #c38cce, 0 10px #000, 0 -10px #000, + -5px 0 #6b5d92, -10px 0 #000, 5px 0 #6b5d92, 10px 0 #000, 5px 5px #000, + -5px -5px #000, -5px 5px #000, 5px -5px #000, inset 0 -5px #6b5d92; +} + +/* box-shadow: */ +/* inset -5px -5px 0 #534775, inset -10px -10px 0 pink */ diff --git a/src/components/inputBar.css b/src/components/inputBar.css new file mode 100644 index 0000000..440fa15 --- /dev/null +++ b/src/components/inputBar.css @@ -0,0 +1,9 @@ +.input { + width: 3.5rem; + background-color: transparent; +} +.input:focus { + border: none; + -moz-appearance: none; + outline: none; +} diff --git a/src/components/preLoadImages.tsx b/src/components/preLoadImages.tsx new file mode 100644 index 0000000..7a55599 --- /dev/null +++ b/src/components/preLoadImages.tsx @@ -0,0 +1,46 @@ +import { useEffect, useState } from 'react' + +function preLoadImage(src: string) { + return new Promise((resolve, reject) => { + const img = new Image() + img.onload = () => { + resolve(img) + } + img.onerror = img.onabort = () => { + reject(src) + } + img.src = src + }) +} + +export default function usePreLoadedImages(imageList: string[]) { + const [imagesPreLoaded, setImagesPreLoaded] = useState(false) + useEffect(() => { + let isCancelled = false + async function effect() { + console.log('Preloaded') + if (isCancelled) { + return + } + const imagesPromiseList: Promise[] = [] + for (const i of imageList) { + imagesPromiseList.push(preLoadImage(i)) + } + + await Promise.all(imagesPromiseList) + + if (isCancelled) { + return + } + + setImagesPreLoaded(true) + } + effect() + + return () => { + isCancelled = true + } + }, [imageList]) + + return { imagesPreLoaded } +} diff --git a/src/components/sliderBar.css b/src/components/sliderBar.css new file mode 100644 index 0000000..1a7296f --- /dev/null +++ b/src/components/sliderBar.css @@ -0,0 +1,24 @@ +.sliderHandle{ + top: -0.3rem; + background-position: center; + background-size: cover; + +} +.container{ + position: relative; + height: 1rem; + background-color: #e3e3e3; + border-radius: 12px; + cursor: pointer; +} + +.progress{ + position: absolute; + left: 0; + height: 100%; + background-color:rgb(223, 152, 152); + border-radius: 12px; + -moz-transition: 0.5s; + transition: width 0.5s; + transition-timing-function:ease; +} diff --git a/src/index.css b/src/index.css index b5c61c9..cbe6549 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,54 @@ @tailwind base; @tailwind components; @tailwind utilities; + + +.home{ + background-size: cover; + height: 100vh; + width: 100vw; + background-repeat: no-repeat; + animation: animate 100s linear infinite alternate; + position: absolute; + background-position: center; + background-color:transparent; + alt:Pending ; +} +@keyframes animate { + 0%{ + background-image: url(./assets/wallpapers/giphy.gif); + } + 25%{ + background-image: url(./assets/wallpapers/sec.gif); + } + 50%{ + background-image: url(./assets/wallpapers/rain.gif); + } + 75%{ + background-image: url(./assets/wallpapers/forth.gif); + } + 100%{ + background-image: url(./assets/wallpapers/fifth.gif); + } +} + +@font-face { + font-family: 'eightBitBold'; + src: url(./assets/fonts/PixelOperator8-Bold.ttf); +} +@font-face { + font-family: 'eightBit'; + src: url(./assets/fonts/PixelOperator8.ttf); +} + +.timer{ + font-family: 'eightBitBold'; + font-size: 12.6rem; + filter: drop-shadow(-2px 15px 5px black); +} +.musicList{ + height: 12.2rem; + overflow: auto; + scrollbar-width: thin; + scrollbar-color: #6D2ADC #B640EB; +} diff --git a/src/screens/Home.tsx b/src/screens/Home.tsx new file mode 100644 index 0000000..f96121b --- /dev/null +++ b/src/screens/Home.tsx @@ -0,0 +1,71 @@ +import Timer from './components/Timer' +import FireSfx from './components/FireSfx' +import RainSfx from './components/RainSfx' +import Music from './components/Music' +// import MusicPlayer from './MusicPlayer' + +import preLoadImages from '../components/preLoadImages' +import DropDown from './components/DropDown' +import RainSound from '../assets/Sounds/rain-sound-188158.mp3' +import FireSound from '../assets/Sounds/fire-sound-222359.mp3' +import img1 from '../assets/wallpapers/fifth.gif' +import img2 from '../assets/wallpapers/forth.gif' +import img3 from '../assets/wallpapers/giphy.gif' +import img4 from '../assets/wallpapers/rain.gif' +import img5 from '../assets/wallpapers/sec.gif' + +import img16 from '../assets/Icons/settings.png' +import img14 from '../assets/background/musicPlayerBg.png' +import img15 from '../assets/background/settingBg.png' +import img17 from '../assets/background/inputbg.png' + +const preLoadImgList = [ + img1, + img2, + img3, + img4, + img5, + + img14, + img15, + img16, + img17, +] + +import { useState } from 'react' + +import Narisauna from '../assets/Sounds/Narisawna-Tribal Rain(Official).mp3' + +export default function Home() { + const Demo = new Audio(Narisauna) + const rainSound = new Audio(RainSound) + const fireSound = new Audio(FireSound) + + const [audio, setAudio] = useState(Demo) + function setMusic(audio: HTMLAudioElement) { + setAudio(audio) + } + const { imagesPreLoaded } = preLoadImages(preLoadImgList) + if (!imagesPreLoaded) { + return

Pending

+ } + return ( +
+
+
+ + + +
+
+ +
+
+
+ ) +} diff --git a/src/screens/components/DropDown.tsx b/src/screens/components/DropDown.tsx new file mode 100644 index 0000000..aac0853 --- /dev/null +++ b/src/screens/components/DropDown.tsx @@ -0,0 +1,66 @@ +import Chevron from '../../assets/Icons/chevron.png' +import IconButton from '../../components/IconButton' +import { useState } from 'react' +import SliderBar from '../../components/SliderBar' +import fireHandle from '../../assets/Icons/fireHandle.png' +import rainHandle from '../../assets/Icons/rainHandle.png' +import musicHandle from '../../assets/Icons/musicHandle.png' + +type DropDownProps = { + fireAudio: HTMLAudioElement + rainAudio: HTMLAudioElement +} +export default function DropDown({ fireAudio, rainAudio }: DropDownProps) { + const [dropdownState, setDropdownState] = useState({ open: false }) + const [fireVolume, setFireVolume] = useState(100) + const [rainVolume, setRainVolume] = useState(100) + const handleDropdownClick = () => + setDropdownState({ open: !dropdownState.open }) + + function fireHandleVolume(vol: number) { + setFireVolume(vol) + fireAudio.volume = vol / 100 + if (vol === 10) { + fireAudio.volume = 0 + } + } + function rainHandleVolume(vol: number) { + setRainVolume(vol) + rainAudio.volume = vol / 100 + if (vol === 10) { + rainAudio.volume = 0 + } + } + + return ( +
+ + {dropdownState.open && ( +
+
    + + +
+
+ )} +
+ ) +} diff --git a/src/screens/components/FireSfx.tsx b/src/screens/components/FireSfx.tsx new file mode 100644 index 0000000..1d192f8 --- /dev/null +++ b/src/screens/components/FireSfx.tsx @@ -0,0 +1,30 @@ +import { useState } from 'react' + +import fireOffImg from '../../assets/Icons/fireLogoUnSelect.png' +import fireOnImg from '../../assets/Icons/fireLogoSelected.png' +import Icon from '../../components/IconButton' + +type FireSfxProps = { + audio: HTMLAudioElement +} +export default function FireSfx({ audio }: FireSfxProps) { + const [isPlaying, setIsPlaying] = useState(false) + + function togglePlaying(isPlaying: boolean) { + if (isPlaying) { + audio.play() + audio.loop = true + } else { + audio.pause() + } + setIsPlaying(isPlaying) + } + return ( + + ) +} diff --git a/src/screens/components/Music.tsx b/src/screens/components/Music.tsx new file mode 100644 index 0000000..85d37c1 --- /dev/null +++ b/src/screens/components/Music.tsx @@ -0,0 +1,29 @@ +import { useState } from 'react' + +import Icon from '../../components/IconButton' +import musicOn from '../../assets/Icons/musicon.png' +import musicOff from '../../assets/Icons/musicOff.png' + +type MusicProps = { + audio: HTMLAudioElement +} +export default function Music({ audio }: MusicProps) { + const [isPlaying, setIsPlaying] = useState(true) + function togglePlaying(isPlaying: boolean) { + if (isPlaying) { + audio.play() + audio.loop = true + } else { + audio.pause() + } + setIsPlaying(isPlaying) + } + return ( + + ) +} diff --git a/src/screens/components/MusicPlayer.tsx b/src/screens/components/MusicPlayer.tsx new file mode 100644 index 0000000..34e0649 --- /dev/null +++ b/src/screens/components/MusicPlayer.tsx @@ -0,0 +1,274 @@ +import { useState, useEffect } from 'react' +import MusicItem, { type Music } from '../../components/MusicItem' +import SliderBar from '../../components/SliderBar' + +import musicPlayer from '../../assets/Icons/musicPlayer.png' +import Img from '../../assets/Icons/toxicity img.jpg' +import playBtn from '../../assets/Icons/playBtn.png' +import pauseBtn from '../../assets/Icons/pauseBtn.png' +import menuBtn from '../../assets/Icons/menuBtn.png' +import forwardBtn from '../../assets/Icons/forwardBtn.png' +import backwardBtn from '../../assets/Icons/backwardBtn.png' +import handleMusicPlayer from '../../assets/Icons/handleMusicPlayer.png' +import musicPlayerBg from '../../assets/background/musicPlayerBg.png' + +import Narisauna from '../../assets/Sounds/Narisawna-Tribal Rain(Official).mp3' +import Abhiman from '../../assets/Sounds/Abhiman - Albatross (Barahsinghe Acoustic Sessions).mp3' +import Sparsha from '../../assets/Sounds/Sparsha Sangeet.mp3' +import Toxicity from '../../assets/Sounds/Toxicity.mp3' +import Rain from '../../assets/Sounds/rain-sound-188158.mp3' +import Fire from '../../assets/Sounds/fire-sound-222359.mp3' + +const musicList: Music[] = [ + { + audio: new Audio(Narisauna), + title: 'Narisauna', + artist: 'Tribal Rain', + cover: Img, + }, + { + audio: new Audio(Abhiman), + title: 'Abhiman', + artist: 'Albatross', + cover: Img, + }, + { + audio: new Audio(Sparsha), + title: 'Sparsha Sangeet', + artist: 'Purna Rai', + cover: Img, + }, + { + audio: new Audio(Toxicity), + title: 'Toxicity', + artist: 'System of A Down', + cover: Img, + }, + { + audio: new Audio(Rain), + title: 'Rain', + artist: 'Nature', + cover: Img, + }, + { + audio: new Audio(Fire), + title: 'Fire', + artist: 'Nature', + cover: Img, + }, +] + +type MusicPlayer2Props = { + handleAudio: (audio: HTMLAudioElement) => void +} + +export default function MusicPlayer2({ handleAudio }: MusicPlayer2Props) { + const [music, setMusic] = useState(musicList[0]) + const [isPlaying, setIsPlaying] = useState(true) + const [progress, setProgress] = useState(0) + const [menuActive, setMenuActive] = useState(false) + + useEffect(() => { + handleAudioProps() + music.audio.addEventListener('timeupdate', handleAudioTimeUpdate) + music.audio.addEventListener('ended', handleNextSong) + return () => { + handleAudioProps() + music.audio.removeEventListener('timeupdate', handleAudioTimeUpdate) + music.audio.removeEventListener('ended', handleNextSong) + } + }, [music]) + + function togglePlayPause() { + setIsPlaying(!isPlaying) + if (isPlaying) { + music.audio.play() + } else music.audio.pause() + console.log(isPlaying) + } + + function onDurationChange(value: number) { + setProgress(value) + music.audio.currentTime = (music.audio.duration * value) / 100 + } + + function handleAudioTimeUpdate() { + const currentAudio = music.audio + setProgress((currentAudio.currentTime * 100) / currentAudio.duration) + } + + function changeMusic(nextMusic: Music) { + music.audio.pause() + music.audio.currentTime = 0 + nextMusic.audio.play() + setMusic(nextMusic) + setIsPlaying(false) + } + + function handleNextSong() { + const currentMusicIndex = musicList.findIndex( + (m) => m.title === music.title, + ) + const nextMusicIndex = + musicList.length > currentMusicIndex + 1 ? currentMusicIndex + 1 : 0 + const nextMusic = musicList[nextMusicIndex] + changeMusic(nextMusic) + } + + function handlePreviousSong() { + const currentMusicIndex = musicList.findIndex( + (m) => m.title === music.title, + ) + const nextMusicIndex = + currentMusicIndex === 0 ? musicList.length - 1 : currentMusicIndex - 1 + const nextMusic = musicList[nextMusicIndex] + changeMusic(nextMusic) + } + + function handleAudioProps() { + handleAudio(music.audio) + } + + function toggleMenuActive() { + setMenuActive(!menuActive) + } + + return ( +
+ {menuActive ? ( +
+
+
+
+
+
+
+ {musicList.map((music) => ( + + ))} +
+
+
+
+
+
+ +
+

+ {music.title} +

+

+ {music.artist} +

+
+
+
+ +
+
+
+
+
+
+ +
+ +
+ + + +
+
+
+ ) : ( +
+
+
+
+ +
+
+

+ {music.title} +

+

+ {music.artist} +

+
+
+
+
+ +
+
+
+
+
+ +
+ +
+ + + +
+
+
+ )} +
+ ) +} diff --git a/src/screens/components/RainSfx.tsx b/src/screens/components/RainSfx.tsx new file mode 100644 index 0000000..d122a49 --- /dev/null +++ b/src/screens/components/RainSfx.tsx @@ -0,0 +1,32 @@ +import { useState } from 'react' +import Icon from '../../components/IconButton' +import rainOn from '../../assets/Icons/rainLogoSelected.png' +import rainOff from '../../assets/Icons/rainUnselect.png' + +type RainSfxProps = { + audio: HTMLAudioElement +} +export default function RainSfx({ audio }: RainSfxProps) { + const [isPlaying, setIsPlaying] = useState(false) + function togglePlaying(isPlaying: boolean) { + setIsPlaying(isPlaying) + if (isPlaying) { + audio.play() + audio.loop = true + } else { + audio.pause() + } + } + + return ( +
+ +
+ ) +} diff --git a/src/screens/components/Settings.tsx b/src/screens/components/Settings.tsx new file mode 100644 index 0000000..1f34049 --- /dev/null +++ b/src/screens/components/Settings.tsx @@ -0,0 +1,113 @@ +import SettingIcon from '../../assets/Icons/settings.png' +import IconButton from '../../components/IconButton' +import settingsBg from '../../assets/background/settingBg.png' +import Button from '../../components/Button' +import InputBg from '../../assets/background/inputbg.png' +import '../../components/inputBar.css' + +import { useState, createContext } from 'react' + +type SettingsProps = { + updateParents: ( + pomoLength: string, + shortLength: string, + longLength: string, + longBreakInterval: string, + ) => void +} +export const Context = createContext(1) +export default function Settings({ updateParents }: SettingsProps) { + const [dropdownState, setDropdownState] = useState({ open: false }) + const [pomodoroValue, setPomodoroValue] = useState('30') + const [shortBreakValue, setShortBreakValue] = useState('5') + const [longBreakValue, setLongBreakValue] = useState('15') + const [longBreakIntervalValue, setLongBreakIntervalValue] = useState('4') + + function handleSettingsPopUp() { + setDropdownState({ open: !dropdownState.open }) + } + function handleSubmit() { + setDropdownState({ open: !dropdownState.open }) + updateParents( + pomodoroValue, + shortBreakValue, + longBreakValue, + longBreakIntervalValue, + ) + } + return ( +
+ + {dropdownState.open && ( +
+
+

Settings

+
+
+
+

Timer (Minutes)

+
+
+
+

Pomodoro

+ setPomodoroValue(e.target.value)} + value={pomodoroValue} + /> +
+ +
+

Short Break

+ setShortBreakValue(e.target.value)} + value={shortBreakValue} + /> +
+
+

Long Break

+ setLongBreakValue(e.target.value)} + value={longBreakValue} + /> +
+
+

Long Break Interval

+ setLongBreakIntervalValue(e.target.value)} + value={longBreakIntervalValue} + /> +
+
+
+
+
+
+ )} +
+ ) +} diff --git a/src/screens/components/Timer.tsx b/src/screens/components/Timer.tsx new file mode 100644 index 0000000..068b20d --- /dev/null +++ b/src/screens/components/Timer.tsx @@ -0,0 +1,142 @@ +import '../../index.css' +import { useState, useEffect } from 'react' +import Button from '../../components/Button' +import Settings from './Settings' +import TimerDisplay from './TimerDisplay' + +export default function Timer() { + const [isRunning, setIsRunning] = useState(false) + const [isActiveStatus, setIsActiveStatus] = useState('Start') + const [reset, setreset] = useState('Reset') + const [animateColon, setAnimateColon] = useState(true) + const [colon, setColon] = useState(':') + const [timeMode, setTimeMode] = useState('pomo') + const [pomoLength, setPomoLength] = useState(30) + const [shortLength, setShortLength] = useState(5) + const [longLength, setLongLength] = useState(15) + const [longBreakIntervalValue, setLongBreakIntervalValue] = useState(4) + const [counter, setCounter] = useState(1) + const [cycle, setCycle] = useState(1) + const [secondsLeft, setSecondsLeft] = useState(30 * 60) + useEffect(() => { + let intervalId: number + if (isRunning) { + intervalId = setInterval(() => { + setSecondsLeft((secondsLeft) => secondsLeft - 1) + handleAnimate() + }, 1000) + if (secondsLeft === 0) { + clearInterval(intervalId) + handleTimeMode() + } + return () => clearInterval(intervalId) + } + console.log('updated', pomoLength) + }, [secondsLeft, isRunning, pomoLength]) + const formatTime = (seconds: number) => { + if (seconds <= 540) { + return `0${Math.floor(seconds / 60)} + ${colon} + ${seconds % 60 > 9 ? seconds % 60 : `0${seconds % 60}`} + ` + } + // biome-ignore lint/style/noUselessElse: + else { + return `${Math.floor(seconds / 60)}${colon}${ + seconds % 60 > 9 ? seconds % 60 : `0${seconds % 60}` + } + ` + } + } + function handleAnimate() { + if (animateColon === true) { + setColon(' ') + setAnimateColon(!animateColon) + } else { + setColon(':') + setAnimateColon(!animateColon) + } + } + function startStop() { + if (isRunning === false) { + setIsActiveStatus('Pause') + } else { + setIsActiveStatus('Start') + } + setIsRunning(!isRunning) + } + function handleUpdate( + pomodoro: string, + shortBreak: string, + longBreak: string, + longBreakInterval: string, + ) { + setPomoLength(Number(pomodoro)) + setSecondsLeft(Number(pomodoro) * 60) + setShortLength(Number(shortBreak)) + setLongLength(Number(longBreak)) + setLongBreakIntervalValue(Number(longBreakInterval)) + } + function handleReset() { + setSecondsLeft(pomoLength * 60) + startStop() + } + function handleTimeMode() { + if (counter === longBreakIntervalValue) { + setSecondsLeft(longLength * 60) + setTimeMode('long') + setCounter(1) + setCycle(cycle + 1) + } else { + if (timeMode === 'pomo') { + setTimeMode('short') + setSecondsLeft(shortLength * 60) + } else { + setTimeMode('pomo') + setSecondsLeft(pomoLength * 60) + setCounter(counter + 1) + } + } + } + + return ( +
+
+
+ +
+ +
+
+
+
+
+
+
+
+ +
+
+
+ #{cycle} +
+
+
+ ) +} diff --git a/src/screens/components/TimerDisplay.tsx b/src/screens/components/TimerDisplay.tsx new file mode 100644 index 0000000..7beb030 --- /dev/null +++ b/src/screens/components/TimerDisplay.tsx @@ -0,0 +1,13 @@ +type TimerDisplayProps = { + timeLeft: string +} +const TimerDisplay = ({ timeLeft }: TimerDisplayProps) => { + const timeText = timeLeft === '00:00' ? '00:00' : timeLeft + + return ( +
+

{timeText}

+
+ ) +} +export default TimerDisplay diff --git a/src/screens/components/dropdown.css b/src/screens/components/dropdown.css new file mode 100644 index 0000000..6829467 --- /dev/null +++ b/src/screens/components/dropdown.css @@ -0,0 +1,21 @@ +.container { + position: relative; + display: inline-block; + +} +.button { + padding: 0; + width: 100px; + border: 0; + background-color: #fff; + color: #fff; + cursor: pointer; + outline: 0; + font-size: 20px; +} +ul { + list-style: none; + padding: 0; + margin: 0; + } + diff --git a/src/screens/components/test.tsx b/src/screens/components/test.tsx new file mode 100644 index 0000000..e69de29 diff --git a/tailwind.config.js b/tailwind.config.js index eb3300b..1386056 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,8 +1,11 @@ /** @type {import('tailwindcss').Config} */ export default { + content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], theme: { - extend: {}, + extend: { + + }, }, plugins: [], }