Nola rename: The Big Move, Refs T77

15 files changed, 804 insertions, 0 deletions

diff --git a/lib/nola_web/templates/alcoolog/auth.html.eex b/lib/nola_web/templates/alcoolog/auth.html.eex
new file mode 100644
index 0000000..6e5cedc
--- /dev/null
+++ b/lib/nola_web/templates/alcoolog/auth.html.eex
@@ -0,0 +1,43 @@
+<div class="grid grid-cols-2">
+    <h1 class="text-2xl font-bold">authentication</h1>
+    <div class="text-right">
+        <%= link("connect using random.sh", to: "/login/oidc", class: "inline-block font-medium underline") %>
+    </div>
+</div>
+
+<div id="authenticator" class="mt-12 h-32 place-self-end justify-self-start">
+  <p>
+  <%= if @bot, do: "Send this to #{@bot} on #{@network}:", else: "Find your bot nickname and send:" %><br /><br />
+  <strong>/msg <%= @bot || "the-bot-nickname" %> web</strong>
+  <br /><br />
+  ... then come back to this address.
+  </p>
+</div>
+
+<script type="text/javascript">
+  var authSse = new EventSource("/api/irc-auth.sse?redirect_to=" + window.location.pathname);
+  authSse.addEventListener("token", function(event) {
+    html = "<%= if @bot, do: "Send this to #{@bot} on #{@network}:", else: "Find your bot nickname and send:" %><br /><br /><strong class='text-xl font-mono ml-12'>/msg <%= @bot || "<the-bot-nickname>" %> "+event.data+"</strong>";
+    elem = document.getElementById("authenticator");
+    elem.innerHTML = html;
+  });
+  authSse.addEventListener("authenticated", function(event) {
+    elem = document.getElementById("authenticator");
+    elem.innerHTML = "<strong>success, redirecting...</strong>";
+    window.keepInner = true;
+    window.location.pathname = event.data;
+  });
+  authSse.addEventListener("expire", function(event) {
+    elem = document.getElementById("authenticator");
+    elem.innerHTML = "<strong>authentication expired</strong>";
+    window.keepInner = true;
+  });
+  authSse.onerror = function() {
+    authSse.close();
+    if (!window.keepInner) {
+      elem = document.getElementById("authenticator");
+      elem.innerHTML = "<strong>server closed connection :(</strong>";
+    }
+  };
+
+</script>
diff --git a/lib/nola_web/templates/alcoolog/index.html.eex b/lib/nola_web/templates/alcoolog/index.html.eex
new file mode 100644
index 0000000..5a5423a
--- /dev/null
+++ b/lib/nola_web/templates/alcoolog/index.html.eex
@@ -0,0 +1,205 @@
+<style type="text/css">
+ol li {
+  margin-bottom: 5px
+}
+</style>
+
+<%= if @stats == [] do %>
+  <div class="rounded-md bg-red-50 p-4">
+    <div class="flex">
+      <div class="flex-shrink-0">
+        <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+        </svg>
+      </div>
+      <div class="ml-3">
+        <h3 class="text-sm leading-5 font-medium text-red-800">
+          CATASTROPHE! Personne n'a bu!!!!
+        </h3>
+      </div>
+    </div>
+  </div>
+<% end %>
+
+<ul class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+  <%= for {nick, status} <- @stats do %>
+    <li class="col-span-1 bg-white rounded-lg shadow">
+    <div class="w-full flex items-center justify-between p-6 space-x-6">
+      <div class="flex-1 truncate">
+        <div class="flex items-center space-x-3">
+          <h3 class="text-gray-900 text-base leading-5 font-semibold truncate"><%= link nick, to: alcoolog_path(@conn, :nick, @network, nick) %></h3>
+          <% rising_class = if status.rising, do: "teal", else: "red" %>
+          <span class="flex-shrink-0 inline-block px-2 py-0.5 text-<%= rising_class %>-800 text-sm leading-4 font-medium bg-<%= rising_class %>-100 rounded-full">
+            <%= status.trend_symbol %> <%= Float.round(status.active, 4) %> g/l
+          </span>
+        </div>
+        <p class="mt-1 text-gray-700 text-sm leading-5 truncate">
+          <span class="text-base"><%= status.last_cl %>cl @ <%= status.last_deg %>°</span>
+          <%= if status.last_descr && status.last_descr != "" do %>
+            <br /><%= status.last_descr %>
+          <% end %>
+        <br/><small><%= NolaWeb.LayoutView.format_time(status.last_at) %></small>
+        </p>
+
+        <p class="mt-1 text-gray-500 text-sm leading-5 truncate">
+        <br />
+          &mdash; sobre dans: <%= status.sober_in_s %><br />
+          <%= if status.since do %>
+            &mdash; depuis: <%= status.since_s %><br />
+          <% end %>
+        <small>
+          &mdash; 15m: <%= status.active15m %> g/l - 30m: <%= status.active30m %> g/l - 1h: <%= status.active1h %> g/l<br />
+          &mdash; aujourd'hui: <%= status.daily_volumes %> points, <%= status.daily_gl %> g/l
+        </small>
+        </p>
+
+
+      </div>
+    </div>
+    </li>
+  <% end %>
+</ul>
+
+<%= if @stats == %{} do %>
+  <div class="rounded-md bg-red-50 p-4">
+    <div class="flex">
+      <div class="flex-shrink-0">
+        <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+        </svg>
+      </div>
+      <div class="ml-3">
+        <h3 class="text-sm leading-5 font-medium text-red-800">
+          ENCORE PIRE! Aucune boisson enregistrée!
+        </h3>
+      </div>
+    </div>
+  </div>
+<% else %>
+
+<canvas id="myChart" class="w-full" height="200"></canvas>
+
+  <h2 class="leading-8 m-4 font-semibold text-2xl">Classement <span class="font-medium text-gray-600 text-lg">15 jours</span></h2>
+
+<ul class="grid grid-cols-1 gap-6 sm:grid-cols-5 lg:grid-cols-5">
+  <%= for {{nick, count}, rank} <- Enum.with_index(@top) do %>
+    <% rank = rank + 1 %>
+    <% trophy = rank <= 3 %>
+    <% {colour, text} = case rank do
+1 -> {"yellow-500", "font-semibold text-base"}
+2 -> {"gray-500", "font-medium text-base"}
+3 -> {"orange-300", "font-medium text-base"}
+_ -> {"gray-300", ""}
+    end %>
+    <li class="col-span-1 bg-white rounded-lg shadow text-center <%= text %>">
+    <%= if trophy do %>
+      <span class="text-<%= colour %>">
+        <svg style="width: 1.125em; height: 1.5em; display: inline-block;" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="trophy" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M552 64H448V24c0-13.3-10.7-24-24-24H152c-13.3 0-24 10.7-24 24v40H24C10.7 64 0 74.7 0 88v56c0 35.7 22.5 72.4 61.9 100.7 31.5 22.7 69.8 37.1 110 41.7C203.3 338.5 240 360 240 360v72h-48c-35.3 0-64 20.7-64 56v12c0 6.6 5.4 12 12 12h296c6.6 0 12-5.4 12-12v-12c0-35.3-28.7-56-64-56h-48v-72s36.7-21.5 68.1-73.6c40.3-4.6 78.6-19 110-41.7 39.3-28.3 61.9-65 61.9-100.7V88c0-13.3-10.7-24-24-24zM99.3 192.8C74.9 175.2 64 155.6 64 144v-16h64.2c1 32.6 5.8 61.2 12.8 86.2-15.1-5.2-29.2-12.4-41.7-21.4zM512 144c0 16.1-17.7 36.1-35.3 48.8-12.5 9-26.7 16.2-41.8 21.4 7-25 11.8-53.6 12.8-86.2H512v16z"></path></svg>
+      </span>
+    <% end %>
+    #<%= rank %>: <%= link nick, to: alcoolog_path(@conn, :nick, @network, nick) %>
+    <br />
+    <span class="text-xs"><%= Float.round(count, 4) %></span>
+  </li>
+  <% end %>
+</ul>
+
+  <h2 class="leading-8 m-4 font-semibold text-2xl">Historique</h2>
+<div class="flex flex-col">
+  <div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
+    <div class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200">
+      <table class="min-w-full divide-y divide-gray-200">
+        <thead>
+          <tr>
+            <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+              date
+            </th>
+            <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+              nick
+            </th>
+            <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+              &nbsp;
+            </th>
+            <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+              &nbsp;
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <%= for {{{{account, date}, points, _active, cl, deg, nom, comment, _meta}, nick}, index} <- Enum.with_index(@drinks) do %>
+            <% class = if(Integer.is_even(index), do: "bg-gray-50", else: "bg-white") %>
+            <% date = DateTime.from_unix!(date, :millisecond) %>
+            <tr class="<%= class %>">
+              <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900">
+                <%= NolaWeb.LayoutView.format_time(date, false) %>
+              </td>
+              <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900">
+                <%= link nick, to: alcoolog_path(@conn, :nick, @network, nick) %>
+              </td>
+              <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500"><%= cl %>cl <%= deg %>°</td>
+              <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500"><%= comment||"" %></td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+<% end %>
+
+<%= if @conn.assigns.account && (@network || @channel) do %>
+  <%= link("alcoolog global", to: alcoolog_path(@conn, :index)) %>
+<% end %>
+
+<link href='/css/metricsgraphics.css' rel='stylesheet' type='text/css'>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.css" integrity="sha512-SUJFImtiT87gVCOXl3aGC00zfDl6ggYAw5+oheJvRJ8KBXZrr/TMISSdVJ5bBarbQDRC2pR5Kto3xTR0kpZInA==" crossorigin="anonymous" />
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js" integrity="sha512-vBmx0N/uQOXznm/Nbkp7h0P1RfLSj0HQrFSzV8m7rOGyj30fYAOKHYvCNez+yM8IrfnW0TCodDEjRqf6fodf/Q==" crossorigin="anonymous"></script>
+<script src="/js/jquery3.1.0.min.js"></script>
+<script src="/js/d3.v4.min.js"></script>
+<script src="/js/metricsgraphics.min.js"></script>
+    <script type="text/javascript">
+      (function() {
+        // oui s trè moch :( :( :(
+var ctx = document.getElementById('myChart').getContext('2d');
+    d3.json('<%= alcoolog_path(@conn, :index_gls_json, @network, NolaWeb.format_chan(@channel)) %>', function(data) {
+
+    var dynamicColors = function() {
+        var r = Math.floor(Math.random() * 255);
+        var g = Math.floor(Math.random() * 255);
+        var b = Math.floor(Math.random() * 255);
+        return "rgb(" + r + "," + g + "," + b + ")";
+    };
+
+      labels = data.labels;
+      datasets = $.map($.makeArray(data.data), function(set) {
+        return {label: set.name, data: set.history, fill: false, borderColor: dynamicColors()}
+      });
+
+
+var myChart = new Chart(ctx, {
+    type: 'line',
+    data: {
+      labels: labels,
+      datasets: datasets
+    },
+    options: {
+      scales: {
+        xAxes: [{
+          type: 'time',
+          time: {
+            unit: 'day'
+          }
+        }],
+            yAxes: [{
+                ticks: {
+                    beginAtZero: true
+                }
+            }]
+        }
+    }
+});
+});
+
+
+})();
+</script>
diff --git a/lib/nola_web/templates/alcoolog/user.html.eex b/lib/nola_web/templates/alcoolog/user.html.eex
new file mode 100644
index 0000000..d7f716b
--- /dev/null
+++ b/lib/nola_web/templates/alcoolog/user.html.eex
@@ -0,0 +1,170 @@
+<%= if @stats.active > 0 do %>
+  <h3 class="text-gray-900 text-xl leading-5 font-semibold truncate">
+    <% rising_class = if @stats.rising, do: "teal", else: "red" %>
+    <span class="flex-shrink-0 inline-block px-3 py-3 text-<%= rising_class %>-800 text-2xl leading-4 font-medium bg-<%= rising_class %>-100 rounded-full">
+      <%= @stats.trend_symbol %> <%= Float.round(@stats.active, 4) %> g/l
+    </span>
+
+    <span class="px-3"><%= @stats.last_cl %>cl @ <%= @stats.last_deg %>°</span>
+
+    <span class="px-3 text-lg text-gray-700"><%= if @stats.last_descr && @stats.last_descr != "" do %>
+      <%= @stats.last_descr %>
+    <% end %>
+    </span>
+
+    <span class="px-3 text-gray-500 text-sm font-thin"><%= NolaWeb.LayoutView.format_time(@stats.last_at) %></span>
+
+    </h3>
+
+    <p class="text-gray-500 font-thin text-lg">
+      a commencé il y a <span class="text-gray-700 font-semibold"><%= @stats.since_s %></span>
+      &mdash;
+      sobre dans <span class="text-gray-700 font-semibold"><%= @stats.sober_in_s %></span>
+    </p>
+<% else %>
+  <h3 class="text-gray-900 text-xl leading-5 font-semibold truncate">
+    est sobre!
+
+    <p class="text-gray-500 font-thin text-lg">
+    dernier verre
+    <span class="px-3"><%= @stats.last_cl %>cl @ <%= @stats.last_deg %>°</span>
+
+    <span class="px-3 text-lg text-gray-700"><%= if @stats.last_descr && @stats.last_descr != "" do %>
+      <%= @stats.last_descr %>
+    <% end %>
+    </span>
+
+    <span class="px-3 text-gray-500 text-sm font-thin"><%= NolaWeb.LayoutView.format_time(@stats.last_at) %></span>
+  </h3>
+<% end %>
+
+<canvas id="myChart" class="w-full" height="200"></canvas>
+<canvas id="myChartGl" class="w-full" height="200"></canvas>
+
+
+<h2 class="leading-8 m-4 font-semibold text-2xl">Historique</h2>
+<div class="flex flex-col">
+  <div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
+    <div class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200">
+      <table class="min-w-full divide-y divide-gray-200">
+        <thead>
+          <tr>
+            <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+              date
+            </th>
+            <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+              &nbsp;
+            </th>
+            <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+              &nbsp;
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <%= for {%{at: date, cl: cl, deg: deg, description: comment}, index} <- Enum.with_index(@history) do %>
+            <% class = if(Integer.is_even(index), do: "bg-gray-50", else: "bg-white") %>
+            <tr class="<%= class %>">
+              <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900">
+                <%= NolaWeb.LayoutView.format_time(date, false) %>
+              </td>
+              <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500"><%= cl %>cl <%= deg %>°</td>
+              <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500"><%= comment||"" %></td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+
+<div id="metrics-gl" class="w-full"></div>
+
+<link href='/css/metricsgraphics.css' rel='stylesheet' type='text/css'>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.css" integrity="sha512-SUJFImtiT87gVCOXl3aGC00zfDl6ggYAw5+oheJvRJ8KBXZrr/TMISSdVJ5bBarbQDRC2pR5Kto3xTR0kpZInA==" crossorigin="anonymous" />
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js" integrity="sha512-vBmx0N/uQOXznm/Nbkp7h0P1RfLSj0HQrFSzV8m7rOGyj30fYAOKHYvCNez+yM8IrfnW0TCodDEjRqf6fodf/Q==" crossorigin="anonymous"></script>
+<script src="/js/jquery3.1.0.min.js"></script>
+<script src="/js/d3.v4.min.js"></script>
+<script src="/js/metricsgraphics.min.js"></script>
+    <script type="text/javascript">
+  (function() {
+var ctx = document.getElementById('myChart').getContext('2d');
+    d3.json('<%= alcoolog_path(@conn, :nick_volumes_json, @network, @nick, days: @days) %>', function(data) {
+var myChart = new Chart(ctx, {
+    type: 'bar',
+    data: {
+      labels: data.map(function(data) { return new Date(data.date) }),
+        datasets: [{
+            label: 'Volumes d\'alcool',
+          data: data.map(function(data) { return data.volumes }),
+            borderWidth: 1
+        }]
+    },
+    options: {
+      scales: {
+        xAxes: [{
+          type: 'time',
+          time: {
+            unit: 'day'
+          }
+        }],
+            yAxes: [{
+                ticks: {
+                    beginAtZero: true
+                }
+            }]
+        }
+    }
+});
+});
+
+
+
+
+var ctxgl = document.getElementById('myChartGl').getContext('2d');
+    d3.json('<%= alcoolog_path(@conn, :nick_gls_json, @network, @nick, days: @days) %>', function(data) {
+var myChartgl = new Chart(ctxgl, {
+    type: 'bar',
+    data: {
+      labels: data.map(function(data) { return new Date(data.date) }),
+        datasets: [{
+            label: 'g/l ingérés',
+          data: data.map(function(data) { return data.gls }),
+            borderWidth: 1
+        }]
+    },
+    options: {
+      scales: {
+        xAxes: [{
+          type: 'time',
+          time: {
+            unit: 'day'
+          }
+        }],
+            yAxes: [{
+                ticks: {
+                    beginAtZero: true
+                }
+            }]
+        }
+    }
+});
+});
+
+
+    d3.json('<%= alcoolog_path(@conn, :nick_log_json, @network, @nick, days: @days) %>', function(data) {
+    data = data.map(function(d) {
+      date = new Date(d.at);
+      return {"date": date, "active": d.active};
+    });
+    MG.data_graphic({
+        title: "g/l, All Time",
+        data: data,
+        width: 1000,
+        height: 400,
+        target: document.getElementById('metrics-gl'),
+        x_accessor: 'date',
+        y_accessor: 'active',
+    });
+  });
+})();
+</script>
diff --git a/lib/nola_web/templates/irc/index.html.eex b/lib/nola_web/templates/irc/index.html.eex
new file mode 100644
index 0000000..182624d
--- /dev/null
+++ b/lib/nola_web/templates/irc/index.html.eex
@@ -0,0 +1,44 @@
+<div class="hidden sm:block">
+    <nav class="flex flex-wrap space-x-4">
+        <%= link("live", to: NolaWeb.Router.Helpers.live_path(NolaWeb.Endpoint, NolaWeb.ChatLive, @network, NolaWeb.format_chan(@chan)), class: "py-4 font-medium leading-5 rounded-md text-gray-500 hover:text-gray-700 focus:outline-none focus:text-indigo-600 focus:bg-indigo-50", 'data-turbo': false) %>
+  <% list =  for {identifier, _} <- @commands do %>
+    <% name = String.replace(identifier, "_", " ") %>
+    <%= link(name, to: "##{identifier}", class: "py-4 font-medium leading-5 rounded-md text-gray-500 hover:text-gray-700 focus:outline-none focus:text-indigo-600 focus:bg-indigo-50") %>
+  <% end %>
+  <%= list %>
+  </nav>
+</div>
+
+<%= if @members != [] do %>
+    <ul class="flex flew-wrap space-x-4 mt-12">
+        <%= for user <- @members do %><li><%= user.nick %></li><% end %>
+    </ul>
+<% end %>
+
+<div class="irchelps space-y-6 mt-12">
+  <%= for {identifier, help} <- @commands do %>
+    <%= if help do %>
+      <div class="bg-white border-b border-gray-200" id="<%= identifier %>">
+        <div class="prose w-auto max-w-full"><%= NolaWeb.LayoutView.liquid_markdown(@conn, help) %></div>
+      </div>
+    <% end %>
+  <% end %>
+</div>
+
+<br/><br/><br/>
+
+<p>
+<small>
+  <strong>Légende:</strong><br />
+  entre <code>< ></code>: argument obligatoire,<br />
+  entre <code>[ ]</code>: argument optionel; <code>[1 | ]</code>: argument optionel avec valeur par défaut.
+</small>
+</p>
+
+<br/><br/><br/>
+
+<p>
+<small>
+  running beautte version <%= Nola.version() %> &mdash; <a href="<%= Nola.source_url() %>">git</a>
+</small>
+</p>
diff --git a/lib/nola_web/templates/irc/txt.html.eex b/lib/nola_web/templates/irc/txt.html.eex
new file mode 100644
index 0000000..fd4ea00
--- /dev/null
+++ b/lib/nola_web/templates/irc/txt.html.eex
@@ -0,0 +1,27 @@
+<style type="text/css">
+:target {
+  background-color: #ffa;
+  font-weight: bold;
+}
+ol > li > a {
+  display: none;
+}
+ol > li:hover > a {
+  display: inline-block;
+  color: gray;
+}
+</style>
+
+<ol class="prose space-y-3 w-auto max-w-full list-outside list-decimal m-4 leading-loose">
+  <%= for {txt, id} <- Enum.with_index(@data) do %>
+    <li class="text-lg" id="q<%= id+1 %>">
+
+      <%= txt %>
+      <a href="#q<%= id+1 %>" class="text-xs text-gray-500 space-x-3">#</a>
+    </li>
+  <% end %>
+</ol>
+
+<p>
+  <a href="/-/txt/<%= @name %>.txt" class="text-xs text-gray-500">télécharger au format texte</a>
+</p>
diff --git a/lib/nola_web/templates/irc/txts.html.eex b/lib/nola_web/templates/irc/txts.html.eex
new file mode 100644
index 0000000..aff0c5d
--- /dev/null
+++ b/lib/nola_web/templates/irc/txts.html.eex
@@ -0,0 +1,49 @@
+<div>
+  <h2 class="text-gray-500 text-xs font-medium uppercase tracking-wide">
+    <strong><%= @lines %></strong> lignes dans <strong><%= @files %></strong> fichiers
+    <a href="#help" class="ml-4 font-bold">Aide</a>
+    <a href="#system" class="text-gray-300 ml-4">Fichiers système</a>
+  </h2>
+  <ul class="mt-3 grid grid-cols-1 gap-5 sm:gap-6 sm:grid-cols-4 lg:grid-cols-6">
+  <%= for {txt, data} <- @data do %>
+    <% base_url = cond do
+      @conn.assigns[:chan] -> "/#{@conn.assigns.network}/#{NolaWeb.format_chan(@conn.assigns.chan)}"
+      true -> "/-"
+    end %>
+    <li class="col-span-1 flex shadow-sm rounded-m">
+     <div class="flex-1 flex items-center justify-between border-l border-t border-r border-b border-gray-200 bg-white rounded-md truncate">
+        <div class="flex-1 px-4 py-2 text-sm leading-5 truncate">
+          <a href="<%= base_url %>/txt/<%= txt %>" class="text-gray-900 text-lg font-medium hover:text-gray-600 transition ease-in-out duration-150"><%= txt %></a>
+          <p class="text-gray-500"><%= Enum.count(data) %> lignes</p>
+        </div>
+      </div>
+    </li>
+  <% end %>
+  </ul>
+</div>
+
+<div class="prose mt-12" id="help""><%= NolaWeb.LayoutView.liquid_markdown(@conn, @doc) %></div>
+
+<div class="mt-24">
+    <h2 class="text-gray-500 text-xs font-medium uppercase tracking-wide">
+        Fichiers système
+    </h2>
+
+    <ul class="mt-3 grid grid-cols-1 gap-5 sm:gap-6 sm:grid-cols-4 lg:grid-cols-6">
+        <%= for {txt, data} <- @system do %>
+            <% base_url = cond do
+            @conn.assigns[:chan] -> "/#{@conn.assigns.network}/#{NolaWeb.format_chan(@conn.assigns.chan)}"
+            true -> "/-"
+            end %>
+            <li class="col-span-1 flex shadow-sm rounded-m">
+                <div class="flex-1 flex items-center justify-between border-l border-t border-r border-b border-gray-200 bg-white rounded-md truncate">
+                    <div class="flex-1 px-4 py-2 text-sm leading-5 truncate">
+                        <a href="<%= base_url %>/txt/<%= txt %>" class="text-gray-900 text-lg font-medium hover:text-gray-600 transition ease-in-out duration-150"><%= txt %></a>
+                        <p class="text-gray-500"><%= Enum.count(data) %> lignes</p>
+                    </div>
+                </div>
+            </li>
+        <% end %>
+    </ul>
+
+</div>
diff --git a/lib/nola_web/templates/layout/app.html.eex b/lib/nola_web/templates/layout/app.html.eex
new file mode 100644
index 0000000..c774369
--- /dev/null
+++ b/lib/nola_web/templates/layout/app.html.eex
@@ -0,0 +1,126 @@
+<div>
+  <div class="bg-gray-800 pb-32">
+    <nav class="bg-gray-800">
+      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+        <div class="border-b border-gray-700">
+          <div class="flex items-center justify-between h-16 px-4 sm:px-0">
+            <div class="flex items-center">
+              <div class="flex-shrink-0">
+                <img class="h-8 w-8" src="https://tailwindui.com/img/logos/workflow-mark-on-dark.svg" alt="Workflow logo">
+              </div>
+              <div class="hidden md:block">
+                <div class="ml-10 flex items-baseline">
+                  <a href="/" class="px-3 py-2 rounded-md text-sm font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700"><%= Nola.name() %></a>
+                  <!--<a href="#" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Team</a>
+                  <a href="#" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Projects</a>
+                  <a href="#" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Calendar</a>
+                  <a href="#" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Reports</a>-->
+                </div>
+              </div>
+            </div>
+            <div class="hidden md:block">
+              <div class="ml-4 flex items-center md:ml-6">
+                <!--<button class="p-1 border-2 border-transparent text-gray-400 rounded-full hover:text-white focus:outline-none focus:text-white focus:bg-gray-700" aria-label="Notifications">
+                  <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+                  </svg>
+                </button>-->
+                <!-- Profile dropdown -->
+                <div class="ml-3 relative">
+                  <div>
+                    <button class="max-w-xs flex items-center text-sm rounded-full text-white focus:outline-none focus:shadow-solid" id="user-menu" aria-label="User menu" aria-haspopup="true">
+                      <!--<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">-->
+              ~<%= if @conn.assigns[:account], do: @conn.assigns.account.name %>
+
+                    </button>
+                  </div>
+                  <!--
+                    Profile dropdown panel, show/hide based on dropdown state.
+
+                    Entering: "transition ease-out duration-100"
+                      From: "transform opacity-0 scale-95"
+                      To: "transform opacity-100 scale-100"
+                    Leaving: "transition ease-in duration-75"
+                      From: "transform opacity-100 scale-100"
+                      To: "transform opacity-0 scale-95"
+                  -->
+                  <!--<div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg">
+                    <div class="py-1 rounded-md bg-white shadow-xs">
+                      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Your Profile</a>
+                      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
+                      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</a>
+                    </div>
+                  </div>-->
+                </div>
+              </div>
+            </div>
+            <div class="-mr-2 flex md:hidden">
+              <!-- Mobile menu button -->
+              <button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white">
+                <!-- Menu open: "hidden", Menu closed: "block" -->
+                <svg class="block h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                </svg>
+                <!-- Menu open: "block", Menu closed: "hidden" -->
+                <svg class="hidden h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!--
+        Mobile menu, toggle classes based on menu state.
+
+        Open: "block", closed: "hidden"
+      -->
+      <div class="hidden border-b border-gray-700 md:hidden">
+        <div class="px-2 py-3 sm:px-3">
+          <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700">Dashboard</a>
+          <a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Team</a>
+          <a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Projects</a>
+          <a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Calendar</a>
+          <a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Reports</a>
+        </div>
+        <div class="pt-4 pb-3 border-t border-gray-700">
+          <div class="flex items-center px-5">
+            <div class="flex-shrink-0">
+              <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
+            </div>
+            <div class="ml-3">
+              <div class="text-base font-medium leading-none text-white">Tom Cook</div>
+              <div class="mt-1 text-sm font-medium leading-none text-gray-400">tom@example.com</div>
+            </div>
+          </div>
+          <div class="mt-3 px-2" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
+            <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700" role="menuitem">Your Profile</a>
+            <a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700" role="menuitem">Settings</a>
+            <a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700" role="menuitem">Sign out</a>
+          </div>
+        </div>
+      </div>
+    </nav>
+    <header class="py-10">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <h1 class="text-3xl leading-9 font-bold text-white">
+            <%= if n = @conn.assigns[:network] do %><a href="/<%= n %>"><%= n %></a> &rsaquo; <% end %>
+            <%= if c = @conn.assigns[:chan] do %><a href="/<%= @conn.assigns.network %>/<%= NolaWeb.format_chan(c) %>"><%= c %></a> &rsaquo; <% end %>
+            <%= for({name, href} <- Enum.uniq(@conn.assigns[:breadcrumbs]||[]), do: [link(name, to: href), raw(" &rsaquo; ")]) %>
+            <%= @conn.assigns[:title] %>
+        </h1>
+      </div>
+    </header>
+  </div>
+
+  <main class="-mt-32 h-full">
+    <div class="max-w-7xl h-full mx-auto pb-12 px-4 sm:px-6 lg:px-8">
+      <!-- Replace with your content -->
+      <div class="bg-white h-full rounded-lg shadow px-5 py-6 sm:px-6">
+        <%= @inner_content %>
+      </div>
+      <!-- /End replace -->
+    </div>
+  </main>
+</div>
diff --git a/lib/nola_web/templates/layout/root.html.leex b/lib/nola_web/templates/layout/root.html.leex
new file mode 100644
index 0000000..6a48506
--- /dev/null
+++ b/lib/nola_web/templates/layout/root.html.leex
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <%= page_title(@conn) %>
+    <meta charset="utf-8">
+    <meta name="robots" content="noindex, nofollow, nosnippet">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="robots" content="noindex, noarchive, nofollow, nosnippet" />
+    <title><%= Map.get(assigns, :title, "") %></title>
+    <link rel="stylesheet" href="<%= static_path(@conn, "/assets/site.css") %>">
+    <%= csrf_meta_tag() %>
+    <script src="<%= static_path(@conn, "/assets/site.js") %>" defer></script>
+  </head>
+  <body>
+        <%= @inner_content %>
+  </body>
+</html>
diff --git a/lib/nola_web/templates/network/index.html.eex b/lib/nola_web/templates/network/index.html.eex
new file mode 100644
index 0000000..fc024dd
--- /dev/null
+++ b/lib/nola_web/templates/network/index.html.eex
@@ -0,0 +1 @@
+pouet
diff --git a/lib/nola_web/templates/open_id/error.html.eex b/lib/nola_web/templates/open_id/error.html.eex
new file mode 100644
index 0000000..d1b35b9
--- /dev/null
+++ b/lib/nola_web/templates/open_id/error.html.eex
@@ -0,0 +1,3 @@
+<h1 class="text-xl font-bold text-red-800">OpenID authentication error</h1>
+
+<p class="mt-12 text-base prose"><%= @error %></p>
diff --git a/lib/nola_web/templates/page/api.html.eex b/lib/nola_web/templates/page/api.html.eex
new file mode 100644
index 0000000..03dfa6b
--- /dev/null
+++ b/lib/nola_web/templates/page/api.html.eex
@@ -0,0 +1,35 @@
+<h1>sys.115ans.net/api</h1>
+
+<h2>Icecast Status</h2>
+
+<h3>GET /api/icecast.json</h3>
+
+<p>
+  Content-Type: <code>application/json</code>
+</p>
+
+<pre><code>
+{
+  "np": String,
+  "genre": null | String,
+  "live": false | true
+}
+</pre></code>
+
+<h3>GET /api/icecast.sse</h3>
+<p>
+  Content-Type: <code>text/event-stream</code>
+</p>
+
+<p>
+  Stream of:
+</p>
+
+  <ul>
+    <li><strong>icecast</strong> events (same format as <code>/api/icecast.json</code>)</li>
+    <li><strong>ping</strong> events (to keep-alive connection. You can safely ignore them)</li>
+  </ul>
+<p>
+  On client connection, the server sends the latest <code>icecast</code> status known.
+</p>
+
diff --git a/lib/nola_web/templates/page/index.html.eex b/lib/nola_web/templates/page/index.html.eex
new file mode 100644
index 0000000..1b8519a
--- /dev/null
+++ b/lib/nola_web/templates/page/index.html.eex
@@ -0,0 +1 @@
+<p>vOv</p>
diff --git a/lib/nola_web/templates/page/irc.html.eex b/lib/nola_web/templates/page/irc.html.eex
new file mode 100644
index 0000000..f6598ee
--- /dev/null
+++ b/lib/nola_web/templates/page/irc.html.eex
@@ -0,0 +1,19 @@
+<h1>bot `115ans</h1>
+
+<p>Si vous cherchez l'IRC c'est <a href="https://115ans.net/irc/">par là</a>.</p>
+
+<style type="text/css">
+.help-entry h1 {
+  font-size: 18px;
+}
+.help-entry h2 {
+  font-size: 16px;
+}
+</style>
+
+<div class="irchelps">
+  <%= for help <- @bot_helps do %>
+    <div class="help-entry"><%= help |> Earmark.as_html! |> raw() %></div>
+  <% end %>
+</div>
+
diff --git a/lib/nola_web/templates/page/user.html.eex b/lib/nola_web/templates/page/user.html.eex
new file mode 100644
index 0000000..de9f718
--- /dev/null
+++ b/lib/nola_web/templates/page/user.html.eex
@@ -0,0 +1,43 @@
+<div class="prose prose-lg">
+<ul>
+    <li><%= link("Help", to: "/-") %></li>
+    <%= unless List.keyfind(@metas, "identity-id", 0) do %>
+        <li><%= link("Connect with random.sh", to: Routes.open_id_path(@conn, :login)) %></li>
+    <% end %>
+</ul>
+
+<h2>channels</h2>
+<ul>
+  <%= for {net, channel} <- @memberships do %>
+    <li>
+      <% url = NolaWeb.Router.Helpers.irc_path(NolaWeb.Endpoint, :index, net, NolaWeb.format_chan(channel)) %>
+      <%= link([net, ": ", content_tag(:strong, channel)], to: url) %>
+    </li>
+  <% end %>
+</ul>
+
+<h2>connections</h2>
+<ul>
+  <%= for user <- @users do %>
+    <li>
+      <strong><%= user.network %></strong>: <strong><%= user.nick %></strong>!<%= user.username %>@<%= user.host %> <i><%= user.realname %></i><br />
+      <%= Enum.join(Enum.intersperse(Enum.map(user.privileges, fn({c, _}) -> c end), ", ")) %>
+    </li>
+  <% end %>
+</ul>
+
+<h2>account</h2>
+<ul>
+  <li>account-id: <%= @conn.assigns.account.id %></li>
+  <%= for {k, v} <- @metas do %>
+    <li><%= k %>: <%= to_string(v) %></li>
+  <% end %>
+</ul>
+
+<strong>irc auths:</strong>
+<ul>
+  <%= for {net, {predicate, v}} <- @predicates do %>
+    <li><%= net %>: <%= to_string(predicate) %>, <%= v %></li>
+  <% end %>
+</ul>
+</div>
diff --git a/lib/nola_web/templates/page/widget.html.eex b/lib/nola_web/templates/page/widget.html.eex
new file mode 100644
index 0000000..65853b3
--- /dev/null
+++ b/lib/nola_web/templates/page/widget.html.eex
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="<%= static_path(@conn, "/assets/css/widget.css") %>">
+<script src="<%= static_path(@conn, "/assets/js/soundmanager2-jsmin.js") %>"></script>
+<script src="<%= static_path(@conn, "/assets/js/widget.js") %>"></script>
+</head>
+<body>
+  <div id="player" class="<%= if @icecast.live, do: "live", else: "autodj" %>">
+    <div id="state">▶</div>
+    <div id="titles">
+      <div id="genre"><%= @icecast.genre %></div>
+      <div id="np"><%= @icecast.np %></div>
+    </div>
+  </div>
+</body>
+</html>