зеркало из https://github.com/microsoft/inmt.git
671 строка
24 KiB
HTML
671 строка
24 KiB
HTML
|
{% load static %}
|
||
|
|
|
||
|
|
<html>
|
||
|
|
<link type="text/css" rel="stylesheet" href="{% static 'materialize.css' %}" media="screen,projection"/>
|
||
|
|
<body>
|
||
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
||
|
|
<!-- <script type="text/javascript" src="/static/js/pramukhime.js"></script>
|
||
|
|
<script type="text/javascript" src="/static/js/pramukhindic.js"></script>
|
||
|
|
<script type="text/javascript" src="/static/js/pramukhime-common.js"></script> -->
|
||
|
|
|
||
|
|
<script type="text/javascript" src="{% static 'materialize.js' %}"></script>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// focus on textbox
|
||
|
|
// document.getElementById('typingarea').focus();
|
||
|
|
// Setup pramukhIME
|
||
|
|
|
||
|
|
// Add the keyboard plugin
|
||
|
|
// pramukhIME.addKeyboard("PramukhIndic");
|
||
|
|
// pramukhIME.addLanguage(PramukhIndic);
|
||
|
|
// pramukhIME.enable();
|
||
|
|
// // pramukhIME.onLanguageChange(scriptChangeCallback);
|
||
|
|
// pramukhIME.setLanguage("hindi","pramukhindic");
|
||
|
|
|
||
|
|
// Register call back (PRO VERSION ONLY)
|
||
|
|
// pramukhIME.on('languagechange', languageChangeCallback);
|
||
|
|
|
||
|
|
// Enable on whole page
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script type=text/javascript>
|
||
|
|
function strip(html)
|
||
|
|
{
|
||
|
|
var tmp = document.createElement("DIV");
|
||
|
|
tmp.innerHTML = html;
|
||
|
|
return tmp.textContent || tmp.innerText || "";
|
||
|
|
}
|
||
|
|
|
||
|
|
function resetcolors(elem, nums) {
|
||
|
|
for (i=0; i<nums; i++) {
|
||
|
|
$(elem + i).css({"background-color": "transparent"})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// function sharedStart(array){
|
||
|
|
// var A= array.concat().sort(),
|
||
|
|
// a1= A[0], a2= A[A.length-1], L= a1.length, i= 0;
|
||
|
|
// while(i<L && a1.charAt(i)=== a2.charAt(i)) i++;
|
||
|
|
// return a1.substring(0, i);
|
||
|
|
// }
|
||
|
|
|
||
|
|
function sharedStart(feed, partial) {
|
||
|
|
// console.log(partial, "||")
|
||
|
|
// var textlist = partial.split(" ")
|
||
|
|
// console.log(textlist)
|
||
|
|
// var part2text = textlist.pop()
|
||
|
|
// var part1text = textlist.join(" ")
|
||
|
|
|
||
|
|
// Implement algo which checks
|
||
|
|
lastspace = partial.lastIndexOf(" ")
|
||
|
|
part1text = partial.substring(0, lastspace)
|
||
|
|
part2text = partial.substring(lastspace+1)
|
||
|
|
// console.log(part1text, "|" , part2text)
|
||
|
|
var count = 0
|
||
|
|
if (part1text) {
|
||
|
|
newfeed = feed.replace(part1text + " ", '')
|
||
|
|
|
||
|
|
} else {
|
||
|
|
newfeed = feed
|
||
|
|
}
|
||
|
|
for (i=0; i<part2text.length; i++) {
|
||
|
|
if(part2text[i] === newfeed[i]){
|
||
|
|
count = count + 1;
|
||
|
|
} else {
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
newfeedpre = newfeed.substring(0, count)
|
||
|
|
newfeedsuf = newfeed.substring(count)
|
||
|
|
if (newfeedpre == "" && newfeedsuf == "") {
|
||
|
|
return ""
|
||
|
|
}
|
||
|
|
return '<b>' + newfeedpre + '</b>' + newfeedsuf
|
||
|
|
}
|
||
|
|
|
||
|
|
function placeCaretAtEnd(el) {
|
||
|
|
el.focus();
|
||
|
|
if (typeof window.getSelection != "undefined"
|
||
|
|
&& typeof document.createRange != "undefined") {
|
||
|
|
var range = document.createRange();
|
||
|
|
range.selectNodeContents(el);
|
||
|
|
range.collapse(false);
|
||
|
|
var sel = window.getSelection();
|
||
|
|
sel.removeAllRanges();
|
||
|
|
sel.addRange(range);
|
||
|
|
} else if (typeof document.body.createTextRange != "undefined") {
|
||
|
|
var textRange = document.body.createTextRange();
|
||
|
|
textRange.moveToElementText(el);
|
||
|
|
textRange.collapse(false);
|
||
|
|
textRange.select();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function endsWithSpace(str) {
|
||
|
|
var endSpace = /\s$/;
|
||
|
|
if (endSpace.test(str)) {
|
||
|
|
return true
|
||
|
|
} else {
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function inputSpan(str) {
|
||
|
|
var strlist = str.split(" ");
|
||
|
|
var container = ""
|
||
|
|
for (k=0; k<strlist.length; k++) {
|
||
|
|
container += '<span class="hin_inp_part hin_inp_part' + k + '">' + strlist[k] + '</span> '
|
||
|
|
}
|
||
|
|
return container
|
||
|
|
}
|
||
|
|
|
||
|
|
function sentokenind(src, tgt, numsent) {
|
||
|
|
var regex = /[!?।|.]+(?=(?:[^\"]*\"[^\"]*\")*[^\"]*$)/gi , result, srcindices = [], tgtindices = [];
|
||
|
|
var curspos = window.getSelection().getRangeAt(0).startOffset
|
||
|
|
var newsrc, newtgt;
|
||
|
|
var newsrcind, newtgtind;
|
||
|
|
|
||
|
|
while ( (result = regex.exec(src)) ) {
|
||
|
|
srcindices.push(result.index);
|
||
|
|
}
|
||
|
|
|
||
|
|
while ( (result = regex.exec(tgt)) ) {
|
||
|
|
tgtindices.push(result.index);
|
||
|
|
}
|
||
|
|
|
||
|
|
srcindices.unshift(0);
|
||
|
|
tgtindices.unshift(0);
|
||
|
|
console.log(srcindices, tgtindices)
|
||
|
|
|
||
|
|
var tgtbehindcurs = tgtindices.filter(function(ind) {
|
||
|
|
return (ind <= curspos);
|
||
|
|
})
|
||
|
|
|
||
|
|
console.log(curspos)
|
||
|
|
|
||
|
|
if (tgtbehindcurs.length >= numsent) {
|
||
|
|
newtgtind = tgtbehindcurs.slice(-1*numsent)[0]
|
||
|
|
newsrcind = srcindices.slice(tgtbehindcurs.length).slice(-1*numsent)[0]
|
||
|
|
} else {
|
||
|
|
newtgtind = 0;
|
||
|
|
newsrcind = 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
newsrc = src.substring(newsrcind, srcindices[newsrcind + numsent])
|
||
|
|
newtgt = tgt.substring(newtgtind, curspos)
|
||
|
|
return [newsrc, newtgt]
|
||
|
|
}
|
||
|
|
|
||
|
|
function getCursor() {
|
||
|
|
console.log(window.getSelection().getRangeAt(0).startOffset)
|
||
|
|
}
|
||
|
|
|
||
|
|
// function spanner(stri) {
|
||
|
|
// return stri.replace(/[\s]{2,}/gi, " ")
|
||
|
|
// }
|
||
|
|
|
||
|
|
var numsent = 1;
|
||
|
|
$(document).ready(function(){
|
||
|
|
var searchRequest = null;
|
||
|
|
var debounceTimeout = null;
|
||
|
|
var searchInput = $("#partial");
|
||
|
|
var result = '';
|
||
|
|
var selecte = 0;
|
||
|
|
var outputs = [];
|
||
|
|
var highlight = $("#highlight").is(':checked');
|
||
|
|
var textlist = []
|
||
|
|
var part2text = ""
|
||
|
|
var part1text = ""
|
||
|
|
|
||
|
|
|
||
|
|
var searchEvents = function(partial){
|
||
|
|
if (searchRequest)
|
||
|
|
searchRequest.abort()
|
||
|
|
searchRequest = $.post('/gpt/follow', {
|
||
|
|
text: partial.clone().children().remove().end().text(),
|
||
|
|
csrfmiddlewaretoken: '{{ csrf_token }}',
|
||
|
|
}, function(data) {
|
||
|
|
// $("#result").text(data.result);
|
||
|
|
result = data.result.split("\n")
|
||
|
|
partialret = data.partial
|
||
|
|
|
||
|
|
selecte = 0;
|
||
|
|
|
||
|
|
finale = []
|
||
|
|
for(var i = 1; i < result.length; i++) {
|
||
|
|
finale.push(partial.clone().children().remove().end().text() + result[i])
|
||
|
|
}
|
||
|
|
result = finale
|
||
|
|
|
||
|
|
// All to do with the user input
|
||
|
|
if (selecte >= result.length) {
|
||
|
|
selecte = 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (result[selecte].includes(partial.text())) {
|
||
|
|
partial.closest('.bmo').find('.suggest').text(result[selecte])
|
||
|
|
partial.closest('.bmo').find('.suggest').scrollTop(partial.scrollTop());
|
||
|
|
}
|
||
|
|
|
||
|
|
var container = $('<div />');
|
||
|
|
|
||
|
|
var countcontainer = 0
|
||
|
|
finalresult = []
|
||
|
|
for(var i = 0; i < result.length; i++) {
|
||
|
|
var repres = sharedStart(result[i], partialret)
|
||
|
|
// console.log(repres)
|
||
|
|
if (repres !== "") {
|
||
|
|
container.append('<span id="res'+countcontainer+'" class="res'+countcontainer+' spanres"> ' + repres + '</span>');
|
||
|
|
countcontainer += 1;
|
||
|
|
finalresult.push(result[i])
|
||
|
|
// console.log(countcontainer, finalresult)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
partial.closest('.bmo').find('.dropdown').html(container);
|
||
|
|
|
||
|
|
resetcolors('.res', $('.spanres').length)
|
||
|
|
$('.res' + selecte).css({"background-color": "#eee"})
|
||
|
|
if (countcontainer>1) {
|
||
|
|
partial.closest('.bmo').find('.dropdown').css('visibility', 'visible');
|
||
|
|
}
|
||
|
|
|
||
|
|
// All to do with the source sentence
|
||
|
|
|
||
|
|
if (highlight == true) {
|
||
|
|
var attn = data.attn
|
||
|
|
$("span[class^='hin_inp_part']").css("background-color", "transparent");
|
||
|
|
for (m=0; m<attn.length; m++) {
|
||
|
|
|
||
|
|
if (attn[m] != 0) {
|
||
|
|
partial.closest('.bmo').find('.hin_inp_part' + m).css('background-color', 'rgba(255,0,0,' + attn[m] + ')')
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
partial.closest('.bmo').find('.hin_inp_part' + m).css('background-color', 'rgba(0,255,0,0.5)')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
$(".partial").on('keydown', function(e){
|
||
|
|
var keyCode = e.keyCode || e.which;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
if (keyCode == 9) {
|
||
|
|
e.preventDefault();
|
||
|
|
var partial = $(this).clone().children().remove().end().text().split(" ").filter(function(v){return v!==''})
|
||
|
|
var step = partial.length
|
||
|
|
var res = result[selecte].split(" ")[step-1]
|
||
|
|
if (result[selecte].split(" ")[step-1] == partial[step-1]) {
|
||
|
|
res = result[selecte].split(" ")[step]
|
||
|
|
} else {
|
||
|
|
partial.pop()
|
||
|
|
}
|
||
|
|
partial.push(res)
|
||
|
|
$(this).html(partial.join(" ") + " ")
|
||
|
|
$(this).closest('.bmo').find('.suggest').text(result[selecte])
|
||
|
|
placeCaretAtEnd($(this).get(0))
|
||
|
|
$(this).closest('.bmo').find('.dropdown').css('visibility', 'hidden')
|
||
|
|
|
||
|
|
} else
|
||
|
|
|
||
|
|
if (keyCode == 13) {
|
||
|
|
e.preventDefault();
|
||
|
|
$(this).html(result[selecte])
|
||
|
|
$(this).closest('.bmo').find('.suggest').text(result[selecte])
|
||
|
|
placeCaretAtEnd($(this).get(0))
|
||
|
|
$(this).closest('.bmo').find('.dropdown').css('visibility', 'hidden')
|
||
|
|
} else
|
||
|
|
|
||
|
|
if (keyCode == 40) {
|
||
|
|
e.preventDefault();
|
||
|
|
if (selecte < $('.spanres').length - 1 )
|
||
|
|
selecte = selecte + 1;
|
||
|
|
resetcolors('.res', $('.spanres').length)
|
||
|
|
$('.res' + selecte).css({"background-color": "#ddd"})
|
||
|
|
$(this).closest('.bmo').find('.suggest').text(result[selecte])
|
||
|
|
} else
|
||
|
|
if (keyCode == 38) {
|
||
|
|
e.preventDefault();
|
||
|
|
if (selecte > 0)
|
||
|
|
selecte = selecte - 1;
|
||
|
|
resetcolors('.res', $('.spanres').length)
|
||
|
|
$('.res' + selecte).css({"background-color": "#ddd"})
|
||
|
|
$(this).closest('.bmo').find('.suggest').text(result[selecte])
|
||
|
|
} else
|
||
|
|
if (keyCode == 34) {
|
||
|
|
e.preventDefault();
|
||
|
|
// searchEvents($(this));
|
||
|
|
$(this).closest('.bmo').next().find('.partial').focus()
|
||
|
|
} else
|
||
|
|
if (keyCode == 33) {
|
||
|
|
e.preventDefault();
|
||
|
|
// searchEvents($(this));
|
||
|
|
$(this).closest('.bmo').prev().find('.partial').focus()
|
||
|
|
} else
|
||
|
|
if (keyCode == 35) {
|
||
|
|
e.preventDefault();
|
||
|
|
// searchEvents($(this));
|
||
|
|
$(".partial").each(function() {
|
||
|
|
outputs.push([$(this).closest('.bmo').find('.hin_inp').text(), $(this).text()])
|
||
|
|
})
|
||
|
|
// console.log(JSON.stringify({'ops': outputs}))
|
||
|
|
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
url: '/para/pushoutput',
|
||
|
|
data: {'ops': JSON.stringify(outputs)},
|
||
|
|
traditional: true,
|
||
|
|
success: function(result) {
|
||
|
|
// console.log(result.result);
|
||
|
|
window.location.href='/para/end';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// $.getJSON('/pushoutput', {
|
||
|
|
// ops: outputs,
|
||
|
|
// }, function(data) {
|
||
|
|
// console.log(data.result)
|
||
|
|
// })
|
||
|
|
} else
|
||
|
|
if ((e.ctrlKey && keyCode == 67)|| (e.ctrlKey && keyCode == 65)) {
|
||
|
|
} else {
|
||
|
|
$(this).closest('.bmo').find('.suggest').text('')
|
||
|
|
}
|
||
|
|
|
||
|
|
})
|
||
|
|
|
||
|
|
$('.transtext').one('focus', function() {
|
||
|
|
$(this).html('');
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.partial').focusin(function() {
|
||
|
|
$(this).closest('.bmo').removeClass('bmo--blur');
|
||
|
|
$('.partial').closest('.bmo').not($(this).closest('.bmo')).addClass('bmo--blur');
|
||
|
|
// $(this).closest('.bmo').css('filter', '');
|
||
|
|
// $('.partial').closest('.bmo').not($(this).closest('.bmo')).css('filter', 'blur(3px)');
|
||
|
|
// $(this).closest('.bmo').css('filter', '');
|
||
|
|
searchEvents($(this));
|
||
|
|
var dropdown = $(this).parent().parent().children('.dropdown');
|
||
|
|
dropdown.css('visibility', 'visible')
|
||
|
|
var firsttext = $(this).text()
|
||
|
|
textlist = firsttext.split(" ")
|
||
|
|
part2text = textlist.pop()
|
||
|
|
part1text = textlist.join(" ") + " "
|
||
|
|
|
||
|
|
$(this).html(part1text + '<div id="dummy"></div>' + part2text)
|
||
|
|
if (firsttext) {
|
||
|
|
dropdown.css('left', $('#dummy')[0].offsetLeft).css('top', $('#dummy')[0].offsetTop+7);
|
||
|
|
} else {
|
||
|
|
dropdown.css('left', $('#dummy')[0].offsetLeft-5).css('top', $('#dummy')[0].offsetTop+7);
|
||
|
|
}
|
||
|
|
// if ($('#dummy')[0].offsetLeft <= 10) {
|
||
|
|
// dropdown.css('left', $('#dummy')[0].offsetLeft).css('top', $('#dummy')[0].offsetTop+24);
|
||
|
|
// } else {
|
||
|
|
// dropdown.css('left', $('#dummy')[0].offsetLeft).css('top', $('#dummy')[0].offsetTop+7);
|
||
|
|
// }
|
||
|
|
$(this).html(firsttext)
|
||
|
|
$(this).closest('.bmo').find('.suggest').css('visibility', 'visible');
|
||
|
|
placeCaretAtEnd($(this).get(0))
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".partial").on('focusout',function() {
|
||
|
|
var dropdown = $(this).closest('.bmo').find('.dropdown');
|
||
|
|
dropdown.css('visibility', 'hidden')
|
||
|
|
$(this).closest('.bmo').find('.suggest').css('visibility', 'hidden')
|
||
|
|
})
|
||
|
|
|
||
|
|
$(".partial").on('scroll', function() {
|
||
|
|
$(this).closest('.bmo').find('.suggest').scrollTop($(this).scrollTop());
|
||
|
|
})
|
||
|
|
|
||
|
|
$(".partial").keyup(function(e){
|
||
|
|
var keyCode = e.keyCode || e.which;
|
||
|
|
// console.log(!(e.ctrlKey && keyCode == 65))
|
||
|
|
if (keyCode != 40 && keyCode != 38 && keyCode != 37 && keyCode != 39 && keyCode != 17 && !(e.ctrlKey && keyCode == 65) && keyCode != 35 ) {
|
||
|
|
|
||
|
|
$(this).closest('.bmo').find('.dropdown').css('visibility', 'hidden');
|
||
|
|
|
||
|
|
var dropdown = $(this).parent().parent().children('.dropdown');
|
||
|
|
var firsttext = $(this).text()
|
||
|
|
textlist = firsttext.split(" ")
|
||
|
|
part2text = textlist.pop()
|
||
|
|
part1text = textlist.join(" ")
|
||
|
|
|
||
|
|
$(this).html(part1text + '<div id="dummy"></div>' + part2text)
|
||
|
|
if (firsttext) {
|
||
|
|
dropdown.css('left', $('#dummy')[0].offsetLeft + 2).css('top', $('#dummy')[0].offsetTop+7);
|
||
|
|
} else {
|
||
|
|
dropdown.css('left', $('#dummy')[0].offsetLeft).css('top', $('#dummy')[0].offsetTop+24);
|
||
|
|
}
|
||
|
|
$(this).html(firsttext)
|
||
|
|
placeCaretAtEnd($(this).get(0))
|
||
|
|
|
||
|
|
|
||
|
|
// var hin = new RegExp('([^\s\u0900-\u097F])');
|
||
|
|
|
||
|
|
// if (firsttext && hin.text(firsttext.slice(-1))) {
|
||
|
|
|
||
|
|
// indic = $.ajax({
|
||
|
|
// url: '/para/indic',
|
||
|
|
// data: {'lang': 'hindi', 'inString': part2text},
|
||
|
|
// type: 'GET',
|
||
|
|
// traditional: true,
|
||
|
|
// success: function(result) {
|
||
|
|
// console.log(result['twords']['0']['options']);
|
||
|
|
// }
|
||
|
|
// });
|
||
|
|
|
||
|
|
// }
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
clearTimeout(debounceTimeout);
|
||
|
|
debounceTimeout = setTimeout(searchEvents($(this)), 5);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".hin_inp").focusout(function(){
|
||
|
|
// $('#hin_inp').html(strip($('#hin_inp').html()))
|
||
|
|
searchEvents($(this));
|
||
|
|
})
|
||
|
|
|
||
|
|
$("#highlight").change(function(){
|
||
|
|
// $('#hin_inp').html(strip($('#hin_inp').html()))
|
||
|
|
highlight = $(this).is(':checked')
|
||
|
|
if (highlight == false) {
|
||
|
|
$("span[class^='hin_inp_part']").css("background-color", "transparent");
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
// var inputs = ['आज थका देने वाला दिन था','चलिए आज हम एक फिल्म के लिए चलते हैं','यह मेरा मूड फ्रेश कर देगा','मैं कल अपने काम पर ध्यान केंद्रित कर सकता हूं'];
|
||
|
|
// var inputs = ['मुझे कल एक ट्रेन पकड़नी है']
|
||
|
|
|
||
|
|
|
||
|
|
// .css('filter', '');
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<div class="container">
|
||
|
|
<div class="row">
|
||
|
|
<div class="pad-top"></div>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-title center ttt">
|
||
|
|
Real-time Writing Assistance
|
||
|
|
</div>
|
||
|
|
<div class="switch">
|
||
|
|
<label>
|
||
|
|
Highlight?
|
||
|
|
<input id="highlight" type="checkbox">
|
||
|
|
<span class="lever"></span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="pad-top"></div>
|
||
|
|
</div>
|
||
|
|
<div id="cardscoll">
|
||
|
|
<div class="card bmo">
|
||
|
|
<div class="card-content">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col s12">
|
||
|
|
<div class="hin_inp transtext" contenteditable="false"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- <div class="row"> -->
|
||
|
|
<!-- <div class="col s1 m1">
|
||
|
|
<br>
|
||
|
|
<img src="{% static 'forward.png' %}" style="height:15px">
|
||
|
|
</div> -->
|
||
|
|
<!-- </div> -->
|
||
|
|
<div class="row">
|
||
|
|
<div class="col s12">
|
||
|
|
<div class="dropcontainer">
|
||
|
|
<div class="partcontainer">
|
||
|
|
<div class="suggest transtext" contenteditable="false"></div>
|
||
|
|
<div class=" partial transtext" contenteditable="true" onclick="getCursor()"></div>
|
||
|
|
</div>
|
||
|
|
<div class="dropdown">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="perinstr">
|
||
|
|
| Select ⇅ Tab → Enter ↠ | Page Down ↡ Page Up ↟ |
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row bottom">
|
||
|
|
<div class="col s12">
|
||
|
|
<img src="{% static 'microsoft_white.png' %}" height=70px>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==) fixed;
|
||
|
|
background-color: #404040;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bmo {
|
||
|
|
transition: all 0.12s ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bmo--blur {
|
||
|
|
filter: blur(3px);
|
||
|
|
background-color: #ddd !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ttt {
|
||
|
|
padding:15px;
|
||
|
|
}
|
||
|
|
.pad-top {
|
||
|
|
height: 4vh;
|
||
|
|
}
|
||
|
|
.card-title {
|
||
|
|
color: #404040;
|
||
|
|
height: 8vh;
|
||
|
|
}
|
||
|
|
#result {
|
||
|
|
color: #404040;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
.card {
|
||
|
|
/* min-height: 15vh; */
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
.bottom {
|
||
|
|
position: fixed;
|
||
|
|
bottom:0;
|
||
|
|
right:10;
|
||
|
|
}
|
||
|
|
#drop {
|
||
|
|
/* display: none; */
|
||
|
|
color: #404040;
|
||
|
|
position: absolute;
|
||
|
|
background-color: #ddd;
|
||
|
|
text-align: left;
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
.transtext {
|
||
|
|
/* -moz-appearance: textfield-multiline;
|
||
|
|
-webkit-appearance: textarea; */
|
||
|
|
/* overflow: auto;
|
||
|
|
white-space: nowrap; */
|
||
|
|
/* word-break: break-all; */
|
||
|
|
padding: 5px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.hin_inp {
|
||
|
|
padding: 10px;
|
||
|
|
/* word-wrap: break-word; */
|
||
|
|
/* width: 100%; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.hin_inp_part {
|
||
|
|
padding: 2px;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.partial {
|
||
|
|
/* border-top: 1px solid #eee;
|
||
|
|
border-bottom: 1px solid #eee; */
|
||
|
|
background-color: rgba(209, 209, 209, 0.274);
|
||
|
|
}
|
||
|
|
#result {
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.partcontainer {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
/* overflow-x: hidden;
|
||
|
|
overflow-y: auto; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropcontainer {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
height: 100px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.suggest,.partial {
|
||
|
|
width: 100%;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
/* padding: 10px; */
|
||
|
|
white-space: pre-wrap;
|
||
|
|
overflow-x:hidden;
|
||
|
|
overflow-y:auto;
|
||
|
|
height: 100px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.partial {
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
.suggest {
|
||
|
|
color: #999;
|
||
|
|
overflow-x:hidden;
|
||
|
|
overflow-y:auto;
|
||
|
|
/* overflow : hidden; */
|
||
|
|
}
|
||
|
|
.res0 {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
.dropdown {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
background-color: #eee;
|
||
|
|
border: 1px solid rgba(0, 0, 255, 0.25);
|
||
|
|
/* border-color: #ddd; */
|
||
|
|
/* padding: 5px; */
|
||
|
|
/* padding-top: 1px; */
|
||
|
|
/* padding-left: 1px; */
|
||
|
|
/* padding-right: 5px; */
|
||
|
|
/* padding-bottom: 5px; */
|
||
|
|
z-index: 20;
|
||
|
|
/* border:1px solid rgb(97, 97, 197); */
|
||
|
|
visibility: hidden;
|
||
|
|
}
|
||
|
|
#dummy {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
.spanres {
|
||
|
|
padding-right: 7px;
|
||
|
|
padding-top: 1px;
|
||
|
|
padding-bottom: 1px;
|
||
|
|
padding-left: 1px;
|
||
|
|
border: 1px solid rgba(0, 0, 255, 0.25);
|
||
|
|
display: block;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.perinstr {
|
||
|
|
font-size: 12px;
|
||
|
|
bottom: 10;
|
||
|
|
right: 10;
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
|
||
|
|
.switch {
|
||
|
|
padding: 15px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</html>
|