A small Python script to pick lyrics, which I can use for our company lunch-game "LyricsPop".
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

148 lines
3.1 KiB

{% extends "base.html" %}
{% macro other %}
<form action='/round/others/' method='POST' id='others'>
<!-- just to avoid bouncing around with the messages -->
<div data-alert class='alert-box secondary'>
Awaiting input...
</div>
<div class='row'>
<div class='large-12 columns'>
<label for='others-artist'>
Artist
</label>
<input type='text' placeholder='Artist' name='artist'>
</div>
<div class='large-12 columns'>
<label for='others-song'>
Song
</label>
<input type='text' placeholder='Song' name='song'>
</div>
<div class='large-12 columns'>
<input type='submit' class='button secondary radius small' value='Add' disabled>
</div>
</div>
</form>
{% endmacro %}
{% block content %}
11 years ago
<div class='row'>
<div class='large-6 columns'>
<h3 class='subheader'>Your song</h3>
</div>
<div class='large-6 columns'>
<h3 class='subheader'>Other's picks</h3>
</div>
</div>
<div class='row'>
<div class='large-6 columns' id='song'>
<pre>{{ lyrics }}</pre>
</div>
<div class='large-6 columns' id='quick-add'>
<div class='panel radius'>
{{ other() }}
</div>
</div>
</div>
11 years ago
<div class='row'>
<div class='large-6 columns'>
<h3 class='subheader'>Tip</h3>
</div>
<div class='large-6 columns'>
<h3 class='subheader'>Solution</h3>
</div>
</div>
<div class='row'>
<div class='large-6 columns' id='pick'>
Artist: <span class='artist'>{{ acronym_artist }}</span><br/>
Song: <span class='song'>{{ acronym_title }}</span>
11 years ago
</div>
<div class='large-6 columns' id='solution'>
Artist: <span class='artist'>{{ song_artist }}</span><br/>
Song: <span class='song'>{{ song_title }}</span>
11 years ago
</div>
</div>
<div class='row'>
<div class='large-12 columns form-close'>
<form method='POST' action='/song/played/'>
<input type='hidden' name='id' value='{{ id }}'>
<a href='/' class='button radius secondary small'>Skip</a>
<button class='button radius small'>Next</button>
</form>
11 years ago
</div>
</div>
{% endblock %}
{% block styles %}
<style>
#song textarea {
width: 100%;
}
11 years ago
#solution {
color: black;
background: black
}
#solution:hover {
color: white;
background: black;
}
.form-close {
margin-top: 15px;
text-align: center;
}
</style>
11 years ago
{% endblock %}
{% block scripts %}
<script>
$('#others').on('submit', function() {
$('#others .alert-box').remove();
$.ajax({
url: '/round/others/',
type: 'POST',
data: $(this).serialize(),
dataType: 'json',
success: function (response) {
console.log(response);
$('#others input[name="artist"]').val('').change();
$('#others input[name="song"]').val('').change();
var message = [
'<div data-alert class="alert-box ',
response.status == 'OK'? '': 'alert',
' radius">',
response.message,
'</div>'
];
$('#others').prepend(message.join(''));
}
});
return false;
});
$('#others input[name="artist"], #others input[name="song"]').on('change', function() {
if ($(this).val().length > 0) {
$('#others input[type="submit"]').removeAttr('disabled');
} else {
$('#others input[type="submit"]').attr('disabled', true);
}
});
</script>
{% endblock scripts %}