Studio :: λ3

3 | list | login |load

| |

{require ;;
;; my_library ;;
lib_watch ;;
linear_watch ;;
lib_block_edit_L3 ;;
lib_nav_L3 ;;
lib_accord_studio ;;
quicksand ;;
}

{{hide}{def colOR0 transparent} }
{{hide}{def colOR1 red} }
{{hide}{def colOR2 green} }
{{hide}{def colOR3 green} }
{{hide}{def colOR4 green} }
{{hide}{def colOR5 blue} }
{{hide}{def colOR6 indigo} }
{{hide}{def colOR7 violet} }
{{hide}{def colOR8 green} }
{{hide}{def colOR9 green} }
{{hide}{def colOR10 green} }
{{hide}{def colOR11 orange} }
{{hide}{def colOR12 green} }
{{hide}{def colOR13 green} }
{{hide}{def colOR14 green} }
{{hide}{def colOR15 green} }
{{hide}{def colOR16 green} }
{{hide}{def colOR17 green} }
{{hide}{def colOR18 green} }
{{hide}{def colOR19 green} }
{{hide}{def colOR20 green} }
{{hide}{def colOR21 green} }
{{hide}{def colOR211 green} }
{{hide}{def colOR22 yellow} }
{{hide}{def colOR221 blue} }
{{hide}{def colOR23 green} }
{{hide}{def colOR231 green} }
{{hide}{def colOR31 green} }
{{hide}{def colOR311 green} }
{{hide}{def colOR32 indigo} }
{{hide}{def colOR321 violet} }
{{hide}{def colOR33 green} }
{{hide}{def colOR331 green} }
{{hide}{def colOR34 orange} }
{{hide}{def colOR341 green} }
{{hide}{def colOR4 green} }
{{hide}{def colOR41 orange} }
{{hide}{def colOR411 orange} }

{EDITOR 200}

;; _p {center {i Le premier site de la [[{b Galaxie λ3 - Liber3}|https://www.studio.liber3.net/]], écrit à quatre mains et à deux têtes, mais à un seul cœur en attendant d'être rejoint par la foule des autres…}}

{script ;;
var getId = function(id) { return document.getElementById(id) };

var HMS = function ( w ) {
    var d = new Date(),
        h = d.getHours(),
        m = d.getMinutes(),
        s = d.getSeconds();
    getId('linear_watch_hours').style.width = (w/24*h) + 'px';
    getId('linear_watch_hours').innerHTML = h;
    getId('linear_watch_minutes').style.width = (w/60*m) + 'px';
    getId('linear_watch_minutes').innerHTML = m;
    getId('linear_watch_seconds').style.width = (w/60*s) + 'px';
    getId('linear_watch_seconds').innerHTML = s;
};
setInterval( HMS, 1000, 600 );
}

{{hide}
 {def HMS
  {lambda {:hms :back :col}
   {div {@ id=":hms"
           style="width:0px; height:5px;
                  text-align:right; padding-right:5px;
                  background::back; color::col;
                  line-height:0.4em;
                  text-shadow:0 0 8px #000; font-weight:bold;"}}}}

{def linear_watch 
 {div {@ style="box-shadow:0 0 8px #000;
                background:#444; 
                border:1px solid #fff;
                margin-top:10px;"}
      {HMS linear_watch_hours #f00 #fff}
      {HMS linear_watch_minutes #0f0 #fff}
      {HMS linear_watch_seconds #00f #fff} }}
}

{{hide} {def uncover
 {lambda {:im :h1 :h2}
  {img {@ src=":im"
          style="width: 100%;
                 height: :h1px;
                 object-fit: cover;
                 -webkit-transition: all 0.5s;  
                    -moz-transition: all 0.5s;  
                      -o-transition: all 0.5s;  
                         transition: all 0.5s;"
        onclick="this.style.height=
                (this.style.height===':h1px')? ':h2px' : ':h1px'"}}}}
}

;; ------------------------------------------------
;; À LIRE SVP
;; ------------------------------------------------

{{hide}
_p Cette vue (qui n'est éditable qu'en apparence vu qu'elle ne conserve pas les modifications qu'on y apporte) est en revanche très précieuse en ce qu'elle dispense le dernier état du code de la présente page, permettant ainsi certaines opérations importantes de maintenance et de programmation.

_p Si l'on souhaite conserver les modifications, il faut - à condition d'être identifié afin de récupérer les droits d'édition -, pénétrer dans l'éditeur de code général - ce qui s'obtient par simple clic sur le nom de la page (situé en haut de l'écran à droite du nom du site dont il se trouve séparé par les ::) ou par double clic cette fois sur les titres des sections figurant dans des cadres rectangulaires tout au long de la page afin de pénétrer dans l'éditeur local.

_p Le simple clic appliqué sur les mêmes zones a lui pour effet d'afficher le contenu sous-jacent à chaque titre tandis qu'un autre clic appliqué en retour sur le même titre le fait disparaître.

_p Il y a moyen d'exercer une commande s'appliquant à la totalité de la page de façon à en déployer puis replier d'un seul coup toute l'arborescence, c'est celui qui consiste à cliquer sur le bouton » situé dans le coin supérieur droit de l'écran, lequel se transformera ensuite en « pour obtenir l'effet inverse.

_p La validation par enregistrement du contenu s'effectue alors, soit en deux temps en cliquant sur le bouton ʘ situé à droite du bouton précédemment évoqué soit en un seul - uniquement si l'on se trouve dans l'environnement de l'éditeur global - en cliquant sur le bouton SAVE qui apparaît quand on appelle celui-ci.

_p En permanence animés que nous sommes par un souci de transparence et de pédagogie qui est le nôtre depuis toujours et auquel nous entendons demeurer fidèles, ne soyez pas étonnés de nous voir utiliser tous les moyens qui se trouvent à notre disposition pour vous faire partager tout au long du chemin notre expérience, à défaut d'expertise, et notre plaisir en tout cas de parcourir le '{lambda way}.

_p Il est à noter que la raison pour laquelle le texte que vous êtes en train de lire n'apparaît pas à l'écran est qu'il se trouve enclos dans une balise '{hide} qui empêche son affichage. '{hide} est également à présent l'aspect qu'a revêtu le bouton sur lequel vous avez appuyé, vous invitant à cliquer de nouveau dessus afin de revenir en mode consultation afin de poursuivre votre exploration du site, si vous le souhaitez, sans oubliez de profiter de ces "bornes" de guidage que nous disposons régulièrement, comme de petits caillous blancs, afin d'accompagner votre cheminement.

}

;; ------------------------------------------------
;; WATCH
;; ------------------------------------------------
 
{{hide} {def WATCH

{div
  {@ style="position:absolute; top: 82px; left: 685px;"} {clock 200}
}

{script ;;
 function HMS( w ) {
    var d = new Date(),
        h = d.getHours(),
        m = d.getMinutes(),
        s = d.getSeconds();
    getId('hours').style.width = (w/24*h) + 'px';
    getId('hours').innerHTML = h;
    getId('minutes').style.width = (w/60*m) + 'px';
    getId('minutes').innerHTML = m;
    getId('seconds').style.width = (w/60*s) + 'px';
    getId('seconds').innerHTML = s;
  }
setInterval( HMS, 1000, 600 );
} ;;

{div {@ style="display:none"}
 {def HMS {lambda {:hms :back :col}
  {div
   {@ id=":hms"
      style="width:0px; height:5px;
             text-align:right; padding-right:5px;
             background::back; color::col;
             line-height:0.4em;
             text-shadow:0 0 8px #000; font-weight:bold;"
 }}}} }

{div {@ style="box-shadow:0 0 8px #000;
               background:#444; 
               border:1px solid #fff;
               margin-bottom:10px;"}
{HMS hours #f00 #fff}
{HMS minutes #0f0 #fff}
{HMS seconds #00f #fff} 
}}
}

{WATCH}

;; ------------------------------------------------
;; CONTRUNCOVER
;; ------------------------------------------------

{uncover data/concert.jpg 380 100}  ;; https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.2zpUzU5uzHk8c-a1TKam1AHaE8%26pid%3DApi&f=1 - https://www.zikinf.com/_gfx/annonces/dyn/129h-studio-studio-3010993.jpg?1592222724  -  data/cover_studio.jpeg 500 100  -  data/concert.jpg

{editor 100} ;; Commande d'édition de bloc - le paramètre qui la complète (fixé par défaut à 100) définit la taille de l'éditeur, c'est-à-dire la hauteur réservée à son affichage de base à l'écran, sachant que celle-ci peut ensuite être étendue (ou réduite), pour chacun des trois textareas qui le composent, au moyen de la poignée située à son coin inférieur droit.

{{hide} {def sep /}}

;; ------------------------------------------------
;; LOGO
;; ------------------------------------------------

{{hide} {def SPOT {lambda {:station :r :x :y}
{div {@ style="
position:absolute; 
z-index: 1;
top:{- :y :r}px; left:{- :x :r}px; 
width:{* 2 :r}px; height:{* 2 :r}px; 
box-shadow: 0 0 8px black; 
border-radius::rpx; 
background:#ffa; 
opacity: 0.2;" 
onmouseover="this.style.background='#f00'" 
onmouseout="this.style.background='#ffa'"
onclick="show_hide(this)"
}}}}}

{SPOT key 283 780 350}

{div
  {@ style="position: fixed; top: 115px; left: 725px;"} 
  {img {@ src="data/icons8-open-source-500.png" width="25%"}}
}

{div 
 {@ id="myID"
 style="position: absolute;
 top: 290px;
 left: 50px; 
 border: 2px solid orange;
 width: 200px;
 background: yellow;
 font-size: xx-large; bold;
 color: orange;
 text-align: center;
 box-shadow: 0 0 8px black;"
 } 
 <blink>[[Entrance to|?view=PerSong]]</blink>
}

{{title}

{div 
 {@ id="myID'"
 style="position: absolute;
 top: 290px;
 right: 50px; 
 border: 2px solid orange;
 width: 300px;
 background: yellow;
 font-size: xx-large; bold;
 color: orange;
 text-align: center;
 box-shadow: 0 0 8px black;"
 } 
 <blink>the '{Studio} project</blink>
}}

;; ------------------------------------------------
;; TITRE & SOUS-TITRE
;; ------------------------------------------------

{{content *}

{uncover data/cover_studio.jpeg 500 100} ;; https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.2zpUzU5uzHk8c-a1TKam1AHaE8%26pid%3DApi&f=1 - https://www.zikinf.com/_gfx/annonces/dyn/129h-studio-studio-3010993.jpg?1592222724  -  data/cover_studio.jpeg 500 100  -  data/concert.jpg

{div 
  {@ id="3"
     style="position: relative;
     border: 1px solid black;
     left: 270px; ;; 500px;
     top: -500px; ;; -119px;
     width: 570px;
     background: orange;
     color: blue;
     text-align: center;
     font-size: 13em; ;; 6.5em;
     box-shadow: 0 0 8px black;"
  }
STUDIO
}

{div
  {@ style="position: fixed; top: 40px; left: 710px;"} 
  {img {@ src="data/icons8-open-source-500.png" width="25%"}}
}

{div
  {@ style="position: fixed; top: 130px; left: 768px;"} 
  {img {@ src="data/Janus Groupe.png" width="25%"}}
}

{{title}
_h2 {center {i Studiare lingue straniere cantando}}
}

{{content}

_p {center a site in the galaxy [[{i Liber{sup 3}}|http://liber3.net/]]} ;;

{div
  {@ style="position: fixed; top: 40px; left: 440px;"} 
  {img {@ src="data/Graffiti_Yellow_Submarine_DSCN3053_256.jpg" width="60%"}} ;; 
}

{div
  {@ style="position: fixed; top: 50px; left: 640px;"} ;;
  {img {@ src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Yuriy_Annenkov_-_Saint_Christopher.jpg/512px-Yuriy_Annenkov_-_Saint_Christopher.jpg" width="30%"}} ;; 60%
}

{div
  {@ style="position: fixed; top: 50px; left: 840px;"} 
  {img {@ src="data/janus_aries" width="80%"}} ;; 60%
}

{div
  {@ style="position: fixed; top: 0px; left: 1040px;font-size:18px;"} 
  [[Forum Janus|https://www.liber3.net/]]
_p {i administré}
_p {i à quatre mains}
_p {i et à deux têtes}
_p {i mais animé}
_p {i d'un seul cœur}
}

;; même double remarque que ci-dessous pour le sous-titre qui fait ici office de contenu de texte au titre

;; ici, c'est le titre lui-même, c'est-à-dire du texte de contenu, qui sert d'id au bloc, permettant ainsi, faisant d'une pierre deux coups, d'une part en procurant au bloc son indispensable id et d'autre part fournissant au bloc son contenu, faute de quoi sa création aurait perdu toute raison d'être, en réalisant l'économie d'un disgracieux affichage sans aucune utilité de repérage vu qu'il ne saurait y avoir qu'un titre par page. Pareille économie de moyens semble en revanche impossible pour les blocs de contenu… On remarquera d'autre part que pour afficher Studio en rouge comme dans le modèle, il faudrait qu'il s'agisse, comme "lambda", d'un mot du dictionnaire ; il nous a donc fallu réaliser la même chose de manière plus artisanale
_p ;;

{div 
  {@ id="0" style="
    position: relative; 
    left: 75px; 
    top: -12px;  
    width: 220px;
    background: yellow;
    color: green;
    font: normal 2em times;
    -webkit-transform: rotate(-15deg);
       -moz-transform: rotate(-15deg);
            transform: rotate(-15deg);
  "}
  {center Bienvenue dans}
{center {i {b [[Le projet Studio]]}}}
}

{div 
  {@ id="1"
     style="position: relative;
     border: 1px solid black;
     left: 240px; 
     top: -30px;
     width: 190px;
     background: palegreen;
     color: purple;
     text-align: center;
     box-shadow: 0 0 8px black;"
  }
Le studio dans lequel {br}
vous apprenez, [[en immersion|?view=Notre%20méthode]], {br}
les langues étrangères… {br}
depuis votre propre studio… {br}
à la seule condition {br}
que vous puissiez y karaoker {br}
sans déranger vos voisins !
}

{div 
  {@ id="11"
     style="position: relative;
     border: 1px solid black;
     left: 460px; 
     top: -30px;
     width: 190px;
     background: beige;
     color: purple;
     text-align: center;
     box-shadow: 0 0 8px black;"
  }
[[Sur les épaules des géants…|https://fr.wikipedia.org/wiki/Des_nains_sur_des_%C3%A9paules_de_g%C3%A9ants]] {br}
[[Yuri Annenkov|https://fr.wikipedia.org/wiki/Georges_Annenkov]], [[Saint Christopher|https://fr.wikipedia.org/wiki/Christophe_de_Lycie]], {br}
Public domain, {br}
via [[Wikimedia Commons|https://commons.wikimedia.org/wiki/Accueil]] {br}
}
}

} ;; end CONT *

;; ------------------------------------------------
;; BOUTONS ET LIENS HAUT ET BAS DE PAGE
;; ------------------------------------------------

{div {@ style="position: fixed; top: 12px; right: 2px;"}
{accordeonstudio}
}

{div {@ style="position: fixed; bottom: 42px; right: 2px;"}
 {input {@ type="button" value="⇑" onclick="javascript: document.body.scrollIntoView(true);"}}
}

{div {@ style="position: fixed; bottom: 18px; right: 2px;"}
 {input {@ type="button" value="⇓" onclick="javascript: document.body.scrollIntoView(false);"}}
}

;; {a {@ href="javascript: document.body.scrollIntoView(true);"}⇑}{a {@ href="javascript: document.body.scrollIntoView(false);"}⇓} ;; liens produisant même effet, à placer éventuellement dans une nav

;; ------------------------------------------------
;; MACRO
;; ------------------------------------------------

;; {macro \/\/ ([^\n]*)\n to €1 }
;; cette macro condamne les titres des tableaux ; on l'a désactivée en se demandant d'ailleurs quelle était sa fonction…

;; ------------------------------------------------
;; CONTENT
;; ------------------------------------------------

°°° START CONTENT °°°

{div 
  {@ id="CONTENT"
     style="white-space:pre-wrap;font-size:20px;"}

{{title}
_h2 What the hell is that? …
}

{{content}

{center {table {@ class="1" style="text-align: justify;"}
{tr 
    {{TD {colOR33}; Text}  {div {{hide}{invert}}

_p The site {i Studio} is a pedagogical and societal project involved in the {i Liber{sup 3}} galaxy - association projected to be based on the french 1901 law - layed on a light framework, The {i [[lambda way|http://lambdaway.free.fr/lambdawalks/]]} project, built on a wiki, {i [[lambda tank|http://lambdaway.free.fr/lambdaspeech/]]}, and a functional programming language, {i [[lambda talk|http://lambdaway.free.fr/lambdaspeech/]]}, thanks to their designer, [[Alain Marty|http://lambdaway.free.fr/lambdawalks/index.php?view=CV]].
_p "{i Oh please nooooo! There are hundred of educational sites, of wiki engines and hundred of languages! Why yet another site, another wiki and another language nobody will ever want to use?}"
_p Please, let's talk about that!

}

{{TD {colOR33}; Text}  {div {{hide}{invert}}

{center {img {@ src="data/liber.jpg" height="315" title="Vivement l'école au logis !"} }}
}}

} ;; end div Text
} ;; end TD color 33 text
}}}

{{title}
_h2 Some more about the '{lambda way}…
}
{{content}
{center {table {@ class="1" style="text-align: justify;"}
{tr 
 {{TD {colOR33}; Text} {div {{hide}{invert}}

_h2 {center Voir [['{/\{([^\s{}]*)(?:[\s]*)([^{}]*)\}/g}|http://lambdaway.free.fr/lambdawalks/]]}

{{hide}
{def PICT
{div {@ style="position:relative; top:0px; left:50%; margin-left:-200px; height:400px; text-align:center; color:#fff;"}
{div {@ style="position:absolute; left:0px; bottom:0px; width:400px; height:350px; padding-top:50px;
               box-shadow:0 0 8px #000; border-radius:200px; font-size:72px; background:#ccc; "}
{div {@ style="position:absolute; left:50%; margin-left:-125px; bottom:0px;  width:250px; height:210px; padding-top:40px;
               border:1px solid #000; border-radius:125px; font-size:48px; background:#aaa; color:#0ff; "}
{div {@ style="position:absolute; left:50%; margin-left:-75px; bottom:0px;  width:150px; height:110px; padding-top:40px;
               border:1px solid #000; border-radius:75px;  font-size:24px; background:#888; color:#0f0; "}
{div {@ style="position:absolute; left:50%; margin-left:-37px; bottom:0px;  width:75px; height:65px; padding-top:10px;
               border:1px solid #000; border-radius:37px;  font-size:36px; background:#666; color:#f00; "} 
'{λy} }primitives}libraries}'{www}}  
}} }

{center {PICT}}

}}

{{TD {colOR33}; Text}  {div {{hide}{invert}}
_p The '{lambda way} project is built on two engines: 
_ul '{lambda talk}, a purely functional language unifying writing, styling and scripting in a single and coherent prefixed notation,from Alonzo Church's Lambda Calculus (1935), the ancestor of Lisp, the language par excellence of A.I.
_ul '{lambda tank}, a tiny wiki easy to install as a thin overlay on top of any web browser, allowing a collaborative work between authors, web designers and coders for creating and sharing rich documents on the web, in a simple and consistent syntax, light overlay on standard HTML, CSS, SVG, DOM and JavaScript tools.
_p In short, a solid basis so that, perched on the shoulders of giants, you don't have to constantly reinvent the wheel…

{blockquote
_p [...] I like it when I find this simple yet powerful ideas implemented, these are the things that when you see them you think, Why didn't I think of that? [...] ([[reddit/maufdez|https://www.reddit.com/r/lisp/comments/1xfsd3/alphawiki/]])
}

}
} ;; end div Text
} ;; end TD color 33 text
}}}

{{title} 
_h2 The galaxy {i [[Liber{sup 3}|http://liber3.net/]]}
}
{{content}

{center {table {@ class="1" style="text-align: justify;"}
{tr 
    {{TD {colOR33}; Text}  {div {{hide}{invert}}

_p Dans l'esprit de λ3 l’objectif de {i Studio} est triple :
_ul rendre l’enseignement à la fois plus efficace, plus juste et attractif ;
_ul30 spécifiquement, rendre doublement possible l’enseignement des langues vivantes à domicile en répondant par un moyen efficace à un besoin impérieux, c’est-à-dire
_ul60 en recevant un enseignement individualisé et personnalisé à demeurer chez soi, sans avoir à se rendre dans un établissement scolaire pour y recevoir un enseignement de masse où l’on n’a que trop rarement voix au chapitre pour pouvoir rapidement progresser
_ul60 le voyage autour de sa chambre devenant ainsi un sûr moyen d’immersion tout en se donnant des airs de vacances (comme dans l’expression italienne "vacanza studio" qu’on peut traduire par voyage éducatif ou par séjour linguistique) ;
_ul le rendre entièrement libre de toute influence en le mettant pour cela sous le signe du [[logiciel libre|https://www.gnu.org/education/education.html]] - dont nous nous flattons du titre d’[[évangéliste technologique|https://fr.wikipedia.org/wiki/%C3%89vang%C3%A9liste_technologique]], garant à la fois de ses moyens pour y parvenir et de son orthodoxie en adoptant l’attitude de la « dictature bienveillante » dans les rapports de « maître ignorant » et d’« élève volontaire pour apprendre », deux oxymores qui peuvent parfaitement s’accommoder ensemble ;
_ul le mettre au service du social et non plus de l’économie en replaçant l’humain au centre des préoccupations.
}

{{TD {colOR33}; Text}  {div {{hide}{invert}}

_h2 {center Voir [[With the GNU Generation: Open Minds - Open Sources - Open Future|https://www.gnu.org/home.fr.html]]}

{center {img {@ src="data/GNU-Linux.jpg" height="315" title="Vive l'école au logis !"} }}

_p {center D'après [[Online education|https://br.freepik.com/vetores-premium/menina-esta-estudando-on-line-com-o-laptop-na-mesa-em-casa-ilustracao-em-vetor-plana-para-sites-quarentena-ficar-em-casa-pandemia_8440310.htm]]. Merci à [[Freepick|https://br.freepik.com/]] {img {@ src="data/logo freepik.png" height="16" title="Vive l'école au logis !"}} }

_h2 {center Voir [[Logiciel libre et éducation|https://www.gnu.org/education/education.html]]}

_h3 {center {i Studio} entend mettre l’accent sur la parole vivante :}
_h3 {center l’[[acquisition|https://www.youtube.com/watch?v=illApgaLgGA]] plutôt que l’apprentissage scolaire traditionnel.}

{center {iframe {@ width="560" height="315" src="https://www.youtube-nocookie.com/embed/zdow47FQRfQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen}}}

}}

} ;; end div Text
} ;; end TD color 33 text
}}}

{{title} 
_h2 {i Studio}, a site from the galaxy {i [[Liber{sup 3}|http://liber3.net/]]}
}

{{content}
{center {table {@ class="1" style="text-align: justify;"}
{tr 
    {{TD {colOR33}; Text}  {div {{hide}{invert}}

_h2 {center Voir [[Coaching|https://duckduckgo.com/?t=lm&q=Jacotot&iax=videos&ia=videos&iai=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DfaSm22eGEnQ]]}

{center {iframe {@ width="560" height="315" src="https://www.youtube-nocookie.com/embed/faSm22eGEnQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen}} }

}
}
 {{TD {colOR33}; Text}  {div {{hide}{invert}}
_p {i Studio} s’efforce de remplir ce triple objectif :

_ul par la répétition à la demande par l’apprenant, et non dirigée par le maître, de ce qu’il désire apprendre quand il le désire (cf. {i [[Le Bourgeois gentilhomme, II, 4|http://www.toutmoliere.net/acte-2,405364.html#scene_iv]]}) ;
_ul afin d’en faire un individu libre et responsable et non un agent agi par des intérêts qui le dépassent.

_p En somme, λ3 ne fait que mettre en application avec des moyens nouveaux l'enseignement de [[Joseph Jacotot|https://fr.wikipedia.org/wiki/Joseph_Jacotot]].

{center {img {@ src="data/Jacotot.jpeg" width="20%" title="Joseph Jacotot (1770-1840)"}} }
}} 
} ;; end div Text
} ;; end TD color 33 text
}}

{{title} 
_h2 And so what? …
}

{{content}
{center {table {@ class="1" style="text-align: justify;"}
{tr 
    {{TD {colOR33}; Text}  {div {{hide}{invert}}
_p {center If you're curious you'll find out more [[here|?view=songText]], 
{center {br}otherwise we let you [[blowin' in the wind|?view=Blowin%E2%80%99_in_the_Wind_1963_G]]}}
}

{{TD {colOR33}; Text}  {div {{hide}{invert}}

}}

} ;; end div Text
} ;; end TD color 33 text
}}}

{center {iframe {@ width="560" height="315" src="https://www.youtube-nocookie.com/embed/gpDbvlAI_A0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen}}}

{center L’hymne de {b [[Liber3|https://www.liber3.net/]]} en version multilingue :}
{center {i [[Do You Hear the People Sing?|https://en.wikipedia.org/wiki/Do_You_Hear_the_People_Sing%3F?oldid=910380541]]}}

_p ;;
}

{hr}
_p ;;

{center {i Télémaque (2021/10/03)}}

{br}
_p ;;

{center {b à propos}
{br}
_p ;;

[[Nous contacter|https://www.liber3.net/]] | [[Nos sources]] | [[Mentions légales]] | [[C.G.U.]]
{br}
_p ;;
{a {@ href="https://icons8.com/icon/23890/open-source"}Open Source icon by Icons8}
_p ;;
{div 
  {@ id="myID"
     style="border:1px solid black;
     width:110px;
     background:white;
     color:blue;
     text-align:center;
     align-self:self-end;
     box-shadow:0 0 8px black;"
  } 
  {a {@ href="#"}{b Haut de page}}

}}
{br}
_p ;;

;; the following coder's corner should be externalized in a library:

;; coder's corner, keep away _ display sections / hide sections

{div {@ style="position:fixed; top:0; left:75;"} 
{input {@ type="button" value=">>" onclick="show_hide(this)"}}
}

{{hide}
{def title div
 {@ class="title"
    onclick="this.nextSibling.nextSibling.style.transform=
            (this.nextSibling.nextSibling.style.transform==='scale(0)')? 'scale(1)' : 'scale(0)';
             this.nextSibling.nextSibling.style.height=
            (this.nextSibling.nextSibling.style.height==='0px')? 'auto' : '0px';"}}

{def content div
 {@ class="content"
    style="transform:scale(0); height:0px; transition:all 1s;"}}

{def show div 
 {@ style="box-shadow:0 0 8px #000; padding:5px; background:#fff; color:#000"}}
}

{style 
  body, #page_frame, #page_content, .page_menu, pre {
    border:0 solid #444; box-shadow:0 0 0; 
    background:#444; color:#fff; 
  }
  .title { cursor:pointer; color:#ff0; }
  .title:hover { color:red; }
  pre { background:#eee; color:#000; margin: 5px; padding:5px; }
}

{script 
 var show_hide = function(obj) {
 var contents = document.getElementsByClassName('content');
 for (var i in contents) {
 if (contents[i].style.height === "0px") {
 contents[i].style.height = "auto";
 contents[i].style.transform = "scale(1)";
 obj.value = "<<"
 } else {
 contents[i].style.height = "0px";
 contents[i].style.transform = "scale(0)"
 obj.value = ">>"
 }
 }
};
}

{style ;; 
@import url(https://fonts.googleapis.com/css?family=Quicksand);

body, #page_frame {
 padding: 0;
 margin: 0;
 border: 0;
 background: #000;
 color: #fff;
}

.page_menu { background: transparent; }

#page_content {
 margin: 0;
 font-family: Quicksand;
 font-size: 9px; ;; 1.5em;
 background: transparent;
 box-shadow: 0 0 0;
}

#page_frame {
 width: 100%;
 margin: 0;
 padding: 0;
}

#page_textarea {
 font: normal 1.2em courier;
 color: #fff;
 background: #000;
}

}

{{hide}{block CSS_blocs_titre_de_page

{style 
#title-blocks .block_edit {
 display: inline-block;
 background: black; ;; background:#ccc; 
 width: 99%;
 height: 100%;
}
}
}

} ;; end block CSS_blocs_titre_de_page

{{hide}{block CSS_blocs_de_contenu

{style 
#contents-blocks .block_edit {
 display: inline-block;
 background: black; 
 width: 99%;
 height: 100%; ;; ne pas mettre en pourcentage car il s'agirait alors du pourcentage de la taille de chaque bloc (et non de la page) entraînant une variabilité ne permettant plus d'appliquer le calcul devant déterminer le nombre de pixels par rapport au début de la page où placer les pointeurs
}
}
}

} ;; end block CSS_blocs_de_contenu

{{hide}{block CSS_blocs_de_code

{style 
#code-blocks .block_edit {
 display: inline-block;
 background: PaleGreen; ;; background:#ccc; 
 width: 32.4%;
 height: 19px;
}
}
}

} ;; end block CSS_blocs_de_code

{{hide}
;; {def TABLE table {@ style="width:100%; vertical-align:top;"}}
;; {def TR tr}
;; {def TD td {@ style="width:33%; vertical-align:top;"}}
{def editor
 {lambda {:h}
  {div {@ id="local_editor_frame"
          style="display:none;
                 position:fixed; top:150px; left:50px; right:50px; height:{+ :h 30}px;
                 background:#eee; opacity:0.9; box-shadow:0 0 8px #000; z-index:10;"}
   {drag} 
;;   {div {@ style="display:inline-block"}}
;;   {input {@ type="submit" value="close" onclick="BLOCK_EDIT.close()"}}{br}
   {textarea {@ id="local_editor" style="margin-left:5px; width:98%; height:{- :h 15}px; border:0;"
                onkeyup="BLOCK_EDIT.update()"}} 
   {input {@ type="submit" value="close" onclick="BLOCK_EDIT.close()"}}
}
{div {@ style="position: fixed; top: -6px; right: 2px;"}
 {input {@ type="button" value="ʘ" onclick="BLOCK_EDIT.save()"}}
}
}}
}

{style ;;
#local_editor_frame { display:none; }
.block_edit { border:1px solid #ccc; height:200px; overflow-y:scroll; cursor:grab; }
.block_edit:hover { box-shadow:0 0 8px #000; cursor:grab; } 
}
 
{script ;;   
var BLOCK_EDIT = (function() {
var g_code = '', g_id = '', g_oldval = '', g_newval = '';

var update = function() {
  g_newval = document.getElementById('local_editor').value;
  document.getElementById('page_textarea').value = g_code.replace( g_oldval, g_newval );
  document.getElementById(g_id).innerHTML = LAMBDATALK.evaluate( g_newval ).val;
};

var close = function () {
  document.getElementById('local_editor_frame').style.display = 'none'
};

var save = function() {
  if (confirm( "Click OK only if you are logged, else Cancel/Annuler" ))
    document.getElementById('save_button').click()
  else
    alert( "You are about to loose your work!!!\nIn order to save it, please:\n1) open the page editor and copy the code to the clipboard,\n2) now 'do' log in, and come back to this page,\n3) then open the page editor paste the clipboard and save.")
};

var tapedTwice = false;

return {   
  create:create, 
  open:open, 
  update:update,
  close:close,
  save:save
}
}()); // end of BLOCK_EDIT

LAMBDATALK.DICT['block'] = function () { 
  return BLOCK_EDIT.create( arguments[0].trim() ); 
};

setInterval( function() { alert( 'Did you save your work, man?' ) }, 55 * 60000 )  // 5 minutes

} ;; end div Blocks

;; ------------------------------------------------
;; BOUTON "CODE HTML"
;; ------------------------------------------------

{center {input {@ type="button" value="CODE HTML" onclick="htmlcode()"}}}
{textarea {@ id="htmlcode" style="display:none; width:100%; height:2000px; border:0; "}}
{script ;; 
  function htmlcode() {
    var code = document.getElementById('page_textarea').value;
    var id = document.getElementById('htmlcode');
    id.innerHTML = LAMBDATALK.evaluate(code).val;
    id.style.display = (id.style.display === 'none')? 'block' : 'none'
  };
}

;; ------------------------------------------------
;; BOUTON "LIST PAGES"
;; ------------------------------------------------
_p ;;

;; {center {input {@ type="button" value="So click me to display the pages' list…" onclick="LAMBDATANK.toggle_display('pages')"}}}

;; ------------------------------------------------
;; BOUTON "PAGE EDITOR"
;; ------------------------------------------------
_p ;;

{center {input {@ type="button" value="Édition" onclick="LAMBDATANK.toggle_display('page_editor')"}}}

;; ------------------------------------------------
;; MENU - CSS
;; ------------------------------------------------

{style ;; 
@import url(https://fonts.googleapis.com/css?family=Quicksand);

body, #page_frame {
 padding: 0;
 margin: 0;
 border: 1;
 background: #000;
 color: #fff;
}

.page_menu { background: transparent; }

#page_content {
 margin: 0;
 font-family: Quicksand;
 font-size: 12px; 1.5em;
 background: transparent;
 box-shadow: 0 0 0;
}

#page_frame {
 width: 100%;
 margin: 0;
 padding: 0;
}

#page_textarea {
 font: normal 1.2em courier;
 color: #fff;
 background: #000;
}

}

;; ------------------------------------------------
;; MENU DROIT RENTRANT BIDIRECTIONNEL
;; ------------------------------------------------

;; ici on gère la navigation interne à la page (TOC = "Page") ainsi que le menu général du site (NAV = "Site") :

{{hide}
{def right_menu

;; {hr}
;; {input {@ type="button" value="Page" onclick="LAMBDATANK.toggle_display('nav')"}}
{div {@ id="nav" style="display:contents;"
} ;;

{div
 {@ style="position: absolute; top: 160px; right: 25px;"}

{div 
  {@ style="
    font:bold 2em arial; 
    color: gold;
    background: black;
    border: 1px solid; 
    text-align: right;
  "} 
{img {@ src="data/Sardou.jpg" height="100px" title="Quand j'étais petit garçon,/ Je repassais mes leçons/ En chantant… Michel Sardou"}} ;; top: 130px; right: 265px;
  {i Quand j'étais petit garçon,
Je repassais mes leçons
En chantant…}
Michel Sardou

{center What's new in Studio?}
{center [[Click here to learn more|https://www.studio.liber3.net/index.php?view=Actualité]] }
}}}

{a {@ href="https://www.liber3.net/" target="_self"}{img {@ src="data/bifrons.jpg" width="70%" title="Forum Janus"}Forum}

{{hide}
{def ba
 {lambda {:dy :txt}
  {div {@ style="position: relative; 
                 top: 0px;
                 left: 0px;
                 height: 0;
                 text-align: left;"} ←
  {div {@ style="position: absolute; 
                 top: :dypx;
                 left: -320px; 
                 width: 300px;
                 text-align: center;
                 font-style: italic;
                 color: #f00;"} :txt}}}} ;; color: #f00;

{def tri
 {lambda {:dy :txt}
  {div {@ style="position: relative; 
                 top: 0px;
                 right: 0px;
                 height: 0;
                 text-align: right;"} →
  {div {@ style="position: absolute; 
                 top: :dypx;
                 right: -320px; 
                 width: 300px;
                 text-align: center;
                 font-style: italic;
                 color: #f00;"} :txt}}}}
}

;; {accordeonstudio} ;; empêche l'affichage (fautif) du menu accordéon dans la TOC

{style 
#menu-accordeon {
  padding: -2000; ;;0
  margin: 600;
  list-style: none;
  text-align: center;
  width: 150px; ;;250px
}
#menu-accordeon ul {
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}
#menu-accordeon li {
   background-color: #729EBF; 
   background-image: -webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
   background-image: linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
   border-radius: 6px;
   margin-bottom: 2px;
   box-shadow: 3px 3px 3px #999;
   border: solid 1px #333A40
}
#menu-accordeon li li {
   max-height: 0;
   overflow: hidden;
   transition: all .5s;
   border-radius: 0;
   background: #444;
   box-shadow: none;
   border: none;
   margin: 0
}
#menu-accordeon a {
  display: inline; ;;block
  text-decoration: none;
  color: #fff;
  padding: 8px 0;
  font-family: verdana;
  font-size: 1.2em
}
#menu-accordeon ul li a, #menu-accordeon li:hover li a {
  font-size: 1em
}
#menu-accordeon li:hover {
   background: #729EBF
}
#menu-accordeon li li:hover {
   background: #999;
}
#menu-accordeon ul li:last-child {
   border-radius: 0 0 6px 6px;
   border: none;
}
#menu-accordeon li:hover li {
  max-height: 15em;
}
}

}}}

;; et voici le code :

{div
 {@ style       = "position:fixed; z-index:5; top:130px; right:-70px; width:100px; border-radius:0 0 0 20px;
                   font:bold 2em courier; color: gold;"
    onmouseover = "this.style.cursor='grab';
                   this.style.color='#f00'"
    onmouseout  = "this.style.color= green"  ;; '#888'"
    onclick     = "LAMBDATANK.toggle_display('right_menu')" }
_p ;; réglage de hauteur d'espacement pour le visuel
{br}{br}«{br}M{br}E{br}N{br}U{br}«} ;; >{br}>{br}>

{pre
 {@ id    = "right_menu"
    style = "display: none; 
             position: fixed;
             top: 150px; ;; -10px;
             right: 70px; ;; 4px;
             width: 150px;
             padding: 10px;
             box-shadow: 0 0 8px #000;
             font-size: 0.8em; 
             color: purple; 
             background: #fff; opacity:0.8;
             border: 1px solid #888; 
             border-radius: 0 155px 0 20px"
}
 {drag}{right_menu}

} ;; editable 888 (@ n'apparaît pas)

;; ------------------------------------------------
;; TOC
;; ------------------------------------------------

;; {input {@ type="button" value="menu..." onclick="LAMBDATANK.toggle_display('menu')"}}
{div {@ id="menu" style="display:none;"} ;; doit superposer à la nav le menu accordéon permettant la navigation dans les pages du site
}

{style ;;
h2, h3, h4, h5, h6 {
 margin:0;
 padding:0;
 border-top:1px solid #888;
}

{pre °°
{def TOC 
 div {@ id ="top"
        style="position: fixed;
               top:60px; left:20px; 
               width:80px; 
               padding:5px 5px 30px 5px; 
               font-size:0.8em; 
               background:#fff; opacity:0.8; 
               border:1px solid #888; 
               border-radius:0 0 0 20px"} {drag}}

{def toc
 {lambda {:i}
  {a {@ name="_:i" href="#:i"} :i}}}

{def content
 {lambda {:i}
  {a {@ name=":i" href="#top"}
     {span {@ style="font-size: 1.5em; color: red;"} :i}}}}

}

;;;;;;;;;;;
;; BLINK ;;
;;;;;;;;;;;

{style ;;

blink {
  -webkit-animation: 2s linear infinite condemed_blink_effect; // pour Safari 4.0-8.0
  animation: 2s linear infinite condemed_blink_effect;
}
@-webkit-keyframes condemed_blink_effect { // pour Safari 4.0-8.0
  0% {
    visibility: hidden;
  }
  50% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}
@keyframes condemed_blink_effect {
  0% {
    visibility: hidden;
  }
  50% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

}