|
|
{% extends 'base.html' %}
|
|
|
{%load static%}
|
|
|
{%block content%}
|
|
|
<div class="bg" >
|
|
|
<div class="container">
|
|
|
|
|
|
<div class="row align-items-center justify-content-center">
|
|
|
<div class="col-12 my-auto">
|
|
|
<div class="logo text-center mb-3"><img src="{% static 'images/logo1.png'%}" alt="Logo" ></div>
|
|
|
<div class="width-400">
|
|
|
<video width="100%" controls id="videos">
|
|
|
<source src="" id="video_source">
|
|
|
Your browser does not support HTML5 video.
|
|
|
</video>
|
|
|
<form class="form" method="POST" enctype="multipart/form-data" name="video-upload" id="video-upload"
|
|
|
class="text-center mt-3">
|
|
|
{%csrf_token%}
|
|
|
<div class="form-group">
|
|
|
<label>{{form.upload_video_file.widget}}</label>
|
|
|
{{form.upload_video_file}}
|
|
|
|
|
|
{%if form.upload_video_file.errors%}
|
|
|
{%for each_error in form.upload_video_file.errors%}
|
|
|
<div class="alert alert-danger mt-1 {{form.upload_video_file.id_for_label}}">
|
|
|
{{each_error}}
|
|
|
</div>
|
|
|
{%endfor%}
|
|
|
{%endif%}
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label for="{{form.sequence_length.id_for_label}}">{{form.sequence_length.label}}: </label><span
|
|
|
id="slider-value"></span>
|
|
|
<input type="number" hidden="hidden" id="{{form.sequence_length.id_for_label}}"
|
|
|
name="{{form.sequence_length.name}}"></input>
|
|
|
<div id='slider'></div>
|
|
|
{%if form.sequence_length.errors%}
|
|
|
{%for each_error in form.sequence_length.errors%}
|
|
|
<div class="alert alert-danger mt-1 {{form.sequence_length.id_for_label}}">
|
|
|
{{each_error}}
|
|
|
</div>
|
|
|
{%endfor%}
|
|
|
{%endif%}
|
|
|
</div>
|
|
|
<button id="videoUpload" type="submit" name="submit" class="btn btn-success mt-3 btn-block">Upload</button>
|
|
|
</form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
{%endblock%}
|
|
|
{%block js_cripts%}
|
|
|
<script src="{%static 'js/script.js'%}"></script>
|
|
|
<script>
|
|
|
$(function () {
|
|
|
var sliderSequenceNumbers = [10,20,40,60,80,100];
|
|
|
var slider = $("div#slider").slider({
|
|
|
value: 1,
|
|
|
min: 0,
|
|
|
max: sliderSequenceNumbers.length-1,
|
|
|
slide: function (event, ui) {
|
|
|
$('#{{form.sequence_length.id_for_label}}').val(sliderSequenceNumbers[ui.value]);
|
|
|
$('#{{form.sequence_length.id_for_label}}').val(sliderSequenceNumbers[ui.value]);
|
|
|
$('#slider-value').html(sliderSequenceNumbers[ui.value]);
|
|
|
}
|
|
|
});
|
|
|
$("#{{form.sequence_length.id_for_label}}").val(sliderSequenceNumbers[$("#slider").slider("value")]);
|
|
|
$('#slider-value').html(sliderSequenceNumbers[$("#slider").slider("value")]);
|
|
|
});
|
|
|
</script>
|
|
|
{%endblock%} |
