HTML5 validation fixes

This commit is contained in:
Kasper Rynning-Tønnesen
2015-06-19 20:20:09 +02:00
parent 54ac3d1e06
commit 476a074b32
6 changed files with 60 additions and 48 deletions

View File

@@ -118,11 +118,11 @@
<div id="temp-results-container"> <div id="temp-results-container">
<div id="temp-results"> <div id="temp-results">
<div id="result" class="result"> <div id="result" class="result">
<img class="thumb" src="" alt="Thumb"/> <img class="thumb" src="//:0" alt="Thumb"/>
<span id="title">
<div class="search-title"></div> <div class="search-title"></div>
<span class="result_info"></span> <span class="result_info"></span>
</span>
<a href="#add" class="waves-effect waves-orange btn-flat add-many" title="Add several videos"> <a href="#add" class="waves-effect waves-orange btn-flat add-many" title="Add several videos">
<i class="mdi-av-playlist-add"></i> <i class="mdi-av-playlist-add"></i>
</a> </a>
@@ -161,7 +161,7 @@
</ul> </ul>
</li> </li>
<li id="chat-input"> <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" /> <input id="text-chat-input" name="input" type="text" autocomplete="off" placeholder="Chat" maxlength="150" />
</form> </form>
</li> </li>

View File

@@ -61,7 +61,7 @@
<input type="range" title="Volume" id="volume-control" style="display:none;" min="0" value="100" max="100" /> <input type="range" title="Volume" id="volume-control" style="display:none;" min="0" value="100" max="100" />
</p>--> </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"> <div class="input-field col s12">
<input <input
class="input-field" class="input-field"
@@ -70,11 +70,9 @@
name="chan" name="chan"
title="Type channel name here to create or listen to a channel. Only alphanumerical chars. [a-zA-Z0-9]+" title="Type channel name here to create or listen to a channel. Only alphanumerical chars. [a-zA-Z0-9]+"
autocomplete="off" autocomplete="off"
list="searches"
required pattern="[a-zA-Z0-9]+" required pattern="[a-zA-Z0-9]+"
spellcheck="false" spellcheck="false"
maxlength="10" maxlength="10"
autocomplete
length="10" length="10"
/> />
<label for="search" id="forsearch">Type ID of host to be controlled</label> <label for="search" id="forsearch">Type ID of host to be controlled</label>
@@ -124,30 +122,30 @@
<ul> <ul>
<li> <li>
<a href="https://play.google.com/store/apps/details?id=no.lqasse.zoff"> <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>
<a href="https://github.com/nixolas1/Zoff"> <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> </a>
<p> <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')"> <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> </a>
</p> </p>
<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')"> <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" />Share on Twitter <img class="left" src="/static/images/twitter.png" alt="Share on Facebook" />Share on Twitter
</a> </a>
</p> </p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" id="donate_form"> <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="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="JEXDYP59N5VWE"> <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> </a>
</form> </form>
<p> <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" > <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|1" alt="QRCode for link" title="QR code for this page, for easy sharing!" /> <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> </a>
</p> </p>
</li> </li>

View File

@@ -35,12 +35,12 @@
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" id="donate_form"> <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="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="JEXDYP59N5VWE"> <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> </a>
</form> </form>
<p> <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" > <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|1" alt="QRCode for link" title="QR code for this page, for easy sharing!" alt="QR code" /> <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> </a>
</p> </p>
</li> </li>

View File

@@ -1,3 +1,4 @@
<!DOCTYPE html>
<?php <?php
if(isset($_GET['chan'])){ if(isset($_GET['chan'])){
@@ -6,7 +7,6 @@ if(isset($_GET['chan'])){
} }
?> ?>
<!DOCTYPE html>
<html lang="en"> <html lang="en">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#"> <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<?php include("header.php"); ?> <?php include("header.php"); ?>
@@ -73,7 +73,6 @@ if(isset($_GET['chan'])){
required pattern="[a-zA-Z0-9]+" required pattern="[a-zA-Z0-9]+"
spellcheck="false" spellcheck="false"
maxlength="18" maxlength="18"
autocomplete
length="18" length="18"
/> />
<label for="search">Find or create radio channel</label> <label for="search">Find or create radio channel</label>
@@ -88,7 +87,7 @@ if(isset($_GET['chan'])){
<div class="indeterminate"></div> <div class="indeterminate"></div>
</div> </div>
<ul class="row" id="channels"> <ul class="row" id="channels">
<div id="chan-html" class="hide"> <ul>
<li id="chan-card" class="col s12 m4 l3"> <li id="chan-card" class="col s12 m4 l3">
<div class="card"> <div class="card">
<a class="chan-link"> <a class="chan-link">
@@ -110,7 +109,7 @@ if(isset($_GET['chan'])){
</div> </div>
</div> </div>
</li> </li>
</div> </ul>
</ul> </ul>
</div> </div>
</main> </main>
@@ -141,23 +140,23 @@ if(isset($_GET['chan'])){
</a> </a>
<p> <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')"> <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> </a>
</p> </p>
<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')"> <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" />Share on Twitter <img class="left" src="static/images/twitter.png" alt="Share on Twitter" />Share on Twitter
</a> </a>
</p> </p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" id="donate_form"> <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="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="JEXDYP59N5VWE"> <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> </a>
</form> </form>
<p> <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" > <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|1" alt="QRCode for link" title="QR code for this page, for easy sharing!" /> <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> </a>
</p> </p>
</li> </li>

View File

@@ -9,80 +9,88 @@
</div> </div>
</a> </a>
<div class="collapsible-body"> <div class="collapsible-body">
<form action="" id="adminForm" onsubmit="pass_save();return false;"> <form action="#" id="adminForm" onsubmit="pass_save();return false;">
<ul> <ul>
<li class="white-bg"> <li class="white-bg">
<a class="white-bg">
<div class="input-field"> <div class="input-field">
<i id="admin-lock" class="mdi-action-lock" onclick="log_out()" title="Click to log out"></i> <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" /> <input placeholder="Enter channel password" id="password" type="password" class="validate" />
</div> </div>
</a>
</li> </li>
<li><a class="setting-text"> <li>
<span class="switch-text">
Add songs Add songs
</span>
<div class="switch"><label> <div class="switch"><label>
Anyone Anyone
<input name="addsongs" type="checkbox" class="conf" /><span class="lever"></span> <input name="addsongs" type="checkbox" class="conf" /><span class="lever"></span>
Admin Admin
</label></div></a></li> </label></div></li>
<li><a class="setting-text"> <li>
<span class="switch-text">
Vote Vote
</span>
<div class="switch"><label> <div class="switch"><label>
Anyone Anyone
<input name="vote" type="checkbox" class="conf" /><span class="lever"></span> <input name="vote" type="checkbox" class="conf" /><span class="lever"></span>
Admin Admin
</label></div></a></li> </label></div></li>
<li><a class="setting-text"> <li><span class="switch-text">
Shuffle Shuffle
</span>
<div class="switch"><label> <div class="switch"><label>
Anyone Anyone
<input name="shuffle" type="checkbox" class="conf" /><span class="lever"></span> <input name="shuffle" type="checkbox" class="conf" /><span class="lever"></span>
Admin Admin
</label></div></a></li> </label></div></li>
<li><a class="setting-text"> <li><span class="switch-text">
Skip Skip
</span>
<div class="switch"><label> <div class="switch"><label>
Anyone Anyone
<input name="skip" type="checkbox" class="conf" /><span class="lever"></span> <input name="skip" type="checkbox" class="conf" /><span class="lever"></span>
Admin Admin
</label></div></a></li> </label></div></li>
<li><a class="setting-text"> <li><span class="switch-text">
Song length Song length
</span>
<div class="switch"><label> <div class="switch"><label>
Any Any
<input name="longsongs" type="checkbox" class="conf" /><span class="lever"></span> <input name="longsongs" type="checkbox" class="conf" /><span class="lever"></span>
Short Short
</label></div></a></li> </label></div></li>
<li><a class="setting-text"> <li><span class="switch-text">
Type Type
</span>
<div class="switch"><label> <div class="switch"><label>
Any Any
<input name="allvideos" type="checkbox" class="conf" /><span class="lever"></span> <input name="allvideos" type="checkbox" class="conf" /><span class="lever"></span>
Song Song
</label></div></a></li> </label></div></li>
<li><a class="setting-text"> <li><span class="switch-text">
Frontpage Frontpage
</span>
<div class="switch"><label> <div class="switch"><label>
Hide Hide
<input name="frontpage" type="checkbox" class="conf" /><span class="lever"></span> <input name="frontpage" type="checkbox" class="conf" /><span class="lever"></span>
Display Display
</label></div></a></li> </label></div></li>
<li><a class="setting-text"> <li><span class="switch-text">
After play After play
</span>
<div class="switch"><label> <div class="switch"><label>
Keep Keep
<input name="removeplay" type="checkbox" class="conf" /><span class="lever"></span> <input name="removeplay" type="checkbox" class="conf" /><span class="lever"></span>
Remove Remove
</label></div></a></li> </label></div></li>
</ul> </ul>
@@ -102,7 +110,7 @@
<ul> <ul>
<li> <li>
<a id="code-link" target="_blank"> <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> <h4 id="code-text">ABBADUR</h4>
</a> </a>
<a> <a>

View File

@@ -540,6 +540,13 @@ ul #chat-log{
/** settings **/ /** settings **/
.switch-text{
font-size: 13px !important;
padding: 0 !important;
margin-left: 2em;
color: #444;
}
#settings-button{color:white !important;} #settings-button{color:white !important;}
.admin-settings{ .admin-settings{