Update index.html

BertranK · Apr 6, 2024 · c1ad9cd · c1ad9cd
1 parent fe25d61
commit c1ad9cd
Showing 1 changed file with 23 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -28,7 +28,8 @@
     .shape-selector,
     .text-input,
     .preview,
-    .download-btn {
+    .download-btn,
+    .text-below-download {
       display: flex;
       justify-content: center;
       margin-bottom: 20px;
@@ -48,6 +49,16 @@
       box-sizing: border-box;
     }
 
+    .color-selector {
+      align-items: center;
+    }
+
+    .color-palette-icon::before {
+      content: "🎨";
+      font-size: 32px;
+      margin-right: 10px;
+    }
+
     .color-selector input[type="color"] {
       width: 50px;
       height: 50px;
@@ -82,15 +93,21 @@
       cursor: pointer;
     }
 
+    .text-below-download a {
+      text-decoration: none;
+      color: #4CAF50;
+    }
+
     h1 {
       text-align: center;
     }
   </style>
 </head>
 <body>
   <div class="container">
-    <h1>IronCAD Catalog Icon Creator</h1>
+    <h1>IronCAD Catalog Icon Creator ✨</h1>
     <div class="color-selector">
+      <div class="color-palette-icon"></div>
       <input type="color" id="text-color-picker" value="#000000">
     </div>
     <div class="shape-selector">
@@ -107,6 +124,9 @@ <h1>IronCAD Catalog Icon Creator</h1>
     <div class="download-btn">
       <button id="download-btn">Download PNG (48x48px)</button>
     </div>
+    <div class="text-below-download">
+      <a href="https://toycon.softonic.com/">Also you need a this program! .PNGs to .ICOs</a>
+    </div>
   </div>
 
   <script>
@@ -139,7 +159,7 @@ <h1>IronCAD Catalog Icon Creator</h1>
           ctx.fillRect(0, 0, 48, 48);
           break;
         case 'triangle':
-          drawTriangle(24, 40, 12, 8, currentTextColor);
+          drawTriangle(24, 48, 48, 48, currentTextColor);
           break;
       }