help button

frontend/frontend/locale/en/LC_MESSAGES/django.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2017-06-26 13:30-0700\n"
+"POT-Creation-Date: 2017-07-04 14:32-0700\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -31,7 +31,7 @@ msgstr ""
 
 #: templates/base.html:65 templates/frontend/contact.html:7
 msgid "contact"
-msgstr "Contacts"
+msgstr "Contact"
 
 #: templates/base.html:93
 msgid "made_by"
@@ -41,11 +41,11 @@ msgstr "Made by"
 msgid "made_name"
 msgstr "Alexandr Nesterenko"
 
-#: templates/frontend/contact.html:19
+#: templates/frontend/contact.html:18
 msgid "contact.title"
 msgstr "Contact us by email:"
 
-#: templates/frontend/contact.html:25
+#: templates/frontend/contact.html:24
 msgid "contact.msg"
 msgstr "We will answer ASAP"
 
@@ -53,18 +53,26 @@ msgstr "We will answer ASAP"
 msgid "index_title"
 msgstr "PolitePol.com: Generate RSS feeds for any web page"
 
-#: templates/frontend/index.html:8 templates/frontend/index.html.py:14
+#: templates/frontend/index.html:8 templates/frontend/index.html.py:20
 msgid "brand"
 msgstr "Polite Pol"
 
-#: templates/frontend/index.html:16
+#: templates/frontend/index.html:16 templates/frontend/index.html.py:43
+msgid "help"
+msgstr "Help"
+
+#: templates/frontend/index.html:22
 msgid "hello"
 msgstr "Create your feed yourself!"
 
-#: templates/frontend/index.html:27
+#: templates/frontend/index.html:33
 msgid "go"
 msgstr "Go!"
 
+#: templates/frontend/index.html:46
+msgid "help.header"
+msgstr "Video tutorial how to make your feed:"
+
 #: templates/frontend/preview.html:11
 msgid "subscribe.feed_ready"
 msgstr "Feed is ready!"

frontend/frontend/locale/ru/LC_MESSAGES/django.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2017-06-26 13:30-0700\n"
+"POT-Creation-Date: 2017-07-04 14:32-0700\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -42,11 +42,11 @@ msgstr "Сделал"
 msgid "made_name"
 msgstr "Александр Нестеренко"
 
-#: templates/frontend/contact.html:19
+#: templates/frontend/contact.html:18
 msgid "contact.title"
 msgstr "Свяжитесь с нами по имэйлу:"
 
-#: templates/frontend/contact.html:25
+#: templates/frontend/contact.html:24
 msgid "contact.msg"
 msgstr "Мы ответим как можно скорее"
 
@@ -54,18 +54,26 @@ msgstr "Мы ответим как можно скорее"
 msgid "index_title"
 msgstr "PolitePol.com: Создай RSS канал для любой веб-страницы"
 
-#: templates/frontend/index.html:8 templates/frontend/index.html.py:14
+#: templates/frontend/index.html:8 templates/frontend/index.html.py:20
 msgid "brand"
 msgstr "Polite Pol"
 
-#: templates/frontend/index.html:16
+#: templates/frontend/index.html:16 templates/frontend/index.html.py:43
+msgid "help"
+msgstr "Помощ"
+
+#: templates/frontend/index.html:22
 msgid "hello"
 msgstr "Создай новостную ленту сам!"
 
-#: templates/frontend/index.html:27
+#: templates/frontend/index.html:33
 msgid "go"
 msgstr "Поехали!"
 
+#: templates/frontend/index.html:46
+msgid "help.header"
+msgstr "Видеоурок по созданию RSS ленты:"
+
 #: templates/frontend/preview.html:11
 msgid "subscribe.feed_ready"
 msgstr "Лента готова!"

frontend/frontend/static/frontend/assets/js/help.js

@@ -0,0 +1,98 @@
+(function(){
+
+var angle = 0;
+var speed = {x: -1.0, y: 0.0, rotation: 1.0};
+var g = 10.0;
+var pos = {left: 0, top: 0};
+
+var style; //= document.getElementById('buoy').style;
+var cont_el; //= document.getElementById('help');
+var cont; //= cont_el.style;
+
+function rect() {
+  return cont_el.getBoundingClientRect();
+}
+
+function height(_rect) {
+  return window.innerHeight - _rect.bottom;
+}
+
+var shot_msecs = 10;
+var timer = 500;
+function shot() {
+  if (timer == 500) {
+    // init
+    pos.left = rect().left;
+    pos.top = rect().top;
+    cont.position = 'fixed';
+  }
+
+  pos.top += speed.y;
+  pos.left += speed.x;
+
+  speed.y += g * shot_msecs / 1000;
+
+  angle += speed.rotation;
+  
+  style.transform = "rotate("+ angle + "deg)";
+  cont.left = pos.left + "px";
+  cont.top = pos.top + "px";
+
+  if (angle < 0)
+    angle += 360;
+  else if (angle >= 360)
+    angle -= 360;
+  
+  var _rect = rect();
+  // collation with ground
+  if (height(_rect) - speed.y < 0) {
+    speed.y = - speed.y / 2;
+    speed.rotation -= 1;
+    speed.x -= 1;
+  }
+
+  // continue until window left border
+  if (_rect.left + speed.x > -_rect.width)
+     setTimeout(shot, shot_msecs);
+  else {
+    //restore
+    cont.position = 'absolute';
+    cont.left = "";
+    cont.top = "0px";
+    speed = {x: -1.0, y: 0.0, rotation: 1.0};
+    pos = {right: 0, top: 0};
+    opacity();
+  }
+}
+
+var v = 0
+function opacity() {
+  cont.opacity = v;
+  v += 0.01;
+  if (v < 1)
+    setTimeout(opacity, shot_msecs);
+  else
+    v = 0;
+}
+
+
+window.onYouTubeIframeAPIReady = function() { // doesn't work
+  window.player = new YT.Player('helpPlayer', {
+  });
+};
+
+$(document).ready(function() {
+  style = document.getElementById('buoy').style;
+  cont_el = document.getElementById('help');
+  cont = cont_el.style;
+  
+  $('#helpModalRef').click(shot);
+  
+  $('#helpModal').on('hidden', function() {
+    if (window.player)
+      window.player.stopVideo(); 
+  })
+});
+
+
+})();

frontend/frontend/templates/frontend/index.html

@@ -9,7 +9,13 @@
 {% endblock %}
 
 {% block content %}
-<div class="welcom">
+<div class="welcom" style="position: relative">
+    <div id="help" style="position: absolute; z-index: 2; right:0; top: 0; width: 60px;">
+    <a href="#helpModal" id="helpModalRef" data-toggle="modal">
+    <span>{% trans 'help' %}</span>
+    <img id="buoy" src="{% static 'frontend/images/buoy.png' %}" alt="{% trans 'help' %}" style="width: 60px; height: 60px" />
+    </a>
+    </div>
     <img src="{% static 'frontend/images/pol.png' %}" alt="Hi!" />
     <h1>{% trans "brand" %}</h1>
 
@@ -30,4 +36,20 @@
         </div>
     </form>
 </div>
+<!-- Modal -->
+<div id="helpModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
+  <div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+    <h3 id="helpModalLabel">{% trans 'help' %}</h3>
+  </div>
+  <div class="modal-body">
+    <h4>{% trans 'help.header' %}</h4>
+    <iframe id="helpPlayer" type="text/html" width="100%" height="360"
+      src="https://www.youtube.com/embed/ygmQ0ck81Dk?enablejsapi=1&origin=http://politepol.com"
+      frameborder="0"></iframe>
+  </div>
+  <div class="modal-footer">
+    <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
+  </div>
+</div>
 {% endblock %}