(ﾉ◕ヮ◕)ﾉ*:･ﾟ✧ (#36)

la-rache · Feb 15, 2024 · 8a5c593 · 8a5c593
1 parent 2c48ed5
commit 8a5c593
Show file tree

Hide file tree

Showing 9 changed files with 369 additions and 219 deletions.
diff --git a/.github/workflows/npm-grunt.yml b/.github/workflows/npm-grunt.yml
@@ -4,8 +4,6 @@ on:
   workflow_dispatch:
   push:
     branches: [ "master" ]
-  pull_request:
-    branches: [ "master" ]
 
 # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:

diff --git a/.prettierignore b/.prettierignore
@@ -1,2 +1,2 @@
-src/
+src/parts/
 *.yml
diff --git a/src/certificat.html b/src/certificat.html
@@ -6,36 +6,38 @@
     Il peut être utilisé en lieu et place d'un CV.
 </p>
 
-<form onsubmit="share(event)">
+<form onsubmit="submitCertif(event)">
     <div id="certificat-wrap">
         <div id="certificat">
             <div class="certificat-header">
                 <div class="palme"></div>
                 <!-- https://svgsilh.com/image/2109235.html -->
-                <h1>
-                    <div style="font-weight: lighter">
-                        Certificat de réussite
-                    </div>
-                    <div style="font-size: 20px">
-                        International Institute of <br />La RACHE
-                    </div>
-                </h1>
+                <div>
+                    <h1>
+                        <div style="font-weight: lighter">
+                            Certificat de réussite
+                        </div>
+                        <div id="ilar">
+                            International Institute of La&nbsp;RACHE
+                        </div>
+                    </h1>
+                    <div>100% de réussite (ou presque) pour</div>
+                    <input
+                        type="text"
+                        id="certificat-name"
+                        name="name"
+                        spellcheck="false"
+                        placeholder="Prénom NOM"
+                        required
+                    />
+                </div>
+
                 <div class="palme"></div>
             </div>
 
-            <div>100% de réussite (ou presque) pour</div>
-            <p>
-                <input
-                    type="text"
-                    id="certificat-name"
-                    name="name"
-                    spellcheck="false"
-                    placeholder="Prénom NOM"
-                    required
-                />
-            </p>
             <blockquote>
-                Qui est capable de mener à bien n'importe quel projet, même à l'arrache.
+                Qui est capable de mener à bien n'importe quel projet, même à
+                l'arrache.
             </blockquote>
             <p>
                 Formé(e) à la cafèt’, le&nbsp;<span id="certificat-date"
@@ -53,28 +55,34 @@ <h1>
                     <span class="badge-label">La RACHE</span>
                 </div>
                 <div>
-                    <div>Chargé<span id="ee">e</span> de Formation</div>
-                    <strong>
-                        L<span id="ea">a</span>
-                        stagiaire
-                    </strong>
+                    <div>
+                        <div>Chargé<span id="ee">e</span> de Formation</div>
+                        <strong>
+                            L<span id="ea">a</span>
+                            stagiaire
+                        </strong>
+                    </div>
+                    <div class="certificat-link">
+                        <a href="https://www.la-rache.com">la-rache.com</a>
+                    </div>
                 </div>
             </div>
-            <div class="certificat-link">
-                <a href="https://www.la-rache.com"> www.la-rache.com </a>
-            </div>
         </div>
     </div>
 
     <p id="certificat-actions">
         <button type="button" onclick="resetName()">
             <span>🖊️</span> Modifier
         </button>
-        &nbsp;
-        <button type="submit" id="certificat-actions-share">
+        <button type="button" id="certificat-actions-share" onclick="share()">
             <span>📤</span> Partager
         </button>
-        &nbsp;
+        <button type="button" id="certificat-actions-copy" onclick="copy()">
+            <span>🔗</span> Copier le lien
+        </button>
+        <!-- <button type="button" id="certificat-actions-copy-img"  onclick="copyImg()">
+            <span>📸</span> Copier le certificat
+        </button> -->
         <button type="button" onclick="download()">
             <span>📸</span> Enregistrer
         </button>

diff --git a/src/css/certificat.css b/src/css/certificat.css
@@ -3,7 +3,6 @@
     padding: 0.5em;
 }
 #certificat {
-    font-size: 1.2em;
     font-family: Superclarendon, "Bookman Old Style", "URW Bookman",
         "URW Bookman L", "Georgia Pro", Georgia, serif;
     text-align: center;
@@ -12,6 +11,7 @@
     padding: 1em;
     background-color: white;
     color: #444444;
+    text-shadow: 0px 1px 0px white;
 }
 
 #certificat h1 {
@@ -21,8 +21,14 @@
 .certificat-header {
     display: flex;
     justify-content: center;
-    align-items: center;
-    font-weight: bold;
+    align-items: flex-start;
+    background-color: white;
+    position: relative;
+}
+
+.certificat-header > div:nth-child(2) {
+    z-index: 2;
+    position: relative;
 }
 
 .certificat-footer {
@@ -32,12 +38,16 @@
 
 .palme {
     background: url(../img/palme.svg) no-repeat center/ contain;
-    width: 80px;
-    height: 128px;
+    width: 92px;
+    height: 192px;
+    position: absolute;
+    right: -0.75em;
 }
 
 .palme:first-child {
     transform: scaleX(-1);
+    left: -0.75em;
+    z-index: 1;
 }
 
 .badge {
@@ -46,24 +56,23 @@
 
 .badge-img {
     background: url(../img/badge.svg) no-repeat center / contain;
-    width: 164px;
-    height: 164px;
+    width: 100px;
+    height: 100px;
 }
 
 .badge-label {
-    top: 72px;
+    top: 42px;
     position: absolute;
     width: 100%;
     left: 0;
-    font-size: 15px;
+    font-size: 12px;
     font-weight: bold;
 }
 
-#certificat p {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
+#certificat blockquote {
+    margin-top: 0;
+    z-index: 2;
+    position: relative;
 }
 
 #certificat-name {
@@ -72,11 +81,13 @@
     border: none;
     font: inherit;
     color: inherit;
+    text-shadow: inherit;
     background-color: transparent;
-    padding: 0 10px;
+
     font-family: "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic, casual,
         cursive;
     font-size: 2em;
+    font-weight: bold;
     width: 100%;
     text-align: center;
 }
@@ -98,19 +109,19 @@ input:autofill {
 
 .certificat-link {
     text-align: right;
+    margin-top: 1em;
 }
 
 .certificat-link a {
     color: inherit;
-    text-decoration: underline;
 }
 
 #certificat-actions {
     text-align: center;
     position: sticky;
     bottom: 0;
     background: #ffffff82;
-    z-index: 1;
+    z-index: 3;
     -webkit-backdrop-filter: blur(5px);
     backdrop-filter: blur(5px);
     padding-top: 0.5rem;

diff --git a/src/css/main.css b/src/css/main.css
@@ -92,7 +92,8 @@ body {
     margin: 0;
     padding: 0;
     text-align: center;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+        Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     font-size: 16px;
 }
 
@@ -104,7 +105,6 @@ hr {
     background-color: #0550a5;
 }
 
-
 img {
     border: none;
 }
@@ -126,7 +126,6 @@ h5 {
 
 a {
     color: #35b;
-    text-decoration: none;
 }
 a:hover {
     color: #b53;

diff --git a/src/img/larache-shield.svg b/src/img/larache-shield.svg