UI overhaul

gokberksahin · Mar 2, 2024 · 3e8fb82 · 3e8fb82
1 parent 9053ac8
commit 3e8fb82
Show file tree

Hide file tree

Showing 14 changed files with 2,595 additions and 57 deletions.
diff --git a/.djlintrc b/.djlintrc
@@ -0,0 +1,3 @@
+{
+    "ignore": "J004"
+}
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,72 @@
+# Git
+.git
+.gitignore
+README.md
+
+# Editor
+.vscode
+
+# Node
+node_modules/
+
+# Python
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+env/
+
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Github actions
+.github/workflows/
diff --git a/.gitignore b/.gitignore
@@ -162,3 +162,9 @@ cython_debug/
 #  and can be added to the global gitignore or merged into this file.  For a more nuclear
 #  option (not recommended) you can uncomment the following to ignore the entire idea folder.
 #.idea/
+
+# Node modules
+node_modules/
+
+# DS_Store files
+.DS_Store
diff --git a/Dockerfile b/Dockerfile
@@ -1,20 +1,22 @@
 FROM python:3.9
 
-WORKDIR /code
+WORKDIR /playlistify
 
 # Requirements
 COPY ./requirements.txt /code/requirements.txt
 RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
 
+# Install Node.js
+RUN apt update && apt install -y nodejs npm
+
 # Copy the fastapi app
-COPY ./app /code/app
+COPY . /playlistify
 
+# Install npm dependencies
+RUN npm install -D tailwindcss daisyui@latest
 # Compile and minify tailwind for production
-RUN curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64
-RUN chmod +x ./tailwindcss-linux-x64
-RUN mv ./tailwindcss-linux-x64 ./tailwindcss
-RUN ./tailwindcss -i /code/app/static/css/input.css -o /code/app/static/css/tailwind.css -c /code/app/tailwind.config.js --minify
+RUN npx tailwindcss -i ./app/static/css/index.css -o ./app/static/css/tailwind.css --minify
 
-WORKDIR /code/app
+WORKDIR /playlistify/app
 
 CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8080", "--proxy-headers"]
diff --git a/app/main.py b/app/main.py
@@ -102,10 +102,9 @@ async def callback(
 def playlist(
     client: Annotated[spotipy.Spotify, Depends(get_spotify_client)],
     sentence: str = Form(...),
-    playlist_name: str = Form(...),
 ):
     me = client.me()
-    playlistfy = Playlistify(me["id"], client, playlist_name, "Playlistfy")
+    playlistfy = Playlistify(me["id"], client, sentence, "Playlistfy")
     playlist = playlistfy.create_playlist(sentence)
     return playlist
 

diff --git a/app/static/css/index.css b/app/static/css/index.css
@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.pixel-button {
+    clip-path: polygon(0 8px,4px 8px,4px 4px,8px 4px,8px 0,calc(100% - 6px) 0,calc(100% - 6px) 3px,calc(100% - 3px) 3px,calc(100% - 3px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 3px) calc(100% - 6px),calc(100% - 3px) calc(100% - 3px),calc(100% - 6px) calc(100% - 3px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 3px),3px calc(100% - 3px),3px calc(100% - 6px),0 calc(100% - 6px))
+}
+
diff --git a/app/static/css/input.css b/app/static/css/input.css
diff --git a/app/static/trade-offer-guy.png b/app/static/trade-offer-guy.png
diff --git a/app/tailwind.config.js b/app/tailwind.config.js
diff --git a/app/templates/index.j2 b/app/templates/index.j2
@@ -3,47 +3,57 @@
     <head>
         <title>Playlistfy</title>
         <meta charset="utf-8">
-        <meta name="description" content="Creates spotify playlists spelling out your sentence">
+        <meta name="description"
+              content="Creates spotify playlists spelling out your sentence">
         <meta name="keywords" content="Spotify,Playlist,Playlistfy">
         <link rel="stylesheet" href="../static/css/tailwind.css">
-    </head>
-    <body class="bg-gray-100 h-screen">
-        <script src="https://unpkg.com/[email protected]" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous" async></script>
+        <script src="https://unpkg.com/[email protected]"
+                integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
+                crossorigin="anonymous"
+                async></script>
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap"
+              rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
+              rel="stylesheet">
         <script src="https://open.spotify.com/embed/iframe-api/v1" async></script>
         <script type="text/javascript" src="static/index.js" defer></script>
-        <div class="container mx-auto p-8">
-            <div class="max-w-md mx-auto bg-white rounded-lg overflow-hidden md:max-w-lg">
-                <div class="md:flex">
-                    <div class="w-full p-4">
-                        <div class="relative">
-                            <h1 class="text-2xl font-bold text-gray-700 mb-2">Welcome to the Home Page</h1>
-                            <form id="sentence-form" action={{ "/playlist" if is_authenticated else "/login" }} method={{ 'post' if is_authenticated else 'get' }} class="pt-2">
-                                <div class="mb-4">
-                                    <label class="block text-gray-700 text-sm font-bold mb-2" for="text_field">Enter a sentence</label>
-                                    <input type="text"
-                                           name="sentence"
-                                           id="text_field"
-                                           class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-4"
-                                           placeholder="Enter a sentence">
-                                    <input type="text"
-                                           name="playlist_name"
-                                           id="text_field"
-                                           class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-                                           placeholder="Enter a name for your playlist">
-                                </div>
-                                <div class="flex justify-end">
-                                    <button type="submit"
-                                            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
-                                        {% if is_authenticated %}
-                                            Submit
-                                        {% else %}
-                                            Log in with Spotify
-                                        {% endif %}
-                                    </button>
-                                </div>
-                            </form>
-                        </div>
+    </head>
+    <body class="max-h-screen">
+        <div class="container mx-auto p-16">
+            <div class="max-w-md overflow-hidden md:max-w-full md:flex my-16">
+                <div class="w-full p-4">
+                    <div class="flex flex-col justify-around items-center">
+                        <img src="static/trade-offer-guy.png"
+                             alt="trade-offer-meme-guy"
+                             class="w-64 h-64 block"
+                             width="128"
+                             height="128">
+                        <hgroup class="flex flex-row justify-around w-full">
+                            <h1 class="text-6xl mb-2 inline-block text-center">i receive:<br>sentence</h1>
+                            <h1 class="text-6xl mb-2 inline-block text-center">you receive:<br>playlist</h1>
+                        </hgroup>
                     </div>
+                    <form id="sentence-form" action={{ "/playlist" if is_authenticated else "/login" }} method={{ 'post' if is_authenticated else 'get' }} class="pt-2">
+                        <div class="mb-4">
+                            <input type="text"
+                                   name="sentence"
+                                   id="text_field"
+                                   class="input input-bordered w-full py-2 px-3 mb-4 pixel-button"
+                                   placeholder="Enter a sentence">
+                        </div>
+                        <div>
+                            <button type="submit"
+                                    class="btn btn-primary rounded-lg pixel-button text-2xl">
+                                {% if is_authenticated %}
+                                    Submit
+                                {% else %}
+                                    Log in with Spotify
+                                {% endif %}
+                            </button>
+                        </div>
+                    </form>
                 </div>
                 <div id="embed-iframe"></div>
             </div>