Except from usage of dictionary api it looks pretty nice now.

lanre_py/lanre.py

@@ -40,51 +40,10 @@ def teardown_request(exception):
 
 @app.route('/')
 def ask_for_text():
-	
 	return render_template('ask_for_text.html')
 	
-@app.route('/options', methods=['POST'])
-def add_entry():
-	if not session.get('logged_in'):
-		abort(401)
-	g.db.execute('insert into entries (title, text) values (?, ?)',
-				 [request.form['title'], request.form['text']])
-	g.db.commit()
-	flash('New entry was successfully posted')
-	return redirect(url_for('ask_for_text.html'))
 	
 
-@app.route('/login', methods=['GET', 'POST'])
-def login():
-	error = None
-	if request.method == 'POST':
-		if request.form['username'] != app.config['USERNAME']:
-			error = 'Invalid username'
-		elif request.form['password'] != app.config['PASSWORD']:
-			error = 'Invalid password'
-		else:
-			session['logged_in'] = True
-			flash('You were logged in')
-			return redirect(url_for('ask_for_text'))
-	return render_template('login.html', error=error)
-	
-
-@app.route('/logout')
-def logout():
-	session.pop('logged_in', None)
-	flash('You were logged out')
-	return redirect(url_for('ask_for_text'))
-	
-
-def get_exact_translation(retrieved_json):
-	try:
-		response = retrieved_json["term0"]["PrincipalTranslations"]["0"]["FirstTranslation"]["term"]
-		if len(response) == 0:
-			response = "No translation"
-	except:
-		response = "No translation"
-	return response
-
 @app.route('/_find_translations')
 def find_translations():
 	text_for_translation = request.args.get('text', 0)
@@ -95,7 +54,6 @@ def find_translations():
 	for word in words:
 		translation = get_exact_translation(requests.get(dictionary_link + strip_punctuation(word)).json)
 		translations.append(translation)
-
 	return jsonify(result=translations, words=words, html_output=prepare_html_output(words))
 
 
@@ -118,8 +76,6 @@ def send_mail():
 	return jsonify(result="success")
 
 
-	
-
 
 def prepare_html_output(words):
 	words_with_html = ["<span class='word' id='" + str(i) +"'>" + word + "</span>" for i, word in enumerate(words)]
@@ -137,6 +93,22 @@ def strip_punctuation(word):
 		return word
 	
 
+def get_exact_translation(retrieved_json):
+	try:
+		response = fetch_translations(retrieved_json)
+		if len(response) == 0:
+			response = "No translation"
+	except:
+		response = "No translation"
+	return response
+
+def fetch_translations(retrieved_json):
+	response = ""
+	if(retrieved_json["term0"]["PrincipalTranslations"]["0"]["FirstTranslation"]["term"] != ""):
+		response += retrieved_json["term0"]["PrincipalTranslations"]["0"]["FirstTranslation"]["term"] + ", "
+	return response
+	
+	#this api is broken and inconsistent, I don't like it, mayby it'd be better to start with something different soon?
 #a95ae api key for word reference is: a95ae
 #http://www.wordreference.com/docs/api.aspx
 

lanre_py/static/scripts.js

@@ -0,0 +1,218 @@
+
+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();
+$("#translation-label").hide();
+$("#show-words").hide();
+$("#show-me-my-words").hide();
+$("#help-block").hide();
+$("#instructions").text("Put your text below:");
+change_communicat(communicates);
+
+$("#help-me").click(function() {
+     $("#help-block").show();
+     $(this).hide();
+  });
+
+$("#thanks-for-help").click(function() {
+     $("#help-block").hide();
+     $("#help-me").show();
+  });
+  $("#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();
+     get_translation(text_for_translation);
+
+     $("#submit-text").hide();
+     $("#change-text").show();
+     $("#instructions").text("Enjoy your reading");
+     $("#change-language-translate").show();
+     $("#input-text").hide();
+   });
+
+    $("#change-language-translate").click(function() {
+     
+     var text_for_translation;
+     text_for_translation = $("#input-text").val();
+     get_translation(text_for_translation);
+     $("#instructions").text("Enjoy your reading");
+     $("#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();
+     $("#instructions").text("Put some text below:");
+     change_communicat("Insert some text!" );
+     $("#current-translation").hide();
+     $("#translation-label").hide();
+     $("#show-words").hide();
+      $("#show-me-my-words").hide();
+   });
+
+  $("#lifren").click(function() {
+    $LANGUAGE = "fren";
+    $(this).addClass("active");
+    $("#liiten").removeClass("active");
+    $("#lienit").removeClass("active");
+     $("#liesen").removeClass("active");
+    $("#lienes").removeClass("active");
+    $("#lienfr").removeClass("active");
+  });
+
+  $("#lienfr").click(function() {
+    $LANGUAGE = "enfr";
+    $(this).addClass("active");
+    $("#liesen").removeClass("active");
+    $("#lienes").removeClass("active");
+    $("#lifren").removeClass("active");
+
+    $("#liiten").removeClass("active");
+    $("#lienit").removeClass("active");
+  });
+
+  $("#liesen").click(function() {
+    $LANGUAGE = "esen";
+    $(this).addClass("active");
+    $("#liiten").removeClass("active");
+    $("#lienit").removeClass("active");
+     $("#lienfr").removeClass("active");
+    $("#lienes").removeClass("active");
+    $("#lifren").removeClass("active");
+  });
+
+  $("#lienes").click(function() {
+    $LANGUAGE = "enes";
+    $(this).addClass("active");
+    $("#liiten").removeClass("active");
+    $("#lienit").removeClass("active");
+    $("#liesen").removeClass("active");
+    $("#lienfr").removeClass("active");
+    $("#lifren").removeClass("active");
+  });
+
+
+  $("#liiten").click(function() {
+    $LANGUAGE = "iten";
+    $(this).addClass("active");
+     $("#liesen").removeClass("active");
+    $("#lienes").removeClass("active");
+    $("#lifren").removeClass("active");
+    $("#lienfr").removeClass("active");
+    $("#lienit").removeClass("active");
+  });
+
+  $("#lienit").click(function() {
+    $LANGUAGE = "enit";
+    $(this).addClass("active");
+    $("#liesen").removeClass("active");
+    $("#lienes").removeClass("active");
+    $("#lienfr").removeClass("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();
+          $("#translation-label").show();
+          $("#current-translation").text(translated_words[which_one]);
+        });
+
+        $(".word").hover(function() {
+          var which_one = this.id;
+          $("#current-translation").show();
+          $("#translation-label").show();
+          $("#instructions").text("Enjoy your reading");
+          $("#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." );
+        $("#show-words").hide();
+        $("#show-me-my-words").hide();
+      }
+    );
+
+  
+}

lanre_py/templates/ask_for_text.html

@@ -5,17 +5,27 @@
     <li id="lifren" class="active">
       <a href="#language-options">French English</a>
     </li>
+    <li id="lienfr">
+      <a href="#language-options">English French</a>
+    </li>
    <li id="liiten">
       <a href="#language-options">Italian English</a>
     </li>
     <li id="lienit">
       <a href="#language-options">English Italian</a>
     </li>
+    <li id="lienes">
+      <a href="#language-options">English Spanish</a>
+    </li>
+    <li id="liesen">
+      <a href="#language-options">Spanish English</a>
+    </li>
+
   </ul>
 </div>
   <div class="row-fluid">
     <div class="span10">
-      <p>Put your text below:</p>
+      <h3 id="instructions">Put your text below:</h3>
       <textarea id="input-text" cols="20" rows="30"></textarea>
       </br>
       <div >
@@ -29,7 +39,9 @@
 
 
     <div class="span2">
+      <h3>Tips:</h3>
       <p id="communicates" class="alert alert-info"></p>
+      <h3 id="translation-label">Translation:</h3>
       <div id="current-translation" class="alert alert-success"></div>
     </div>
   </div>

lanre_py/templates/layout.html

@@ -2,7 +2,13 @@
 <title>Lanre</title>
 <link rel=stylesheet type=text/css href="{{ url_for('static', filename='bootstrap.css') }}">
 
+<script type=text/javascript>
+  $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
+  $LANGUAGE = "fren";
+</script>
+
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
+
 <style type="text/css">
       body {
         padding-top: 40px;
@@ -13,12 +19,37 @@
 <div class="container">
  
     <div class="hero-unit">
-      <h1>Designed for your pleasure of reading foreign texts</h1>
+      <div class="row-fluid">
+        <div class="span4">
+          <h1 >Lanre</h1>
+          
+        </div>
+        <div class="span8">
+          <h2>Designed for your pleasure of reading foreign texts</h2>
+          <button class="btn btn-large btn-info" id="help-me">Help me start</button>
+        </div>
+        
+      </div>
+      
     </div>
        
 
   <div class="row-fluid">
-    
+    <div class="alert alert-info" id="help-block"> 
+      <h1>What is it about?</h1>
+      <p>Thanks to this app you can read text in foreign language without searching all those words you don't understand in dictionaries. Which breaks your concentration on reading. Now you can just hover on word and read its meaning on the right. It's so easy and effortless. But there is something more, you can click words to add them to "words you want to review later" and they'll be sent to you if you only provide your email address.</p>
+      <h1>How can I use it?</h1>
+      <p>You can select some text, paste it in to box below and translate it. Then you'll be able to get meanings of the words by hovering on them. And then learn them by revising.</p>
+      <h1>How do I start?</h1>
+      <p>Put some text below, choose language and click translate button.</p>
+      <h1>How it could be developed?</h1>
+      <p>More languages, better translations and usage of dictionary api. It could be more user friendly, probably? Give me your feedback :)</p>
+      <h1>How can I give feedback?</h1>
+      <p>Write to author of this app, address is: justyna.ilczuk[at]gmail.com Feel free to write about your feelings and to suggest me improvements. </p>
+      <button class="btn btn-large btn-info pull-center" id="thanks-for-help">Thanks for help</button>
+    </br>
+    </br>
+    </div>
     <div class="span8">
       {% for message in get_flashed_messages() %}
       <div class=flash>{{ message }}</div>
@@ -30,10 +61,9 @@
   
 <div class="row-fluid">
     {% block body %}{% endblock %}
-</div><div class="row-fluid">
- 
-
-<div class=" well-small">
+</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>
 
@@ -51,176 +81,5 @@
   
 </div>
   
-<script type=text/javascript>
-  $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
-  $LANGUAGE = "fren";
-</script>
+<script type="text/javascript" src="{{ url_for('static', filename='scripts.js') }}"></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." );
-        $("#show-words").hide();
-        $("#show-me-my-words").hide();
-      }
-    );
-
-  
-}
-</script>

lanre_py/templates/login.html

@@ -1,14 +0,0 @@
-{% 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 %} 

lanre_py/templates/login.html~

@@ -1 +0,0 @@
- 

lanre_py/templates/show_entries.html~

@@ -1 +0,0 @@
-