From 27755af2e02cb28530c67c77203bd4b71396500b Mon Sep 17 00:00:00 2001 From: Tobias Date: Sat, 2 Aug 2025 09:40:34 +0200 Subject: [PATCH] design update --- backend/gradlew | 12 +- backend/gradlew.bat | 6 +- frontend/src/index.css | 1180 ++++++++++++++++++------ frontend/src/screens/CreateStation.jsx | 161 +++- frontend/src/screens/Home.jsx | 24 +- frontend/src/screens/JoinStation.jsx | 82 +- frontend/src/screens/StationPage.jsx | 109 ++- 7 files changed, 1216 insertions(+), 358 deletions(-) diff --git a/backend/gradlew b/backend/gradlew index 23d15a9..1aa94a4 100755 --- a/backend/gradlew +++ b/backend/gradlew @@ -15,8 +15,6 @@ # See the License for the specific language governing permissions and # limitations under the License. # -# SPDX-License-Identifier: Apache-2.0 -# ############################################################################## # @@ -57,7 +55,7 @@ # Darwin, MinGW, and NonStop. # # (3) This script is generated from the Groovy template -# https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt +# https://github.com/gradle/gradle/blob/HEAD/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt # within the Gradle project. # # You can find Gradle at https://github.com/gradle/gradle/. @@ -86,7 +84,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 -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit +APP_HOME=$( cd "${APP_HOME:-./}" > /dev/null && pwd -P ) || exit # Use the maximum available, or set MAX_FD != -1 to use that value. MAX_FD=maximum @@ -114,7 +112,7 @@ case "$( uname )" in #( NONSTOP* ) nonstop=true ;; esac -CLASSPATH="\\\"\\\"" +CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar # Determine the Java command to use to start the JVM. @@ -205,7 +203,7 @@ fi DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' # Collect all arguments for the java command: -# * DEFAULT_JVM_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments, +# * DEFAULT_JVM_OPTS, JAVA_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. @@ -213,7 +211,7 @@ DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' set -- \ "-Dorg.gradle.appname=$APP_BASE_NAME" \ -classpath "$CLASSPATH" \ - -jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \ + org.gradle.wrapper.GradleWrapperMain \ "$@" # Stop when "xargs" is not available. diff --git a/backend/gradlew.bat b/backend/gradlew.bat index db3a6ac..25da30d 100644 --- a/backend/gradlew.bat +++ b/backend/gradlew.bat @@ -13,8 +13,6 @@ @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 ########################################################################## @@ -70,11 +68,11 @@ goto fail :execute @rem Setup the command line -set CLASSPATH= +set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar @rem Execute Gradle -"%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" %* +"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* :end @rem End local scope for the variables with windows NT shell diff --git a/frontend/src/index.css b/frontend/src/index.css index fa303ed..8b51e2a 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -377,161 +377,147 @@ body { box-shadow: 0 0 10px rgba(74, 144, 226, 0.5); } -/* Home Page Styles */ +/* Home Page Styles - Improved */ .home-container { min-height: 100vh; - position: relative; - display: flex; - flex-direction: column; - background: #1a1a1a; -} - -.home-main { - display: flex; - flex: 1; - padding: 40px; - gap: 60px; - max-width: 1400px; - margin: 0 auto; - width: 100%; - height: 100vh; - align-items: center; -} - -/* Home Left Section */ -.home-left-section { - flex: 1; display: flex; align-items: center; justify-content: center; -} - -.home-vinyl-container { + background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%); + padding: 20px; position: relative; } -.home-vinyl-record { - width: 250px; - height: 250px; - 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 8s linear infinite; -} - -.home-music-notes { +.home-container::before { + content: ''; position: absolute; top: 0; left: 0; - width: 100%; - height: 100%; + 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-music-notes .music-note { - position: absolute; - font-size: 20px; - color: #4A90E2; - animation: float 4s ease-in-out infinite; -} - -.home-music-notes .note-1 { - top: 20%; - right: -30px; - animation-delay: 0s; -} - -.home-music-notes .note-2 { - top: 50%; - right: -50px; - animation-delay: 1.5s; -} - -.home-music-notes .note-3 { - top: 80%; - right: -30px; - animation-delay: 3s; -} - -/* Home Right Section */ -.home-right-section { - flex: 1; - display: flex; - align-items: center; - justify-content: center; -} - .home-content { + background: rgba(255, 255, 255, 0.02); + backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.05); + border-radius: 24px; + padding: 60px 50px; text-align: center; + position: relative; + z-index: 1; max-width: 500px; - background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 50%, #0a0a0a 100%); - backdrop-filter: blur(10px); - border-radius: 20px; - padding: 50px 40px; - border: 1px solid rgba(255, 255, 255, 0.1); + width: 100%; + box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3); +} + +.home-header { + margin-bottom: 50px; } .home-title { - font-size: 48px; - font-weight: bold; - color: #4A90E2; + font-size: 42px; + font-weight: 300; + color: #ffffff; margin-bottom: 20px; - text-shadow: 0 2px 10px rgba(74, 144, 226, 0.3); + letter-spacing: -0.5px; + 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; } .home-subtitle { - font-size: 18px; - color: #ccc; - margin-bottom: 40px; + font-size: 16px; + color: #a0a0a0; line-height: 1.6; + font-weight: 300; + max-width: 350px; + margin: 0 auto; } -.home-button-container { +.home-actions { display: flex; flex-direction: column; - gap: 20px; + gap: 16px; } -.home-action-button { +.home-btn { display: flex; align-items: center; justify-content: center; gap: 12px; - padding: 18px 30px; + padding: 18px 32px; font-size: 16px; - font-weight: bold; + font-weight: 500; border: none; border-radius: 12px; cursor: pointer; - transition: all 0.3s ease; - text-transform: uppercase; - letter-spacing: 1px; - min-height: 60px; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + letter-spacing: 0.5px; } -.home-action-button.primary { - background: linear-gradient(135deg, #4A90E2, #6BB6FF); +.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%); color: white; - box-shadow: 0 10px 20px rgba(74, 144, 226, 0.3); + box-shadow: 0 8px 25px rgba(74, 144, 226, 0.25); } -.home-action-button.primary:hover { - transform: translateY(-3px); - box-shadow: 0 15px 30px rgba(74, 144, 226, 0.4); +.home-btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 15px 35px rgba(74, 144, 226, 0.35); + background: linear-gradient(135deg, #5ba0f2 0%, #7bc6ff 100%); } -.home-action-button.secondary { - background: transparent; +.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); +} + +.home-btn-secondary:hover { + 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; - border: 2px solid #4A90E2; - box-shadow: 0 5px 15px rgba(74, 144, 226, 0.2); } -.home-action-button.secondary:hover { - background: rgba(74, 144, 226, 0.1); - transform: translateY(-3px); - box-shadow: 0 10px 25px rgba(74, 144, 226, 0.3); +.home-btn:active { + transform: translateY(0); } /* Create Station Styles */ @@ -540,7 +526,19 @@ body { position: relative; display: flex; flex-direction: column; - background: #1a1a1a; + 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 { @@ -553,6 +551,8 @@ body { width: 100%; height: 100vh; align-items: center; + position: relative; + z-index: 1; } /* Create Station Left Section */ @@ -622,8 +622,8 @@ body { .create-station-content { width: 100%; max-width: 500px; - background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 50%, #0a0a0a 100%); - backdrop-filter: blur(10px); + 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); @@ -643,85 +643,26 @@ body { text-shadow: 0 2px 10px rgba(74, 144, 226, 0.3); } +.create-station-subtitle { + font-size: 16px; + color: #a0a0a0; + margin: 0; + line-height: 1.5; +} + .create-station-form { display: flex; flex-direction: column; - gap: 30px; + gap: 25px; } -.join-method-section h2 { - font-size: 18px; - color: #fff; - margin-bottom: 20px; - font-weight: 600; -} - -.radio-option { - margin-bottom: 20px; -} - -.radio-option label { - display: flex; - align-items: center; - gap: 12px; - cursor: pointer; - padding: 15px 20px; - background: rgba(255, 255, 255, 0.05); - border: 2px solid rgba(255, 255, 255, 0.1); - border-radius: 12px; - transition: all 0.3s ease; - font-size: 16px; - font-weight: 500; - color: #fff; -} - -.radio-option label:hover { - background: rgba(255, 255, 255, 0.1); - border-color: rgba(74, 144, 226, 0.5); -} - -.radio-option input[type="radio"] { - display: none; -} - -.radio-custom { - width: 20px; - height: 20px; - border: 2px solid #4A90E2; - border-radius: 50%; - position: relative; - transition: all 0.3s ease; -} - -.radio-option input[type="radio"]:checked + .radio-custom { - background: #4A90E2; - box-shadow: 0 0 10px rgba(74, 144, 226, 0.5); -} - -.radio-option input[type="radio"]:checked + .radio-custom::after { - content: ''; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 8px; - height: 8px; - background: white; - border-radius: 50%; -} - -.password-input-section { +.form-group { display: flex; flex-direction: column; - gap: 10px; - margin-top: 20px; - padding: 20px; - background: rgba(255, 255, 255, 0.03); - border-radius: 12px; - border: 1px solid rgba(255, 255, 255, 0.1); + gap: 8px; } -.password-input-section label { +.form-group label { font-size: 14px; font-weight: 600; color: #4A90E2; @@ -729,27 +670,50 @@ body { letter-spacing: 1px; } -.password-input-section input { +.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: 10px; + border-radius: 12px; color: #fff; font-size: 16px; + font-family: inherit; transition: all 0.3s ease; + resize: none; } -.password-input-section input:focus { +.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); } -.password-input-section input::placeholder { +.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 { + 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; +} + .create-station-final-btn { display: flex; align-items: center; @@ -768,7 +732,7 @@ body { background: linear-gradient(135deg, #4A90E2, #6BB6FF); color: white; box-shadow: 0 10px 20px rgba(74, 144, 226, 0.3); - margin-top: 20px; + margin-top: 10px; } .create-station-final-btn:hover:not(:disabled) { @@ -784,6 +748,639 @@ body { transform: 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 { + min-height: 100vh; + position: relative; + 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; +} + +.join-station-header { + text-align: center; + margin-bottom: 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); + color: white; + border: none; + border-radius: 12px; + font-size: 16px; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + margin-top: 10px; +} + +.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 { + flex: 1; + margin-right: 20px; +} + +.station-info h3 { + font-size: 18px; + color: #ffffff; + margin: 0 0 8px 0; + font-weight: 600; +} + +.station-description { + font-size: 14px; + color: #a0a0a0; + margin: 0 0 10px 0; + 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); + color: white; + border: none; + border-radius: 10px; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + white-space: nowrap; +} + +.join-station-btn:hover { + transform: translateY(-1px); + box-shadow: 0 6px 15px rgba(74, 144, 226, 0.4); + background: linear-gradient(135deg, #5ba0f2, #7bc6ff); +} + +/* Station Page Styles */ +.station-page { + min-height: 100vh; + position: relative; + display: flex; + flex-direction: column; + background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%); +} + +.animated-background { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: hidden; + pointer-events: none; +} + +.star { + position: absolute; + width: 2px; + height: 2px; + background: #4A90E2; + border-radius: 50%; + animation: twinkle 3s 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; } + +@keyframes twinkle { + 0%, 100% { opacity: 0; transform: scale(1); } + 50% { opacity: 1; transform: scale(1.2); } +} + +.station-content { + position: relative; + z-index: 1; + padding: 40px; + flex: 1; + display: flex; + flex-direction: column; + max-width: 1200px; + 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); +} + +.station-header h1 { + font-size: 36px; + color: #4A90E2; + margin-bottom: 10px; + text-shadow: 0 2px 10px rgba(74, 144, 226, 0.3); +} + +.station-subtitle { + font-size: 16px; + color: #a0a0a0; + margin-bottom: 20px; +} + +.songs-section { + flex: 1; + background: rgba(255, 255, 255, 0.02); + backdrop-filter: blur(20px); + border-radius: 20px; + padding: 30px; + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.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); +} + +.section-header h2 { + font-size: 24px; + color: #4A90E2; +} + +.add-song-btn { + padding: 12px 24px; + background: linear-gradient(135deg, #4A90E2, #6BB6FF); + color: white; + border: none; + border-radius: 10px; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; +} + +.add-song-btn:hover { + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(74, 144, 226, 0.3); +} + +.songs-list { + display: flex; + flex-direction: column; + gap: 15px; +} + +.empty-songs-state { + text-align: center; + padding: 60px 20px; + color: #a0a0a0; +} + +.empty-songs-state p { + font-size: 16px; + margin: 0; +} + +.song-item { + display: flex; + align-items: center; + justify-content: space-between; + 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; +} + +.song-item:hover { + background: rgba(255, 255, 255, 0.1); + transform: translateY(-2px); +} + +.song-info h4 { + font-size: 16px; + color: white; + margin-bottom: 5px; +} + +.song-info p { + font-size: 14px; + color: #4A90E2; + margin: 0; +} + +.song-duration { + font-size: 14px; + color: #ccc; + font-weight: bold; +} + +/* 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 { position: fixed; @@ -792,7 +1389,7 @@ body { right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); - backdrop-filter: blur(8px); + backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; @@ -803,14 +1400,13 @@ body { .add-song-modal-content { background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 50%, #0a0a0a 100%); border-radius: 20px; - width: 100%; + padding: 0; max-width: 600px; + width: 100%; 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); - display: flex; - flex-direction: column; - overflow: hidden; } .add-song-modal-header { @@ -818,42 +1414,32 @@ body { justify-content: space-between; align-items: center; padding: 25px 30px; - border-bottom: 2px solid rgba(74, 144, 226, 0.3); - background: rgba(255, 255, 255, 0.02); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .add-song-modal-header h2 { - font-size: 24px; + font-size: 20px; color: #4A90E2; - font-weight: bold; margin: 0; } .add-song-close-btn { - width: 40px; - height: 40px; + background: none; border: none; - border-radius: 50%; - background: rgba(255, 255, 255, 0.1); - color: #fff; + color: #ccc; cursor: pointer; - display: flex; - align-items: center; - justify-content: center; + padding: 5px; + border-radius: 5px; transition: all 0.3s ease; } .add-song-close-btn:hover { - background: rgba(255, 255, 255, 0.2); - transform: scale(1.1); + background: rgba(255, 255, 255, 0.1); + color: #fff; } .add-song-modal-body { padding: 30px; - flex: 1; - display: flex; - flex-direction: column; - min-height: 0; } .add-song-search-container { @@ -866,7 +1452,7 @@ body { align-items: center; } -.add-song-search-box .search-icon { +.search-icon { position: absolute; left: 15px; color: #4A90E2; @@ -891,52 +1477,43 @@ body { box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1); } -.add-song-search-box input::placeholder { - color: #aaa; -} - .search-loading { position: absolute; right: 15px; - display: flex; - align-items: center; -} - -.loading-spinner { - width: 20px; - height: 20px; - border: 2px solid rgba(74, 144, 226, 0.3); - border-top: 2px solid #4A90E2; - border-radius: 50%; - animation: spin 1s linear infinite; } .add-song-results-container { - flex: 1; - display: flex; - flex-direction: column; - min-height: 300px; - overflow: hidden; + 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 { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - flex: 1; text-align: center; - color: #aaa; - gap: 15px; + padding: 40px 20px; + color: #a0a0a0; } .add-song-placeholder svg { + margin-bottom: 15px; color: #4A90E2; - opacity: 0.6; } .add-song-placeholder p { - margin: 0; + margin: 0 0 5px 0; font-size: 16px; } @@ -945,105 +1522,91 @@ body { 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; + margin: 0; + font-size: 14px; +} + .add-song-results-list { display: flex; flex-direction: column; - gap: 12px; - flex: 1; - overflow-y: auto; - padding-right: 10px; -} - -.add-song-results-list::-webkit-scrollbar { - width: 6px; -} - -.add-song-results-list::-webkit-scrollbar-track { - background: rgba(255, 255, 255, 0.1); - border-radius: 10px; -} - -.add-song-results-list::-webkit-scrollbar-thumb { - background: #4A90E2; - border-radius: 10px; + gap: 10px; } .add-song-result-item { display: flex; align-items: center; padding: 15px; - background: rgba(255, 255, 255, 0.03); + background: rgba(255, 255, 255, 0.05); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; - gap: 15px; } .add-song-result-item:hover { - background: rgba(255, 255, 255, 0.08); + background: rgba(255, 255, 255, 0.1); transform: translateY(-1px); - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .result-song-cover { width: 50px; height: 50px; border-radius: 8px; + margin-right: 15px; object-fit: cover; - flex-shrink: 0; } .result-song-info { flex: 1; - min-width: 0; } .result-song-info h4 { - font-size: 16px; - margin: 0 0 5px 0; + font-size: 14px; color: white; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + margin: 0 0 3px 0; } .result-artist { - font-size: 14px; + font-size: 12px; color: #4A90E2; - margin: 0 0 3px 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + margin: 0 0 2px 0; } .result-album { - font-size: 12px; + font-size: 11px; color: #aaa; margin: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; } .add-song-btn { display: flex; align-items: center; - gap: 8px; - padding: 10px 16px; + gap: 5px; + padding: 8px 16px; background: linear-gradient(135deg, #4A90E2, #6BB6FF); color: white; border: none; border-radius: 8px; - font-size: 14px; + font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; - flex-shrink: 0; + white-space: nowrap; } .add-song-btn:hover { - transform: scale(1.05); - box-shadow: 0 5px 15px rgba(74, 144, 226, 0.4); + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4); } /* Responsive Design */ @@ -1082,26 +1645,22 @@ body { min-height: 100vh; } - .home-vinyl-record { - width: 180px; - height: 180px; - } - .home-content { - padding: 30px 20px; + padding: 40px 30px; + margin: 20px; } .home-title { - font-size: 36px; + font-size: 32px; } .home-subtitle { - font-size: 16px; + font-size: 15px; } - .home-action-button { - padding: 15px 25px; - font-size: 14px; + .home-btn { + padding: 16px 28px; + font-size: 15px; } .create-station-main { @@ -1138,6 +1697,43 @@ body { max-width: 100%; max-height: 90vh; } + + .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-content { + padding: 30px 20px; + max-width: 100%; + } + + .join-station-header h1 { + font-size: 28px; + } + + .station-card { + flex-direction: column; + gap: 15px; + text-align: center; + } + + .station-info { + margin-right: 0; + } + + .join-station-btn { + width: 100%; + justify-content: center; + } } @media (max-width: 480px) { diff --git a/frontend/src/screens/CreateStation.jsx b/frontend/src/screens/CreateStation.jsx index 80fbb32..dfe8152 100644 --- a/frontend/src/screens/CreateStation.jsx +++ b/frontend/src/screens/CreateStation.jsx @@ -1,15 +1,51 @@ import React, { useState } from "react"; import { createStation } from "../utils/StationsCreate"; - -// I UNDERSTAND THIS!! --Noah +import { useNavigate } from "react-router-dom"; 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 = () => { - setJoinCode(createStation(name, description)); + 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); + } }; return ( @@ -37,25 +73,112 @@ function CreateStation() {

Create a Station on Serena

+

Start your own collaborative music experience

-
-