basic styling.

api/main.go

@@ -26,6 +26,7 @@ func main() {
 
 		client_id := os.Getenv("SPOTIFY_CLIENT_ID")
 		redirect_uri := "https://cs2440.joshashton.dev/music"
+		//redirect_uri := "http://localhost/music"
 		scope := "user-top-read"
 
 		redirectURL := "https://accounts.spotify.com/authorize?" + strings.Join([]string{

music/core.php

@@ -17,12 +17,13 @@ $content = '';
 foreach ($albums as $album) {
     $content = $content . '
         <tr>
-            <td><a href="' . $album['link'] . '" target="_blank">' . $album['name'] . '</a></td>
+            <td><a style="color: black" href="' . $album['link'] . '" target="_blank">' . $album['name'] . '</a></td>
             <td>' . $album['artist'] . '</td>
         </tr>';
 }
 
 $html = '
+    <h1>My Favorite Albums</h1>
     <table>
         <tr>
             <th>Name</th>

music/css/styles.css

@@ -1 +1,87 @@
+* {
+  margin: 0;
+  padding: 0;
+}
 
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  margin-bottom: 5%;
+}
+
+h1 {
+  font-size: clamp(5vw, 7vw, 10vw);
+}
+
+h3 {
+  font-size: clamp(1vw, 1.5vw, 2vw);
+  text-align: center;
+}
+
+a {
+  color: white;
+}
+
+table {
+  width: 100%;
+}
+
+td {
+  border: 1px solid black;
+  text-align: center;
+  width: 400px;
+  padding: 5%;
+}
+
+.center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+#songs {
+  display: grid;
+  grid-template-columns: 20% 20% 20% 20%;
+  column-gap: 5%;
+  row-gap: 75px;
+
+  width: 80%;
+
+  justify-content: center;
+}
+
+.song_card {
+  padding: 5%;
+  background-color: gray;
+  border-radius: 18px;
+}
+
+.song_card img {
+  margin: 5%;
+  width: 60%;
+  height: auto;
+
+  border: 1px solid black;
+}
+
+#switcher {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 300;
+
+  margin: 3%;
+  padding: 2%;
+  background-color: #E1341E;
+  color: white;
+  font-weight: 1000;
+  font-size: 1.5vw;
+}
+
+#switcher:hover {
+  background-color: #E75D4B;
+}

music/explore.php

@@ -79,6 +79,7 @@ function get_access_token($auth_code, $client_id, $client_secret)
     $data = array(
         'grant_type' => 'authorization_code',
         'code' => $auth_code,
+        // 'redirect_uri' => 'http://localhost/music'
         'redirect_uri' => 'https://cs2440.joshashton.dev/music'
     );
 
@@ -145,6 +146,7 @@ function get_albums($auth_code, $client_id, $client_secret)
                 'album_name' => $song['album']['name'],
                 'album_id' => $song['album']['id'],
                 'artist' => $song['artists'][0]['name'],
+                'artist_id' => $song['artists'][0]['id'],
             );
         }
 
@@ -153,15 +155,21 @@ function get_albums($auth_code, $client_id, $client_secret)
         $song_data = $_SESSION['data'];
     }
 
+    echo '<div class="center">';
+    echo '<h1>Your Favorite Songs</h1>';
+    echo '<div id="songs">';
     foreach ($song_data as $s) {
         echo '
+            <div class="song_card center">
                 <img src="' . $s['image'] . '">
-            <h3>Name: ' . $s['song_name'] . ' - ' . $s['artist'] . '</h3>
+                <h3><a target="_blank" href="https://open.spotify.com/track/' . $s['song_id'] . '">' . $s['song_name'] . '</a></h3>
-            <h4>Album: ' . $s['album_name'] . '</h4>
+                <h4><a target="_blank" href="https://open.spotify.com/artist/' . $s['artist_id'] . '">' . $s['artist'] . '</a></h4>
-            <h6>Song ID: ' . $s['song_id'] . '</h6>
+                <h5><a target="_blank" href="https://open.spotify.com/album/' . $s['album_id'] . '">' . $s['album_name'] . '</a></h5>
-            <h6>Album ID: ' . $s['album_id'] . '</h6>
+            </div>
         ';
     }
+    echo '</div>';
+    echo '</div>';
 }
 
 get_albums($_SESSION['auth_code'], $client_id, $client_secret);

music/index.php

@@ -3,6 +3,7 @@ session_start();
 
 if (!isset($_GET['code'])) {
     header('Location: https://login.joshashton.dev/');
+    // header('Location: http://localhost:9753/');
     exit;
 }
 ?>
@@ -16,8 +17,7 @@ if (!isset($_GET['code'])) {
 </head>
 
 <body>
-    <h1>My Favorite Albums</h1>
+    <button id="switcher" onclick=modeSwitch('core')>Core</button>
-    <button id="switcher" onclick=modeSwitch('core')>Explore</button>
     <div id="content">
     <?php include ('explore.php'); ?>
     </div>