Activer la barre de progression

Reviewed-on: #42
Reviewed-by: kholah <kholah@alternatique.fr>

css/base.css

@@ -195,6 +195,19 @@ figcaption {
     margin-right: 10%;
 }
 
+#progress {
+    display: block;
+    text-align: center;
+}
+
+#gauge-bar {
+    float: left;
+}
+
+#fundraising-bar {
+    float: left;
+}
+
 code {
     background: #ffffff1f;
     padding: 0.2em 0.4em;

css/home.css

@@ -104,6 +104,6 @@ font-size : 1.5em;
 }
 
 .morethanhalf {
-text-align : end;
+    text-align : end;
-color:black;
+    background: linear-gradient(90deg,rgba(136, 0, 255, 1) 0%, rgba(255, 78, 0, 1) 42%, rgba(255, 191, 62, 1) 100%);
 }

index.html

@@ -82,20 +82,43 @@
 					collective.<br>
 					Seule exigence, respecter toutes les marginalités, originalités, bizarreries et normaleries de
 					chacun·es.</p>
+
+				<p>
+					<h3>
+						<a class="btn-nice" href="https://grist.interhacker.space/o/camp/forms/jhWe1wCu16LGEu81RTn3Um/4">S'inscrire</a>
+					</h3>
+				</p>
 				</section>
+
 			<h3>
 				<span>Où en est-on ?</span>
 			</h3>
 			<section id="progress">
 				<p>Il y a</p>
-				<div class="places"><span class="bar"><span id="gauge-bar" style="width:0" class="progression lessthanhalf"><span id="gauge-text">?/200</span></span></span></div>
+
+				<div class="places">
+					<span class="bar">
+						<span id="gauge-bar" style="width:0" class="progression lessthanhalf">
+							<span id="gauge-text">?/200</span>
+						</span>
+					</span>
+				</div>
+
 				<p>places déjà réservées. Ouverture prochaine des inscriptions !</p>
 				<br>
 				<p>Et nous avons reçu</p>
-				<div class="places"><span class="bar"><span id="fundraising-bar" style="width:0" class="progression lessthanhalf"><span id="fundraising-text">? %</span></span></span></div>
+				<div class="places">
-				<p>des dons dont nous avons besoin</p>
+					<span class="bar">
+						<span id="fundraising-bar" style="width:0" class="progression lessthanhalf">
+							<span id="fundraising-text">? %</span>
+						</span>
+					</span>
+				</div>
+				<p>des dons dont nous avons besoin (voir le détail des comptes)</p>
 			</section>
 
+
+
 			<h3>
 				<span>Faire un don</span>
 			</h3>

js/progress.js

@@ -4,8 +4,8 @@ const gaugeMax = 200;
 const fundraisingTotalMax = 20000;
 
 async function getGauge() {
-    // REMOVE WHEN SIGNUP FORM IS OPEN
+    // // REMOVE WHEN SIGNUP FORM IS OPEN
-    return 0;
+    // return 0;
 
     try {
         const response = await fetch(gauge_url);
@@ -61,7 +61,7 @@ async function setGauge() {
         const gaugeRatio = gauge / gaugeMax;
 
         gaugeBar.style.setProperty("width", percentRatio(gaugeRatio) + "%");
-        gaugeText.innerText = gauge + "/" + gaugeMax;
+        gaugeText.innerText = gauge + " / " + gaugeMax;
 
         setAboveHalf(gaugeRatio, gaugeBar);
     }