diff --git a/AddPlaylist.php b/AddPlaylist.php new file mode 100644 index 0000000..7975f45 --- /dev/null +++ b/AddPlaylist.php @@ -0,0 +1,9 @@ +close(); +?> diff --git a/Create Playlist.html b/Create Playlist.html index ccc8bc7..908dc65 100644 --- a/Create Playlist.html +++ b/Create Playlist.html @@ -1,111 +1,39 @@ - - - - - - - - - - - - - - - -

JUKEBOX

-

Create Playlist

- -
-
- - - -
-
- -
-
-
- - - -
-
- -
- -
- -
- -
-
- - -
- -
- - - -
-
- + + + + + + + + + + + +
+

JUKEBOX

+

Create Playlist

+
+ +
+
+
+ +
+
+ + + +
+
+ + \ No newline at end of file diff --git a/Create Playlist.php b/Create Playlist.php new file mode 100644 index 0000000..79baba3 --- /dev/null +++ b/Create Playlist.php @@ -0,0 +1,107 @@ + + + + + + + + + + + + + + + +

JUKEBOX

+

Create Playlist

+ +
Name: +
+
+ +
+
+ + +
+ +
URL: +
+
+ +
+
+ +
+ +
+ +
+ +
+
+ + +
+ +
+ + + +
+
+ + diff --git a/CurrentlyPlaying.php b/CurrentlyPlaying.php new file mode 100644 index 0000000..650c379 --- /dev/null +++ b/CurrentlyPlaying.php @@ -0,0 +1,182 @@ +close(); + +$body = << + + + + + + + + + + + + +
+

JUKEBOX

+

Currently Playing

+
+ +
+
+
+
+ Mic Drop +
+
+ +
+ Up Next + +
+ +
+ +
+
+ +

Room Code: XXXXXX

+ +
+
+ + + +
+
+ + +BODY; + +echo $body; +?> diff --git a/EditPlaylist.php b/EditPlaylist.php new file mode 100644 index 0000000..d53d165 --- /dev/null +++ b/EditPlaylist.php @@ -0,0 +1,140 @@ +close(); + +$body = << + + + + + + + + + + + + + + + +
+

$pName

+

Edit Playlist

+
+ +
Name: +
+
+ +
+
+ + +
+ +
URL: +
+
+ +
+
+ +
+ +
+ +
+ +
+
+ + +
+ +
+ + + +
+
+ + +BODY; + +echo $body; +?> diff --git a/Home.html b/Home.html index 054f73a..6d8b0b4 100644 --- a/Home.html +++ b/Home.html @@ -1,28 +1,34 @@ - - - - - - - - - - -

JUKEBOX

-

Welcome!

- -
- Start Room - Join Room - Manage Playlists -
- -
-
- - - -
-
- - + + + + + + + + +
+

JUKEBOX

+

Welcome!

+
+
+ +
+
+
+ + + +
+
+ + \ No newline at end of file diff --git a/Join Room.html b/Join Room.html index ee53435..1e30341 100644 --- a/Join Room.html +++ b/Join Room.html @@ -1,29 +1,43 @@ - - - - - - - - - - -

JUKEBOX

-

Join a Room

- -
-
- - -
-
- -
-
- - - -
-
- - + + + + + + + + + + + +
+

JUKEBOX

+

Join a Room

+
+ +
+ +
+ +
+ +
+ +
+
+ + + +
+
+ + + \ No newline at end of file diff --git a/Playlists.php b/Playlists.php new file mode 100644 index 0000000..ed6e93a --- /dev/null +++ b/Playlists.php @@ -0,0 +1,37 @@ +close(); + +$top = << +
+

JUKEBOX

+

Playlist

+
+ +
+TOP; + +$bottom = << + +
+ Liked Songs +
+ +
+
+ + + +
+
+ +BOTTOM; + +echo genPage("Playlists", $top.$playlists.$bottom); + +?> diff --git a/Sample Playlist.html b/Sample Playlist.html index 3ebb26c..d83195d 100644 --- a/Sample Playlist.html +++ b/Sample Playlist.html @@ -46,8 +46,8 @@

Playlist A

- - + +
diff --git a/Start Room.html b/Start Room.html index d9dcb51..3e4b1eb 100644 --- a/Start Room.html +++ b/Start Room.html @@ -1,56 +1,72 @@ - - - - - - - - - - -

JUKEBOX

-

Start a Room

- -
-
- - -
-
- -
-
- - -
-
- - -
- - - Start a New Playlist - From Existing Playlist -
- -
-
- - - -
-
- - + + + + + + + + + + + +
+

JUKEBOX

+

Start a Room

+
+ +
+
    +
    +
  • + + +
    • +
    +
    +
  • + + +
    • +
    +
+
+ +
+ +
+
+ + + + +
+ +
+
+ + + +
+
+ + + \ No newline at end of file diff --git a/methods.php b/methods.php new file mode 100644 index 0000000..a1c5f6e --- /dev/null +++ b/methods.php @@ -0,0 +1,94 @@ +connect_error) { + die("Connection failed ".$db->connect_error); + exit(); + } + $db->query("use jb_playlists"); + return $db; +} + +//Creates a playlist with the given name +function createPlaylist($db, $name){ + $query = "create table if not exists `$name` ( Link varchar(256) not null, Title varchar(50) not null, Upvotes int, Downvotes int, TrackNum int ) "; + if (!$db->query($query)){ + echo "Error creating playlist '$name': ".$db->error; + } +} + +//Given a database, will use playlistButton to return the HTML containing all of the playlist buttons +function getPlaylists($db){ + $query = "show tables from jb_playlists"; + $result = $db->query($query); + $output = ""; + + if ($result){ + while($name = mysqli_fetch_row($result)){ + $output .= playlistButton($name[0]); + } + return $output; + }else{ + return ""; + } +} + +//Returns the HTML code for a playlist button with the given name +function playlistButton($name){ + return "$name"; +} + +//Adds a song with the given information to the given playlist on the database +function addSong($db, $playlist, $link, $title){ + $num = playlistLength($db, $playlist); + if ($num == -1){ + echo "Error getting length of playlist $playlist
"; + return; + } + $query = "insert into `$playlist` values ('$link', '$title', 0, 0, $num)"; + if (!$db->query($query)){ + echo "Error adding $title to $playlist: ".$db->error."
"; + } + +} + +function getSongs($db, $playlist){ + $query = "select * from `$playlist` order by TrackNum"; + $result = $db->query($query); + if ($result){ + $output = array(); + while($row = mysqli_fetch_row($result)){ + $output[] = $row; + } + $result->close(); + return $output; + }else{ + echo "Couldn't get songs from $playlist".$db->error; + } +} + +function playlistLength($db, $playlist){ + $query = "select * from `$playlist`"; + $result = $db->query($query); + if ($result){ + return $result->num_rows; + }else{ + echo $db->error; + return -1; + } +} + +function genPage($title, $body){ + return " + + + + + + + + $body + "; +} + +?> diff --git a/style.css b/style.css index 86eb33b..094900a 100644 --- a/style.css +++ b/style.css @@ -1,121 +1,130 @@ body { background-color: #141f1f; -} - -h1 { font-family: arial; - color: white; + color: #e2e2e2; + margin: 0; text-align: center; - font-size: 30px; } -h2 { - font-family: arial; - color: white; - text-align: center; - font-size: 20px; +.container.header h1, +.container.header h2 { + text-align: center; } -h3 { - font-family: arial; - color: white; - text-align: center; - font-size: 18px; +.container.header h1 { + font-size: 50px; + font-style: italic; } -b { - font-family: arial; - color: white; - text-align: center; - font-size: 20px; +.container.header h2 { + font-size: 30px; } -p { - font-family: arial; - font-size: 20px; - color: white; +.container.list { + text-align: center; + max-width: 500px; + width: 100%; + display: block; + margin: 0 auto; } -a.hBox{ - width: 50%; - line-height: 50px; - - border: 2px solid white; - border-radius: 6px; - background-color: #141f1f; - - padding: 0px 15px; - margin: 3px; - - font-family: arial; - color: white; - - text-align: left; - text-decoration: none; - display: inline-block; +.container.list ul { + list-style: none; + padding: 0; } -a.hBox:link, a.hBox:visited { - width: 50%; - line-height: 50px; - - border: 2px solid white; - border-radius: 6px; - background-color: #141f1f; +.container.list li { + border: 1px solid #334e4e; + height: 40px; + margin: 0 20px; + position: relative; + background: #2b4242; + padding-left: 20px; + line-height: 40px; + text-align: left; +} - padding: 0px 15px; - margin: 3px; - - font-family: arial; - color: white; +.container.list.item-list li:hover, +.container.list li:hover a.item { + background: #e2e2e2; + color: #141f1f; + transition: background .1s ease-in-out, color .1s ease-in-out; +} - text-align: left; - text-decoration: none; - display: inline-block; +.container.list a.item { + height: 40px; + width: 100%; + color: white; + text-decoration: none; + display: inline-block; } -a.hBox:hover, a.box:active { - background-color: #283e3e; +.container.list a.item > i { + float: right; + font-size: 30px; + line-height: 40px; + padding-right: 10px; } -a.box:link, a.box:visited { - width: 93%; - line-height: 50px; +.container.form-list input { + background: transparent; + width: 60%; + height: 100%; + float: right; + padding: 0 10px; + border: none; + font-size: 15px; + color: #e2e2e2; + background: #192828; + border-radius: 7px; +} - border: 2px solid white; - border-radius: 6px; - background-color: #141f1f; +.container.form-list input[type="submit"] { + width: 100%; + background: #151919; + border-radius: 7px; + cursor: pointer; +} +.container.form-list input[type="submit"]:hover { + background: #5c6767; +} - padding: 0px 15px; - margin: 3px; +.container.form-list input:focus { + outline: none; +} - font-family: arial; - color: white; +.container.form-list label { + position: absolute; +} - text-align: left; - text-decoration: none; - display: inline-block; +.container.nav i { + font-size: 50px; + padding: 15px; + color: #e2e2e2; } -a.icon:hover, a.box:active { - color: #8ba0a0; +h3 { + font-family: arial; + color: white; + text-align: center; + font-size: 18px; } -a:link, a:visited { - - margin: 3px; - color: white; - text-align: left; - text-decoration: none; - display: inline-block; +b { + font-family: arial; + color: white; + text-align: center; + font-size: 20px; } -a:hover, a:active { - color: #8ba0a0; +p { + font-family: arial; + font-size: 20px; + color: white; } -.nav { +.container.nav { overflow: hidden; background-color: #101b1b; position: fixed; @@ -174,27 +183,6 @@ a:hover, a:active { display: inline-block; } - input, select { - height: 50px; - width: 87%; - max-width: 500px; - line-height: 50px; - - border: 2px solid white; - border-radius: 6px; - background-color: #141f1f; - - padding: 0px 15px; - margin: 3px; - - font-family: arial; - color: white; - - text-align: left; - text-decoration: none; - display: inline-block; -} - .vertical-menu { height: 230px; overflow-y: auto; diff --git a/tester.php b/tester.php new file mode 100644 index 0000000..c899c1d --- /dev/null +++ b/tester.php @@ -0,0 +1,17 @@ +close(); +?>