summaryrefslogtreecommitdiffstats
path: root/lanre_py/templates/layout.html
diff options
context:
space:
mode:
Diffstat (limited to 'lanre_py/templates/layout.html')
-rw-r--r--lanre_py/templates/layout.html224
1 files changed, 224 insertions, 0 deletions
diff --git a/lanre_py/templates/layout.html b/lanre_py/templates/layout.html
new file mode 100644
index 0000000..73005b9
--- /dev/null
+++ b/lanre_py/templates/layout.html
@@ -0,0 +1,224 @@
+<!doctype html>
+<title>Lanre</title>
+<link rel=stylesheet type=text/css href="{{ url_for('static', filename='bootstrap.css') }}">
+
+<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
+<style type="text/css">
+ body {
+ padding-top: 40px;
+ padding-bottom: 40px;
+ }
+ </style>
+
+<div class="container">
+
+ <div class="hero-unit">
+ <h1>Designed for your pleasure of reading foreign texts</h1>
+ </div>
+
+
+ <div class="row-fluid">
+
+ <div class="span8">
+ {% for message in get_flashed_messages() %}
+ <div class=flash>{{ message }}</div>
+ {% endfor %}
+
+ </div>
+
+ </div>
+
+<div class="row-fluid">
+ {% block body %}{% endblock %}
+</div><div class="row-fluid">
+
+
+<div class=" well-small">
+ <button class="btn btn-info" id="show-me-my-words">I added words. Now what?</button>
+ </br>
+
+ <div id="show-words" class="well-large well">
+ <div class="alert alert-info" id="my-words">
+ </div>
+
+ <textarea cols="20" rows="1" placeholder="me@email.com" id="email"></textarea>
+ <button class="btn btn-info btn-large" id="send-words">Send them to me!</button>
+
+ </div>
+ </div>
+ </div>
+
+
+</div>
+
+<script type=text/javascript>
+ $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
+ $LANGUAGE = "fren";
+</script>
+
+<script type="text/javascript">
+var communicates = "Here will be placed other info. Hover to get translation. Click to add for further reference. Insert your text and translate it."
+var translated_words;
+var original_words;
+var message;
+var words_to_be_remembered = new Array();
+$(document).ready( function() {
+$("#change-text").hide();
+$("#change-language-translate").hide();
+$("#current-translation").hide();
+$("#show-words").hide();
+$("#show-me-my-words").hide();
+change_communicat(communicates);
+
+
+ $("#send-words").click(function() {
+ var address;
+ address = $("#email").val();
+ console.log(address);
+ console.log(message);
+ send_mail(address, message);
+ var text_for_translation;
+ });
+
+ $("#submit-text").click(function() {
+
+ text_for_translation = $("#input-text").val();
+
+ //some magic
+ get_translation(text_for_translation);
+
+ //var translated_text = text_for_translation;
+ //$("#translated-text").html(translated_text);
+ $("#submit-text").hide();
+ $("#change-text").show();
+ $("#change-language-translate").show();
+ $("#input-text").hide();
+ });
+
+ $("#change-language-translate").click(function() {
+
+ var text_for_translation;
+ text_for_translation = $("#input-text").val();
+
+
+ //some magic
+ get_translation(text_for_translation);
+
+ //var translated_text = text_for_translation;
+ //$("#translated-text").html(translated_text);
+ $("#submit-text").hide();
+ $("#change-text").show();
+ $("#input-text").hide();
+ $("#show-words").hide();
+ $("#show-me-my-words").hide();
+ });
+
+ $("#change-text").click(function() {
+
+ $("#translated-text").html("");
+ $("#input-text").show().html("");
+ $("#submit-text").show();
+ $("#change-text").hide();
+ $("#change-language-translate").hide();
+ change_communicat("Insert some text!" );
+ $("#current-translation").hide();
+ $("#show-words").hide();
+ $("#show-me-my-words").hide();
+ });
+
+ $("#lifren").click(function() {
+ $LANGUAGE = "fren";
+ $(this).addClass("active");
+ $("#liiten").removeClass("active");
+ $("#lienit").removeClass("active");
+ });
+
+ $("#liiten").click(function() {
+ $LANGUAGE = "iten";
+ $(this).addClass("active");
+ $("#lifren").removeClass("active");
+ $("#lienit").removeClass("active");
+ });
+
+ $("#lienit").click(function() {
+ $LANGUAGE = "enit";
+ $(this).addClass("active");
+ $("#lifren").removeClass("active");
+ $("#liiten").removeClass("active");
+ });
+
+
+
+});
+$("#show-me-my-words").click( function() {
+ show_added_words();
+ $(this).hide();
+
+});
+
+function show_added_words() {
+ $("#show-words").show();
+ var words = "My words are:\n";
+ var i = 0;
+ console.log(words_to_be_remembered);
+ var local_message = "Words for you from Lanre:\n";
+ words_to_be_remembered.forEach(function(word, index){
+ words += "<p>" +index + ": " + word + "</p>";
+ local_message += index + ": " + word + "\n";
+ });
+ message = local_message;
+ $("#my-words").html(words)
+}
+
+function change_communicat(communicat) {
+ communicates = communicat;
+ $("#communicates").text(communicates);
+}
+
+function get_translation(text_for_translation) {
+
+ $(function() {
+ change_communicat("It may take some time..." );
+ $.getJSON( $SCRIPT_ROOT + '/_find_translations', {
+ text:text_for_translation,
+ language:$LANGUAGE
+ }, function(data) {
+ $("#translated-text").html(data.html_output);
+ translated_words = data.result;
+ original_words = data.words;
+ change_communicat("Done! Now you can hover on words or click them, for further reference." );
+ $(".word").click(function() {
+ var which_one = this.id;
+ var word_pair = original_words[which_one] +": " +translated_words[which_one];
+ words_to_be_remembered.push(word_pair);
+ $("#show-me-my-words").show();
+ change_communicat("You've just added a " + word_pair + " for further reference" );
+ $("#current-translation").show();
+ $("#current-translation").text(translated_words[which_one]);
+ });
+
+ $(".word").hover(function() {
+ var which_one = this.id;
+ $("#current-translation").show();
+ $("#current-translation").text(translated_words[which_one]);
+ });
+
+ });
+ return false;
+ });
+
+}
+
+function send_mail(address, message) {
+ change_communicat("I'm sending you mail..." );
+ $.getJSON( $SCRIPT_ROOT + '/_send_mail', {
+ mail_address:address,
+ message:message
+ }, function(data) {
+ change_communicat("Mail should be sent by now." );
+ }
+ );
+
+
+}
+</script> \ No newline at end of file