2024-10-12 19:00:33 +02:00
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
2025-03-05 17:54:57 +01:00
|
|
|
<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">
|
2025-06-29 12:21:06 +02:00
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
|
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Delius&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
|
|
|
|
|
|
2024-10-12 19:00:33 +02:00
|
|
|
<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 {
|
2025-06-29 12:21:06 +02:00
|
|
|
static targets = [ "image", "info" ]
|
2024-10-12 19:00:33 +02:00
|
|
|
|
2025-06-29 12:21:06 +02:00
|
|
|
updateDayInfo(event) {
|
|
|
|
|
const image = this.imageTarget;
|
|
|
|
|
const infoDay = this.infoTarget;
|
2025-05-23 17:40:13 +02:00
|
|
|
image.src = event.target.dataset.mode + ".jpg"
|
2025-06-29 12:21:06 +02:00
|
|
|
infoDay.textContent = event.target.dataset.day;
|
2024-10-12 19:00:33 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<main data-controller="mood">
|
2024-06-02 20:19:02 +02:00
|
|
|
<div class="mode">
|
2025-05-23 17:40:13 +02:00
|
|
|
<img data-mood-target="image" src="<%= @mode %>.jpg">
|
2024-06-02 20:19:02 +02:00
|
|
|
</div>
|
2024-09-22 20:50:55 +02:00
|
|
|
<div class="tracker">
|
2025-04-26 19:04:07 +02:00
|
|
|
<div class="title">
|
2024-11-01 11:47:55 +01:00
|
|
|
<h1>Comment il va le Robi ?</h1>
|
2024-09-22 20:50:55 +02:00
|
|
|
</div>
|
2025-06-29 12:21:06 +02:00
|
|
|
<div class="info-day" data-mood-target="info">Aujourd'hui</div>
|
2025-04-26 19:04:07 +02:00
|
|
|
<div class="moods">
|
2025-05-03 19:29:11 +02:00
|
|
|
<div class="log">
|
|
|
|
|
<% @mood_log.each do |week| %>
|
|
|
|
|
<div class="week">
|
|
|
|
|
<% week.each do |d| %>
|
|
|
|
|
<% if d[1] %>
|
2025-06-29 12:21:06 +02:00
|
|
|
<div data-mode="<%= d[1] %>" data-day="<%= d[0] %>" data-action="mouseover->mood#updateDayInfo mouseleave->mood#updateDayInfo" title="<%= d[0] %> : <%= d[1] %>" class="day <%= d[1] %>"></div>
|
2025-05-03 19:29:11 +02:00
|
|
|
<% else %>
|
|
|
|
|
<div class="day"></div>
|
|
|
|
|
<% end %>
|
2024-09-22 20:50:55 +02:00
|
|
|
<% end %>
|
2025-05-03 19:29:11 +02:00
|
|
|
</div>
|
|
|
|
|
<% end %>
|
|
|
|
|
</div>
|
2024-09-22 20:50:55 +02:00
|
|
|
</div>
|
2025-04-26 19:04:07 +02:00
|
|
|
<div class="legend">
|
2025-05-03 19:29:11 +02:00
|
|
|
<div class="legend-mood">
|
2025-05-06 13:39:46 +02:00
|
|
|
<div class="bar-frigo"></div>
|
|
|
|
|
<div class="bar-explain">Triste</div>
|
2025-05-03 19:29:11 +02:00
|
|
|
</div>
|
|
|
|
|
<div class="legend-mood">
|
2025-05-06 13:39:46 +02:00
|
|
|
<div class="bar-en-charge"></div>
|
|
|
|
|
<div class="bar-explain">En charge</div>
|
2025-05-03 19:29:11 +02:00
|
|
|
</div>
|
|
|
|
|
<div class="legend-mood">
|
|
|
|
|
<div class="bar-croisiere"></div>
|
2025-05-06 13:39:46 +02:00
|
|
|
<div class="bar-explain">Croisiere</div>
|
2025-05-03 19:29:11 +02:00
|
|
|
</div>
|
|
|
|
|
<div class="legend-mood">
|
2025-05-06 13:39:46 +02:00
|
|
|
<div class="bar-creatif"></div>
|
|
|
|
|
<div class="bar-explain">Créatif</div>
|
2025-05-03 19:29:11 +02:00
|
|
|
</div>
|
2025-04-26 19:04:07 +02:00
|
|
|
</div>
|
2025-05-06 13:39:46 +02:00
|
|
|
</div>
|
2024-06-02 20:19:02 +02:00
|
|
|
</main>
|
