diff --git a/backend/gradlew b/backend/gradlew index 1aa94a4..23d15a9 100755 --- a/backend/gradlew +++ b/backend/gradlew @@ -15,6 +15,8 @@ # See the License for the specific language governing permissions and # limitations under the License. # +# SPDX-License-Identifier: Apache-2.0 +# ############################################################################## # @@ -55,7 +57,7 @@ # Darwin, MinGW, and NonStop. # # (3) This script is generated from the Groovy template -# https://github.com/gradle/gradle/blob/HEAD/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt +# https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt # within the Gradle project. # # You can find Gradle at https://github.com/gradle/gradle/. @@ -84,7 +86,7 @@ done # shellcheck disable=SC2034 APP_BASE_NAME=${0##*/} # Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036) -APP_HOME=$( cd "${APP_HOME:-./}" > /dev/null && pwd -P ) || exit +APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit # Use the maximum available, or set MAX_FD != -1 to use that value. MAX_FD=maximum @@ -112,7 +114,7 @@ case "$( uname )" in #( NONSTOP* ) nonstop=true ;; esac -CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar +CLASSPATH="\\\"\\\"" # Determine the Java command to use to start the JVM. @@ -203,7 +205,7 @@ fi DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' # Collect all arguments for the java command: -# * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments, +# * DEFAULT_JVM_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments, # and any embedded shellness will be escaped. # * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be # treated as '${Hostname}' itself on the command line. @@ -211,7 +213,7 @@ DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' set -- \ "-Dorg.gradle.appname=$APP_BASE_NAME" \ -classpath "$CLASSPATH" \ - org.gradle.wrapper.GradleWrapperMain \ + -jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \ "$@" # Stop when "xargs" is not available. diff --git a/backend/gradlew.bat b/backend/gradlew.bat index 25da30d..db3a6ac 100644 --- a/backend/gradlew.bat +++ b/backend/gradlew.bat @@ -13,6 +13,8 @@ @rem See the License for the specific language governing permissions and @rem limitations under the License. @rem +@rem SPDX-License-Identifier: Apache-2.0 +@rem @if "%DEBUG%"=="" @echo off @rem ########################################################################## @@ -68,11 +70,11 @@ goto fail :execute @rem Setup the command line -set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar +set CLASSPATH= @rem Execute Gradle -"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* +"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %* :end @rem End local scope for the variables with windows NT shell diff --git a/frontend/src/components/AudioPlayer.jsx b/frontend/src/components/AudioPlayer.jsx index 2c3eea2..e8fea80 100644 --- a/frontend/src/components/AudioPlayer.jsx +++ b/frontend/src/components/AudioPlayer.jsx @@ -4,11 +4,6 @@ const SingleAudioPlayer = ({ src }) => { const audioRef = useRef(null); const [isPlaying, setIsPlaying] = useState(false); - // Early return if no src provided - if (!src) { - return
No audio file available
; - } - const togglePlay = () => { const audio = audioRef.current; if (!audio) return; diff --git a/frontend/src/index.css b/frontend/src/index.css index 8b51e2a..673a327 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -5,1391 +5,590 @@ } body { - font-family: 'Arial', sans-serif; - background: #1a1a1a; - color: white; - overflow-x: hidden; -} - -.station-page-desktop { + 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; - position: relative; - display: flex; - flex-direction: column; + color: #333; } -/* Main Layout */ -.desktop-main { - display: flex; - flex: 1; - padding: 40px 40px 0 40px; - gap: 60px; - max-width: 1400px; - margin: 0 auto; - width: 100%; - height: calc(100vh - 80px); /* Account for progress bar */ - position: relative; -} - -/* Left Section */ -.left-section { - flex: 0 0 400px; /* Fixed width instead of flex: 1 */ - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - max-width: 400px; -} - -/* Vinyl Container */ -.vinyl-container { - position: relative; - margin-bottom: 40px; -} - -.vinyl-record-desktop { - width: 300px; - height: 300px; - background: radial-gradient(circle, #1a1a1a 30%, #333 31%, #1a1a1a 32%, #333 33%, #1a1a1a 34%); - border-radius: 50%; - position: relative; - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); - transition: transform 0.3s ease; -} - -.vinyl-record-desktop.spinning { - animation: spin 3s linear infinite; -} - -@keyframes spin { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } -} - -.vinyl-center { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 60px; - height: 60px; - background: #8B4513; - border-radius: 50%; - box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5); -} - -.vinyl-center::after { - content: ''; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 10px; - height: 10px; - background: #000; - border-radius: 50%; -} - -.vinyl-grooves { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 200px; - height: 200px; - border-radius: 50%; - border: 2px solid transparent; /* Changed from rgba(255, 255, 255, 0.1) to transparent */ -} - -.vinyl-grooves::before { - content: ''; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - border-radius: 50%; - border: 1px solid transparent; /* Changed from rgba(255, 255, 255, 0.1) to transparent */ - width: 160px; - height: 160px; -} - -.vinyl-grooves::after { - content: ''; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - border-radius: 50%; - border: 1px solid rgba(255, 255, 255, 0.1); - width: 240px; - height: 240px; -} - -/* Music Notes Animation */ -.music-notes-desktop { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - pointer-events: none; -} - -.music-note { - position: absolute; - font-size: 24px; - color: #4A90E2; - animation: float 3s ease-in-out infinite; -} - -.note-1 { - top: 20%; - right: -40px; - animation-delay: 0s; -} - -.note-2 { - top: 50%; - right: -60px; - animation-delay: 1s; -} - -.note-3 { - top: 80%; - right: -40px; - animation-delay: 2s; -} - -@keyframes float { - 0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0; } - 50% { transform: translateY(-30px) rotate(15deg); opacity: 1; } -} - -/* Next Song Info */ -.next-song-info { - text-align: center; - background: rgba(255, 255, 255, 0.05); - padding: 20px; - border-radius: 15px; - margin-bottom: 30px; - width: 100%; - max-width: 300px; -} - -.next-label { - font-size: 14px; - color: #aaa; - margin-bottom: 8px; - text-transform: uppercase; - letter-spacing: 1px; -} - -.next-song-info h4 { - font-size: 18px; - margin-bottom: 5px; - color: #4A90E2; -} - -.next-artist { - font-size: 14px; - color: #ccc; -} - -/* Bottom Play Icon */ -.bottom-play-icon { - display: flex; - justify-content: center; -} - -.mini-play-btn { - width: 60px; - height: 60px; - border: none; - border-radius: 50%; - background: linear-gradient(135deg, #4A90E2, #6BB6FF); - color: #fff; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: all 0.3s ease; - box-shadow: 0 10px 20px rgba(74, 144, 226, 0.3); -} - -.mini-play-btn:hover { - transform: scale(1.1); - box-shadow: 0 15px 30px rgba(74, 144, 226, 0.4); -} - -/* Right Section */ -.right-section { - position: absolute; - left: 50%; - top: 20px; /* Add top margin */ - right: 20px; /* Reduced from 40px */ - bottom: 20px; /* Add bottom margin */ - display: flex; - flex-direction: column; -} - -.recommendations-container { - background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 50%, #0a0a0a 100%); - backdrop-filter: blur(10px); - border-radius: 20px; - padding: 30px; - height: 100%; /* Take full height of parent */ - display: flex; - flex-direction: column; -} - -.recommendations-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 30px; - border-bottom: 2px solid rgba(74, 144, 226, 0.3); - padding-bottom: 15px; -} - -.recommendations-header h2 { - font-size: 28px; - color: #4A90E2; - font-weight: bold; -} - -.add-suggestion-btn { - width: 50px; - height: 50px; - border: none; - border-radius: 50%; - background: linear-gradient(135deg, #4A90E2, #6BB6FF); - color: #fff; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: all 0.3s ease; - box-shadow: 0 5px 15px rgba(74, 144, 226, 0.3); -} - -.add-suggestion-btn:hover { - transform: scale(1.1); - box-shadow: 0 8px 20px rgba(74, 144, 226, 0.4); -} - -.recommendations-list { - display: flex; - flex-direction: column; - gap: 15px; - flex: 1; /* Take remaining space */ - overflow-y: auto; -} - -.recommendations-list::-webkit-scrollbar { - width: 8px; -} - -.recommendations-list::-webkit-scrollbar-track { - background: rgba(255, 255, 255, 0.1); - border-radius: 10px; -} - -.recommendations-list::-webkit-scrollbar-thumb { - background: #4A90E2; - border-radius: 10px; -} - -.recommendation-item { - display: flex; - align-items: center; - padding: 15px; - background: rgba(255, 255, 255, 0.05); - border-radius: 12px; - border: 1px solid rgba(255, 255, 255, 0.1); - transition: all 0.3s ease; - cursor: pointer; -} - -.recommendation-item:hover { - background: rgba(255, 255, 255, 0.1); - transform: translateY(-2px); - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); -} - -.song-cover { - width: 60px; - height: 60px; - border-radius: 8px; - margin-right: 15px; - object-fit: cover; -} - -.song-info { - flex: 1; -} - -.song-info h4 { - font-size: 16px; - margin-bottom: 5px; - color: white; -} - -.artist { - font-size: 14px; - color: #4A90E2; - margin-bottom: 3px; -} - -.album { - font-size: 12px; - color: #aaa; -} - -.duration { - font-size: 14px; - color: #ccc; - font-weight: bold; -} - -/* Progress Container */ -.progress-container { - padding: 20px 40px; - background: rgba(0, 0, 0, 0.3); - backdrop-filter: blur(10px); - position: relative; - z-index: 10; -} - -.progress-bar { - width: 100%; - height: 8px; - background: rgba(255, 255, 255, 0.2); - border-radius: 4px; - overflow: hidden; - position: relative; -} - -.progress-fill { - height: 100%; - background: linear-gradient(90deg, #4A90E2, #6BB6FF); - border-radius: 4px; - transition: width 0.3s ease; - box-shadow: 0 0 10px rgba(74, 144, 226, 0.5); -} - -/* Home Page Styles - Improved */ +/* Home Component Styles */ .home-container { min-height: 100vh; display: flex; align-items: center; justify-content: center; - background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%); padding: 20px; - position: relative; } -.home-container::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: radial-gradient(circle at 30% 20%, rgba(74, 144, 226, 0.1) 0%, transparent 50%), - radial-gradient(circle at 70% 80%, rgba(74, 144, 226, 0.05) 0%, transparent 50%); - pointer-events: none; -} - -.home-content { - background: rgba(255, 255, 255, 0.02); - backdrop-filter: blur(20px); - border: 1px solid rgba(255, 255, 255, 0.05); +.content { + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); border-radius: 24px; - padding: 60px 50px; + padding: 40px 30px; text-align: center; - position: relative; - z-index: 1; + 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%; - box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3); } -.home-header { - margin-bottom: 50px; -} - -.home-title { - font-size: 42px; - font-weight: 300; - color: #ffffff; - margin-bottom: 20px; - letter-spacing: -0.5px; +.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; } -.home-title::after { - content: ''; - display: block; - width: 80px; - height: 3px; - background: linear-gradient(90deg, #4A90E2, #6BB6FF); - margin: 20px auto 0; - border-radius: 2px; +.subtitle { + font-size: 1.1rem; + color: #666; + margin-bottom: 40px; + line-height: 1.5; } -.home-subtitle { - font-size: 16px; - color: #a0a0a0; - line-height: 1.6; - font-weight: 300; - max-width: 350px; - margin: 0 auto; -} - -.home-actions { +.button-container { display: flex; flex-direction: column; gap: 16px; } -.home-btn { - display: flex; - align-items: center; - justify-content: center; - gap: 12px; - padding: 18px 32px; - font-size: 16px; - font-weight: 500; +.action-button { + padding: 16px 32px; border: none; border-radius: 12px; + font-size: 1.1rem; + font-weight: 600; cursor: pointer; - transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + transition: all 0.3s ease; + text-decoration: none; + display: inline-block; position: relative; overflow: hidden; - letter-spacing: 0.5px; } -.home-btn::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); - transition: left 0.5s; -} - -.home-btn:hover::before { - left: 100%; -} - -.btn-icon { - font-size: 18px; - filter: grayscale(0.3); -} - -.home-btn-primary { - background: linear-gradient(135deg, #4A90E2 0%, #6BB6FF 100%); +.action-button.primary { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; - box-shadow: 0 8px 25px rgba(74, 144, 226, 0.25); + box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); } -.home-btn-primary:hover { +.action-button.primary:hover { transform: translateY(-2px); - box-shadow: 0 15px 35px rgba(74, 144, 226, 0.35); - background: linear-gradient(135deg, #5ba0f2 0%, #7bc6ff 100%); + box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4); } -.home-btn-secondary { - background: rgba(255, 255, 255, 0.05); - color: #ffffff; - border: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); +.action-button.secondary { + background: white; + color: #667eea; + border: 2px solid #667eea; } -.home-btn-secondary:hover { +.action-button.secondary:hover { + background: #667eea; + color: white; transform: translateY(-2px); - background: rgba(255, 255, 255, 0.08); - border-color: rgba(74, 144, 226, 0.3); - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); - color: #4A90E2; + box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); } -.home-btn:active { - transform: translateY(0); -} - -/* Create Station Styles */ -.create-station-container { +/* Create Station Component Styles */ +.create-station { min-height: 100vh; - position: relative; + padding: 20px; display: flex; flex-direction: column; - background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%); -} - -.create-station-container::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: radial-gradient(circle at 30% 20%, rgba(74, 144, 226, 0.1) 0%, transparent 50%), - radial-gradient(circle at 70% 80%, rgba(74, 144, 226, 0.05) 0%, transparent 50%); - pointer-events: none; -} - -.create-station-main { - display: flex; - flex: 1; - padding: 40px; - gap: 60px; - max-width: 1400px; - margin: 0 auto; - width: 100%; - height: 100vh; - align-items: center; - position: relative; - z-index: 1; -} - -/* Create Station Left Section */ -.create-station-left-section { - flex: 1; - display: flex; - align-items: center; - justify-content: center; -} - -.create-station-vinyl-container { - position: relative; -} - -.create-station-vinyl-record { - width: 280px; - height: 280px; - background: radial-gradient(circle, #1a1a1a 30%, #333 31%, #1a1a1a 32%, #333 33%, #1a1a1a 34%); - border-radius: 50%; - position: relative; - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); - animation: spin 6s linear infinite; -} - -.create-station-music-notes { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - pointer-events: none; -} - -.create-station-music-notes .music-note { - position: absolute; - font-size: 24px; - color: #4A90E2; - animation: float 3s ease-in-out infinite; -} - -.create-station-music-notes .note-1 { - top: 20%; - right: -40px; - animation-delay: 0s; -} - -.create-station-music-notes .note-2 { - top: 50%; - right: -60px; - animation-delay: 1s; -} - -.create-station-music-notes .note-3 { - top: 80%; - right: -40px; - animation-delay: 2s; -} - -/* Create Station Right Section */ -.create-station-right-section { - flex: 1; - display: flex; - align-items: center; - justify-content: center; -} - -.create-station-content { - width: 100%; - max-width: 500px; - background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%); - backdrop-filter: blur(20px); - border-radius: 20px; - padding: 40px; - border: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); + 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: 32px; - font-weight: bold; - color: #4A90E2; - margin-bottom: 10px; - text-shadow: 0 2px 10px rgba(74, 144, 226, 0.3); + 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-subtitle { - font-size: 16px; - color: #a0a0a0; - margin: 0; - line-height: 1.5; +.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); } -.create-station-form { - display: flex; - flex-direction: column; - gap: 25px; -} - -.form-group { - display: flex; - flex-direction: column; - gap: 8px; -} - -.form-group label { - font-size: 14px; +.join-method-section h2 { + font-size: 1.4rem; font-weight: 600; - color: #4A90E2; - text-transform: uppercase; - letter-spacing: 1px; + color: #333; + margin-bottom: 30px; + line-height: 1.4; } -.form-group input, -.form-group textarea { - padding: 15px 20px; - background: rgba(255, 255, 255, 0.05); - border: 2px solid rgba(255, 255, 255, 0.1); - border-radius: 12px; - color: #fff; - font-size: 16px; - font-family: inherit; - transition: all 0.3s ease; - resize: none; +.radio-option { + margin-bottom: 24px; } -.form-group input:focus, -.form-group textarea:focus { - outline: none; - border-color: #4A90E2; - background: rgba(255, 255, 255, 0.1); - box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1); -} - -.form-group input::placeholder, -.form-group textarea::placeholder { - color: #aaa; -} - -.form-group input:disabled, -.form-group textarea:disabled { - opacity: 0.6; - cursor: not-allowed; -} - -.error-message { +.radio-option label { display: flex; align-items: center; - gap: 10px; - padding: 12px 16px; - background: rgba(255, 59, 48, 0.1); - border: 1px solid rgba(255, 59, 48, 0.3); - border-radius: 8px; - color: #ff3b30; - font-size: 14px; + 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 { - display: flex; - align-items: center; - justify-content: center; - gap: 12px; - padding: 18px 30px; - font-size: 16px; - font-weight: bold; + 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; - text-transform: uppercase; - letter-spacing: 1px; - min-height: 60px; - background: linear-gradient(135deg, #4A90E2, #6BB6FF); - color: white; - box-shadow: 0 10px 20px rgba(74, 144, 226, 0.3); - margin-top: 10px; + box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3); } .create-station-final-btn:hover:not(:disabled) { - transform: translateY(-3px); - box-shadow: 0 15px 30px rgba(74, 144, 226, 0.4); + transform: translateY(-2px); + box-shadow: 0 12px 35px rgba(40, 167, 69, 0.4); } .create-station-final-btn:disabled { - background: rgba(255, 255, 255, 0.1); - color: #666; + background: #ccc; cursor: not-allowed; - box-shadow: none; transform: none; + box-shadow: none; } -/* Success State */ -.success-state { - text-align: center; - display: flex; - flex-direction: column; - align-items: center; - gap: 20px; -} - -.success-icon { - width: 80px; - height: 80px; - background: linear-gradient(135deg, #34C759, #30D158); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - color: white; - margin-bottom: 10px; - box-shadow: 0 10px 30px rgba(52, 199, 89, 0.3); -} - -.success-state h2 { - font-size: 24px; - color: #4A90E2; - margin: 0; -} - -.success-state p { - color: #a0a0a0; - margin: 0; - line-height: 1.5; -} - -.join-code-display { - display: flex; - align-items: center; - gap: 10px; - padding: 15px 20px; - background: rgba(74, 144, 226, 0.1); - border: 2px solid rgba(74, 144, 226, 0.3); - border-radius: 12px; - margin: 10px 0; -} - -.join-code { - font-family: 'Courier New', monospace; - font-size: 18px; - font-weight: bold; - color: #4A90E2; - letter-spacing: 2px; -} - -.copy-btn { - padding: 8px; - background: rgba(74, 144, 226, 0.2); - border: none; - border-radius: 6px; - color: #4A90E2; - cursor: pointer; - transition: all 0.3s ease; -} - -.copy-btn:hover { - background: rgba(74, 144, 226, 0.3); - transform: scale(1.1); -} - -.go-to-station-btn { - padding: 15px 30px; - background: linear-gradient(135deg, #4A90E2, #6BB6FF); - color: white; - border: none; - border-radius: 12px; - font-size: 16px; - font-weight: 600; - cursor: pointer; - transition: all 0.3s ease; - margin-top: 10px; -} - -.go-to-station-btn:hover { - transform: translateY(-2px); - box-shadow: 0 10px 20px rgba(74, 144, 226, 0.3); -} - -/* Join Station Styles */ -.join-station-container { +/* Join Station Component Styles */ +.join-station { min-height: 100vh; - position: relative; + padding: 20px; display: flex; flex-direction: column; - background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%); -} - -.join-station-container::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: radial-gradient(circle at 30% 20%, rgba(74, 144, 226, 0.1) 0%, transparent 50%), - radial-gradient(circle at 70% 80%, rgba(74, 144, 226, 0.05) 0%, transparent 50%); - pointer-events: none; -} - -.join-station-main { - display: flex; - flex: 1; - padding: 40px; - gap: 60px; - max-width: 1400px; - margin: 0 auto; - width: 100%; - height: 100vh; - align-items: center; - position: relative; - z-index: 1; -} - -/* Join Station Left Section */ -.join-station-left-section { - flex: 1; - display: flex; - align-items: center; - justify-content: center; -} - -.join-station-vinyl-container { - position: relative; -} - -.join-station-vinyl-record { - width: 280px; - height: 280px; - background: radial-gradient(circle, #1a1a1a 30%, #333 31%, #1a1a1a 32%, #333 33%, #1a1a1a 34%); - border-radius: 50%; - position: relative; - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); - animation: spin 6s linear infinite; -} - -.join-station-music-notes { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - pointer-events: none; -} - -.join-station-music-notes .music-note { - position: absolute; - font-size: 24px; - color: #4A90E2; - animation: float 3s ease-in-out infinite; -} - -.join-station-music-notes .note-1 { - top: 20%; - right: -40px; - animation-delay: 0s; -} - -.join-station-music-notes .note-2 { - top: 50%; - right: -60px; - animation-delay: 1s; -} - -.join-station-music-notes .note-3 { - top: 80%; - right: -40px; - animation-delay: 2s; -} - -/* Join Station Right Section */ -.join-station-right-section { - flex: 1; - display: flex; - align-items: center; - justify-content: center; -} - -.join-station-content { - width: 100%; - max-width: 600px; - background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%); - backdrop-filter: blur(20px); - border-radius: 20px; - padding: 40px; - border: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); - max-height: 80vh; - overflow-y: auto; + 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: 32px; - font-weight: bold; - color: #4A90E2; - margin-bottom: 10px; - text-shadow: 0 2px 10px rgba(74, 144, 226, 0.3); -} - -.join-station-subtitle { - font-size: 16px; - color: #a0a0a0; - margin: 0; - line-height: 1.5; -} - -.join-station-body { - display: flex; - flex-direction: column; - gap: 25px; -} - -/* Loading State */ -.loading-state { - display: flex; - flex-direction: column; - align-items: center; - gap: 20px; - padding: 40px 20px; - text-align: center; -} - -.loading-spinner { - width: 40px; - height: 40px; - border: 3px solid rgba(74, 144, 226, 0.2); - border-top: 3px solid #4A90E2; - border-radius: 50%; - animation: spin 1s linear infinite; -} - -.loading-state p { - color: #a0a0a0; - font-size: 16px; -} - -/* Empty State */ -.empty-state { - display: flex; - flex-direction: column; - align-items: center; - gap: 20px; - padding: 40px 20px; - text-align: center; -} - -.empty-icon { - width: 80px; - height: 80px; - background: rgba(74, 144, 226, 0.1); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - color: #4A90E2; - margin-bottom: 10px; -} - -.empty-state h3 { - font-size: 20px; - color: #4A90E2; - margin: 0; -} - -.empty-state p { - color: #a0a0a0; - margin: 0; - line-height: 1.5; - max-width: 300px; -} - -.create-station-btn { - padding: 15px 30px; - background: linear-gradient(135deg, #4A90E2, #6BB6FF); + font-size: 2.2rem; + font-weight: 700; color: white; - border: none; - border-radius: 12px; - font-size: 16px; - font-weight: 600; - cursor: pointer; - transition: all 0.3s ease; - margin-top: 10px; + margin-bottom: 20px; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } -.create-station-btn:hover { - transform: translateY(-2px); - box-shadow: 0 10px 20px rgba(74, 144, 226, 0.3); -} - -/* Stations Grid */ -.stations-grid { - display: flex; - flex-direction: column; - gap: 25px; -} - -.stations-grid h2 { - font-size: 24px; - color: #4A90E2; - margin: 0; - text-align: center; - padding-bottom: 15px; - border-bottom: 2px solid rgba(74, 144, 226, 0.3); -} - -.stations-list { - display: flex; - flex-direction: column; - gap: 15px; - max-height: 400px; - overflow-y: auto; - padding-right: 10px; -} - -.stations-list::-webkit-scrollbar { - width: 6px; -} - -.stations-list::-webkit-scrollbar-track { - background: rgba(255, 255, 255, 0.1); - border-radius: 10px; -} - -.stations-list::-webkit-scrollbar-thumb { - background: #4A90E2; - border-radius: 10px; -} - -/* Station Card */ -.station-card { - display: flex; - align-items: center; - justify-content: space-between; - padding: 20px; - background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 15px; - transition: all 0.3s ease; - cursor: pointer; -} - -.station-card:hover { - background: rgba(255, 255, 255, 0.08); - transform: translateY(-2px); - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); - border-color: rgba(74, 144, 226, 0.3); -} - -.station-info { +.join-station-content { flex: 1; - margin-right: 20px; + 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); } -.station-info h3 { - font-size: 18px; - color: #ffffff; - margin: 0 0 8px 0; +.verify-method-section h2 { + font-size: 1.4rem; font-weight: 600; -} - -.station-description { - font-size: 14px; - color: #a0a0a0; - margin: 0 0 10px 0; + color: #333; + margin-bottom: 30px; line-height: 1.4; } -.station-meta { - display: flex; - gap: 15px; - margin-top: 8px; -} - -.station-id { - font-size: 12px; - color: #4A90E2; - font-family: 'Courier New', monospace; - background: rgba(74, 144, 226, 0.1); - padding: 4px 8px; - border-radius: 6px; -} - -.join-station-btn { - display: flex; - align-items: center; - gap: 8px; - padding: 12px 20px; - background: linear-gradient(135deg, #4A90E2, #6BB6FF); +.join-station-final-btn { + width: 100%; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; - border-radius: 10px; - font-size: 14px; + padding: 18px 32px; + font-size: 1.1rem; font-weight: 600; + border-radius: 12px; cursor: pointer; + margin-top: 40px; transition: all 0.3s ease; - white-space: nowrap; + box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); } -.join-station-btn:hover { - transform: translateY(-1px); - box-shadow: 0 6px 15px rgba(74, 144, 226, 0.4); - background: linear-gradient(135deg, #5ba0f2, #7bc6ff); +.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; } /* Station Page Styles */ .station-page { min-height: 100vh; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); position: relative; - display: flex; - flex-direction: column; - background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%); + overflow-x: hidden; } .animated-background { - position: absolute; + position: fixed; top: 0; left: 0; - right: 0; - bottom: 0; - overflow: hidden; + width: 100%; + height: 100%; pointer-events: none; + z-index: 1; } .star { position: absolute; - width: 2px; - height: 2px; - background: #4A90E2; + background: rgba(255, 255, 255, 0.6); border-radius: 50%; - animation: twinkle 3s ease-in-out infinite; + animation: float 6s ease-in-out infinite; } -.star-1 { top: 10%; left: 10%; animation-delay: 0s; } -.star-2 { top: 20%; left: 80%; animation-delay: 0.5s; } -.star-3 { top: 30%; left: 20%; animation-delay: 1s; } -.star-4 { top: 40%; left: 90%; animation-delay: 1.5s; } -.star-5 { top: 50%; left: 60%; animation-delay: 2s; } -.star-6 { top: 60%; left: 30%; animation-delay: 2.5s; } -.star-7 { top: 70%; left: 70%; animation-delay: 3s; } -.star-8 { top: 80%; left: 15%; animation-delay: 3.5s; } -.star-9 { top: 90%; left: 85%; animation-delay: 4s; } -.star-10 { top: 15%; left: 50%; animation-delay: 4.5s; } +.star:nth-child(odd) { + width: 2px; + height: 2px; + animation-duration: 8s; +} -@keyframes twinkle { - 0%, 100% { opacity: 0; transform: scale(1); } - 50% { opacity: 1; transform: scale(1.2); } +.star:nth-child(even) { + width: 3px; + height: 3px; + animation-duration: 6s; +} + +.star:nth-child(3n) { + width: 1px; + height: 1px; + animation-duration: 10s; +} + +.star-1 { top: 10%; left: 20%; animation-delay: 0s; } +.star-2 { top: 20%; left: 80%; animation-delay: 1s; } +.star-3 { top: 30%; left: 40%; animation-delay: 2s; } +.star-4 { top: 40%; left: 10%; animation-delay: 1.5s; } +.star-5 { top: 50%; left: 70%; animation-delay: 3s; } +.star-6 { top: 60%; left: 30%; animation-delay: 0.5s; } +.star-7 { top: 70%; left: 90%; animation-delay: 2.5s; } +.star-8 { top: 80%; left: 50%; animation-delay: 1.8s; } +.star-9 { top: 15%; left: 60%; animation-delay: 2.2s; } +.star-10 { top: 25%; left: 15%; animation-delay: 3.5s; } +.star-11 { top: 35%; left: 85%; animation-delay: 0.8s; } +.star-12 { top: 45%; left: 25%; animation-delay: 4s; } +.star-13 { top: 55%; left: 75%; animation-delay: 1.2s; } +.star-14 { top: 65%; left: 5%; animation-delay: 2.8s; } +.star-15 { top: 75%; left: 95%; animation-delay: 0.3s; } +.star-16 { top: 85%; left: 35%; animation-delay: 3.2s; } +.star-17 { top: 5%; left: 45%; animation-delay: 1.7s; } +.star-18 { top: 95%; left: 65%; animation-delay: 2.1s; } +.star-19 { top: 12%; left: 2%; animation-delay: 3.8s; } +.star-20 { top: 88%; left: 98%; animation-delay: 0.9s; } + +@keyframes float { + 0%, 100% { + transform: translateY(0px) translateX(0px); + opacity: 0.6; + } + 50% { + transform: translateY(-10px) translateX(5px); + opacity: 1; + } } .station-content { position: relative; - z-index: 1; - padding: 40px; - flex: 1; - display: flex; - flex-direction: column; - max-width: 1200px; + z-index: 2; + padding: 20px; + max-width: 800px; margin: 0 auto; - width: 100%; } .station-header { text-align: center; - margin-bottom: 50px; - padding: 30px; - background: rgba(255, 255, 255, 0.02); - backdrop-filter: blur(20px); - border-radius: 20px; - border: 1px solid rgba(255, 255, 255, 0.1); + margin-bottom: 40px; + padding-top: 40px; } .station-header h1 { - font-size: 36px; - color: #4A90E2; + font-size: 2.5rem; + font-weight: 700; + color: white; margin-bottom: 10px; - text-shadow: 0 2px 10px rgba(74, 144, 226, 0.3); + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .station-subtitle { - font-size: 16px; - color: #a0a0a0; - margin-bottom: 20px; + font-size: 1.1rem; + color: rgba(255, 255, 255, 0.9); + margin: 0; +} + +.media-controls-section { + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + border-radius: 20px; + padding: 30px; + margin-bottom: 30px; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); +} + +.current-song { + text-align: center; + margin-bottom: 25px; +} + +.current-song h3 { + font-size: 1.4rem; + font-weight: 600; + color: #333; + margin-bottom: 5px; +} + +.current-song p { + font-size: 1rem; + color: #666; + margin: 0; +} + +.media-controls { + display: flex; + justify-content: center; + align-items: center; + gap: 20px; +} + +.control-btn { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border: none; + border-radius: 50%; + width: 50px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.3s ease; + color: white; + box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); +} + +.control-btn.play-pause { + width: 60px; + height: 60px; + box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); +} + +.control-btn:hover { + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5); } .songs-section { - flex: 1; - background: rgba(255, 255, 255, 0.02); - backdrop-filter: blur(20px); + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); border-radius: 20px; padding: 30px; - border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); } .section-header { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 30px; - padding-bottom: 15px; - border-bottom: 2px solid rgba(74, 144, 226, 0.3); + margin-bottom: 25px; } .section-header h2 { - font-size: 24px; - color: #4A90E2; + font-size: 1.5rem; + font-weight: 600; + color: #333; + margin: 0; } .add-song-btn { - padding: 12px 24px; - background: linear-gradient(135deg, #4A90E2, #6BB6FF); + background: linear-gradient(135deg, #28a745 0%, #20c997 100%); color: white; border: none; + padding: 12px 20px; border-radius: 10px; - font-size: 14px; + font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; + box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3); } .add-song-btn:hover { transform: translateY(-2px); - box-shadow: 0 8px 20px rgba(74, 144, 226, 0.3); + box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4); } .songs-list { - display: flex; - flex-direction: column; - gap: 15px; + max-height: 400px; + overflow-y: auto; + margin: -5px; + padding: 5px; } -.empty-songs-state { - text-align: center; - padding: 60px 20px; - color: #a0a0a0; +.songs-list::-webkit-scrollbar { + width: 6px; } -.empty-songs-state p { - font-size: 16px; - margin: 0; +.songs-list::-webkit-scrollbar-track { + background: #f1f1f1; + border-radius: 3px; +} + +.songs-list::-webkit-scrollbar-thumb { + background: #c1c1c1; + border-radius: 3px; +} + +.songs-list::-webkit-scrollbar-thumb:hover { + background: #a8a8a8; } .song-item { display: flex; - align-items: center; justify-content: space-between; - padding: 15px; - background: rgba(255, 255, 255, 0.05); + align-items: center; + padding: 15px 20px; border-radius: 12px; - border: 1px solid rgba(255, 255, 255, 0.1); + margin-bottom: 8px; transition: all 0.3s ease; + cursor: pointer; + border: 2px solid transparent; } .song-item:hover { - background: rgba(255, 255, 255, 0.1); - transform: translateY(-2px); + background: rgba(102, 126, 234, 0.05); + border-color: rgba(102, 126, 234, 0.2); } .song-info h4 { - font-size: 16px; - color: white; - margin-bottom: 5px; + font-size: 1rem; + font-weight: 600; + color: #333; + margin: 0 0 4px 0; } .song-info p { - font-size: 14px; - color: #4A90E2; + font-size: 0.9rem; + color: #666; margin: 0; } .song-duration { - font-size: 14px; - color: #ccc; - font-weight: bold; + font-size: 0.9rem; + color: #888; + font-weight: 500; } -/* Login Button Styles */ -.login-status { - display: flex; - align-items: center; - gap: 15px; - font-size: 14px; -} - -.login-status span { - color: #34C759; - font-weight: 600; -} - -.logout-btn { - padding: 8px 16px; - background: rgba(255, 255, 255, 0.1); - color: #fff; - border: 1px solid rgba(255, 255, 255, 0.2); - border-radius: 8px; - font-size: 12px; - cursor: pointer; - transition: all 0.3s ease; -} - -.logout-btn:hover { - background: rgba(255, 255, 255, 0.2); - border-color: rgba(255, 255, 255, 0.3); -} - -.spotify-login-btn { - padding: 12px 24px; - background: #1DB954; - color: white; - border: none; - border-radius: 10px; - font-size: 14px; - font-weight: 600; - cursor: pointer; - transition: all 0.3s ease; -} - -.spotify-login-btn:hover { - background: #1ed760; - transform: translateY(-2px); - box-shadow: 0 8px 20px rgba(29, 185, 84, 0.3); -} - -/* Add Song Modal Styles */ -.add-song-modal-backdrop { +/* Modal Styles */ +.modal-backdrop { position: fixed; top: 0; left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.8); - backdrop-filter: blur(10px); + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; @@ -1397,370 +596,312 @@ body { padding: 20px; } -.add-song-modal-content { - background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 50%, #0a0a0a 100%); +.modal-content { + background: white; border-radius: 20px; - padding: 0; - max-width: 600px; width: 100%; + max-width: 500px; max-height: 80vh; - overflow: hidden; - border: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); + overflow-y: auto; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); } -.add-song-modal-header { +.modal-header { display: flex; justify-content: space-between; align-items: center; - padding: 25px 30px; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); + padding: 25px 30px 20px; + border-bottom: 1px solid #eee; } -.add-song-modal-header h2 { - font-size: 20px; - color: #4A90E2; +.modal-header h2 { + font-size: 1.4rem; + font-weight: 600; + color: #333; margin: 0; } -.add-song-close-btn { +.close-btn { background: none; border: none; - color: #ccc; cursor: pointer; padding: 5px; - border-radius: 5px; + border-radius: 50%; + color: #666; transition: all 0.3s ease; } -.add-song-close-btn:hover { - background: rgba(255, 255, 255, 0.1); - color: #fff; +.close-btn:hover { + background: #f5f5f5; + color: #333; } -.add-song-modal-body { +.modal-body { padding: 30px; } -.add-song-search-container { - margin-bottom: 25px; +.modal-body p { + text-align: center; + color: #666; + font-size: 1rem; + margin: 0; } -.add-song-search-box { - position: relative; - display: flex; - align-items: center; -} - -.search-icon { - position: absolute; - left: 15px; - color: #4A90E2; - z-index: 1; -} - -.add-song-search-box input { - width: 100%; - padding: 15px 20px 15px 50px; - background: rgba(255, 255, 255, 0.05); - border: 2px solid rgba(255, 255, 255, 0.1); - border-radius: 12px; - color: #fff; - font-size: 16px; - transition: all 0.3s ease; -} - -.add-song-search-box input:focus { - outline: none; - border-color: #4A90E2; - background: rgba(255, 255, 255, 0.1); - box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1); -} - -.search-loading { - position: absolute; - right: 15px; -} - -.add-song-results-container { - max-height: 400px; - overflow-y: auto; -} - -.add-song-results-container::-webkit-scrollbar { - width: 6px; -} - -.add-song-results-container::-webkit-scrollbar-track { - background: rgba(255, 255, 255, 0.1); - border-radius: 10px; -} - -.add-song-results-container::-webkit-scrollbar-thumb { - background: #4A90E2; - border-radius: 10px; -} - -.add-song-placeholder { +/* Empty State Styles */ +.empty-songs-state { text-align: center; padding: 40px 20px; - color: #a0a0a0; + color: #666; } -.add-song-placeholder svg { - margin-bottom: 15px; - color: #4A90E2; -} - -.add-song-placeholder p { - margin: 0 0 5px 0; - font-size: 16px; -} - -.placeholder-subtitle { - font-size: 14px !important; - color: #666 !important; -} - -.add-song-error { - text-align: center; - padding: 20px; - background: rgba(255, 59, 48, 0.1); - border: 1px solid rgba(255, 59, 48, 0.3); - border-radius: 10px; - margin-bottom: 20px; -} - -.add-song-error p { - color: #ff3b30; +.empty-songs-state p { + font-size: 1.1rem; margin: 0; - font-size: 14px; + font-style: italic; } -.add-song-results-list { - display: flex; - flex-direction: column; - gap: 10px; -} - -.add-song-result-item { - display: flex; - align-items: center; - padding: 15px; - background: rgba(255, 255, 255, 0.05); - border-radius: 12px; - border: 1px solid rgba(255, 255, 255, 0.1); - transition: all 0.3s ease; -} - -.add-song-result-item:hover { - background: rgba(255, 255, 255, 0.1); - transform: translateY(-1px); -} - -.result-song-cover { - width: 50px; - height: 50px; - border-radius: 8px; - margin-right: 15px; - object-fit: cover; -} - -.result-song-info { - flex: 1; -} - -.result-song-info h4 { - font-size: 14px; - color: white; - margin: 0 0 3px 0; -} - -.result-artist { - font-size: 12px; - color: #4A90E2; - margin: 0 0 2px 0; -} - -.result-album { - font-size: 11px; - color: #aaa; - margin: 0; -} - -.add-song-btn { - display: flex; - align-items: center; - gap: 5px; - padding: 8px 16px; - background: linear-gradient(135deg, #4A90E2, #6BB6FF); - color: white; - border: none; - border-radius: 8px; - font-size: 12px; - font-weight: 600; - cursor: pointer; - transition: all 0.3s ease; - white-space: nowrap; -} - -.add-song-btn:hover { - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4); -} - -/* Responsive Design */ +/* Mobile Responsive Design */ @media (max-width: 768px) { - .desktop-main { - flex-direction: column; - padding: 20px 20px 0 20px; - gap: 30px; - height: auto; + .content { + padding: 30px 20px; + margin: 10px; + border-radius: 20px; } - .left-section { - flex: none; - max-width: none; + .title { + font-size: 2rem; } - .recommendations-container { - height: auto; - min-height: 400px; + .subtitle { + font-size: 1rem; + margin-bottom: 30px; } - .vinyl-record-desktop { - width: 200px; - height: 200px; + .create-station-header { + padding-top: 20px; + margin-bottom: 30px; } - .progress-container { - padding: 15px 20px; - } - - .home-main { - flex-direction: column; - padding: 20px; - gap: 40px; - height: auto; - min-height: 100vh; - } - - .home-content { - padding: 40px 30px; - margin: 20px; - } - - .home-title { - font-size: 32px; - } - - .home-subtitle { - font-size: 15px; - } - - .home-btn { - padding: 16px 28px; - font-size: 15px; - } - - .create-station-main { - flex-direction: column; - padding: 20px; - gap: 40px; - height: auto; - min-height: 100vh; - } - - .create-station-vinyl-record { - width: 200px; - height: 200px; + .create-station-header h1 { + font-size: 1.8rem; } .create-station-content { padding: 30px 20px; - } - - .create-station-header h1 { - font-size: 28px; + border-radius: 20px; + margin: 10px; } .join-method-section h2 { - font-size: 16px; + 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: 15px 25px; - font-size: 14px; + padding: 16px 24px; + font-size: 1rem; } - .add-song-modal-content { - max-width: 100%; - max-height: 90vh; + .join-station-header { + padding-top: 20px; + margin-bottom: 30px; } - .join-station-main { - flex-direction: column; - padding: 20px; - gap: 40px; - height: auto; - min-height: 100vh; - } - - .join-station-vinyl-record { - width: 200px; - height: 200px; + .join-station-header h1 { + font-size: 1.8rem; } .join-station-content { padding: 30px 20px; - max-width: 100%; + border-radius: 20px; + margin: 10px; } - .join-station-header h1 { - font-size: 28px; + .verify-method-section h2 { + font-size: 1.2rem; } - .station-card { + .join-station-final-btn { + padding: 16px 24px; + font-size: 1rem; + } + + .station-content { + padding: 15px; + } + + .station-header { + padding-top: 20px; + margin-bottom: 30px; + } + + .station-header h1 { + font-size: 2rem; + } + + .station-subtitle { + font-size: 1rem; + } + + .media-controls-section { + padding: 25px 20px; + } + + .songs-section { + padding: 25px 20px; + } + + .section-header { flex-direction: column; + align-items: stretch; gap: 15px; - text-align: center; } - .station-info { - margin-right: 0; + .add-song-btn { + align-self: center; + min-width: 120px; } - .join-station-btn { - width: 100%; - justify-content: center; + .song-item { + padding: 12px 15px; + } + + .songs-list { + max-height: 300px; + } + + .modal-header { + padding: 20px 25px 15px; + } + + .modal-body { + padding: 25px; } } @media (max-width: 480px) { - .home-title { - font-size: 28px; + .home-container { + padding: 15px; } - .home-subtitle { - font-size: 14px; + .content { + padding: 25px 15px; } - .home-vinyl-record { - width: 150px; - height: 150px; + .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; + } + + .station-content { + padding: 10px; + } + + .station-header h1 { + font-size: 1.8rem; + } + + .media-controls-section { + padding: 20px 15px; + } + + .songs-section { + padding: 20px 15px; + } + + .control-btn { + width: 45px; + height: 45px; + } + + .control-btn.play-pause { + width: 55px; + height: 55px; + } + + .modal-backdrop { + padding: 15px; + } + + .modal-header { + padding: 15px 20px 10px; + } + + .modal-body { + padding: 20px; + } +} + +/* Larger screens */ +@media (min-width: 1024px) { + .title { + font-size: 3rem; + } + + .subtitle { + font-size: 1.2rem; } .create-station-header h1 { - font-size: 24px; + font-size: 2.5rem; } - .create-station-vinyl-record { - width: 150px; - height: 150px; + .button-container { + flex-direction: row; + justify-content: center; + gap: 20px; } - .password-input-section input { - padding:12px 15px; - font-size: 14px; + .action-button { + min-width: 200px; } -} \ No newline at end of file + + .join-station-header h1 { + font-size: 2.5rem; + } + + .station-header h1 { + font-size: 3rem; + } + + .station-subtitle { + font-size: 1.2rem; + } + + .media-controls { + gap: 30px; + } + + .control-btn { + width: 55px; + height: 55px; + } + + .control-btn.play-pause { + width: 70px; + height: 70px; + } +} diff --git a/frontend/src/screens/AddSongModal.jsx b/frontend/src/screens/AddSongModal.jsx index a6b024f..b4d50bc 100644 --- a/frontend/src/screens/AddSongModal.jsx +++ b/frontend/src/screens/AddSongModal.jsx @@ -1,146 +1,26 @@ -import React, { useState } from 'react'; -import { searchSpotifyTracks, isLoggedIn } from '../utils/spotifyAuth.js'; +import React from 'react'; function AddSongModal({ onClose }) { - const [searchQuery, setSearchQuery] = useState(''); - const [searchResults, setSearchResults] = useState([]); - const [isLoading, setIsLoading] = useState(false); - const [error, setError] = useState(''); - const handleBackdropClick = (e) => { if (e.target === e.currentTarget) { onClose(); } }; - const handleSearch = async (e) => { - const query = e.target.value; - setSearchQuery(query); - setError(''); - - if (query.length > 2) { - if (!isLoggedIn()) { - setError('Please login to Spotify to search for songs'); - return; - } - - setIsLoading(true); - try { - const results = await searchSpotifyTracks(query); - setSearchResults(results); - } catch (err) { - setError(err.message === 'Token expired' ? 'Session expired. Please login again.' : 'Search failed. Please try again.'); - setSearchResults([]); - if (err.message === 'Token expired') { - setTimeout(() => window.location.reload(), 2000); - } - } finally { - setIsLoading(false); - } - } else { - setSearchResults([]); - } - }; - - const handleKeyPress = async (e) => { - if (e.key === 'Enter' && searchQuery.trim() && searchQuery.length > 2) { - if (!isLoggedIn()) { - setError('Please login to Spotify to search for songs'); - return; - } - - setIsLoading(true); - try { - const results = await searchSpotifyTracks(searchQuery); - setSearchResults(results); - setError(''); - } catch (err) { - setError(err.message === 'Token expired' ? 'Session expired. Please login again.' : 'Search failed. Please try again.'); - setSearchResults([]); - } finally { - setIsLoading(false); - } - } - }; - return ( -
-
-
-

Add Song to Station

-
-
-
-
- - - - - {isLoading && ( -
-
-
- )} -
-
- -
- {error && ( -
-

{error}

-
- )} - {searchQuery.length === 0 ? ( -
- - - -

Search for music to add to your station

-

Enter song title, artist, or album name

-
- ) : searchQuery.length <= 2 ? ( -
-

Type at least 3 characters to search

-
- ) : searchResults.length === 0 && !isLoading && !error ? ( -
-

No results found for "{searchQuery}"

-

Try different keywords

-
- ) : ( -
- {searchResults.map(song => ( -
- {`${song.title} -
-

{song.title}

-

{song.artist}

-

{song.album}

-
- -
- ))} -
- )} -
+
+

Song addition functionality coming soon...

diff --git a/frontend/src/screens/CreateStation.jsx b/frontend/src/screens/CreateStation.jsx index dfe8152..4578b30 100644 --- a/frontend/src/screens/CreateStation.jsx +++ b/frontend/src/screens/CreateStation.jsx @@ -1,184 +1,37 @@ import React, { useState } from "react"; import { createStation } from "../utils/StationsCreate"; -import { useNavigate } from "react-router-dom"; + +// I UNDERSTAND THIS!! --Noah function CreateStation() { - const navigate = useNavigate(); const [name, setName] = useState(""); const [description, setDescription] = useState(""); const [joinCode, setJoinCode] = useState(""); - const [isLoading, setIsLoading] = useState(false); - const [error, setError] = useState(""); - const [isCopied, setIsCopied] = useState(false); - const handleCreateStation = async () => { - if (!name.trim() || !description.trim()) { - setError("Please fill in all fields"); - return; - } - - setIsLoading(true); - setError(""); - - try { - const code = await createStation(name, description); - setJoinCode(code); - } catch (error) { - setError(error.message || "Failed to create station"); - } finally { - setIsLoading(false); - } - }; - - const handleGoToStation = () => { - // Navigate to the station or home page - navigate("/"); - }; - - const handleCopyCode = async () => { - try { - await navigator.clipboard.writeText(joinCode); - setIsCopied(true); - // Reset the animation after 2 seconds - setTimeout(() => { - setIsCopied(false); - }, 2000); - } catch (err) { - console.error('Failed to copy: ', err); - } + const handleCreateStation = () => { + setJoinCode(createStation(name, description)); }; return ( -
-
- {/* Left Section - Vinyl Animation */} -
-
-
-
-
-
- - {/* Animated Music Notes */} -
-
-
-
-
-
-
+
+
+

Create a Station on Serena

+
- {/* Right Section - Create Station Form */} -
-
-
-

Create a Station on Serena

-

Start your own collaborative music experience

-
+
+