adlin/token-validator/htdocs/views/home.html

<div class="jumbotron mt-2">
  <h1>
    Bienvenue {{ isLogged.login }} chez Maatma&nbsp;!
  </h1>
  <p class="lead text-muted">L'hébergement vraiment pas cher (mais DIY)</p>

  <hr class="my-4">

  <h2 ng-if="!isLogged">
    Connectez-vous&nbsp;!
  </h2>

  <h2 ng-if="isLogged" class="mb-4">
    Qu'allons-nous faire aujourd'hui&nbsp;? <a href="/dashboard/{{ isLogged.login }}" class="text-muted">Voir l'avancement...</a>
  </h2>

  <div ng-controller="ProgressionController" ng-if="isLogged">
    <div ng-repeat="(tutoid,tuto) in tuto_progress" class="mb-2 row">
      <strong class="col-auto mr-2">TP {{tutoid+1}}</strong>
      <div class="col">
        <div class="ml-1 align-items-center" ng-class="{'d-inline-block': !mychallenges[ch] || !mychallenges[ch].error || mychallenges[ch].error == 'OK', 'd-flex': !(!mychallenges[ch] || !mychallenges[ch].error || mychallenges[ch].error == 'OK')}" ng-repeat="(ch,t) in tuto_progress[tutoid]">
          <span class="badge mr-1" ng-class="{'badge-success': mychallenges[ch] && (!mychallenges[ch].error || mychallenges[ch].error == 'OK'), 'badge-warning': mychallenges[ch] && mychallenges[ch].error && mychallenges[ch].error != 'OK', 'badge-danger': !mychallenges[ch] || !mychallenges[ch].time}" title="{{ t.title }} @ {{ mychallenges[ch].time | date: 'medium' }} {{ mychallenges[ch].recent }}" ng-bind="t.label"></span>
          <pre class="ml-1 mb-0" ng-show="mychallenges[ch] && mychallenges[ch].error && mychallenges[ch].error != 'OK'">{{ mychallenges[ch].error }}</pre>
        </div>
      </div>
    </div>
  </div>

  <h2 class="mt-4 mb-2" ng-if="isLogged">
    Besoin d'aide&nbsp;?
  </h2>

  <p ng-if="isLogged">
    Rejoignez-nous sur notre canal
    <a href="https://matrix.to/#/#maatma:nemunai.re" target="_blank"><img src="https://matrix.to/images/matrix-logo-3303998978.svg" alt="Rejoingnez-nous sur notre canal Matrix"></a>
  </p>

</div>

<div class="card-deck">
  <div class="card">
    <img src="img/patrick-lindenberg-191841-unsplash.jpg" class="card-img-top" alt="Endangered technic">
    <div class="card-body">
      <h5 class="card-title">Service de stockage</h5>
      <p class="card-text">Découvrez dès maintenant notre offre de stockage redondé révolutionaire.</p>
      <p class="card-text"><small class="text-muted">À partir de 0 € TTC/mois + l'achat du matériel</small></p>
      <a href="https://fr.wikipedia.org/wiki/RAID_(informatique)" class="btn btn-primary" target="_blank">Découvrir maintenant&nbsp;!</a>
    </div>
  </div>
  <div class="card">
    <img src="img/patryk-gradys-128898-unsplash.jpg" class="card-img-top" alt="Dark, button, power and powerstation">
    <div class="card-body">
      <h5 class="card-title">Service de supervision</h5>
      <p class="card-text">Nos équipes sont à votre disposition pour écrire des scripts shell de monitoring. Vous pouvez aussi choisir d'investir dans des technologies plus novatrices.</p>
      <p class="card-text"><small class="text-muted">À partir de 0 € TTC/mois</small></p>
      <a href="https://www.elastic.co/elk-stack" class="btn btn-primary" target="_blank">Découvrir maintenant&nbsp;!</a>
    </div>
  </div>
  <div class="card">
    <img src="img/imgix-391808-unsplash.jpg" class="card-img-top" alt="Data Servers">
    <div class="card-body">
      <h5 class="card-title">Service d'arrangement</h5>
      <p class="card-text">Fini les mélis-mélos de câbles, apprenez dès aujourd'hui l'art de ne jamais croiser deux câbles.</p>
      <p class="card-text"><small class="text-muted">Bientôt disponible</small></p>
      <a href="https://www.reddit.com/r/cableporn/" class="btn btn-primary" target="_blank">Découvrir maintenant&nbsp;!</a>
    </div>
  </div>
</div>

<hr class="my-4">

<p class="lead mb-4">
  Nous faisons aussi des tunnels et noms de domaine. Devis gratuit sur demande.
</p>