71 lines
2.1 KiB
Text
71 lines
2.1 KiB
Text
<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="main.css">
|
|
<script type="module">
|
|
import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
|
|
window.Stimulus = Application.start()
|
|
|
|
Stimulus.register("mood", class extends Controller {
|
|
static targets = [ "image" ]
|
|
|
|
showMode(event) {
|
|
const image = this.imageTarget
|
|
image.src = event.target.dataset.mode + ".png"
|
|
}
|
|
|
|
showCurrent() {
|
|
const image = this.imageTarget
|
|
image.src = "<%= @mode %>.png"
|
|
}
|
|
|
|
})
|
|
</script>
|
|
</head>
|
|
<main data-controller="mood">
|
|
<div class="mode">
|
|
<img data-mood-target="image" src="<%= @mode %>.png">
|
|
</div>
|
|
<div class="tracker">
|
|
<div class="title">
|
|
<h1>Comment il va le Robi ?</h1>
|
|
</div>
|
|
<div class="moods">
|
|
<div class="log">
|
|
<% @mood_log.each do |week| %>
|
|
<div class="week">
|
|
<% week.each do |d| %>
|
|
<% if d[1] %>
|
|
<div data-mode="<%= d[1] %>" data-action="mouseover->mood#showMode mouseleave->mood#showCurrent" title="<%= d[0] %> : <%= d[1] %>" class="day <%= d[1] %>"></div>
|
|
<% else %>
|
|
<div class="day"></div>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<div class="legend">
|
|
<div class="legend-mood">
|
|
<div class="bar-creatif"></div>
|
|
<div class="bar-explain">mode créatif</div>
|
|
</div>
|
|
<div class="legend-mood">
|
|
<div class="bar-frigo"></div>
|
|
<div class="bar-explain">triste comme un frigo vide</div>
|
|
</div>
|
|
<div class="legend-mood">
|
|
<div class="bar-croisiere"></div>
|
|
<div class="bar-explain">mode croisiere</div>
|
|
</div>
|
|
<div class="legend-mood">
|
|
<div class="bar-frigo"></div>
|
|
<div class="bar-explain">triste comme un frigo vide</div>
|
|
</div>
|
|
</div>
|
|
<div class="info">
|
|
<div class="current-day">20 mai 2025</div>
|
|
</div>
|
|
</div>
|
|
</main>
|