From 476a074b32535d9704965979ac16e0f43cd19685 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?= <kasper@kasperrt.no>
Date: Fri, 19 Jun 2015 20:20:09 +0200
Subject: [PATCH] HTML5 validation fixes

---
 index.php            |  8 ++++----
 php/controller.php   | 20 +++++++++---------
 php/footer.php       |  6 +++---
 php/nochan.php       | 19 +++++++++---------
 php/panel.php        | 48 ++++++++++++++++++++++++++------------------
 static/css/style.css |  7 +++++++
 6 files changed, 60 insertions(+), 48 deletions(-)

diff --git a/index.php b/index.php
index b7641dfd..3dd3551a 100755
--- a/index.php
+++ b/index.php
@@ -118,11 +118,11 @@
                     <div id="temp-results-container">
                       <div id="temp-results">
                           <div id="result" class="result">
-                              <img class="thumb" src="" alt="Thumb"/>
-                              <span id="title">
+                              <img class="thumb" src="//:0" alt="Thumb"/>
+
                                   <div class="search-title"></div>
                                   <span class="result_info"></span>
-                              </span>
+                              
                               <a href="#add" class="waves-effect waves-orange btn-flat add-many" title="Add several videos">
                                   <i class="mdi-av-playlist-add"></i>
                               </a>
@@ -161,7 +161,7 @@
                         </ul>
                     </li>
                     <li id="chat-input">
-                      <form action="" onsubmit="chat(this.input);return false;">
+                      <form action="#" onsubmit="chat(this.input);return false;">
                         <input id="text-chat-input" name="input" type="text" autocomplete="off" placeholder="Chat" maxlength="150" />
                       </form>
                     </li>
diff --git a/php/controller.php b/php/controller.php
index dd3c9c05..96bb92b5 100755
--- a/php/controller.php
+++ b/php/controller.php
@@ -61,7 +61,7 @@
                 <input type="range" title="Volume" id="volume-control" style="display:none;" min="0" value="100" max="100" />
             </p>-->
 
-            <form action="" class="row" id="base" onsubmit="window.location.href = '/remote/'+this.chan.value;return false;">
+            <form action="#" class="row" id="base" onsubmit="window.location.href = '/remote/'+this.chan.value;return false;">
                     <div class="input-field col s12">
                         <input
                             class="input-field"
@@ -70,11 +70,9 @@
                             name="chan"
                             title="Type channel name here to create or listen to a channel. Only alphanumerical chars. [a-zA-Z0-9]+"
                             autocomplete="off"
-                            list="searches"
                             required pattern="[a-zA-Z0-9]+"
                             spellcheck="false"
                             maxlength="10"
-                            autocomplete
                             length="10"
                         />
                         <label for="search" id="forsearch">Type ID of host to be controlled</label>
@@ -124,30 +122,30 @@
                     <ul>
                       <li>
                           <a href="https://play.google.com/store/apps/details?id=no.lqasse.zoff">
-                              <img title="Get it on Google Play" src="/static/images/google_play.png" />
+                              <img title="Get it on Google Play" src="/static/images/google_play.png" alt="Google Play"/>
                           </a>
                           <a href="https://github.com/nixolas1/Zoff">
-                              <img title="Contribute on GitHub" src="/static/images/GitHub_Logo.png" />
+                              <img title="Contribute on GitHub" src="/static/images/GitHub_Logo.png" alt="GitHub" />
                           </a>
                           <p>
                               <a class="waves-effect waves-light btn light-blue share shareface" href="https://www.facebook.com/sharer/sharer.php?u=http://<?php echo $_SERVER['HTTP_HOST']; ?>" target="popup" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=http://<?php echo $_SERVER['HTTP_HOST']; ?>','Share Playlist','width=600,height=300')">
-                                  <img class="left" src="/static/images/facebook.png" />Share on Facebook
+                                  <img class="left" src="/static/images/facebook.png" alt="Share on Facebook" />Share on Facebook
                               </a>
                           </p>
                           <p>
-                              <a class="waves-effect waves-light btn light-blue share" href="http://twitter.com/intent/tweet?url=http://<?php echo $_SERVER['HTTP_HOST']; ?>&amp;text=Check out Zöff!&amp;via=zoffmusic" target="popup" onclick="window.open('http://twitter.com/intent/tweet?url=http://<?php echo $_SERVER['HTTP_HOST']; ?>&amp;text=Check out Zöff!&amp;via=zoffmusic','Share Playlist','width=600,height=300')">
-                                  <img class="left" src="/static/images/twitter.png" />Share on Twitter
+                              <a class="waves-effect waves-light btn light-blue share" href="http://twitter.com/intent/tweet?url=http://<?php echo $_SERVER['HTTP_HOST']; ?>&amp;text=Check%20out%20Zöff!&amp;via=zoffmusic" target="popup" onclick="window.open('http://twitter.com/intent/tweet?url=http://<?php echo $_SERVER['HTTP_HOST']; ?>&amp;text=Check%20out%20Zöff!&amp;via=zoffmusic','Share Playlist','width=600,height=300')">
+                                  <img class="left" src="/static/images/twitter.png" alt="Share on Facebook" />Share on Twitter
                               </a>
                           </p>
                           <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" id="donate_form">
                             <input type="hidden" name="cmd" value="_s-xclick">
                             <input type="hidden" name="hosted_button_id" value="JEXDYP59N5VWE">
-                            <a border="0" title="Like what we made? Help us with a beer!" name="submit" class="waves-effect waves-light btn orange light-blue share" onclick="document.getElementById('donate_form').submit();">Donate
+                            <a title="Like what we made? Help us with a beer!" name="submit" class="waves-effect waves-light btn orange light-blue share" onclick="document.getElementById('donate_form').submit();">Donate
                             </a>
                           </form>
                           <p>
-                              <a href="https://chart.googleapis.com/chart?chs=500x500&amp;cht=qr&amp;chl=http://<?php echo $_SERVER['HTTP_HOST']; ?>&amp;choe=UTF-8&amp;chld=L|1" >
-                                  <img src="https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl=http://<?php echo $_SERVER['HTTP_HOST']; ?>&amp;choe=UTF-8&amp;chld=L|1" alt="QRCode for link" title="QR code for this page, for easy sharing!" />
+                              <a href="https://chart.googleapis.com/chart?chs=500x500&amp;cht=qr&amp;chl=http://<?php echo $_SERVER['HTTP_HOST']; ?>&amp;choe=UTF-8&amp;chld=L%7C1" >
+                                  <img src="https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl=http://<?php echo $_SERVER['HTTP_HOST']; ?>&amp;choe=UTF-8&amp;chld=L%7C1" alt="QRCode for link" title="QR code for this page, for easy sharing!" />
                               </a>
                           </p>
                       </li>
diff --git a/php/footer.php b/php/footer.php
index 63e9dd24..9cdecbed 100755
--- a/php/footer.php
+++ b/php/footer.php
@@ -35,12 +35,12 @@
                         <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" id="donate_form">
                           <input type="hidden" name="cmd" value="_s-xclick">
                           <input type="hidden" name="hosted_button_id" value="JEXDYP59N5VWE">
-                          <a border="0" title="Like what we made? Help us with a beer!" name="submit" class="waves-effect waves-light btn orange light-blue share" onclick="document.getElementById('donate_form').submit();">Donate
+                          <a title="Like what we made? Help us with a beer!" name="submit" class="waves-effect waves-light btn orange light-blue share" onclick="document.getElementById('donate_form').submit();">Donate
                           </a>
                         </form>
                         <p>
-                            <a href="https://chart.googleapis.com/chart?chs=500x500&amp;cht=qr&amp;chl=http://<?php echo $_SERVER['HTTP_HOST'].'/'.$list; ?>&amp;choe=UTF-8&amp;chld=L|1" >
-                                <img src="https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl=http://<?php echo $_SERVER['HTTP_HOST'].'/'.$list; ?>&amp;choe=UTF-8&amp;chld=L|1" alt="QRCode for link" title="QR code for this page, for easy sharing!" alt="QR code" />
+                            <a href="https://chart.googleapis.com/chart?chs=500x500&amp;cht=qr&amp;chl=http://<?php echo $_SERVER['HTTP_HOST'].'/'.$list; ?>&amp;choe=UTF-8&amp;chld=L%7C1" >
+                                <img src="https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl=http://<?php echo $_SERVER['HTTP_HOST'].'/'.$list; ?>&amp;choe=UTF-8&amp;chld=L%7C1" alt="QRCode for link" title="QR code for this page, for easy sharing!" />
                             </a>
                         </p>
                     </li>
diff --git a/php/nochan.php b/php/nochan.php
index 45ce739e..82188398 100755
--- a/php/nochan.php
+++ b/php/nochan.php
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <?php
 
 if(isset($_GET['chan'])){
@@ -6,7 +7,6 @@ if(isset($_GET['chan'])){
 }
 
 ?>
-<!DOCTYPE html>
 <html lang="en">
 <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
   <?php include("header.php"); ?>
@@ -73,7 +73,6 @@ if(isset($_GET['chan'])){
                             required pattern="[a-zA-Z0-9]+"
                             spellcheck="false"
                             maxlength="18"
-                            autocomplete
                             length="18"
                         />
                         <label for="search">Find or create radio channel</label>
@@ -88,7 +87,7 @@ if(isset($_GET['chan'])){
                 <div class="indeterminate"></div>
             </div>
             <ul class="row" id="channels">
-                <div id="chan-html" class="hide">
+              <ul>
                     <li id="chan-card" class="col s12 m4 l3">
                         <div class="card">
                             <a class="chan-link">
@@ -110,7 +109,7 @@ if(isset($_GET['chan'])){
                             </div>
                         </div>
                     </li>
-                </div>
+                  </ul>
             </ul>
         </div>
     </main>
@@ -141,23 +140,23 @@ if(isset($_GET['chan'])){
                           </a>
                           <p>
                               <a class="waves-effect waves-light btn light-blue share shareface" href="https://www.facebook.com/sharer/sharer.php?u=http://<?php echo $_SERVER['HTTP_HOST']; ?>" target="popup" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=http://<?php echo $_SERVER['HTTP_HOST']; ?>','Share Playlist','width=600,height=300')">
-                                  <img class="left" src="static/images/facebook.png" />Share on Facebook
+                                  <img class="left" src="static/images/facebook.png" alt="Share on Facebook" />Share on Facebook
                               </a>
                           </p>
                           <p>
-                              <a class="waves-effect waves-light btn light-blue share" href="https://twitter.com/intent/tweet?url=http://<?php echo $_SERVER['HTTP_HOST']; ?>&amp;text=Check out Zöff!&amp;via=zoffmusic" target="popup" onclick="window.open('http://twitter.com/intent/tweet?url=http://<?php echo $_SERVER['HTTP_HOST']; ?>&amp;text=Check out Zöff!&amp;via=zoffmusic','Share Playlist','width=600,height=300')">
-                                  <img class="left" src="static/images/twitter.png" />Share on Twitter
+                              <a class="waves-effect waves-light btn light-blue share" href="https://twitter.com/intent/tweet?url=http://<?php echo $_SERVER['HTTP_HOST']; ?>&amp;text=Check%20out%20Zöff!&amp;via=zoffmusic" target="popup" onclick="window.open('http://twitter.com/intent/tweet?url=http://<?php echo $_SERVER['HTTP_HOST']; ?>&amp;text=Check%20out%20Zöff!&amp;via=zoffmusic','Share Playlist','width=600,height=300')">
+                                  <img class="left" src="static/images/twitter.png" alt="Share on Twitter" />Share on Twitter
                               </a>
                           </p>
                           <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" id="donate_form">
                             <input type="hidden" name="cmd" value="_s-xclick">
                             <input type="hidden" name="hosted_button_id" value="JEXDYP59N5VWE">
-                            <a border="0" title="Like what we made? Help us with a beer!" name="submit" class="waves-effect waves-light btn orange light-blue share" onclick="document.getElementById('donate_form').submit();">Donate
+                            <a title="Like what we made? Help us with a beer!" name="submit" class="waves-effect waves-light btn orange light-blue share" onclick="document.getElementById('donate_form').submit();">Donate
                             </a>
                           </form>
                           <p>
-                              <a href="https://chart.googleapis.com/chart?chs=500x500&amp;cht=qr&amp;chl=http://<?php echo $_SERVER['HTTP_HOST']; ?>&amp;choe=UTF-8&amp;chld=L|1" >
-                                  <img src="https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl=http://<?php echo $_SERVER['HTTP_HOST']; ?>&amp;choe=UTF-8&amp;chld=L|1" alt="QRCode for link" title="QR code for this page, for easy sharing!" />
+                              <a href="https://chart.googleapis.com/chart?chs=500x500&amp;cht=qr&amp;chl=http://<?php echo $_SERVER['HTTP_HOST']; ?>&amp;choe=UTF-8&amp;chld=L%7C1" >
+                                  <img src="https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl=http://<?php echo $_SERVER['HTTP_HOST']; ?>&amp;choe=UTF-8&amp;chld=L%7C1" alt="QRCode for link" title="QR code for this page, for easy sharing!" />
                               </a>
                           </p>
                       </li>
diff --git a/php/panel.php b/php/panel.php
index c4433878..9b690c28 100755
--- a/php/panel.php
+++ b/php/panel.php
@@ -9,80 +9,88 @@
                 </div>
             </a>
             <div class="collapsible-body">
-                <form action="" id="adminForm" onsubmit="pass_save();return false;">
+                <form action="#" id="adminForm" onsubmit="pass_save();return false;">
                     <ul>
                         <li class="white-bg">
-                            <a class="white-bg">
                                 <div class="input-field">
                                   <i id="admin-lock" class="mdi-action-lock" onclick="log_out()" title="Click to log out"></i>
                                     <input placeholder="Enter channel password" id="password" type="password" class="validate" />
                                 </div>
-                            </a>
                         </li>
-                        <li><a class="setting-text">
+                        <li>
+                            <span class="switch-text">
                             Add songs
+                            </span>
                             <div class="switch"><label>
                             Anyone
                             <input name="addsongs" type="checkbox" class="conf" /><span class="lever"></span>
                             Admin
-                        </label></div></a></li>
+                        </label></div></li>
 
-                        <li><a class="setting-text">
+                        <li>
+                          <span class="switch-text">
                             Vote
+                          </span>
                             <div class="switch"><label>
                             Anyone
                             <input name="vote" type="checkbox" class="conf" /><span class="lever"></span>
                             Admin
-                        </label></div></a></li>
+                        </label></div></li>
 
-                        <li><a class="setting-text">
+                        <li><span class="switch-text">
                             Shuffle
+                          </span>
                             <div class="switch"><label>
                             Anyone
                             <input name="shuffle" type="checkbox" class="conf" /><span class="lever"></span>
                             Admin
-                        </label></div></a></li>
+                        </label></div></li>
 
-                        <li><a class="setting-text">
+                        <li><span class="switch-text">
                             Skip
+                          </span>
                             <div class="switch"><label>
                             Anyone
                             <input name="skip" type="checkbox" class="conf" /><span class="lever"></span>
                             Admin
-                        </label></div></a></li>
+                        </label></div></li>
 
-                        <li><a class="setting-text">
+                        <li><span class="switch-text">
                             Song length
+                          </span>
                             <div class="switch"><label>
                             Any
                             <input name="longsongs" type="checkbox" class="conf" /><span class="lever"></span>
                             Short
-                        </label></div></a></li>
+                        </label></div></li>
 
-                        <li><a class="setting-text">
+                        <li><span class="switch-text">
                             Type
+                          </span>
                             <div class="switch"><label>
                             Any
                             <input name="allvideos" type="checkbox" class="conf" /><span class="lever"></span>
                             Song
-                        </label></div></a></li>
+                        </label></div></li>
 
 
-                        <li><a class="setting-text">
+                        <li><span class="switch-text">
                             Frontpage
+                          </span>
                             <div class="switch"><label>
                             Hide
                             <input name="frontpage" type="checkbox" class="conf" /><span class="lever"></span>
                             Display
-                        </label></div></a></li>
+                        </label></div></li>
 
-                        <li><a class="setting-text">
+                        <li><span class="switch-text">
                             After play
+                          </span>
                             <div class="switch"><label>
                             Keep
                             <input name="removeplay" type="checkbox" class="conf" /><span class="lever"></span>
                             Remove
-                        </label></div></a></li>
+                        </label></div></li>
 
 
                       </ul>
@@ -102,7 +110,7 @@
                 <ul>
                     <li>
                         <a id="code-link" target="_blank">
-                            <img id="code-qr" alt="QR code for control" title="Link to control this Zöff player" src="" />
+                            <img id="code-qr" alt="QR code for control" title="Link to control this Zöff player" src="//:0" />
                             <h4 id="code-text">ABBADUR</h4>
                         </a>
                         <a>
diff --git a/static/css/style.css b/static/css/style.css
index fff9b66d..36ff53ca 100755
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -540,6 +540,13 @@ ul #chat-log{
 
 /** settings **/
 
+.switch-text{
+  font-size: 13px !important;
+  padding: 0 !important;
+  margin-left: 2em;
+  color: #444;
+}
+
 #settings-button{color:white !important;}
 
 .admin-settings{