1 files changed, 106 insertions, 0 deletions
diff --git a/concerts.html b/concerts.html
new file mode 100644
index 0000000..357e3c1
--- /dev/null
+++ b/concerts.html
@@ -0,0 +1,106 @@
+<main>
+  <div id="event-list">
+    <h1>Prochains concerts</h1>
+    <div class="events">
+      <a class="event canceled" href="#concert-2021-04-03">
+        <img src="images/concerts/dinard.jpg">
+        <p class="summary">Dinard<br>3 avril 2021</p>
+      </a>
+      <a class="event" href="#concert-2021-06-21">
+        <img src="images/concerts/pantin.jpg">
+        <p class="summary">Paris<br>13 juin 2021</p>
+      </a>
+    </div>
+    <h1>Concerts passés</h1>
+    <div class="events">
+    </div>
+  </div>
+
+  <div id="event-details">
+    <p class="hint">Cliquez sur un concert pour obtenir plus d'informations.</p>
+
+    <div class="details canceled" id="concert-2021-04-03">
+      <p class="detail date">Samedi 3 avril 2021</p>
+      <p class="detail time">20h00</p>
+      <p class="detail place">Dinard</p>
+      <ol class="detail program">
+        <li>Haydn quatuor op.76 n°1</li>
+        <li>Brahms quatuor n°7, op.59 n°1</li>
+        <li>Ravel quatuor à cordes</li>
+      </ol>
+      <p class="more">
+        Informations et réservations :
+        <a href="https://weekenddemusiqueclassique.fr">
+          https://weekenddemusiqueclassique.fr
+        </a>
+      </p>
+      <p class="photo-credits">
+        Photo fournie par
+        <a href="https://www.piqsels.com/fr/public-domain-photo-zxmbk">
+          Piqsels
+        </a>
+        / <a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0</a>
+      </p>
+    </div>
+    <div class="details" id="concert-2021-06-21">
+      <p class="detail date">Dimanche 13 juin 2021</p>
+      <p class="detail time">15h00</p>
+      <p class="detail place">
+        Église Sainte-Claire d’Assise<br>
+        Place de la Porte-de-Pantin<br>
+        75019 Paris
+      </p>
+      <ol class="detail program">
+        <li>Haydn quatuor op.76 n°1</li>
+        <li>Beethoven quatuor n°7, op.59 n°1</li>
+      </ol>
+      <p class="more">Entrée libre</p>
+      <p class="photo-credits">
+        Photo fournie par
+        <a href="https://www.flickr.com/photos/129231073@N06/23414771992/">
+          Fred Romero
+        </a>
+        / <a href="https://creativecommons.org/licenses/by/2.0/">CC BY</a>
+      </p>
+    </div>
+  </div>
+
+  <script>
+    // When JS is enabled, hide concert details by default, and
+    // allow the user to display concerts selectively.
+    var detailsStyle = document.createElement('style');
+    document.head.appendChild(detailsStyle);
+    detailsStyle.sheet.insertRule('.details:not(.active) {display:none}');
+
+    var pHint = document.querySelector('p.hint');
+
+    var anchor = document.location.hash;
+    if (anchor.match(/#concert-/)) {
+        document.querySelector(anchor).classList.add('active');
+        document.querySelector(`a[href="${document.location.hash}"]`)
+            .classList.add('active');
+        pHint.style.display = 'none';
+    }
+    document.querySelectorAll('a.event').forEach((link) => {
+        link.addEventListener('click', function(click) {
+            if (click.ctrlKey || click.shiftKey)
+                return;
+
+            var prev = document.querySelector('.details.active');
+            if (prev)
+                prev.classList.remove('active');
+            var id = link.attributes['href'].value;
+            document.querySelector(id).classList.add('active');
+
+            prev = document.querySelector('a.event.active');
+            if (prev) {
+                prev.classList.remove('active');
+            }
+            link.classList.add('active');
+
+            pHint.style.display = 'none';
+        });
+    });
+  </script>
+
+</main>