diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 063cd83..ea0787c 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -14,6 +14,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^19.1.1", "react-dom": "^19.1.1", + "react-router-dom": "^6.28.1", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" } @@ -3075,6 +3076,15 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.23.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz", + "integrity": "sha512-O3rHJzAQKamUz1fvE0Qaw0xSFqsA/yafi2iqeE0pvdFtCO1viYx8QL6f3Ln/aCCTLxs68SLf0KPM9eSeM8yBnA==", + "license": "MIT", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -13913,6 +13923,38 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.30.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.1.tgz", + "integrity": "sha512-X1m21aEmxGXqENEPG3T6u0Th7g0aS4ZmoNynhbs+Cn+q+QGTLt+d5IQ2bHAXKzKcxGJjxACpVbnYQSCRcfxHlQ==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.23.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.30.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.1.tgz", + "integrity": "sha512-llKsgOkZdbPU1Eg3zK8lCn+sjD9wMRZZPuzmdWWX5SUs8OFkN5HnFVC0u5KMeMaC9aoancFI/KoLuKPqN+hxHw==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.23.0", + "react-router": "6.30.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index fa36250..ae9f9b1 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -9,6 +9,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^19.1.1", "react-dom": "^19.1.1", + "react-router-dom": "^6.28.1", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, diff --git a/frontend/public/index.html b/frontend/public/index.html index aa069f2..0f8bdff 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -4,10 +4,10 @@ - + - React App + Serena diff --git a/frontend/src/App.css b/frontend/src/App.css index 74b5e05..e5d1c16 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1,38 +1,4 @@ .App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } + position: relative; } diff --git a/frontend/src/App.js b/frontend/src/App.js deleted file mode 100644 index 3784575..0000000 --- a/frontend/src/App.js +++ /dev/null @@ -1,25 +0,0 @@ -import logo from './logo.svg'; -import './App.css'; - -function App() { - return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
- ); -} - -export default App; diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx new file mode 100644 index 0000000..155ad47 --- /dev/null +++ b/frontend/src/App.jsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; +import Home from './components/Home'; +import CreateStation from './components/CreateStation'; +import JoinStation from './components/JoinStation'; +import './App.css'; + +function App() { + return ( +
+ + + } /> + } /> + } /> + + +
+ ); +} + +export default App; diff --git a/frontend/src/components/CreateStation.jsx b/frontend/src/components/CreateStation.jsx new file mode 100644 index 0000000..8c61b90 --- /dev/null +++ b/frontend/src/components/CreateStation.jsx @@ -0,0 +1,61 @@ +import React, { useState } from 'react'; + +function CreateStation() { + const [joinMethod, setJoinMethod] = useState(''); + const [password, setPassword] = useState(''); + + const handleCreateStation = () => { + // Handle station creation logic here + console.log('Creating station with password:', password); + }; + + return ( +
+
+

Create a Station on Serena

+
+ +
+
+

How should people be able to join your station?

+ +
+ +
+ + {joinMethod === 'password' && ( +
+ + setPassword(e.target.value)} + placeholder="Enter station password" + /> +
+ )} +
+ + +
+
+ ); +} + +export default CreateStation; diff --git a/frontend/src/components/Home.jsx b/frontend/src/components/Home.jsx new file mode 100644 index 0000000..414e9d9 --- /dev/null +++ b/frontend/src/components/Home.jsx @@ -0,0 +1,41 @@ +import React from 'react'; +import { useNavigate } from 'react-router-dom'; + +function Home() { + const navigate = useNavigate(); + + const handleCreateStation = () => { + navigate('/create-station'); + }; + + const handleJoinStation = () => { + navigate('/join-station'); + }; + + return ( +
+
+

Radio Station Hub

+

Create or join a radio station to share music with friends

+ +
+ + + +
+
+
+ ); +} + +export default Home; diff --git a/frontend/src/components/JoinStation.jsx b/frontend/src/components/JoinStation.jsx new file mode 100644 index 0000000..c52dde3 --- /dev/null +++ b/frontend/src/components/JoinStation.jsx @@ -0,0 +1,60 @@ +import React, { useState } from 'react'; + +function JoinStation() { + const [verifyMethod, setVerifyMethod] = useState(''); + const [password, setPassword] = useState(''); + + const handleJoinStation = () => { + console.log('Joining station with password:', password); + }; + + return ( +
+
+

Join a Station on Serena

+
+ +
+
+

How would you like to verify access?

+ +
+ +
+ + {verifyMethod === 'password' && ( +
+ + setPassword(e.target.value)} + placeholder="Enter station password" + /> +
+ )} +
+ + +
+
+ ); +} + +export default JoinStation; diff --git a/frontend/src/index.css b/frontend/src/index.css index ec2585e..9a3bf0a 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -1,13 +1,450 @@ -body { +* { margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + min-height: 100vh; + color: #333; } -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; +/* Home Component Styles */ +.home-container { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + padding: 20px; +} + +.content { + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + border-radius: 24px; + padding: 40px 30px; + text-align: center; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + max-width: 500px; + width: 100%; +} + +.title { + font-size: 2.5rem; + font-weight: 700; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + margin-bottom: 12px; + line-height: 1.2; +} + +.subtitle { + font-size: 1.1rem; + color: #666; + margin-bottom: 40px; + line-height: 1.5; +} + +.button-container { + display: flex; + flex-direction: column; + gap: 16px; +} + +.action-button { + padding: 16px 32px; + border: none; + border-radius: 12px; + font-size: 1.1rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + text-decoration: none; + display: inline-block; + position: relative; + overflow: hidden; +} + +.action-button.primary { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); +} + +.action-button.primary:hover { + transform: translateY(-2px); + box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4); +} + +.action-button.secondary { + background: white; + color: #667eea; + border: 2px solid #667eea; +} + +.action-button.secondary:hover { + background: #667eea; + color: white; + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); +} + +/* Create Station Component Styles */ +.create-station { + min-height: 100vh; + padding: 20px; + display: flex; + flex-direction: column; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); +} + +.create-station-header { + text-align: center; + margin-bottom: 40px; + padding-top: 40px; +} + +.create-station-header h1 { + font-size: 2.2rem; + font-weight: 700; + color: white; + margin-bottom: 20px; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.create-station-content { + flex: 1; + max-width: 600px; + margin: 0 auto; + width: 100%; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + border-radius: 24px; + padding: 40px 30px; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); +} + +.join-method-section h2 { + font-size: 1.4rem; + font-weight: 600; + color: #333; + margin-bottom: 30px; + line-height: 1.4; +} + +.radio-option { + margin-bottom: 24px; +} + +.radio-option label { + display: flex; + align-items: center; + font-size: 1.1rem; + font-weight: 500; + cursor: pointer; + padding: 16px 20px; + border: 2px solid #e9ecef; + border-radius: 12px; + transition: all 0.3s ease; + background: white; +} + +.radio-option label:hover { + border-color: #667eea; + background: #f8f9ff; +} + +.radio-option input[type="radio"]:checked + label, +.radio-option label:has(input[type="radio"]:checked) { + border-color: #667eea; + background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); + color: #667eea; +} + +.radio-option input[type="radio"] { + margin-right: 12px; + transform: scale(1.3); + accent-color: #667eea; +} + +.password-input-section { + margin-top: 30px; + animation: slideIn 0.3s ease; +} + +@keyframes slideIn { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.password-input-section label { + display: block; + font-size: 1rem; + font-weight: 600; + color: #333; + margin-bottom: 12px; +} + +.password-input-section input { + width: 100%; + padding: 16px 20px; + border: 2px solid #e9ecef; + border-radius: 12px; + font-size: 1rem; + transition: all 0.3s ease; + background: white; +} + +.password-input-section input:focus { + outline: none; + border-color: #667eea; + box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); +} + +.create-station-final-btn { + width: 100%; + background: linear-gradient(135deg, #28a745 0%, #20c997 100%); + color: white; + border: none; + padding: 18px 32px; + font-size: 1.1rem; + font-weight: 600; + border-radius: 12px; + cursor: pointer; + margin-top: 40px; + transition: all 0.3s ease; + box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3); +} + +.create-station-final-btn:hover:not(:disabled) { + transform: translateY(-2px); + box-shadow: 0 12px 35px rgba(40, 167, 69, 0.4); +} + +.create-station-final-btn:disabled { + background: #ccc; + cursor: not-allowed; + transform: none; + box-shadow: none; +} + +/* Join Station Component Styles */ +.join-station { + min-height: 100vh; + padding: 20px; + display: flex; + flex-direction: column; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); +} + +.join-station-header { + text-align: center; + margin-bottom: 40px; + padding-top: 40px; +} + +.join-station-header h1 { + font-size: 2.2rem; + font-weight: 700; + color: white; + margin-bottom: 20px; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.join-station-content { + flex: 1; + max-width: 600px; + margin: 0 auto; + width: 100%; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + border-radius: 24px; + padding: 40px 30px; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); +} + +.verify-method-section h2 { + font-size: 1.4rem; + font-weight: 600; + color: #333; + margin-bottom: 30px; + line-height: 1.4; +} + +.join-station-final-btn { + width: 100%; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + border: none; + padding: 18px 32px; + font-size: 1.1rem; + font-weight: 600; + border-radius: 12px; + cursor: pointer; + margin-top: 40px; + transition: all 0.3s ease; + box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); +} + +.join-station-final-btn:hover:not(:disabled) { + transform: translateY(-2px); + box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4); +} + +.join-station-final-btn:disabled { + background: #ccc; + cursor: not-allowed; + transform: none; + box-shadow: none; +} + +/* Mobile Responsive Design */ +@media (max-width: 768px) { + .content { + padding: 30px 20px; + margin: 10px; + border-radius: 20px; + } + + .title { + font-size: 2rem; + } + + .subtitle { + font-size: 1rem; + margin-bottom: 30px; + } + + .create-station-header { + padding-top: 20px; + margin-bottom: 30px; + } + + .create-station-header h1 { + font-size: 1.8rem; + } + + .create-station-content { + padding: 30px 20px; + border-radius: 20px; + margin: 10px; + } + + .join-method-section h2 { + font-size: 1.2rem; + } + + .radio-option label { + padding: 14px 16px; + font-size: 1rem; + } + + .password-input-section input { + padding: 14px 16px; + } + + .create-station-final-btn { + padding: 16px 24px; + font-size: 1rem; + } + + .join-station-header { + padding-top: 20px; + margin-bottom: 30px; + } + + .join-station-header h1 { + font-size: 1.8rem; + } + + .join-station-content { + padding: 30px 20px; + border-radius: 20px; + margin: 10px; + } + + .verify-method-section h2 { + font-size: 1.2rem; + } + + .join-station-final-btn { + padding: 16px 24px; + font-size: 1rem; + } +} + +@media (max-width: 480px) { + .home-container { + padding: 15px; + } + + .content { + padding: 25px 15px; + } + + .title { + font-size: 1.8rem; + } + + .create-station { + padding: 15px; + } + + .create-station-content { + padding: 25px 15px; + } + + .join-station { + padding: 15px; + } + + .join-station-content { + padding: 25px 15px; + } +} + +/* Larger screens */ +@media (min-width: 1024px) { + .title { + font-size: 3rem; + } + + .subtitle { + font-size: 1.2rem; + } + + .create-station-header h1 { + font-size: 2.5rem; + } + + .button-container { + flex-direction: row; + justify-content: center; + gap: 20px; + } + + .action-button { + min-width: 200px; + } + + .join-station-header h1 { + font-size: 2.5rem; + } }