2023-03-02 23:48:47 +01:00
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
2023-05-08 14:45:01 +02:00
< title > Astroport< / title >
2023-03-02 23:48:47 +01:00
2023-05-08 14:45:01 +02:00
< meta name = "description" content = "Ouvrez votre agence Monnaie Libre profitez de notre architecture à clef publique multi-niveau" >
2023-03-02 23:48:47 +01:00
< meta name = "author" content = "Fred" >
< meta name = "apple-mobile-web-app-capable" content = "yes" >
< meta name = "apple-mobile-web-app-status-bar-style" content = "black-translucent" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< link rel = "stylesheet" href = "dist/reset.css" >
< link rel = "stylesheet" href = "dist/reveal.css" >
< link rel = "stylesheet" href = "dist/theme/black.css" id = "theme" >
<!-- Theme used for syntax highlighting of code /index.html?transition=concave#/29 -->
< link rel = "stylesheet" href = "plugin/highlight/monokai.css" >
< / head >
< body >
< div class = "reveal" >
<!-- Any section element inside of this container is displayed as a slide -->
< div class = "slides" >
< section >
< a href = "https://astroport.com" >
2023-05-08 14:45:01 +02:00
< img src = "http://127.0.0.1:8080/ipfs/Qmc1FuWFQwy7pvg9cRPLWZB5u2bf2seKd4Ua2xR6YXCsWu" alt = "astroport logo" style = "height: 245px; margin: 0 auto 4rem auto; background: transparent;" class = "demo-logo" >
2023-03-02 23:48:47 +01:00
< / a >
2023-05-08 14:45:01 +02:00
< h3 > Un Monde Libre< br > Comment?< / h3 >
2023-03-02 23:48:47 +01:00
< p >
2023-03-20 21:21:46 +01:00
< small > < a href = "https://madeinzion.org" > MadeInZion< / a > Foundation
present < br > < a href = "https://github.com/papiche/Astroport.ONE" > Astroport.ONE< / a >
2023-05-08 14:45:01 +02:00
& La< a href = "https://opencollective.com/monnaie-libre/projects/coeurbox" > ♥BOX Network< / a > PKI/DAO engine
< br > collectively funded and run by La < a href = "https://opencollective.com/monnaie-libre/projects/stiits" > STI< / a > < / small >
2023-03-02 23:48:47 +01:00
< / p >
< / section >
< section >
2023-05-08 14:45:01 +02:00
< h2 > La Monnaie Libre< / h2 >
2023-03-02 23:48:47 +01:00
< p >
2023-05-08 14:45:01 +02:00
< br > Un Découvrez la souveraineté monétaire...
2023-03-20 21:21:46 +01:00
2023-03-02 23:48:47 +01:00
< / p >
< / section >
<!-- Example of nested vertical slides -->
< section >
< section >
2023-05-08 14:45:01 +02:00
< h2 > Astroport< / h2 >
un système plus juste, plus inclusif et plus durable
< p > Cheminez vers l'abondance< br > découvrez la voie en commun< / p >
< p > Pressez < em > Espace< / em > pour découvrir comment.< / p >
2023-03-02 23:48:47 +01:00
< br >
< a href = "#/2/1" class = "navigate-down" >
< img class = "r-frame" style = "background: rgba(255,255,255,0.1);" width = "178" height = "238" data-src = "https://static.slid.es/reveal/arrow.png" alt = "Down arrow" >
< / a >
< / section >
< section >
2023-03-20 21:21:46 +01:00
< h2 > Make Wishes< / h2 >
< p > Add to the map any place that deserver better< br >
Crowdfund for it to progress.< / p >
2023-03-02 23:48:47 +01:00
< / section >
< section >
2023-03-20 21:21:46 +01:00
< h2 > Add Ressources< / h2 >
< p > Nothing to be buy or sell.< br > Make the list of all common good.< br > Arrange sharing and maintenance of it< / p >
2023-03-02 23:48:47 +01:00
< br >
< a href = "#/2" >
< img class = "r-frame" style = "background: rgba(255,255,255,0.1); transform: rotate(180deg);" width = "178" height = "238" data-src = "https://static.slid.es/reveal/arrow.png" alt = "Up arrow" >
< / a >
< / section >
< / section >
< section >
2023-03-20 21:21:46 +01:00
< h2 > Astroport Ŋ1< / h2 >
2023-03-02 23:48:47 +01:00
< p >
2023-03-21 17:05:04 +01:00
A data shifting protocol.
2023-03-20 21:21:46 +01:00
< br > A storage network.
2023-03-21 17:05:04 +01:00
< br > A PKI / DAO sandbox
2023-03-20 21:21:46 +01:00
< br > < a href = "https://git.p2p.legal/STI/Astroport.ONE" target = "_blank" > Astroport.ONE< / a >
2023-03-02 23:48:47 +01:00
< / p >
< / section >
2023-03-20 21:21:46 +01:00
<!--
2023-03-02 23:48:47 +01:00
< section data-visibility = "hidden" >
< h2 > Hidden Slides< / h2 >
< p >
This slide is visible in the source, but hidden when the presentation is viewed. You can show all hidden slides by setting the `showHiddenSlides` config option to `true`.
< / p >
< / section >
2023-03-20 21:21:46 +01:00
-->
<!--
2023-03-02 23:48:47 +01:00
< section data-auto-animate >
2023-03-20 21:21:46 +01:00
< h2 data-id = "code-title" > Social layers< / h2 >
2023-03-02 23:48:47 +01:00
< pre data-id = "code-animation" > < code class = "hljs javascript" data-trim data-line-numbers >
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
...
);
}
< / code > < / pre >
< p > Code syntax highlighting courtesy of < a href = "https://highlightjs.org/usage/" > highlight.js< / a > .< / p >
< / section >
< section data-auto-animate >
< h2 data-id = "code-title" > With Animations< / h2 >
< pre data-id = "code-animation" > < code class = "hljs javascript" data-trim data-line-numbers = "|4,8-11|17|22-24" > < script type = "text/template" >
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
< div >
< p > You clicked {count} times< / p >
< button onClick = {() = > setCount(count + 1)}>
Click me
< / button >
< / div >
);
}
function SecondExample() {
const [count, setCount] = useState(0);
return (
< div >
< p > You clicked {count} times< / p >
< button onClick = {() = > setCount(count + 1)}>
Click me
< / button >
< / div >
);
}
< / script > < / code > < / pre >
< / section >
< section >
< h2 > Point of View< / h2 >
< p >
Press < strong > ESC< / strong > to enter the slide overview.
< / p >
< p >
Hold down the < strong > alt< / strong > key (< strong > ctrl< / strong > in Linux) and click on any element to zoom towards it using < a href = "http://lab.hakim.se/zoom-js" > zoom.js< / a > . Click again to zoom back out.
< / p >
< p >
(NOTE: Use ctrl + click in Linux.)
< / p >
< / section >
2023-03-20 21:21:46 +01:00
-->
2023-03-02 23:48:47 +01:00
< section data-auto-animate data-auto-animate-easing = "cubic-bezier(0.770, 0.000, 0.175, 1.000)" >
2023-03-20 21:21:46 +01:00
< h2 > Identify< / h2 >
< p > Create, seek and collect < a href = "https://revealjs.com/auto-animate/" > World Keys< / a > .< / p >
2023-03-02 23:48:47 +01:00
< div class = "r-hstack justify-center" >
< div data-id = "box1" style = "background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;" > < / div >
< div data-id = "box2" style = "background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;" > < / div >
< div data-id = "box3" style = "background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;" > < / div >
< / div >
< / section >
< section data-auto-animate data-auto-animate-easing = "cubic-bezier(0.770, 0.000, 0.175, 1.000)" >
< div class = "r-hstack justify-center" >
< div data-id = "box1" data-auto-animate-delay = "0" style = "background: cyan; width: 150px; height: 100px; margin: 10px;" > < / div >
< div data-id = "box2" data-auto-animate-delay = "0.1" style = "background: magenta; width: 150px; height: 100px; margin: 10px;" > < / div >
< div data-id = "box3" data-auto-animate-delay = "0.2" style = "background: yellow; width: 150px; height: 100px; margin: 10px;" > < / div >
< / div >
2023-03-20 21:21:46 +01:00
< h2 style = "margin-top: 20px;" > Collect< / h2 >
2023-03-02 23:48:47 +01:00
< / section >
< section data-auto-animate data-auto-animate-easing = "cubic-bezier(0.770, 0.000, 0.175, 1.000)" >
< div class = "r-stack" >
< div data-id = "box1" style = "background: cyan; width: 300px; height: 300px; border-radius: 200px;" > < / div >
< div data-id = "box2" style = "background: magenta; width: 200px; height: 200px; border-radius: 200px;" > < / div >
< div data-id = "box3" style = "background: yellow; width: 100px; height: 100px; border-radius: 200px;" > < / div >
< / div >
2023-03-20 21:21:46 +01:00
< h2 style = "margin-top: 20px;" > Associate< / h2 >
2023-03-02 23:48:47 +01:00
< / section >
2023-03-20 21:21:46 +01:00
<!--
2023-03-02 23:48:47 +01:00
< section >
< h2 > Touch Optimized< / h2 >
< p >
Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.
< / p >
< / section >
2023-03-20 21:21:46 +01:00
-->
2023-03-21 17:05:04 +01:00
<!--
2023-03-02 23:48:47 +01:00
< section data-markdown >
< script type = "text/template" >
2023-03-20 21:21:46 +01:00
## Extendable API
2023-03-02 23:48:47 +01:00
2023-03-20 21:21:46 +01:00
Instructions and more info available in the [code repository](https://git.p2p.legal/STI/Astroport.ONE/).
2023-03-02 23:48:47 +01:00
```html []
< section data-markdown >
2023-03-20 21:21:46 +01:00
## Extendable API
Instructions and more info available in the [code repository](https://git.p2p.legal/STI/Astroport.ONE/).
2023-03-02 23:48:47 +01:00
< / section >
```
< / script >
< / section >
2023-03-21 17:05:04 +01:00
-->
2023-03-02 23:48:47 +01:00
< section >
2023-03-21 17:05:04 +01:00
< p > Spread < code > and< / code > Share< / p >
< h2 class = "r-fit-text" > DIY< / h2 >
2023-03-02 23:48:47 +01:00
< / section >
< section >
< section id = "fragments" >
2023-03-21 17:05:04 +01:00
< h2 > How To Play< / h2 >
< p > Find a Wish...< / p >
< p class = "fragment" > ... Fund a Recipe ...< / p >
< p > < span class = "fragment" > Make... < / span > < span class = "fragment" > Report< / span > & < span class = "fragment" > Win !< / span > < / p >
2023-03-02 23:48:47 +01:00
< / section >
< section >
2023-03-21 17:05:04 +01:00
< h2 > Goals< / h2 >
< p > There's requested Evolution :< / p >
< p class = "fragment grow" > Progess< / p >
< p class = "fragment shrink" > maintain< / p >
< p class = "fragment fade-out" > control< / p >
2023-03-02 23:48:47 +01:00
< p >
2023-03-21 17:05:04 +01:00
< span style = "display: inline-block;" class = "fragment fade-right" > explore, < / span >
< span style = "display: inline-block;" class = "fragment fade-up" > upcycle, < / span >
< span style = "display: inline-block;" class = "fragment fade-down" > donate, < / span >
< span style = "display: inline-block;" class = "fragment fade-left" > enhance< / span >
2023-03-02 23:48:47 +01:00
< / p >
2023-03-21 17:05:04 +01:00
< p class = "fragment fade-in-then-out" > make real< / p >
< p class = "fragment fade-in-then-semi-out" > desired reality< / p >
< p > Levels : < span class = "fragment highlight-red" > red< / span > < span class = "fragment highlight-blue" > blue< / span > < span class = "fragment highlight-green" > green< / span > < / p >
2023-03-02 23:48:47 +01:00
< / section >
< / section >
2023-03-21 17:05:04 +01:00
<!--
2023-03-02 23:48:47 +01:00
< section id = "transitions" >
< h2 > Transition Styles< / h2 >
< p >
You can select from different transitions, like: < br >
< a href = "?transition=none#/transitions" > None< / a > -
< a href = "?transition=fade#/transitions" > Fade< / a > -
< a href = "?transition=slide#/transitions" > Slide< / a > -
< a href = "?transition=convex#/transitions" > Convex< / a > -
< a href = "?transition=concave#/transitions" > Concave< / a > -
< a href = "?transition=zoom#/transitions" > Zoom< / a >
< / p >
< / section >
2023-03-21 17:05:04 +01:00
-->
<!--
2023-03-02 23:48:47 +01:00
< section id = "themes" >
< h2 > Themes< / h2 >
< p >
reveal.js comes with a few themes built in: < br >
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','dist/theme/black.css'); return false;" > Black (default)< / a > -
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','dist/theme/white.css'); return false;" > White< / a > -
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','dist/theme/league.css'); return false;" > League< / a > -
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','dist/theme/sky.css'); return false;" > Sky< / a > -
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','dist/theme/beige.css'); return false;" > Beige< / a > -
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','dist/theme/simple.css'); return false;" > Simple< / a > < br >
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','dist/theme/serif.css'); return false;" > Serif< / a > -
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','dist/theme/blood.css'); return false;" > Blood< / a > -
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','dist/theme/night.css'); return false;" > Night< / a > -
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','dist/theme/moon.css'); return false;" > Moon< / a > -
< a href = "#" onclick = "document.getElementById('theme').setAttribute('href','dist/theme/solarized.css'); return false;" > Solarized< / a >
< / p >
< / section >
2023-03-21 17:05:04 +01:00
-->
<!--
2023-03-02 23:48:47 +01:00
< section >
< section data-background = "#dddddd" >
< h2 > Slide Backgrounds< / h2 >
< p >
Set < code > data-background="#dddddd"< / code > on a slide to change the background color. All CSS color formats are supported.
< / p >
< a href = "#" class = "navigate-down" >
< img class = "r-frame" style = "background: rgba(255,255,255,0.1);" width = "178" height = "238" data-src = "https://static.slid.es/reveal/arrow.png" alt = "Down arrow" >
< / a >
< / section >
< section data-background-gradient = "linear-gradient(to bottom, #283b95, #17b2c3)" >
< h2 > Gradient Backgrounds< / h2 >
< pre > < code class = "hljs html wrap" > < section data-background-gradient=
"linear-gradient(to bottom, #ddd, #191919)"> < / code > < / pre >
< / section >
< section data-background = "https://static.slid.es/reveal/image-placeholder.png" >
< h2 > Image Backgrounds< / h2 >
< pre > < code class = "hljs html" > < section data-background="image.png"> < / code > < / pre >
< / section >
< section data-background = "https://static.slid.es/reveal/image-placeholder.png" data-background-repeat = "repeat" data-background-size = "100px" >
< h2 > Tiled Backgrounds< / h2 >
< pre > < code class = "hljs html" style = "word-wrap: break-word;" > < section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"> < / code > < / pre >
< / section >
< section data-background-video = "https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4" data-background-color = "#000000" >
< div style = "background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;" >
< h2 > Video Backgrounds< / h2 >
< pre > < code class = "hljs html" style = "word-wrap: break-word;" > < section data-background-video="video.mp4,video.webm"> < / code > < / pre >
< / div >
< / section >
< section data-background = "http://i.giphy.com/90F8aUepslB84.gif" >
< h2 > ... and GIFs!< / h2 >
< / section >
< / section >
< section data-transition = "slide" data-background = "#4d7e65" data-background-transition = "zoom" >
< h2 > Background Transitions< / h2 >
< p >
Different background transitions are available via the backgroundTransition option. This one's called "zoom".
< / p >
< pre > < code class = "hljs javascript" > Reveal.configure({ backgroundTransition: 'zoom' })< / code > < / pre >
< / section >
< section data-transition = "slide" data-background = "#b5533c" data-background-transition = "zoom" >
< h2 > Background Transitions< / h2 >
< p >
You can override background transitions per-slide.
< / p >
< pre > < code class = "hljs html" style = "word-wrap: break-word;" > < section data-background-transition="zoom"> < / code > < / pre >
< / section >
2023-03-21 17:05:04 +01:00
-->
2023-03-02 23:48:47 +01:00
2023-03-21 17:05:04 +01:00
< section data-background-iframe = "http://127.0.0.1:8080/ipfs/QmX6brV5BhhcgnCrR7ZR4igJia9CyRW7Kp6uWjeLkG1cmF" data-background-interactive >
2023-03-02 23:48:47 +01:00
< div style = "position: absolute; width: 40%; right: 0; box-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 5px 25px rgba(0,0,0,0.2); background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px; font-size: 20px; text-align: left;" >
2023-03-21 17:05:04 +01:00
< h2 > Interplanetary< / h2 >
< p > Since Astroport runs on IPFS, anyone can run his own Station.< / p >
2023-03-02 23:48:47 +01:00
< / div >
< / section >
< section >
2023-03-21 17:05:04 +01:00
< h2 > Coucou< / h2 >
2023-03-02 23:48:47 +01:00
< ul >
< li > No order here< / li >
< li > Or here< / li >
< li > Or here< / li >
< li > Or here< / li >
< / ul >
< / section >
< section >
< h2 > Fantastic Ordered List< / h2 >
< ol >
< li > One is smaller than...< / li >
< li > Two is smaller than...< / li >
< li > Three!< / li >
< / ol >
< / section >
< section >
< h2 > Tabular Tables< / h2 >
< table >
< thead >
< tr >
< th > Item< / th >
< th > Value< / th >
< th > Quantity< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > Apples< / td >
< td > $1< / td >
< td > 7< / td >
< / tr >
< tr >
< td > Lemonade< / td >
< td > $2< / td >
< td > 18< / td >
< / tr >
< tr >
< td > Bread< / td >
< td > $3< / td >
< td > 2< / td >
< / tr >
< / tbody >
< / table >
< / section >
< section >
< h2 > Clever Quotes< / h2 >
< p >
These guys come in two forms, inline: < q cite = "http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations" > The nice thing about standards is that there are so many to choose from< / q > and block:
< / p >
< blockquote cite = "http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations" >
“ For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”
< / blockquote >
< / section >
< section >
< h2 > Intergalactic Interconnections< / h2 >
< p >
You can link between slides internally,
< a href = "#/2/3" > like this< / a > .
< / p >
< / section >
< section >
< h2 > Speaker View< / h2 >
< p > There's a < a href = "https://revealjs.com/speaker-view/" > speaker view< / a > . It includes a timer, preview of the upcoming slide as well as your speaker notes.< / p >
< p > Press the < em > S< / em > key to try it out.< / p >
< aside class = "notes" >
Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
< / aside >
< / section >
< section >
< h2 > Export to PDF< / h2 >
< p > Presentations can be < a href = "https://revealjs.com/pdf-export/" > exported to PDF< / a > , here's an example:< / p >
< iframe data-src = "https://www.slideshare.net/slideshow/embed_code/42840540" width = "445" height = "355" frameborder = "0" marginwidth = "0" marginheight = "0" scrolling = "no" style = "border:3px solid #666; margin-bottom:5px; max-width: 100%;" allowfullscreen > < / iframe >
< / section >
< section >
< h2 > Global State< / h2 >
< p >
Set < code > data-state="something"< / code > on a slide and < code > "something"< / code >
will be added as a class to the document element when the slide is open. This lets you
apply broader style changes, like switching the page background.
< / p >
< / section >
< section data-state = "customevent" >
< h2 > State Events< / h2 >
< p >
Additionally custom events can be triggered on a per slide basis by binding to the < code > data-state< / code > name.
< / p >
< pre > < code class = "javascript" data-trim contenteditable style = "font-size: 18px;" >
Reveal.on( 'customevent', function() {
console.log( '"customevent" has fired' );
} );
< / code > < / pre >
< / section >
< section >
< h2 > Take a Moment< / h2 >
< p >
Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.
< / p >
< / section >
< section >
< h2 > Much more< / h2 >
< ul >
< li > Right-to-left support< / li >
< li > < a href = "https://revealjs.com/api/" > Extensive JavaScript API< / a > < / li >
< li > < a href = "https://revealjs.com/auto-slide/" > Auto-progression< / a > < / li >
< li > < a href = "https://revealjs.com/backgrounds/#parallax-background" > Parallax backgrounds< / a > < / li >
< li > < a href = "https://revealjs.com/keyboard/" > Custom keyboard bindings< / a > < / li >
< / ul >
< / section >
< section style = "text-align: left;" >
< h1 > THE END< / h1 >
< p >
- < a href = "https://slides.com" > Try the online editor< / a > < br >
- < a href = "https://github.com/hakimel/reveal.js" > Source code & documentation< / a >
< / p >
< / section >
< / div >
< / div >
< script src = "dist/reveal.js" > < / script >
< script src = "plugin/zoom/zoom.js" > < / script >
< script src = "plugin/notes/notes.js" > < / script >
< script src = "plugin/search/search.js" > < / script >
< script src = "plugin/markdown/markdown.js" > < / script >
< script src = "plugin/highlight/highlight.js" > < / script >
< script >
// Also available as an ES module, see:
// https://revealjs.com/initialization/
Reveal.initialize({
controls: true,
progress: true,
center: true,
hash: true,
// Learn about plugins: https://revealjs.com/plugins/
plugins: [ RevealZoom, RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight ]
});
< / script >
< / body >
< / html >