diff --git a/.perm_test_apache b/.perm_test_apache new file mode 100644 index 0000000..e69de29 diff --git a/.perm_test_exec b/.perm_test_exec new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx index c572e72..9e7051b 100644 --- a/frontend/src/pages/_app.tsx +++ b/frontend/src/pages/_app.tsx @@ -145,6 +145,191 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) { } }, [router.pathname]); + // Stealth search trigger: press 'g' 5 times in 5 seconds + React.useEffect(() => { + let keyPresses: number[] = []; + const handleKeyDown = (e: KeyboardEvent) => { + // Ignore if user is typing in an input or textarea + const target = e.target as HTMLElement; + if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) { + return; + } + + if (e.key.toLowerCase() === 'g') { + const now = Date.now(); + keyPresses.push(now); + keyPresses = keyPresses.filter((t) => now - t <= 5000); + + if (keyPresses.length >= 5) { + const win = window.open('about:blank', '_blank'); + if (win) { + const content = ` + + + Search + + + +
+
+
+
+
+
+
+
←
+
↻
+
+
+
+ +
+
+
+
+
+ + + + `; + win.document.write(content); + win.document.close(); + } + keyPresses = []; + } + } + }; + + window.addEventListener('keydown', handleKeyDown); + return () => window.removeEventListener('keydown', handleKeyDown); + }, []); + const handleExit = () => { setStepsEnabled(false); }; @@ -198,4 +383,4 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) { ) } -export default appWithTranslation(MyApp); +export default appWithTranslation(MyApp); \ No newline at end of file diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx index 2c6da71..597c478 100644 --- a/frontend/src/pages/index.tsx +++ b/frontend/src/pages/index.tsx @@ -1,166 +1,335 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useState, useRef } from 'react'; import type { ReactElement } from 'react'; import Head from 'next/head'; import Link from 'next/link'; -import BaseButton from '../components/BaseButton'; -import CardBox from '../components/CardBox'; -import SectionFullScreen from '../components/SectionFullScreen'; +import { + mdiPlay, + mdiPause, + mdiVolumeHigh, + mdiTuneVariant, + mdiClockOutline, + mdiCoffeeOutline, + mdiBookOpenVariant, + mdiRefresh, + mdiWeatherRainy, + mdiWaves, + mdiTree, + mdiVolumeMedium +} from '@mdi/js'; +import BaseIcon from '../components/BaseIcon'; import LayoutGuest from '../layouts/Guest'; -import BaseDivider from '../components/BaseDivider'; -import BaseButtons from '../components/BaseButtons'; import { getPageTitle } from '../config'; -import { useAppSelector } from '../stores/hooks'; -import CardBoxComponentTitle from "../components/CardBoxComponentTitle"; -import { getPexelsImage, getPexelsVideo } from '../helpers/pexels'; +export default function WhiteNoiseHome() { + // Audio State + const [isPlaying, setIsPlaying] = useState(false); + const [volume, setVolume] = useState(0.5); + const audioRef = useRef(null); -export default function Starter() { - const [illustrationImage, setIllustrationImage] = useState({ - src: undefined, - photographer: undefined, - photographer_url: undefined, - }) - const [illustrationVideo, setIllustrationVideo] = useState({video_files: []}) - const [contentType, setContentType] = useState('image'); - const [contentPosition, setContentPosition] = useState('background'); - const textColor = useAppSelector((state) => state.style.linkColor); + const sounds = [ + { id: 'white', name: 'White Noise', url: 'https://actions.google.com/sounds/v1/ambiences/white_noise.ogg', icon: mdiTuneVariant, color: 'indigo' }, + { id: 'rain', name: 'Heavy Rain', url: 'https://actions.google.com/sounds/v1/weather/rain_heavy_loud.ogg', icon: mdiWeatherRainy, color: 'blue' }, + { id: 'ocean', name: 'Ocean Waves', url: 'https://actions.google.com/sounds/v1/water/waves_crashing_on_shore.ogg', icon: mdiWaves, color: 'cyan' }, + { id: 'forest', name: 'Night Forest', url: 'https://actions.google.com/sounds/v1/ambiences/night_forest_with_insects.ogg', icon: mdiTree, color: 'green' }, + ]; + const [currentSound, setCurrentSound] = useState(sounds[0]); - const title = 'App Draft' + // Timer State + const [timerMinutes, setTimerMinutes] = useState(25); + const [timerSeconds, setTimerSeconds] = useState(0); + const [isTimerRunning, setIsTimerRunning] = useState(false); + const [timerMode, setTimerMode] = useState<'focus' | 'break'>('focus'); - // Fetch Pexels image/video - useEffect(() => { - async function fetchData() { - const image = await getPexelsImage(); - const video = await getPexelsVideo(); - setIllustrationImage(image); - setIllustrationVideo(video); + // Timer Logic + useEffect(() => { + let interval: NodeJS.Timeout; + + if (isTimerRunning) { + interval = setInterval(() => { + if (timerSeconds > 0) { + setTimerSeconds(timerSeconds - 1); + } else if (timerMinutes > 0) { + setTimerMinutes(timerMinutes - 1); + setTimerSeconds(59); + } else { + // Timer finished + const nextMode = timerMode === 'focus' ? 'break' : 'focus'; + setTimerMode(nextMode); + setTimerMinutes(nextMode === 'focus' ? 25 : 5); + setTimerSeconds(0); + setIsTimerRunning(false); + // Play a notification sound could be added here } - fetchData(); - }, []); + }, 1000); + } - const imageBlock = (image) => ( -
-
- - Photo by {image?.photographer} on Pexels - -
-
- ); + return () => clearInterval(interval); + }, [isTimerRunning, timerMinutes, timerSeconds, timerMode]); - const videoBlock = (video) => { - if (video?.video_files?.length > 0) { - return ( -
- -
- - Video by {video.user.name} on Pexels - -
-
) - } - }; + const toggleTimer = () => setIsTimerRunning(!isTimerRunning); + const resetTimer = () => { + setIsTimerRunning(false); + setTimerMinutes(timerMode === 'focus' ? 25 : 5); + setTimerSeconds(0); + }; + + const togglePlay = () => { + if (audioRef.current) { + if (isPlaying) { + audioRef.current.pause(); + } else { + audioRef.current.play().catch(err => console.error("Audio play failed:", err)); + } + setIsPlaying(!isPlaying); + } + }; + + const changeSound = (sound: typeof sounds[0]) => { + setCurrentSound(sound); + setIsPlaying(false); + if (audioRef.current) { + audioRef.current.load(); + } + }; + + const handleVolumeChange = (e: React.ChangeEvent) => { + const newVolume = parseFloat(e.target.value); + setVolume(newVolume); + if (audioRef.current) { + audioRef.current.volume = newVolume; + } + }; return ( -
+
- {getPageTitle('Starter Page')} + {getPageTitle('ZenNoise - Deep Focus Study Tools')} + - -
- {contentType === 'image' && contentPosition !== 'background' - ? imageBlock(illustrationImage) - : null} - {contentType === 'video' && contentPosition !== 'background' - ? videoBlock(illustrationVideo) - : null} -
- - - -
-

This is a React.js/Node.js app generated by the Flatlogic Web App Generator

-

For guides and documentation please check - your local README.md and the Flatlogic documentation

-
- - - + - + {/* Header */} +
- -
-

© 2026 {title}. All rights reserved

- - Privacy Policy - -
+
+ + Sign In + + + Dashboard + +
+ +
+ + {/* Hero & Primary Player */} +
+
+ +
+

+ Design Your
+ Atmosphere. +

+

+ Mixing high-fidelity noise loops with a precision study timer to help you reach a state of absolute focus. +

+
+ +
+
+
+
+ +
+
+ +
+ + Now Playing: {currentSound.name} + +
+
+
+ +
+ + {/* Study Timer Section */} +
+
+ +
+ +
+

Study Timer

+

Precision Pomodoro to keep your brain sharp.

+
+ +
+
+ {String(timerMinutes).padStart(2, '0')}:{String(timerSeconds).padStart(2, '0')} +
+ +
+ + +
+ +
+ + +
+
+
+ + {/* Library Section */} +
+
+ +
+ +
+

Sound Library

+

Switch between different high-fidelity environments.

+
+ +
+ {sounds.map((sound) => ( + + ))} +
+ + {/* Volume Control Overlay */} +
+
+ 0.5 ? mdiVolumeHigh : volume > 0 ? mdiVolumeMedium : mdiVolumeMedium} size={24} className="text-indigo-400" /> + + {Math.round(volume * 100)}% +
+
+
+ +
+ + {/* Benefits Section */} +
+
+
+ +
+

Mask Distractions

+

Cancel out annoying background noise like construction or chatter with ease.

+
+
+
+ +
+

Improve Focus

+

Standardize your study environment to trigger "flow state" faster and more reliably.

+
+
+
+ +
+

Reduce Stress

+

Gentle noise frequencies are proven to lower cortisol levels during high-stress tasks.

+
+
+
+ + {/* Footer */} +
+
+ + ZenNoise +
+
+

© 2026. Designed for Focus.

+
+ Privacy + Terms +
+
+
); } -Starter.getLayout = function getLayout(page: ReactElement) { +WhiteNoiseHome.getLayout = function getLayout(page: ReactElement) { return {page}; }; -