diff --git a/appinfo/info.xml b/appinfo/info.xml
index 90b07f2..59bcfea 100755
--- a/appinfo/info.xml
+++ b/appinfo/info.xml
@@ -3,8 +3,11 @@
radio
Radio
Listening to your favorite radio stations in NextCloud
- 0.1
+ 0.2
MIT
Jonas Heinrich
- 9
+
+
+
+
diff --git a/css/main.css b/css/main.css
index 936fba6..bed79ab 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,41 +1,768 @@
-* {
- box-sizing: border-box;
- -webkit-box-sizing:border-box;
- -moz-box-sizing: border-box;
+/* SETTINGS */
+#files-setting-showhidden {
+ padding-bottom: 8px;
}
-#radiocontainer {
- width: 100%;
- padding: 20px;
+/* FILE TABLE */
+#filestable {
+ position: relative;
+ width: 100%;
}
-#radioquery {
- width: 100%;
- margin-bottom: 20px;
+/* make sure there's enough room for the file actions */
+#body-user #filestable {
+ min-width: 688px; /* 768 (mobile break) - 80 (nav width) */
+}
+#body-user #controls {
+ min-width: 688px; /* 768 (mobile break) - 80 (nav width) */
}
-table {
- width: 100%;
+#filestable tbody tr {
+ background-color: #fff;
+ height: 51px;
}
-td{
- border-right: none;
- border-left: none;
+/* fit app list view heights */
+.app-files #app-content>.viewcontainer {
+ min-height: 0%;
}
-tr{
- padding: 5px;
+.app-files #app-content {
+ transition: background-color 0.3s ease;
+ overflow-x: hidden;
}
-tr:hover {
- background-color: edeff2;
- transition: all 0.1s ease;
+/* icons for sidebar */
+.nav-icon-files {
+ background-image: url('../img/folder.svg?v=1');
+}
+.nav-icon-recent {
+ background-image: url('../img/recent.svg?v=1');
+}
+.nav-icon-favorites {
+ background-image: url('../img/star.svg?v=1');
+}
+.nav-icon-sharingin,
+.nav-icon-sharingout {
+ background-image: url('../img/share.svg?v=1');
+}
+.nav-icon-sharinglinks {
+ background-image: url('../img/public.svg?v=1');
+}
+.nav-icon-extstoragemounts {
+ background-image: url('../img/external.svg?v=1');
+}
+.nav-icon-trashbin {
+ background-image: url('../img/delete.svg?v=1');
}
-img.fav:hover {
- display:none;
+#app-navigation .nav-files a.nav-icon-files {
+ width: auto;
+}
+/* button needs overrides due to navigation styles */
+#app-navigation .nav-files a.new {
+ width: 40px;
+ height: 32px;
+ padding: 0 10px;
+ margin: 0;
+ cursor: pointer;
}
-img.homepage:hover {
- display:none;
+#app-navigation .nav-files a.new.hidden {
+ display: none;
+}
+
+#app-navigation .nav-files a.new.disabled {
+ opacity: 0.3;
+}
+
+#filestable tbody tr {
+ transition: background-color 0.3s ease;
+ background-color: #fff;
+ height: 40px;
+}
+#filestable tbody tr:hover,
+#filestable tbody tr:focus,
+#filestable tbody .name:focus,
+#filestable tbody tr:active,
+#filestable tbody tr.highlighted,
+#filestable tbody tr.highlighted .name:focus,
+#filestable tbody tr.selected,
+#filestable tbody tr.searchresult,
+table tr.mouseOver td {
+ transition: background-color 0.3s ease;
+ background-color: #f8f8f8;
+}
+tbody a { color:#000; }
+
+span.conflict-path, span.extension, span.uploading, td.date {
+ color: #999;
+}
+span.conflict-path, span.extension {
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+ filter: alpha(opacity=70);
+ opacity: .7;
+ -webkit-transition: opacity 300ms;
+ -moz-transition: opacity 300ms;
+ -o-transition: opacity 300ms;
+ transition: opacity 300ms;
+ vertical-align: top;
+}
+tr:hover span.conflict-path,
+tr:focus span.conflict-path,
+tr:hover span.extension,
+tr:focus span.extension {
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+ filter: alpha(opacity=100);
+ opacity: 1;
+ color: #777;
+}
+
+table th, table th a {
+ color: #999;
+}
+table.multiselect th a {
+ color: #000;
+}
+table th .columntitle {
+ display: block;
+ padding: 15px;
+ height: 50px;
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ vertical-align: middle;
+}
+table th .columntitle.name {
+ padding-left: 5px;
+ padding-right: 80px;
+ margin-left: 100px;
+}
+
+table th,
+table td {
+ border-bottom: 1px solid #eee;
+ text-align: left;
+ font-weight: normal;
+}
+table td {
+ padding: 0 15px;
+ font-style: normal;
+ background-position: 8px center;
+ background-repeat: no-repeat;
+}
+table th#headerName {
+ position: relative;
+ width: 9999px; /* not really sure why this works better than 100% … table styling */
+ padding: 0;
+}
+
+#headerName-container {
+ position: relative;
+ height: 50px;
+}
+.has-favorites #headerName-container {
+ padding-left: 50px;
+}
+
+table th#headerSize, table td.filesize {
+ text-align: right;
+}
+table th#headerDate, table td.date,
+table th.column-last, table td.column-last {
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ position: relative;
+ /* this can not be just width, both need to be set … table styling */
+ min-width: 130px;
+ max-width: 130px;
+}
+
+/* Multiselect bar */
+#filestable.multiselect {
+ top: 95px;
+}
+table.multiselect thead {
+ position: fixed;
+ top: 89px;
+ z-index: 10;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ left: 250px; /* sidebar */
+}
+
+table thead th {
+ background-color: #fff;
+}
+table.multiselect thead th {
+ background-color: rgba(255, 255, 255, 0.95); /* like controls bar */
+ color: #000;
+ font-weight: bold;
+ border-bottom: 0;
+}
+
+#app-content.with-app-sidebar table.multiselect thead{
+ margin-right: 27%;
+}
+
+table.multiselect #headerName {
+ position: relative;
+ width: 9999px; /* when we use 100%, the styling breaks on mobile … table styling */
+}
+table.multiselect #modified {
+ display: none;
+}
+
+table td.selection,
+table th.selection,
+table td.fileaction {
+ width: 32px;
+ text-align: center;
+}
+table td.filename a.name {
+ position:relative; /* Firefox needs to explicitly have this default set … */
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ display: block;
+ height: 50px;
+ line-height: 50px;
+ padding: 0;
+}
+table td.filename .thumbnail {
+ display: inline-block;
+ width: 32px;
+ height: 32px;
+ margin-left: 8px;
+ margin-top: 9px;
+ cursor: pointer;
+ float: left;
+ position: absolute;
+ z-index: 4;
+}
+table td.filename input.filename {
+ width: 70%;
+ margin-top: 9px;
+ margin-left: 48px;
+ cursor: text;
+}
+.has-favorites table td.filename input.filename {
+ margin-left: 52px;
+}
+
+table td.filename a, table td.login, table td.logout, table td.download, table td.upload, table td.create, table td.delete { padding:3px 8px 8px 3px; }
+table td.filename .nametext, .uploadtext, .modified, .column-last>span:first-child { float:left; padding:15px 0; }
+
+.modified, .column-last>span:first-child {
+ position: relative;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ width: 110px;
+}
+
+/* TODO fix usability bug (accidental file/folder selection) */
+table td.filename .nametext {
+ position: absolute;
+ left: 105px;
+ padding: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 800px;
+ height: 100%;
+}
+.has-favorites #fileList td.filename a.name {
+ left: 50px;
+ margin-right: 50px;
+}
+
+.hide-hidden-files #fileList tr.hidden-file,
+.hide-hidden-files #fileList tr.hidden-file.dragging {
+ display: none;
+}
+
+#fileList tr.animate-opacity {
+ -webkit-transition:opacity 250ms;
+ -moz-transition:opacity 250ms;
+ -o-transition:opacity 250ms;
+ transition:opacity 250ms;
+}
+#fileList tr.dragging {
+ opacity: 0.2;
+}
+
+table td.filename .nametext .innernametext {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ position: relative;
+ display: inline-block;
+ vertical-align: top;
+}
+
+@media only screen and (min-width: 1500px) {
+ table td.filename .nametext .innernametext {
+ max-width: 790px;
+ }
+ .with-app-sidebar table td.filename .nametext .innernametext {
+ max-width: 390px;
+ }
+}
+@media only screen and (min-width: 1366px) and (max-width: 1500px) {
+ table td.filename .nametext .innernametext {
+ max-width: 660px;
+ }
+ .with-app-sidebar table td.filename .nametext .innernametext {
+ max-width: 290px;
+ }
+}
+@media only screen and (min-width: 1200px) and (max-width: 1366px) {
+ table td.filename .nametext .innernametext {
+ max-width: 500px;
+ }
+ .with-app-sidebar table td.filename .nametext .innernametext {
+ max-width: 230px;
+ }
+}
+@media only screen and (min-width: 1100px) and (max-width: 1200px) {
+ table td.filename .nametext .innernametext {
+ max-width: 400px;
+ }
+ .with-app-sidebar table td.filename .nametext .innernametext {
+ max-width: 230px;
+ }
+}
+@media only screen and (min-width: 1000px) and (max-width: 1100px) {
+ table td.filename .nametext .innernametext {
+ max-width: 310px;
+ }
+ .with-app-sidebar table td.filename .nametext .innernametext {
+ max-width: 230px;
+ }
+}
+@media only screen and (min-width: 768px) and (max-width: 1000px) {
+ table td.filename .nametext .innernametext {
+ max-width: 240px;
+ }
+ .with-app-sidebar table td.filename .nametext .innernametext {
+ max-width: 230px;
+ }
+}
+
+/* for smaller resolutions - see mobile.css */
+
+table td.filename .uploadtext {
+ font-weight: normal;
+ margin-left: 55px;
+ margin-top: 5px;
+ height: 20px;
+ padding: 10px 0;
+ font-size: 11px;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+ filter: alpha(opacity=50);
+ opacity: .5;
+}
+
+.ie8 input[type="checkbox"]{
+ padding: 0;
+}
+
+/* File checkboxes */
+html:not(.ie8) #fileList tr td.filename>.selectCheckBox + label:before {
+ opacity: 0;
+ position: absolute;
+ bottom: 4px;
+ right: 0;
+ z-index: 10;
+}
+html.ie8 #fileList tr td.filename>.selectCheckBox {
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ opacity: 0;
+ float: left;
+ top: 0;
+ margin: 32px 0 4px 32px; /* bigger clickable area doesn’t work in FF width:2.8em; height:2.4em;*/
+}
+
+/* Show checkbox when hovering, checked, or selected */
+html.ie8 #fileList tr:hover td.filename>.selectCheckBox,
+html.ie8 #fileList tr:focus td.filename>.selectCheckBox,
+html.ie8 #fileList tr td.filename>.selectCheckBox:checked,
+html.ie8 #fileList tr.selected td.filename>.selectCheckBox,
+html:not(.ie8) #fileList tr:hover td.filename>.selectCheckBox + label:before,
+html:not(.ie8) #fileList tr:focus td.filename>.selectCheckBox + label:before,
+html:not(.ie8) #fileList tr td.filename>.selectCheckBox:checked + label:before,
+html:not(.ie8) #fileList tr.selected td.filename>.selectCheckBox + label:before {
+ opacity: 1;
+}
+html.ie8 #fileList tr:hover td.filename>.selectCheckBox,
+html.ie8 #fileList tr:focus td.filename>.selectCheckBox,
+html.ie8 #fileList tr td.filename>.selectCheckBox[checked=checked],
+html.ie8 #fileList tr.selected td.filename>.selectCheckBox {
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+ filter: alpha(opacity=100);
+}
+
+/* Use label to have bigger clickable size for checkbox */
+#fileList tr td.filename>.selectCheckBox + label,
+.select-all + label {
+ background-position: 30px 30px;
+ height: 50px;
+ position: absolute;
+ width: 50px;
+ z-index: 5;
+}
+#fileList tr td.filename>.selectCheckBox {
+ /* sometimes checkbox height is bigger (KDE/Qt), so setting to absolute
+ * to prevent it to increase the height */
+ position: absolute;
+ z-index: 10;
+}
+.select-all + label {
+ top: 0;
+}
+.ie8 .select-all,
+.select-all + label:before {
+ position: absolute;
+ top: 18px;
+ left: 18px;
+ z-index: 10;
+}
+.has-favorites .select-all {
+ left: 68px;
+}
+
+#fileList tr td.filename {
+ position: relative;
+ width: 100%;
+ padding-left: 0;
+ padding-right:0;
+ -webkit-transition:background-image 500ms; -moz-transition:background-image 500ms; -o-transition:background-image 500ms; transition:background-image 500ms;
+}
+
+#fileList tr td.filename a.name label {
+ position: absolute;
+ width: 80%;
+ height: 50px;
+}
+
+#fileList tr td.filename .favorite {
+ display: inline-block;
+ float: left;
+}
+#fileList tr td.filename .action-favorite {
+ display: block;
+ float: left;
+ width: 30px;
+ line-height: 100%;
+ text-align: center;
+}
+
+#uploadsize-message,#delete-confirm { display:none; }
+
+/* File actions */
+.fileactions {
+ position: absolute;
+ right: 0;
+}
+
+.busy .fileactions, .busy .action {
+ visibility: hidden;
+}
+
+/* fix position of bubble pointer for Files app */
+.bubble,
+#app-navigation .app-navigation-entry-menu {
+ border-top-right-radius: 3px;
+ min-width: 100px;
+}
+
+/* force show the loading icon, not only on hover */
+#fileList .icon-loading-small {
+ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+ filter:alpha(opacity=100);
+ opacity: 1 !important;
+ display: inline !important;
+}
+
+#fileList img.move2trash { display:inline; margin:-8px 0; padding:16px 8px 16px 8px !important; float:right; }
+
+#fileList .action.action-share-notification span, #fileList a.name {
+ cursor: default !important;
+}
+
+a.action > img {
+ height: 16px;
+ width: 16px;
+ vertical-align: text-bottom;
+}
+
+/* Actions for selected files */
+.selectedActions {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+.selectedActions a {
+ display: inline;
+ font-size: 11px;
+ line-height: 50px;
+ padding: 18px 5px;
+}
+.selectedActions a.delete-selected {
+ padding-right: 15px;
+}
+.selectedActions a.hidden {
+ display: none;
+}
+.selectedActions a img {
+ position:relative;
+ vertical-align: text-bottom;
+ margin-bottom: -1px;
+}
+
+html.ie8 .column-mtime .selectedActions {
+ top: -95px;
+}
+
+#fileList a.action {
+ display: inline;
+ padding: 17px 8px;
+ line-height: 50px;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ opacity: 0;
+ display:none;
+}
+#fileList a.action.action-share {
+ padding: 17px 14px;
+}
+
+#fileList a.action.action-menu {
+ padding-top: 17px;
+ padding-bottom: 17px;
+ padding-left: 14px;
+ padding-right: 14px;
+}
+
+.ie8 #fileList a.action img,
+#fileList tr:hover a.action,
+#fileList a.action.permanent,
+#fileList tr:focus a.action,
+#fileList a.action.permanent,
+#fileList tr:hover a.action.no-permission:hover,
+#fileList tr:focus a.action.no-permission:focus,
+/*#fileList .name:focus .action,*/
+/* also enforce the low opacity for disabled links that are hovered/focused */
+.ie8 #fileList a.action.disabled:hover img,
+#fileList tr:hover a.action.disabled:hover,
+#fileList tr:focus a.action.disabled:focus,
+#fileList .name:focus a.action.disabled:focus,
+#fileList a.action.disabled img {
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
+ filter: alpha(opacity=30);
+ opacity: .3;
+}
+.ie8 #fileList a.action:hover img,
+#fileList tr a.action.disabled.action-download,
+#fileList tr:hover a.action.disabled.action-download:hover,
+#fileList tr:focus a.action.disabled.action-download:focus,
+#fileList tr:hover a.action:hover,
+#fileList tr:focus a.action:focus,
+#fileList .name:focus a.action:focus {
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+ filter: alpha(opacity=70);
+ opacity: .7;
+ display:inline;
+}
+#fileList tr a.action.disabled {
+ background: none;
+}
+
+/* show share action of shared items darker to distinguish from non-shared */
+#fileList a.action.action-share.permanent.shared-style,
+/* show hovered permanent entries darker */
+#fileList tr a.action.action.permanent:hover,
+#fileList tr a.action.action.permanent:focus {
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)" !important;
+ filter: alpha(opacity=70) !important;
+ opacity: .7 !important;
+ display:inline;
+}
+/* always show actions on mobile, not only on hover */
+#fileList a.action.permanent {
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)" !important;
+ filter: alpha(opacity=30) !important;
+ opacity: .3 !important;
+ display: inline !important;
+}
+
+/* properly display actions in the popover menu */
+#fileList .popovermenu .action {
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
+ filter: alpha(opacity=50) !important;
+ opacity: .5 !important;
+}
+#fileList .popovermenu .action:hover,
+#fileList .popovermenu .action:focus {
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
+ filter: alpha(opacity=100) !important;
+ opacity: 1 !important;
+}
+
+
+#selectedActionsList a.download.disabled,
+#fileList tr a.action.action-download.disabled {
+ color: #000000;
+}
+
+#fileList tr:hover a.action.disabled:hover * {
+ cursor: default;
+}
+
+.summary {
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
+ filter: alpha(opacity=30);
+ opacity: .3;
+ /* add whitespace to bottom of files list to correctly show dropdowns */
+ height: 300px;
+}
+.summary:hover,
+.summary:focus,
+.summary,
+table tr.summary td {
+ background-color: transparent;
+}
+.summary td {
+ border-bottom: none;
+ vertical-align: top;
+ padding-top: 20px;
+}
+.summary .info {
+ margin-left: 40px;
+}
+.has-favorites .summary .info {
+ margin-left: 90px;
+}
+
+table.dragshadow {
+ width:auto;
+}
+table.dragshadow td.filename {
+ padding-left:60px;
+ padding-right:16px;
+ height: 36px;
+}
+table.dragshadow td.size {
+ padding-right:8px;
+}
+#upgrade {
+ width: 400px;
+ position: absolute;
+ top: 200px;
+ left: 50%;
+ text-align: center;
+ margin-left: -200px;
+}
+.mask {
+ z-index: 50;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #fff;
+ background-repeat: no-repeat no-repeat;
+ background-position: 50%;
+ opacity: 0.7;
+ filter: alpha(opacity=70);
+ transition: opacity 100ms;
+ -moz-transition: opacity 100ms;
+ -o-transition: opacity 100ms;
+ -ms-transition: opacity 100ms;
+ -webkit-transition: opacity 100ms;
+}
+.mask.transparent{
+ opacity: 0;
+}
+
+#fileList .popovermenu a.action img {
+ padding: initial;
+}
+
+html.ie8 #controls .button.new {
+ padding-right: 0;
+}
+
+.newFileMenu {
+ width: 200px;
+ margin-left: -56px;
+ margin-top: 25px;
+ z-index: 1001;
+}
+
+.newFileMenu .menuitem {
+ white-space: nowrap;
+ overflow: hidden;
+}
+.newFileMenu.popovermenu a.menuitem,
+.newFileMenu.popovermenu label.menuitem,
+.newFileMenu.popovermenu .menuitem {
+ padding: 0;
+ margin: 0;
+}
+
+.newFileMenu.popovermenu a.menuitem.active {
+ opacity: 1;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+ filter: alpha(opacity=100);
+}
+
+.newFileMenu.bubble:after {
+ left: 75px;
+ right: auto;
+}
+.newFileMenu.bubble:before {
+ left: 75px;
+ right: auto;
+}
+
+.newFileMenu .filenameform {
+ display: inline-block;
+}
+
+.newFileMenu .filenameform input {
+ width: 100%;
+ box-sizing: border-box;
+ margin: -2px 0;
+}
+
+#fileList .popovermenu .action {
+ color: #000;
+}
+
+#filestable .filename .action .icon,
+#filestable .selectedActions a .icon,
+#controls .actions .button .icon {
+ display: inline-block;
+ vertical-align: middle;
+ background-size: 16px 16px;
+}
+
+#filestable .filename .action .icon.hidden,
+#filestable .selectedActions a .icon.hidden,
+#controls .actions .button .icon.hidden {
+ display: none;
+}
+
+#filestable .filename .action .icon.loading,
+#filestable .selectedActions a .icon.loading,
+#controls .actions .button .icon.loading {
+ width: 15px;
+ height: 15px;
+}
+
+.app-files .actions .button.new .icon {
+ margin-bottom: 2px;
+}
+
+.canDrop,
+#filestable tbody tr.canDrop {
+ background-color: rgba(255, 255, 140, 1);
}
diff --git a/img/folder.svg b/img/folder.svg
new file mode 100644
index 0000000..7c27791
--- /dev/null
+++ b/img/folder.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/img/homepage.png b/img/homepage.png
deleted file mode 100644
index 47b6558..0000000
Binary files a/img/homepage.png and /dev/null differ
diff --git a/img/radio.svg b/img/radio.svg
index 1ee1f01..9bf27ca 100644
--- a/img/radio.svg
+++ b/img/radio.svg
@@ -7,8 +7,8 @@
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
- height="16"
- width="16"
+ height="32px"
+ width="32px"
version="1.0"
id="svg3581"
inkscape:version="0.91 r13725"
@@ -24,7 +24,7 @@
image/svg+xml
-
+
@@ -37,13 +37,13 @@
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
- inkscape:window-width="1596"
+ inkscape:window-width="1436"
inkscape:window-height="860"
id="namedview3598"
showgrid="true"
- inkscape:zoom="29.610096"
- inkscape:cx="1.9547647"
- inkscape:cy="8"
+ inkscape:zoom="10.46875"
+ inkscape:cx="26.831171"
+ inkscape:cy="-30.011478"
inkscape:window-x="2"
inkscape:window-y="19"
inkscape:window-maximized="0"
@@ -81,7 +81,7 @@
id="rect3590" />
diff --git a/img/recent.svg b/img/recent.svg
new file mode 100644
index 0000000..cb681fb
--- /dev/null
+++ b/img/recent.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/img/star.svg b/img/star.svg
new file mode 100644
index 0000000..949850f
--- /dev/null
+++ b/img/star.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index e719ef9..c3b395e 100644
--- a/js/main.js
+++ b/js/main.js
@@ -10,10 +10,18 @@ $(window).on('load', function(){
$("tbody > tr").remove();
$.each(data, function(i, station) {
$('tbody').append('\
-  | \
-  | \
- '+station['name']+' | \
- | \
+ \
+ \
+ \
+ Favorite\
+ \
+ \
+ \
+ '+station['name']+'\
+ \
+ | \
');
});
}
diff --git a/templates/main.php b/templates/main.php
index 67741e6..43e8421 100755
--- a/templates/main.php
+++ b/templates/main.php
@@ -3,25 +3,77 @@
script('radio', 'main');
?>
-
-
-
-
-
-
-
- | Test |
- Test |
- Test |
- Test |
-
-
-
-
-
-
-
-
-