Merge branch 'main' into Refresh

README.md

@@ -27,6 +27,7 @@ Once you have created your app, change the `client_id` and `client_secret` value
 
 In order to run the app, open the folder, and run its `app.js` file:
 
+    $ cd receiptifyv1
     $ node app.js
 
 Then, open `http://localhost:3000` in a browser.
@@ -45,6 +46,9 @@ A user on the same network the app is hosted on can put the host's IP and port n
 
 The first person will click the "Create Session" button and log into their Spotify account. A Session ID will appear on the top of their receipt.
 
-Other users can then click "Join Session" and after entering the shared Session ID, they can log into their Spotify accounts and view the receipt.
+Other users can then click "Join Session" and after entering the shared Session ID, they can log into their Spotify accounts and view the receipt. 
 
+After refreshing the page, checkboxes will appear next to each joined user's name indicating which Spotify accounts data will be included. You can pick from viewing Top Tracks, Top Artists, Stats, and Top Genres (CURRENTLY ONLY WORKS FOR TOP ARTISTS, TRACKS, AND STATS). You can also change the time period data is drawn from and length of receipt. Under the receipt, you can download the image or open it in a new tab.
 
+
+<img width="764" alt="Screenshot 2024-04-17 at 9 45 04 AM" src="https://github.com/cis3296s24/receiptify-split-the-bill/assets/143619402/f9875fce-31c0-4877-b5a8-0a2dc279ef25">

receiptifyv1/app.js

@@ -27,8 +27,8 @@ const cors = require('cors');
 require('dotenv').config();
 
 
-const client_id = 'ed86dba0999b415e8c50d26b13fb29f8';
-const client_secret = 'f1421f43be4644dca0076e500d9ed0a6';
+const client_id = '035844db2ccb4d0698ab8e14bb12f27a';
+const client_secret = '8bfd5a9fa7a44aedbf8bf8f513236b4f';
 //const privateKey = fs.readFileSync('AuthKey_A8FKGGUQP3.p8').toString();
 const teamId = process.env.teamId;
 const keyId = process.env.keyId;

receiptifyv1/public/index.html

@@ -232,7 +232,7 @@ <h2>Top Track Generator</h2>
                 </div>
               </div>
               <div class="customize">
-                <!-- Somewhere here add the checkbox-->
+
 
                 <div class="mobile-ad"><div id="home_header"></div></div>
                 <p class="customize-header">Customize Receipt</p>
@@ -257,10 +257,10 @@ <h2>Top Track Generator</h2>
                     <option value="artists">Top Artists</option>
                     <option value="genres">Top Genres</option>
                     <option value="stats">Stats</option>
-                    <option value="show-search">Search Albums</option>
-                    <option value="build-receipt">
+                    <!--<option value="show-search">Search Albums</option>-->
+                    <!--<option value="build-receipt">
                       Build Custom Receipt [NEW]
-                    </option>
+                    </option>-->
                   </select>
                 </form>
                 <p id="options-header">Time Period</p>
@@ -506,7 +506,7 @@ <h2 class='logo'>
           <div class='under'>
             <button class='time-btn' id='download'>Download Image</button>
             <button class='time-btn' id='new-tab'>View in New Tab <span class="new-feature">NEW</span></button>
-            <button class='time-btn' id='save-playlist'>Save as Playlist <span class="new-feature">NEW</span></button>
+            <!--<button class='time-btn' id='save-playlist'>Save as Playlist <span class="new-feature">NEW</span></button>-->
           </div>
         </script>
         <!-- footer -->
@@ -520,7 +520,7 @@ <h2 class='logo'>
           </div>
           <br />
           <p class="info">
-            Made by <a href="https://michellexliu.me/">Michelle Liu</a>
+            Inspired by <a href="https://receiptify.herokuapp.com/">Receiptify</a> by <a href="https://michellexliu.me/">Michelle Liu</a>
           </p>
           <p class="info">
             <a href="index.html">Home</a> | <a href="about.html">About</a> |