From 272a0aa4487bf8043faa6a1cf161fd4484dbcdab Mon Sep 17 00:00:00 2001
From: Benoit Rospars <benoit.rospars@inria.fr>
Date: Tue, 23 Jul 2024 11:54:08 +0200
Subject: [PATCH] English version of homepage and editor's page
---
custom/epoc-theme/copyright.en.html | 14 +++
custom/epoc-theme/editeur.en.html | 177 +++++++++++++++++++++++++++
custom/epoc-theme/footer.en.html | 27 ++++
custom/epoc-theme/home.en.html | 21 +---
custom/epoc-theme/nav.html | 13 +-
custom/epoc-theme/newsletter.en.html | 10 ++
custom/main.en.html | 30 +++++
docs/editor.en.md | 4 +
docs/index.en.md | 2 +-
docs/js/scripts.js | 18 ++-
10 files changed, 286 insertions(+), 30 deletions(-)
create mode 100644 custom/epoc-theme/copyright.en.html
create mode 100644 custom/epoc-theme/editeur.en.html
create mode 100644 custom/epoc-theme/footer.en.html
create mode 100644 custom/epoc-theme/newsletter.en.html
create mode 100644 custom/main.en.html
create mode 100644 docs/editor.en.md
diff --git a/custom/epoc-theme/copyright.en.html b/custom/epoc-theme/copyright.en.html
new file mode 100644
index 0000000..a0d3f67
--- /dev/null
+++ b/custom/epoc-theme/copyright.en.html
@@ -0,0 +1,14 @@
+<!-- Copyright -->
+<div class="copyright">
+ <div class="container px-4 sm:px-8 lg:grid lg:grid-cols-2">
+ <ul class="mb-4 list-unstyled p-small">
+ <li class="mb-2">
+ <a href="{{ config.repo_url }}" target="_blank">
+ <i class="fab fa-gitlab"></i> Source code
+ </a>
+ </li>
+ </ul>
+ <p class="pb-4 p-small statement">Copyright © <a href="https://twitter.com/InriaLearnLab" class="no-underline">Inria Learning Lab</a></p>
+ </div> <!-- end of container -->
+</div> <!-- end of copyright -->
+<!-- end of copyright -->
\ No newline at end of file
diff --git a/custom/epoc-theme/editeur.en.html b/custom/epoc-theme/editeur.en.html
new file mode 100644
index 0000000..ad554ca
--- /dev/null
+++ b/custom/epoc-theme/editeur.en.html
@@ -0,0 +1,177 @@
+{% extends "main.en.html" %}
+
+{% block extrahead %}
+<style>
+ .md-main{
+ display: none;
+ padding: 0;
+ height:0;
+ }
+
+ @media screen and (max-width: 76.1875em) {
+ .md-main{
+ display: block;
+ }
+ }
+</style>
+{{ super() }}
+{% endblock %}
+
+{% block hero %}
+<!-- Header -->
+<header id="header" class="header py-28 text-center md:pt-36 lg:text-left xl:pt-44 xl:pb-32">
+ <div class="container px-4 sm:px-8 lg:grid lg:grid-cols-2 lg:gap-x-8">
+ <div class="mb-16 mt-16 xl:mr-12">
+ <h1 class="h1-large mb-5">ePoc Editor <small>(beta)</small></h1>
+ <p class="p-large mb-8">
+ The desktop application to design, build and publish your own mobile learning course in ePoc format.
+ </p>
+ <p class="p-large mb-8">Free and open <a href="{{ config.repo_url }}" target="_blank">source</a>. Developed by <a href="https://inria.fr/">Inria</a>.</p>
+ <h5 class="mb-5">Download:</h5>
+ <a class="btn-solid-lg" href="{{ config.extra.editor_link_windows | replace('${EDITOR_VERSION}', config.extra.editor_version) }}">
+ <i class="fab fa-windows"></i>Windows ({{ config.extra.editor_version }})
+ </a>
+ <a class="btn-solid-lg" href="{{ config.extra.editor_link_macos | replace('${EDITOR_VERSION}', config.extra.editor_version) }}">
+ <i class="fab fa-apple"></i>MacOS ({{ config.extra.editor_version }})
+ </a>
+ <a class="btn-solid-lg" href="{{ config.extra.editor_link_linux | replace('${EDITOR_VERSION}', config.extra.editor_version) }}">
+ <i class="fab fa-linux"></i>Linux ({{ config.extra.editor_version }})
+ </a>
+ <a class="btn-solid-lg" href="{{ config.repo_url }}" target="_blank">
+ <i class="fa fa-code-branch"></i>Source code
+ </a>
+ </div>
+ <div class="xl:text-right home-video">
+ <iframe class="shadow-xl outline-none w-full"
+ src="https://www.youtube.com/embed/86lbMmM03FU?modestbranding=1&autohide=1&rel=0&showinfo=0"
+ title="YouTube video player"
+ allowfullscreen
+ ></iframe>
+ </div>
+ </div> <!-- end of container -->
+</header> <!-- end of header -->
+<!-- end of header -->
+
+{% include "epoc-theme/newsletter.en.html" %}
+
+<!-- Features -->
+<div id="features" class="cards-1">
+ <div class="container px-4 sm:px-8 xl:px-4">
+
+ <!-- Card -->
+ <div class="card">
+ <div class="card-image">
+ <img src="/images/automated.svg" alt="alternative" />
+ </div>
+ <div class="card-body">
+ <h5 class="card-title">ERGONOMICS</h5>
+ <p class="mb-4">Visual and intuitive design interface with no coding skills required</p>
+ </div>
+ </div>
+ <!-- end of card -->
+
+ <!-- Card -->
+ <div class="card">
+ <div class="card-image">
+ <img src="/images/science.svg" alt="alternative" />
+ </div>
+ <div class="card-body">
+ <h5 class="card-title">ALL-IN-ONE</h5>
+ <p class="mb-4">Ready-to-use content: texts, videos, quizzes, activities</p>
+ </div>
+ </div>
+ <!-- end of card -->
+
+ <!-- Card -->
+ <div class="card">
+ <div class="card-image">
+ <img src="/images/securite.svg" alt="alternative" />
+ </div>
+ <div class="card-body">
+ <h5 class="card-title">PEDAGOGY</h5>
+ <p class="mb-4">Branching scenario, assessment, completion certificate, badges</p>
+ </div>
+ </div>
+ <!-- end of card -->
+
+ </div> <!-- end of container -->
+</div> <!-- end of cards-1 -->
+<!-- end of features -->
+
+<!-- Details 1 -->
+<div id="details" class="pt-12 pb-16 lg:pt-16">
+ <div class="container px-4 sm:px-8 lg:grid lg:grid-cols-12 lg:gap-x-12">
+ <div class="lg:col-span-7">
+ <div class="xl:mr-14">
+ <img class="inline" src="/images/editeur-video.png" alt="alternative" />
+ </div>
+ </div> <!-- end of col -->
+ <div class="lg:col-span-5">
+ <div class="mt-16 lg:mt-0 xl:mt-24">
+ <h2 class="mb-6">Ready to use</h2>
+ <p class="mb-4">Ready-to-use content customizable to your needs</p>
+ <ul class="list mb-7 space-y-2">
+ <li class="flex">
+ <i class="fas fa-chevron-right"></i>
+ <div>Videos, audios, texts</div>
+ </li>
+ <li class="flex">
+ <i class="fas fa-chevron-right"></i>
+ <div>Single/Multiple choice questions, Drag-and-drop, sorting, swipe</div>
+ </li>
+ <li class="flex">
+ <i class="fas fa-chevron-right"></i>
+ <div>Assessment, completion certificate and badges</div>
+ </li>
+ </ul>
+ </div>
+ </div> <!-- end of col -->
+ </div> <!-- end of container -->
+</div>
+<!-- end of details 1 -->
+
+
+<!-- Details 2 -->
+<div class="py-24">
+ <div class="container px-4 sm:px-8 lg:grid lg:grid-cols-12 lg:gap-x-12">
+ <div class="lg:col-span-5">
+ <div class="xl:mt-32">
+ <h2 class="mb-6">Educational scenario in a few clicks</h2>
+ <p class="mb-4">
+ Build your branching educational scenario using a visual and ergonomic interface
+ </p>
+ <!--<a class="btn-solid-reg popup-with-move-anim mr-1.5" href="#details-lightbox">Lightbox</a>
+ <a class="btn-outline-reg" href="article.html">Details</a>-->
+ </div>
+ </div> <!-- end of col -->
+ <div class="lg:col-span-7">
+ <div class="mb-12 lg:mb-0 xl:mr-14">
+ <img class="inline" src="/images/editeur-scenario.png" alt="alternative" />
+ </div>
+ </div> <!-- end of col -->
+ </div> <!-- end of container -->
+</div>
+<!-- end of details 2 -->
+
+
+<!-- Conclusion -->
+<div id="Télécharger" class="basic-5">
+ <div class="container px-4 sm:px-8 lg:grid lg:grid-cols-2">
+ <div class="mb-16 lg:mb-0">
+ <img src="/images/swipe.png" alt="alternative" />
+ </div>
+ <div class="lg:mt-24 xl:mt-44 xl:ml-12">
+ <p class="mb-9 text-gray-800 text-3xl leading-10">Download the ePoc app</p>
+ <a class="btn-solid-lg" href="{{ page.meta.apple_link if page.meta.apple_link else config.extra.apple_link }}"><i class="fab fa-apple"></i>Download</a>
+ <a class="btn-solid-lg" href="{{ page.meta.google_link if page.meta.apple_link else config.extra.google_link }}"><i class="fab fa-google-play"></i>Download</a>
+ </div>
+ </div> <!-- end of container -->
+</div> <!-- end of basic-5 -->
+<!-- end of conclusion -->
+
+{{ super() }}
+
+{% endblock %}
+
+{% block content %}
+{% endblock %}
\ No newline at end of file
diff --git a/custom/epoc-theme/footer.en.html b/custom/epoc-theme/footer.en.html
new file mode 100644
index 0000000..bc803f9
--- /dev/null
+++ b/custom/epoc-theme/footer.en.html
@@ -0,0 +1,27 @@
+<!-- Footer -->
+<div class="footer">
+ <div class="container px-4 sm:px-8">
+ <h5 class="mb-8 lg:max-w-3xl lg:mx-auto">ePoc is a free and open source mobile e-learning application. You can contact our team at the address : <a class="underline" href="mailto:ill-ePoc-contact@inria.fr">ill-ePoc-contact@inria.fr</a></h5>
+ <div class="social-container">
+ <span class="fa-stack">
+ <a href="https://www.facebook.com/Inria-Learning-Lab-269656773437569/">
+ <i class="fas fa-circle fa-stack-2x"></i>
+ <i class="fab fa-facebook-f fa-stack-1x"></i>
+ </a>
+ </span>
+ <span class="fa-stack">
+ <a href="https://twitter.com/InriaLearnLab">
+ <i class="fas fa-circle fa-stack-2x"></i>
+ <i class="fab fa-twitter fa-stack-1x"></i>
+ </a>
+ </span>
+ <span class="fa-stack">
+ <a href="https://www.youtube.com/playlist?list=PLJ1qHZpFsMsR7wceUpWOVTjJhI4gBC0wk">
+ <i class="fas fa-circle fa-stack-2x"></i>
+ <i class="fab fa-youtube fa-stack-1x"></i>
+ </a>
+ </span>
+ </div> <!-- end of social-container -->
+ </div> <!-- end of container -->
+</div> <!-- end of footer -->
+<!-- end of footer -->
\ No newline at end of file
diff --git a/custom/epoc-theme/home.en.html b/custom/epoc-theme/home.en.html
index 70b2fe0..31d2f60 100644
--- a/custom/epoc-theme/home.en.html
+++ b/custom/epoc-theme/home.en.html
@@ -1,4 +1,4 @@
-{% extends "main.html" %}
+{% extends "main.en.html" %}
{% block extrahead %}
<style>
@@ -23,7 +23,7 @@
<div class="container px-4 sm:px-8 lg:grid lg:grid-cols-2 lg:gap-x-8">
<div class="mb-16 lg:mt-32 xl:mt-40 xl:mr-12">
<h1 class="h1-medium mb-5">ePoc, mobile learning free and open source</h1>
- <p class="p-large mb-8">ePoc (<b>E</b>lectronic <b>P</b>ocket <b>O</b>pen <b>C</b>ourse) is a complete mobile learning free and open source solution. Discover <a href="./epocs">our courses</a> or create your own using <a href="./editor">the editor</a>. </p>
+ <p class="p-large mb-8">ePoc (<b>E</b>lectronic <b>P</b>ocket <b>O</b>pen <b>C</b>ourse) is a complete mobile learning free and open source solution. Discover our courses or create your own using <a href="./editor">the editor</a>. </p>
<p class="p-large mb-8">Free and <a href="{{ config.repo_url }}" target="_blank">open source</a>. Developed by <a href="https://inria.fr/" target="_blank">Inria</a>.</p>
<a class="btn-solid-lg" href="{{ page.meta.apple_link if page.meta.apple_link else config.extra.apple_link }}"><i class="fab fa-apple"></i>Download</a>
<a class="btn-solid-lg" href="{{ page.meta.google_link if page.meta.apple_link else config.extra.google_link }}"><i class="fab fa-google-play"></i>Download</a>
@@ -35,7 +35,7 @@
</header> <!-- end of header -->
<!-- end of header -->
-{% include "epoc-theme/newsletter.html" %}
+{% include "epoc-theme/newsletter.en.html" %}
<!-- Features -->
<div id="features" class="cards-1">
@@ -153,21 +153,6 @@
</div>
<!-- end of details 3 -->
-<!-- Conclusion -->
-<div id="Télécharger" class="basic-5">
- <div class="container px-4 sm:px-8 lg:grid lg:grid-cols-2">
- <div class="mb-16 lg:mb-0">
- <img src="images/swipe.png" alt="alternative" />
- </div>
- <div class="lg:mt-24 xl:mt-44 xl:ml-12">
- <p class="mb-9 text-gray-800 text-3xl leading-10">Download now on iOS or Android.</p>
- <a class="btn-solid-lg" href="{{ page.meta.apple_link if page.meta.apple_link else config.extra.apple_link }}"><i class="fab fa-apple"></i>Download</a>
- <a class="btn-solid-lg" href="{{ page.meta.google_link if page.meta.apple_link else config.extra.google_link }}"><i class="fab fa-google-play"></i>Download</a>
- </div>
- </div> <!-- end of container -->
-</div> <!-- end of basic-5 -->
-<!-- end of conclusion -->
-
{{ super() }}
{% endblock %}
diff --git a/custom/epoc-theme/nav.html b/custom/epoc-theme/nav.html
index 0449d68..d35f602 100644
--- a/custom/epoc-theme/nav.html
+++ b/custom/epoc-theme/nav.html
@@ -6,10 +6,10 @@
<!-- <a class="text-gray-800 font-semibold text-3xl leading-4 no-underline page-scroll" href="home.html">Pavo</a> -->
<!-- Image Logo -->
- <a class="inline-block mr-4 py-0.5 text-xl whitespace-nowrap hover:no-underline focus:no-underline" href="/">
+ <a class="inline-block mr-4 py-0.5 text-xl whitespace-nowrap hover:no-underline focus:no-underline" href="{{ config.extra.homepage | d(nav.homepage.url, true) | url }}">
<img src="/images/logo-epoc-by-inria.png" alt="alternative" class="h-10" />
</a>
-
+ <div class="flex">
<button class="menu-button background-transparent rounded text-xl leading-none hover:no-underline focus:no-underline text-gray-400" type="button" data-toggle="offcanvas">
<span class="navbar-toggler-icon inline-block w-8 h-8 align-middle"></span>
</button>
@@ -61,11 +61,12 @@
<i class="fab fa-android text-xl transition-all duration-200"></i>
</a>
</span>
- <!-- Site language selector -->
- {% if config.extra.alternate %}
- {% include "partials/alternate.html" %}
- {% endif %}
</div> <!-- end of navbar-collapse -->
+ <!-- Site language selector -->
+ {% if config.extra.alternate %}
+ {% include "partials/alternate.html" %}
+ {% endif %}
+ </div>
</div> <!-- end of container -->
</nav> <!-- end of navbar -->
<!-- end of navigation -->
\ No newline at end of file
diff --git a/custom/epoc-theme/newsletter.en.html b/custom/epoc-theme/newsletter.en.html
new file mode 100644
index 0000000..9db23b6
--- /dev/null
+++ b/custom/epoc-theme/newsletter.en.html
@@ -0,0 +1,10 @@
+<div class="py-8 bg-gray">
+ <div class="container px-4 sm:px-8">
+ <h3 class="mb-2 text-center lg:max-w-xl lg:mx-auto">Newsletter</h3>
+ <p class="text-center p-large mb-4">To receive news about the application, the editor, and ePoc courses.</p>
+ <form id="newsletter" data-confirm="Registration successful" data-lang="en" class="justify-center mt-4 flex">
+ <input class="appearance-none border rounded w-full py-2 px-3 max-w-md text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="newsletter_email" type="email" placeholder="Email">
+ <input type="submit" value="Subscribe" class="ml-2 cursor-pointer text-white bg-red-600 hover:bg-red-700 focus:ring-4 focus:ring-red-300 font-medium rounded text-sm px-5 py-2.5 text-center" id="newsletter_submit">
+ </form>
+ </div> <!-- end of container -->
+</div>
\ No newline at end of file
diff --git a/custom/main.en.html b/custom/main.en.html
new file mode 100644
index 0000000..57d1a30
--- /dev/null
+++ b/custom/main.en.html
@@ -0,0 +1,30 @@
+{% extends "base.html" %}
+
+{% block extrahead %}
+<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet" />
+<link href="/css/fontawesome-all.css" rel="stylesheet" />
+<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
+<link href="https://unpkg.com/@tailwindcss/typography@0.4.1/dist/typography.min.css" rel="stylesheet" />
+<link href="/css/swiper.css" rel="stylesheet" />
+<link href="/css/magnific-popup.css" rel="stylesheet" />
+<link href="/css/styles.css" rel="stylesheet" />
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
+{% endblock %}
+
+{% block header %}
+{% include "epoc-theme/nav.html" %}
+{% endblock %}
+
+{% block content %}
+{{ super() }}
+{% endblock %}
+
+{% block footer %}
+{% include "epoc-theme/footer.en.html" %}
+{% include "epoc-theme/copyright.en.html" %}
+{% endblock %}
+
+{% block scripts %}
+{{ super() }}
+{% include "epoc-theme/script.html" %}
+{% endblock %}
\ No newline at end of file
diff --git a/docs/editor.en.md b/docs/editor.en.md
new file mode 100644
index 0000000..31708c5
--- /dev/null
+++ b/docs/editor.en.md
@@ -0,0 +1,4 @@
+title: Editor (beta)
+template: epoc-theme/editeur.en.html
+description: "ePoc Editor: create your own mobile learning courses"
+img: /images/accueil-editeur.png
\ No newline at end of file
diff --git a/docs/index.en.md b/docs/index.en.md
index 8ed6d6b..d34d676 100644
--- a/docs/index.en.md
+++ b/docs/index.en.md
@@ -1,4 +1,4 @@
title: Home
template: epoc-theme/home.en.html
-description: "ePoc: l'apprentissage sur mobile libre et ouvert"
+description: "ePoc: mobile learning free and open source"
img: /images/accueil.png
diff --git a/docs/js/scripts.js b/docs/js/scripts.js
index ad6c6ab..45165f5 100644
--- a/docs/js/scripts.js
+++ b/docs/js/scripts.js
@@ -179,7 +179,10 @@
function changeActive() {
const menuItems = getMenuItems();
$.each(menuItems, function(index, value){
- var offsetSection = $('#' + value).offset().top;
+ if (!value || !value.replace('/', '')) return;
+ var elem = $('#' + value.replace('/', ''));
+ if (elem.length < 1) return;
+ var offsetSection = elem.offset().top;
var docScroll = $(document).scrollTop();
var docScroll1 = docScroll + 1;
@@ -191,18 +194,23 @@
}
/* Newsletter */
- $('#newsletter').submit(function(event) {
+ var nl = $('#newsletter');
+ nl.submit(function(event) {
event.preventDefault();
var email = $('#newsletter_email').val();
- var prevEmails = JSON.parse(localStorage.getItem('newsltterEmails')) || [];
+ var prevEmails = JSON.parse(localStorage.getItem('newsletterEmails')) || [];
if (!email && !_paq) return;
if (prevEmails.indexOf(email) === -1) {
- _paq.push(['trackEvent', 'Newsletter', 'Subscribe', email]);
+ var eventName = 'Subscribe';
+ if (nl.data('lang')) {
+ eventName = eventName + '-' + nl.data('lang')
+ }
+ _paq.push(['trackEvent', 'Newsletter', eventName, email]);
prevEmails.push(email)
localStorage.setItem('newsletterEmails', JSON.stringify(prevEmails))
}
Toastify({
- text: "Inscription réussie",
+ text: nl.data('confirm') || "Inscription réussie",
duration: 3000,
gravity: "bottom",
position: "center",
--
GitLab