diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..e6bd83a
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,13 @@
+/credentials.json
+/test.py
+/venv
+/downloads/
+/creds/
+/Test.py
+/prgs/
+/flask_server.log
+/routes/__pycache__/
+/routes/utils/__pycache__/
+/test.sh
+/__pycache__/
+/Dockerfile
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index add3bfe..7759a30 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,4 @@
routes/__pycache__/
routes/utils/__pycache__/
test.sh
+__pycache__/
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..f54814f
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,23 @@
+# Use an official Python runtime as a parent image
+FROM python:3.12-slim
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Install git
+RUN apt-get update && apt-get install -y git
+
+# Copy the requirements file into the container
+COPY requirements.txt .
+
+# Install any needed packages specified in requirements.txt
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the current directory contents into the container at /app
+COPY . .
+
+# Make port 5000 available to the world outside this container
+EXPOSE 7171
+
+# Run app.py when the container launches
+CMD ["python", "app.py"]
\ No newline at end of file
diff --git a/app.py b/app.py
index 9ab27f6..8f05444 100644
--- a/app.py
+++ b/app.py
@@ -46,6 +46,11 @@ def create_app():
def serve_static(path):
return send_from_directory('static', path)
+ # Serve favicon.ico from the same directory as index.html (templates)
+ @app.route('/favicon.ico')
+ def serve_favicon():
+ return send_from_directory('templates', 'favicon.ico')
+
# Add request logging middleware
@app.before_request
def log_request():
@@ -72,6 +77,6 @@ if __name__ == '__main__':
logger.setLevel(logging.INFO)
app = create_app()
- logging.info("Starting Flask server on port 5000")
+ logging.info("Starting Flask server on port 7171")
from waitress import serve
- serve(app, host='0.0.0.0', port=5000)
\ No newline at end of file
+ serve(app, host='0.0.0.0', port=7171)
\ No newline at end of file
diff --git a/static/css/style.css b/static/css/style.css
index 4255d4a..b729cf9 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -142,10 +142,6 @@ body {
transition: transform 0.3s;
}
-.settings-icon:hover {
- transform: rotate(90deg);
-}
-
.sidebar {
position: fixed;
top: 0;
@@ -368,43 +364,61 @@ input:checked + .slider:before {
}
/* Add these styles to your existing CSS */
-/* Download Queue styles */
-#downloadQueue {
+#downloadQueue.sidebar {
position: fixed;
- top: 20px;
- right: 20px;
+ top: 0;
+ right: -350px;
width: 350px;
+ height: 100vh;
background: #181818;
- border-radius: 8px;
- padding: 15px;
- box-shadow: 0 4px 12px rgba(0,0,0,0.3);
- transform: translateX(120%);
- transition: transform 0.3s ease;
- z-index: 1002;
+ padding: 20px;
+ transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ z-index: 1001;
+ box-shadow: -20px 0 30px rgba(0,0,0,0.4);
}
-#downloadQueue.active {
- transform: translateX(0);
+#downloadQueue.sidebar.active {
+ right: 0;
}
.queue-header {
display: flex;
justify-content: space-between;
align-items: center;
- margin-bottom: 15px;
+ padding-bottom: 15px;
+ border-bottom: 1px solid #2a2a2a;
+ margin-bottom: 20px;
}
.queue-title {
- font-size: 18px;
+ font-size: 1.25rem;
font-weight: 600;
+ color: #fff;
+}
+
+.queue-item .title {
+ font-size: 14px;
+ color: #fff;
+}
+
+.queue-item .log {
+ font-size: 12px;
+ color: #b3b3b3;
}
.queue-close {
- background: none;
- border: none;
- color: #b3b3b3;
- cursor: pointer;
- padding: 5px;
+ background: #2a2a2a;
+ border-radius: 50%;
+ width: 32px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: background-color 0.3s ease;
+}
+
+.queue-close:hover {
+ background-color: #333;
}
#queueItems {
@@ -412,12 +426,29 @@ input:checked + .slider:before {
overflow-y: auto;
}
+#queueItems::-webkit-scrollbar {
+ width: 6px;
+}
+
+#queueItems::-webkit-scrollbar-track {
+ background: #181818;
+}
+
+#queueItems::-webkit-scrollbar-thumb {
+ background: #2a2a2a;
+ border-radius: 3px;
+}
+
.queue-item {
background: #2a2a2a;
- padding: 12px;
- margin-bottom: 10px;
- border-radius: 6px;
- transition: transform 0.2s ease;
+ padding: 15px;
+ border-radius: 8px;
+ margin-bottom: 15px;
+ transition: background-color 0.3s ease;
+}
+
+.queue-item:hover {
+ background-color: #333;
}
.queue-item .title {
@@ -982,4 +1013,62 @@ html {
.sidebar.active {
box-shadow: 0 0 30px rgba(0,0,0,0.4);
}
+}
+
+.retry-btn {
+ padding: 4px 12px;
+ margin: 0 8px;
+ background-color: #4CAF50; /* Green color for positive action */
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 0.9em;
+ transition: background-color 0.3s ease;
+}
+
+.retry-btn:hover {
+ background-color: #45a049; /* Darker green on hover */
+}
+
+.retry-btn:active {
+ background-color: #3d8b40;
+ transform: translateY(1px);
+}
+
+/* Close button with matching size */
+.close-btn {
+ padding: 4px 12px; /* Match the retry button's padding */
+ margin: 0 8px; /* Match the retry button's margin */
+ background-color: #ff4444;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 0.9em; /* Match the retry button's font size */
+ transition: background-color 0.3s ease;
+ line-height: 1; /* Ensure the "×" is vertically centered */
+}
+
+.close-btn:hover {
+ background-color: #cc0000;
+}
+
+.close-btn:active {
+ background-color: #b30000;
+ transform: translateY(1px);
+}
+
+.settings-icon img,
+.queue-icon img {
+ width: 24px;
+ height: 24px;
+ vertical-align: middle;
+ filter: invert(1); /* Makes icons white */
+}
+
+/* Optional: Add hover effects */
+.settings-icon:hover img,
+.queue-icon:hover img {
+ opacity: 0.8;
}
\ No newline at end of file
diff --git a/static/images/queue.svg b/static/images/queue.svg
new file mode 100644
index 0000000..25deda1
--- /dev/null
+++ b/static/images/queue.svg
@@ -0,0 +1,7 @@
+
\ No newline at end of file
diff --git a/static/images/settings.svg b/static/images/settings.svg
new file mode 100644
index 0000000..c7596fc
--- /dev/null
+++ b/static/images/settings.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/static/js/app.js b/static/js/app.js
index dc06522..a2306ab 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -48,9 +48,16 @@ document.addEventListener('DOMContentLoaded', () => {
// Settings functionality
settingsIcon.addEventListener('click', () => {
- sidebar.classList.add('active');
- loadCredentials(currentService);
- updateFormFields();
+ if (sidebar.classList.contains('active')) {
+ // Collapse sidebar if already expanded
+ sidebar.classList.remove('active');
+ resetForm();
+ } else {
+ // Expand sidebar and load credentials
+ sidebar.classList.add('active');
+ loadCredentials(currentService);
+ updateFormFields();
+ }
});
closeSidebar.addEventListener('click', () => {
@@ -151,10 +158,6 @@ async function updateAccountSelectors() {
function toggleDownloadQueue() {
const queueSidebar = document.getElementById('downloadQueue');
queueSidebar.classList.toggle('active');
-
- // Update button state
- const queueIcon = document.getElementById('queueIcon');
- queueIcon.textContent = queueSidebar.classList.contains('active') ? '📭' : '📥';
}
function performSearch() {
diff --git a/templates/favicon.ico b/templates/favicon.ico
new file mode 100644
index 0000000..fa67ed9
Binary files /dev/null and b/templates/favicon.ico differ
diff --git a/templates/index.html b/templates/index.html
index 06788fd..4d13abd 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,7 +3,7 @@
- Spotify Search
+ Spotizerr
@@ -58,7 +58,9 @@