Merge pull request #30 from Pawankalyan2023/main

Fix : Adding Github link and Icon

Author: david-dasilva

css/style.css

@@ -75,7 +75,6 @@ body {
   animation: pulse 1.2s infinite alternate;
   transition: opacity 0.6s ease;
   user-select: none;
-
 }
 
 #settingsForm {
@@ -124,7 +123,8 @@ body {
 
   div.buttons {
     display: flex;
-    gap: 12px;
+    gap: 0.5rem;
+    flex-wrap: wrap; 
   }
 
   button.action {
@@ -140,6 +140,29 @@ body {
     flex: 1;
   }
 
+  #github{
+    position: static; 
+    order: 3; 
+    flex-basis: 100%; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 1rem;
+
+    a {
+      display: inline-flex;
+      align-items: center;
+      color: white;
+      text-decoration: none;
+      gap: 3rem;
+    }
+
+    img {
+      width: 5rem;
+      height: 5rem;
+      display: inline-block;
+    }
+  }
 }
 
 #settingsModal::backdrop {
@@ -155,7 +178,6 @@ body {
 }
 
 
-
 /* Animation de pulsation */
 @keyframes pulse {
   0% {transform: translate(-50%, -50%) scale(1);}

img/github-mark-white.svg

@@ -68,9 +68,15 @@ <h3>Settings</h3>
     <div class="buttons">
       <button id="resetBtn" class="action">Restore defaults</button>
       <button id="submitBtn" class="action">Apply</button>
+      <div id = 'github'>
+      <a href="https://github.com/zenika-open-source/clepsydre" title="contribute to the project on Github">
+        Contribute on Github <img src="img/github-mark-white.svg" alt="Github logo" />
+      </a>
     </div>
-
+    </div>
+      
   </dialog>
+  
 
   <div id="startMessage"><button id="startAnimation" class="btn">START</button></div>
   <div id="timer">00:00</div>