diff options
author | Justyna Ilczuk <justyna.ilczuk@gmail.com> | 2012-12-24 14:51:12 +0100 |
---|---|---|
committer | Justyna Ilczuk <justyna.ilczuk@gmail.com> | 2012-12-24 14:51:12 +0100 |
commit | 321f41e8fd67a30ad12bab1ed36296912fcb0c53 (patch) | |
tree | 4a307ad550cec4418ba86c3259dfd006c58c8fd9 /lanre_py/templates | |
download | lanre-321f41e8fd67a30ad12bab1ed36296912fcb0c53.tar.gz lanre-321f41e8fd67a30ad12bab1ed36296912fcb0c53.tar.bz2 lanre-321f41e8fd67a30ad12bab1ed36296912fcb0c53.zip |
That's a web-app for reading with translations. Try it out.
Diffstat (limited to 'lanre_py/templates')
-rw-r--r-- | lanre_py/templates/ask_for_text.html | 38 | ||||
-rw-r--r-- | lanre_py/templates/layout.html | 224 | ||||
-rw-r--r-- | lanre_py/templates/layout.html~ | 1 | ||||
-rw-r--r-- | lanre_py/templates/login.html | 14 | ||||
-rw-r--r-- | lanre_py/templates/login.html~ | 1 | ||||
-rw-r--r-- | lanre_py/templates/show_entries.html~ | 1 |
6 files changed, 279 insertions, 0 deletions
diff --git a/lanre_py/templates/ask_for_text.html b/lanre_py/templates/ask_for_text.html new file mode 100644 index 0000000..44cb0fa --- /dev/null +++ b/lanre_py/templates/ask_for_text.html @@ -0,0 +1,38 @@ +{% extends "layout.html" %} +{% block body %} +<div class="row-fluid"> + <ul class="nav nav-pills" id="language-options"> + <li id="lifren" class="active"> + <a href="#language-options">French English</a> + </li> + <li id="liiten"> + <a href="#language-options">Italian English</a> + </li> + <li id="lienit"> + <a href="#language-options">English Italian</a> + </li> + </ul> +</div> + <div class="row-fluid"> + <div class="span10"> + <p>Put your text below:</p> + <textarea id="input-text" cols="20" rows="30"></textarea> + </br> + <div > + <p id="translated-text"></p> + </div> + <button class="btn btn-info btn-large" id="submit-text">Translate it for me!</button> + <button class="btn-info btn" id="change-text" >I want to translate something else...</button> + <button class="btn-info btn" id="change-language-translate">Translate it again, in different language!</button> + </div> + + + + <div class="span2"> + <p id="communicates" class="alert alert-info"></p> + <div id="current-translation" class="alert alert-success"></div> + </div> + </div> + +{% endblock %} + 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 diff --git a/lanre_py/templates/layout.html~ b/lanre_py/templates/layout.html~ new file mode 100644 index 0000000..8d1c8b6 --- /dev/null +++ b/lanre_py/templates/layout.html~ @@ -0,0 +1 @@ + diff --git a/lanre_py/templates/login.html b/lanre_py/templates/login.html new file mode 100644 index 0000000..ba80022 --- /dev/null +++ b/lanre_py/templates/login.html @@ -0,0 +1,14 @@ +{% extends "layout.html" %} +{% block log %} + <h2>Login</h2> + {% if error %}<p class=error><strong>Error:</strong> {{ error }}{% endif %} + <form action="{{ url_for('login') }}" method=post> + <dl> + <dt>Username: + <dd><input type=text name=username> + <dt>Password: + <dd><input type=password name=password> + <dd><input type=submit value=Login> + </dl> + </form> +{% endblock %} diff --git a/lanre_py/templates/login.html~ b/lanre_py/templates/login.html~ new file mode 100644 index 0000000..8d1c8b6 --- /dev/null +++ b/lanre_py/templates/login.html~ @@ -0,0 +1 @@ + diff --git a/lanre_py/templates/show_entries.html~ b/lanre_py/templates/show_entries.html~ new file mode 100644 index 0000000..8d1c8b6 --- /dev/null +++ b/lanre_py/templates/show_entries.html~ @@ -0,0 +1 @@ + |