refactor(index.html): move the random generator category to the end (#566)

Author: Dun-sin

index.html

@@ -327,17 +327,17 @@ <h1 id="head">Code Magic</h1>
             </ul>
           </li>
 
-          <li id="random" class="dropdown">
+          <li id="layout-generator" class="dropdown">
             <div>
               <div>
                 <iconify-icon
                   inline
-                  icon="game-icons:perspective-dice-six-faces-random"
+                  icon="ph:layout"
                   style="color: white"
                   width="20"
                   height="20"
                 ></iconify-icon>
-                <span>Random Generators</span>
+                <span>Layout Generators</span>
               </div>
               <iconify-icon
                 inline
@@ -347,46 +347,31 @@ <h1 id="head">Code Magic</h1>
               ></iconify-icon>
             </div>
             <ul>
-              <li data-gen="pic-text">
-                <iconify-icon
-                  inline
-                  icon="cil:text-shapes"
-                  style="color: white"
-                  width="20"
-                  height="20"
-                ></iconify-icon>
-                <span>Pic-Text</span>
-                <span class="tooltip">
-                  Convert Your Image to Character Art
-                </span>
-              </li>
-              <li data-gen="scroll">
+              <li data-gen="grid-generators">
                 <iconify-icon
                   inline
-                  icon="ph:mouse-scroll"
+                  icon="ep:grid"
                   style="color: white"
                   width="20"
                   height="20"
                 ></iconify-icon>
-                <span>Custom ScrollBar</span>
-                <span class="tooltip"
-                  >Change the color and style of the scrollbar</span
-                >
+                <span>CSS Grid Generator</span>
+                <span class="tooltip"> Get styling for css grid </span>
               </li>
             </ul>
           </li>
 
-          <li id="layout-generator" class="dropdown">
+          <li id="random" class="dropdown">
             <div>
               <div>
                 <iconify-icon
                   inline
-                  icon="ph:layout"
+                  icon="game-icons:perspective-dice-six-faces-random"
                   style="color: white"
                   width="20"
                   height="20"
                 ></iconify-icon>
-                <span>Layout Generators</span>
+                <span>Random Generators</span>
               </div>
               <iconify-icon
                 inline
@@ -396,16 +381,31 @@ <h1 id="head">Code Magic</h1>
               ></iconify-icon>
             </div>
             <ul>
-              <li data-gen="grid-generators">
+              <li data-gen="pic-text">
                 <iconify-icon
                   inline
-                  icon="ep:grid"
+                  icon="cil:text-shapes"
                   style="color: white"
                   width="20"
                   height="20"
                 ></iconify-icon>
-                <span>CSS Grid Generator</span>
-                <span class="tooltip"> Get styling for css grid </span>
+                <span>Pic-Text</span>
+                <span class="tooltip">
+                  Convert Your Image to Character Art
+                </span>
+              </li>
+              <li data-gen="scroll">
+                <iconify-icon
+                  inline
+                  icon="ph:mouse-scroll"
+                  style="color: white"
+                  width="20"
+                  height="20"
+                ></iconify-icon>
+                <span>Custom ScrollBar</span>
+                <span class="tooltip"
+                  >Change the color and style of the scrollbar</span
+                >
               </li>
             </ul>
           </li>