Commit b06f25a1 authored by JosephK's avatar JosephK
Browse files

Home of service

parent 25b53633
<template>
<b-modal
id="c-modal-docs"
v-model="state.docs"
size="lg"
:static="true"
:lazy="true"
:title="$t('feedback.menu.docs')"
:title-sr-only="true"
:hide-header="true"
:cancel-title-html="$t('txt.close')"
cancel-variant="light"
button-size="sm"
@hidden="close()"
>
<div class="clearfix">
<div class="embed-responsive embed-responsive-1by1">
<iframe
v-if="state.docs === true"
class="embed-responsive-item"
:src="link"
></iframe>
</div>
</div>
</b-modal>
</template>
<script>
export default {
props: {
open: {
type: Boolean,
required: true,
},
link: {
type: String,
required: true,
},
},
data() {
return {
state: {
docs: false,
},
};
},
watch: {
open(newValue) {
if (newValue) {
this.state.docs = true;
}
},
},
methods: {
close() {
this.state.docs = false;
this.$parent.docs = false;
},
},
};
</script>
<style lang="scss">
#c-modal-docs {
.modal-content {
border-radius: 0;
border: none;
border-top: 8px solid var(--f-j6);
/*height: 94vh;*/
background: #fff; /* ~team */
}
.modal-body {
padding: 0;
max-height: none;
background: transparent; /* ~team */
}
.modal-footer {
border: none;
border-radius: 0;
margin: 0; /* ~mindmap */
background: transparent; /* ~team */
justify-content: center;
background-color: var(--f-j6);
.btn {
text-transform: uppercase;
}
.btn-primary {
display: none;
}
}
}
</style>
<template>
<section id="how">
<b-container class="px-md-0">
<b-row>
<b-col cols="12">
<h2 v-html="$t('hos.how.title')"></h2>
</b-col>
<b-col md="4">
<i
class="
fas fa-2x fa-brain fa-shape-circle fa-flex-center
fa-border fc-f7 fd-f6
"
></i>
<div v-html="$t('hos.how.attention', $t('hos.data'))"></div>
</b-col>
<b-col md="4">
<i
class="
fas fa-2x fa-people-carry fa-shape-circle fa-flex-center
fa-border fc-v6 fd-v5
"
></i>
<div v-html="$t('hos.how.data', $t('hos.data'))"></div>
</b-col>
<b-col md="4">
<i
class="
fac fa-2x fa-copyleft fa-shape-circle fa-flex-center
fa-border fc-f7 fd-f6
"
></i>
<div v-html="$t('hos.how.freedom', $t('hos.data'))"></div>
</b-col>
</b-row>
<b-row
id="more"
align-h="center"
class="mt-3"
>
<b-col
class="text-center"
lg="8"
>
<input
id="btn-more"
class="sr-only"
type="checkbox"
/>
<label
class="btn btn-sm btn-link p-0"
for="btn-more"
v-html="$t('hos.how.btn-more')"
></label>
<div
class="py-3 px-4 text-left"
v-html="$t('hos.how.more', $t('hos.data'))"
></div>
</b-col>
</b-row>
</b-container>
</section>
</template>
<style lang="scss">
#how {
background: var(--f-g2);
padding: 4rem 0;
h2 {
text-align: center;
text-transform: uppercase;
margin-bottom: 2rem;
@media (min-width: 768px) {
font-size: 3rem;
line-height: 4rem;
}
}
.fa-people-carry {
--square: 1em;
}
}
#more > div {
div {
display: none;
background: var(--f-g1);
border: 1px solid var(--f-g3);
border-radius: 4px;
}
label {
text-decoration: none;
}
#btn-more:checked ~ div {
display: block;
}
#btn-more:checked ~ label {
display: none;
}
}
</style>
<template>
<div>
<b-container class="px-md-0">
<p
class="signature text-right small m-0 pb-5 pt-3"
v-html="$t('hos.credits', $t('hos.data.credits'))"
></p>
</b-container>
<section
id="outro"
role="presentation"
></section>
</div>
</template>
<style lang="scss">
#outro {
filter: drop-shadow(-2px -5px 4px rgba(0, 0, 0, 0.2));
&::before,
&::after {
display: block;
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3rem;
}
&::before {
background: var(--f-f7);
-webkit-clip-path: polygon(0 100%, 0 100%, 100% 100%, 100% 15px);
clip-path: polygon(0 100%, 0 100%, 100% 100%, 100% 15px);
}
&::after {
background: var(--f-g4); /* = #f-footer */
-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 0 15px);
clip-path: polygon(0 0, 0 100%, 100% 100%, 0 15px);
bottom: -1px;
}
}
</style>
<template>
<section id="who">
<b-container class="px-md-0">
<b-row class="align-items-center">
<b-col cols="12">
<h2 v-html="$t('hos.who.title', $t('hos.data'))"></h2>
</b-col>
<b-col
class="text-center"
lg="4"
>
<img
alt=""
:src="`${$t('baseurl')}img/logo.svg`"
/>
</b-col>
<b-col
lg="8"
v-html="$t('hos.who.desc', $t('hos.data'))"
/>
</b-row>
</b-container>
</section>
</template>
<style lang="scss">
#who {
padding: 4rem 0 2rem;
h2 {
text-align: center;
text-transform: uppercase;
margin-bottom: 2rem;
@media (min-width: 768px) {
font-size: 3rem;
line-height: 4rem;
}
}
img {
background: var(--f-d1);
border: 3px solid var(--f-f6);
border-radius: 50%;
margin: 1rem;
max-width: 220px;
width: 100%;
}
}
</style>
<template>
<section id="why">
<b-container class="px-md-0">
<b-row>
<b-col cols="12">
<h2 v-html="$t('hos.why.title', $t('hos.data'))"></h2>
</b-col>
<b-col md="4">
<i
class="
fas fa-2x fa-lightbulb fa-shape-circle fa-flex-center
fa-border fc-f7 fd-f6
"
></i>
<div v-html="$t('hos.why.educ-pop', $t('hos.data'))"></div>
</b-col>
<b-col md="4">
<i
class="
fas fa-2x fa-cat fa-shape-circle fa-flex-center
fa-border fc-j8 fd-j7
"
></i>
<div v-html="$t('hos.why.ecosys', $t('hos.data'))"></div>
</b-col>
<b-col md="4">
<i
class="
fas fa-2x fa-leaf fa-shape-circle fa-flex-center
fa-border fc-v6 fd-v5
"
></i>
<div v-html="$t('hos.why.commons', $t('hos.data'))"></div>
</b-col>
</b-row>
</b-container>
</section>
</template>
<style lang="scss">
#why {
background: var(--f-m2);
padding: 4rem 0;
h2 {
text-align: center;
text-transform: uppercase;
margin-bottom: 2rem;
@media (min-width: 768px) {
font-size: 3rem;
line-height: 4rem;
}
}
}
</style>
......@@ -597,6 +597,12 @@ $onetime: var(--f-b7); // $bleu foncé
color: var(--f-d1);
text-decoration: underline !important;
}
.fa-cogs,
.fa-people-carry {
--square: 1em;
}
}
#quotes blockquote p:last-of-type {
......@@ -656,6 +662,10 @@ $onetime: var(--f-b7); // $bleu foncé
color: var(--f-j6);
}
}
.fa-users {
--square: 1em;
}
}
.money .card {
......
how:
title: An emancipatory tool
attention: |-
### The economy of your attention
The {service} is **free, without ads or click traps**.
Our goal is to host a tool that serves you and does not use you.
Contrary to the adage, here, **you are not the product**.
data: |-
### Controlling your data
@:txt.soft collects as little data as possible.
**You have complete autonomy over it**.
We have no interest in tracking your behaviour, nor in exploiting it.
freedom: |-
### Respecting your freedoms
{service} is based a Free-libre software¹.
**Its code is transparent, publicly auditable** and there are no hidden
features.
It is built by the community, and everyone is free to fork it and
lead the project in new directions.
<small>¹ [{software}]({src}) – License {license}</small>
btn-more: Want to go further in coding and autonomy?
more: |-
{service} is an installation of the free software {software} on
the @:txt.soft servers.
Its free license allows you to study its code, contribute to it and
install it on your own server.
- [View and contribute code to {software}]({src})
- [Read our installation tutorial]({framacloud})
- [Use the simplified YunoHost installation]({yunohost})
why:
title: Why offer {service}?
educ-pop: |-
### Promoting popular education
Using {service} is the first step on the road to your digital autonomy.
Entrusting your data to a host implies having reasons to to trust it.
@:txt.soft commits to clear conditions¹ to host services with respect
to your integrity.
<small>¹ see [our Terms of Use](@:link.cgu) and [our charter](@:link.charter)</small>
ecosys: |-
### Creating a resilient ecosystem
**@:txt.soft is one of many actors** offering online services hosted
with a strong ethic, with the objective of decentralisation.
To take a step further in your digital emancipation, find the same service
hosted near you by one of the members of the Collective of independant,
transparent, open, neutral and ethical hosters: [the CHATONS]({chatons})!
commons: |-
### Contributing to the digital commons
Behind a service like {service} there is a [political proposal]({politic}):
**exploring an alternative to surveillance capitalism by experimenting
with the contribution society**.
By offering uses, feedback and contributions to {software}, we participate
in maintaining the vibrancy of a common resource.
who:
title: Who is behind {service}?
desc: |-
{service} is hosted [by a French not-for-profit
association](@:link.soft/association): @:txt.soft
Created in 2004, the association is now dedicated to **popular education
on the challenges of the digital age and the cultural commons**.
Our small structure (@:metrics.members including @:metrics.employees) is
known the De-google-ify Internet project
(@:metrics.services ethical and alternative online tools)
and for the development of PeerTube, Mobilizon, etc.
Recognized as being of general interest **@:txt.soft is funded
at @:(metrics.ig-pdonation)% by your donations**, which are tax deductible
for French taxpayers.
credits: |-
Illustration : {author} ({license})
\ No newline at end of file
# TODO: move to commons
how:
title: Un outil émancipateur
attention: |-
### L’économie de votre attention
{service} est **gratuit, sans pub, ni pièges à clics**.<br />
Notre but est d’héberger un outil qui vous sert, et qui ne se sert pas de vous.
Contrairement à l’adage, ici, **vous n’êtes pas le produit**.
data: |-
### Le contrôle de vos données
@:txt.soft récolte le moins de données possible.
**Vous en disposez en toute autonomie**.
Nous n’avons aucun intérêt à pister vos comportements, ni à les exploiter.
freedom: |-
### Le respect de vos libertés
{service} repose sur un logiciel libre¹.
**Son code est transparent, publiquement consultable**
et ne contient pas de fonctionnalité cachée.
Il est construit de manière communautaire, et chacun·e est
libre de le reprendre pour mener le projet vers de nouvelles voies.
<small>¹ [{software}]({src}) – Licence {license}</small>
btn-more: Envie d’aller plus loin dans le code et l’autonomie ?
more: |-
{service} est une installation du logiciel libre {software} sur
les serveurs de @:(txt.soft).<br />
Sa licence libre vous autorise à étudier son code, à y contribuer
ainsi qu’à l’installer sur votre propre serveur.
- [Voir et contribuer au code de {software}]({src})
- [Lire notre tutoriel d’aide à l’installation]({framacloud})
- [Utiliser l’installation simplifiée sur serveur YunoHost]({yunohost})
why:
title: Pourquoi proposer {service} ?
educ-pop: |-
### Favoriser l’éducation populaire
Utiliser {service}, c’est faire **un premier pas sur le chemin de
votre autonomie numérique**.
Confier ses données à un hébergeur implique d’avoir des raisons de lui
faire confiance.
@:txt.soft s’engage sur des conditions claires¹ pour héberger des services
dans le respect de votre intégrité.
<small>¹ voir [nos Conditions Générales d’Utilisation](@:link.cgu) et
[notre charte](@:link.charte)</small>
ecosys: |-
### Créer un écosystème résilient
**@:txt.soft est un acteur parmi d’autres** qui propose des
services en ligne hébergés avec une éthique forte, dans un objectif
de décentralisation.
Pour faire un pas de plus dans votre émancipation numérique, retrouvez le
même service hébergé près de chez vous par un des membres du Collectif
d’Hébergeurs Alternatifs, Transparents, Ouverts, Neutres et Solidaires :
[les CHATONS]({chatons}) !
commons: |-
### Contribuer aux communs numériques
Derrière un service comme {service} il y a une [proposition politique]({politic}) :
**explorer une alternative au capitalisme de surveillance en expérimentant
la société de contribution**.
En offrant des usages, des retours et des contributions à {software},
nous participons à entretenir la vivacité d’une ressource mise en commun.
who:
title: Qui est derrière {service} ?
desc: |-
{service} est hébergé [par une association française à but non
lucratif](@:link.soft/association) : @:txt.soft
Créée en 2004, l’association se consacre désormais à **l’éducation populaire
aux enjeux du numérique et des communs culturels**.
Notre petite structure (@:metrics.members membres dont @:metrics.employees
salarié·es) est connue pour le projet Dégooglisons Internet
(@:metrics.services outils en ligne éthiques et alternatifs) et pour le
développement des logiciels PeerTube, Mobilizon, etc.
Reconnue d’intérêt général, **@:txt.soft est financée à @:metrics.ig-pdonation %
par vos dons**, déductibles des impôts pour les contribuables français·es.
credits: |-
Illustration : {author} ({license})
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment