Adding Arabic index (#653)

Not easy to do. I want to test this.

index_ar.md

@@ -0,0 +1,153 @@
+<div dir="auto" class="teasing-part">                                                                      
+
+  <div class="home-logo">
+    <img src="/images/ynh_logo_white.png" width="100"/>
+  </div>
+
+  <div dir="auto" class="punchline">
+    <p>
+      <span class="yolo 1" style="color: #FF3399;">تعالي إلى منزلي، أنا مُستضافة عند صديقة</span>
+      <span class="yolo 2" style="color: #6699FF;">إن لم تقم باستضافة نفسك بنفسك في عمر الخمسين فاعرف أنك قد فشلت في حياتك</span>
+      <span class="yolo 3" style="color: #FF0066;">فاستضافوا أنفسهم بنفسم و كانت لهم ذرية كثيرة</span>
+      <span class="yolo 4" style="color: #3366FF;">الإنترنت، قراءة و كتابة</span>
+      <span class="yolo 5" style="color: #FFFFFF;">monsieur@michu.fr</span>
+      <span class="yolo 6" style="color: #CC66FF;">ليس هناك ما أخفيه</span>
+      <span class="yolo 7" style="color: #FF6600;">كيف التقيتُ بالسيرفر الخاص بك</span>
+    </p>
+    <button class="btn btn-primary btn-lg btn-block yolobtn">المعذرة ؟</button>
+  </div>
+
+  <div dir="auto" class="main-links hidden-xs">
+    <a href="/whatsyunohost">عن واي يونوهوست</a> <span class="colored-bar">•</span> 
+    <a href="https://forum.yunohost.org/c/announcement" target="_blank">آخر المستجدات</a> <span class="colored-bar">•</span> 
+    <a href="/docs">المستندات</a>
+  </div>
+
+</div><!-- teasing-part -->
+
+<div dir="auto" class="boring-part" markdown="1">
+
+  <a href="https://github.com/YunoHost" target="_blank" class="github-ribbon hidden-xs">
+    <img src="/images/github_ribbon_grey.png" alt="قم بتشعيبي على جيت هب">
+  </a>
+
+  <h1>YunoHost <small>أداة تُمكّنكم من تنصيب و استخدام خادمكم بأسلوب سهل.</small></h1>
+
+  <div class="home-panel">
+    <img src="/images/home_panel.jpg" />
+  </div>
+
+  <div dir="auto" class="call-to-action">
+    <a class="btn btn-primary btn-lg" href="/try">تجريب</a>
+    <a class="btn btn-success btn-lg" href="/install">تنصيب</a>
+    <p class="text-muted"><small><a href="https://forum.yunohost.org/t/yunohost-2-7-stable-release-eben-moglen-sortie-de-yunohost-2-7-stable-eben-moglen/3376">YunoHost v2.7</a></small></p>
+  </div>
+
+  <hr />
+
+  <div dir="auto" class="row cf">
+    <div class="col-md-7">
+      <h1>Installez <small>خادومكم بصورة سهلة، إنكم تمتلكون كل ما تحتاجون إليه عندكم في المنزل</small></h1>
+      <p><a href="/hardware">الإطلاع على المتطلبات الأساسية</a></p>
+    </div>
+    <div class="col-md-4">
+      <div class="feature-pic">
+        <img src="/images/home_install.png" />
+      </div>
+    </div>
+  </div>
+
+  <hr />
+
+  <div dir="auto" class="row cf">
+    <div class="col-md-4">
+      <div class="feature-pic">
+        <img src="/images/home_enjoy.jpg" />
+      </div>
+    </div>
+    <div class="col-md-7 text-right">
+      <h1>استمتعوا <small>بتطبيقات الويب الخاصة بكم و انشؤا موطنكم الصغير على الإنترنت</small></h1>
+      <p><br /><a href="/apps">قائمة التطبيقات المتوفرة</a></p>
+    </div>
+  </div>
+
+  <hr />
+
+  <div dir="auto" class="row cf">
+    <div class="col-md-7">
+      <h1>أديروا <small>السيرفر الخاص بكم كما يحلو لكم : سواءا عبر الويب أو جهازك المحمول أو عبر سطر الأوامر</small></h1>
+      <p><br /><a href="/try">جربوا الواجهة الإدارية</a></p>
+    </div>
+    <div class="col-md-4">
+      <div class="feature-pic">
+        <img src="/images/home_manage.jpg" />
+      </div>
+    </div>
+  </div>
+
+  <hr />
+
+  <div dir="auto" class="row cf">
+    <div class="col-md-4 button-list">
+
+      <a class="btn btn-lg btn-block btn-primary" href="/whatsyunohost">ما هو واي يونوهوست</a>
+      <a class="btn btn-lg btn-block btn-info" href="/docs">الدليل</a>
+      <a class="btn btn-lg btn-block btn-success" href="/contribute">كيف يمكنكم المساهمة</a>
+      <a class="btn btn-lg btn-block btn-warning" href="https://forum.yunohost.org" target="_blank">المنتدى</a>
+      <a class="btn btn-lg btn-block btn-default" href="chat_rooms" target="_blank">غُرف المحادثة</a>
+      <a class="btn btn-lg btn-block btn-danger" href="https://forum.yunohost.org/c/announcement">آخر الأخبار</a>
+      <a class="btn btn-lg btn-block btn-danger btn-support" href="/help">المساعدة</a>
+
+    </div>
+    <div class="col-md-7 text-right">
+      <h1>إكتشفوا <small>قدرات خادمكم، ولماذا ذلك مهم بالنسبة لكم</small></h1>
+      <p><br /><a href="/docs">إطلعوا على الدليل</a></p>
+    </div>
+  </div>
+
+  <hr />
+
+  <div dir="auto" class="text-center">
+    <h1>تذكروا ! نحن بشر !<br /><small> إن كان عندكم ساؤل أو واجهتكم مشكلة أو يهمكم الأمر لقد، انضموا إلينا عبر عرفة المحادثة الخاصة بنا لتبليغنا السلام بالنقر على الزر أدناه &nbsp;<span class="glyphicon glyphicon-share-alt"></span> </small></h1>
+<!--
+    <p class="liberapay">
+      <a href="https://liberapay.com/YunoHost" target="_blank"><img src="/images/liberapay_logo.svg" alt="Donation button" title="Liberapay" /></a>
+    </p>
+-->
+  </div>
+
+</div><!-- boring-part -->
+
+<script type="text/javascript">
+    jQuery('.teasing-part').css({
+        marginTop: '0',
+        display: 'block'
+    });
+    jQuery('.boring-part').css({
+        marginTop: jQuery(window).height() + 100
+    });
+    jQuery( window ).resize(function() {
+        jQuery('.boring-part').css({
+            marginTop: jQuery('.teasing-part').height() + 100
+        });
+    });
+    jQuery('.yolo').hide();
+    randomNumber = Math.floor((Math.random()*jQuery('.yolo').length)+1);
+    color = jQuery('.yolo.' + randomNumber).css('color');
+    jQuery('.yolo.' + randomNumber).fadeIn();
+    document.title = jQuery('.yolo.' + randomNumber).text();
+    jQuery('.colored-bar').css({
+      color: color,
+      fontWeight: 'bold',
+      padding: '1%'
+    });
+    jQuery('.yolobtn').css({
+      background: color,
+      borderColor: color
+    }).on('click', function() {
+      jQuery('html, body').animate({
+        scrollTop: jQuery(window).height() + 80
+      }, 500);
+    });
+
+</script>