Update 1.02

NMSCD · May 2, 2024 · 7ebf17e · 7ebf17e
1 parent 2f4d773
commit 7ebf17e
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 2 deletions.
diff --git a/test2/glyphgeneratorV3.js → JS/glyphgeneratorV3.js b/test2/glyphgeneratorV3.js → JS/glyphgeneratorV3.js
diff --git a/test2/glyphgeneratorV3.html → glyphgeneratorV3.html b/test2/glyphgeneratorV3.html → glyphgeneratorV3.html
@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
-    <link rel="stylesheet" href="./generator.css">
+    <link rel="stylesheet" href="./styles/generator.css">
     <title data-i18n="title">Generador de Glifos NMS</title>
     <script src="https://unpkg.com/i18next/dist/umd/i18next.js"></script>
     <script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
@@ -22,6 +22,6 @@ <h1 data-i18n="header">Generador de Glifos NMS</h1>
     <button id="generateButton" onclick="displayRandomGlyphs()" data-i18n="button">Generar Glifos</button>
     <p id="glyphOutput" class="glyph"></p>
     <footer id="footer" class="footer"></footer>
-    <script src="glyphgeneratorV3.js" type="module"></script>
+    <script src="./JS/glyphgeneratorV3.js" type="module"></script>
 </body>
 </html>
diff --git a/styles/generator.css b/styles/generator.css
@@ -0,0 +1,46 @@
+@font-face {
+    font-family: 'NMS-Glyphs';
+    src: url('/assets/fonts/NMS-Glyphs-Mono.ttf') format('truetype');
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    margin: 0;
+}
+.glyph {
+    font-family: 'NMS-Glyphs';
+    font-size: 3em; 
+}
+
+button {
+width: auto; 
+padding: 10px 20px; 
+}
+select {
+width: auto; 
+padding: 10px 20px; 
+}
+
+@keyframes spin {
+    0% {
+      transform: rotateY(0deg);
+    }
+    50% {
+      transform: rotateY(180deg);
+    }
+    100% {
+      transform: rotateY(360deg);
+    }
+  }
+
+  .glyph.spin {
+    display: inline-block;
+    animation: spin 1s ease-out;
+  }
+
+
+