Moved demo page to homepage with more proper UI.

datvm · May 6, 2022 · cf82732 · cf82732
1 parent e21a97d
commit cf82732
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 46 deletions.
diff --git a/README.MD b/README.MD
@@ -25,7 +25,7 @@ const resultBlob2 = await converter.convertToBlobAsync(inputs, "image/your-own-m
 const resultArr = await converter.convertAsync(inputs);
 ```
 
-You can check the demo at [the Demo page](https://png2icojs.lukevo.com/demo).
+You can check the demo at [the Demo page](https://png2icojs.lukevo.com/).
 
 # API
 

diff --git a/demo/index.html b/demo/index.html
diff --git a/index.html b/index.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
+ integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+
+ <title>Convert PNG Files to ICO - PNG2ICOjs</title>
+
+ <!-- Global site tag (gtag.js) - Google Analytics -->
+ <script async src="https://www.googletagmanager.com/gtag/js?id=G-8KYZZ1R8CZ"></script>
+ <script>
+ window.dataLayer = window.dataLayer || [];
+ function gtag() { dataLayer.push(arguments); }
+ gtag('js', new Date());
+
+ gtag('config', 'G-8KYZZ1R8CZ');
+ </script>
+</head>
+
+<body>
+ <div class="container-lg">
+ <h1>Convert PNG to ICO</h1>
+
+ <article>
+ <p>
+ You can use this web app to quickly make a ICO file from one or multiple PNG files.<br />
+ This is especially useful when you want to make <code>favicon.ico</code> file for your website.
+ </p>
+
+ <p>
+ With this Javascript library, all processing happen in your browser.
+ You do not need to upload any files to any server so it's fast and secure.
+ </p>
+ </article>
+
+ <form class="frm-convert">
+ <div class="mb-3">
+ <input type="file" id="txt-files" accept="image/png" multiple class="form-control" required />
+ </div>
+
+ <div class="form-check mb-3">
+ <input class="form-check-input" type="checkbox" id="chk-ignore-size">
+ <label class="form-check-label" for="chk-ignore-size">
+ Ignore Image Size<br />
+
+ <span class="text-muted">
+ You probably want to keep your images at 256px max due to <code>.ICO</code> specifications.
+ However most applications are still able to open files that violate this limitation.
+ You can check this box if you want to proceed anyway.
+ </span>
+ </label>
+ </div>
+
+ <p class="text-center">
+ <button type="submit" class="btn btn-primary btn-lg w-100">Convert</button>
+ </p>
+ </form>
+
+ <form class="frm-download">
+ <div class="input-group">
+ <input id="txt-name" class="form-control" placeholder="Default download name: favicon.ico" />
+ <button type="submit" id="btn-download" target="_blank" class="btn btn-success"
+ disabled>Download</button>
+ </div>
+ </form>
+ </div>
+
+ <script defer type="module" src="js/convert.js"></script>
+</body>
+
+</html>
diff --git a/demo/convert.js → js/convert.js b/demo/convert.js → js/convert.js
@@ -1,16 +1,24 @@
 import { PngIcoConverter } from "../src/png2icojs.js";
 
+const ErrorMessages = {
+ "INVALID_IMAGE": "Cannot open the PNG file, please make sure it's a valid PNG file",
+ "INVALID_SIZE": "The PNG file is larger than 256px. Please check Ignore Size to proceed anyway.",
+};
+
 class ConvertApp {
 
  btnDownload = document.querySelector("#btn-download");
 
  init() {
- document.querySelector("form").addEventListener("submit", e => {
+ document.querySelector(".frm-convert").addEventListener("submit", e => {
  e.preventDefault();
  void this.convert();
  });
- this.btnDownload.addEventListener("click",
- () => this.onDownload());
+
+ document.querySelector(".frm-download").addEventListener("submit", e => {
+ e.preventDefault();
+ void this.onDownload();
+ });
  }
 
  onDownload() {
@@ -19,7 +27,10 @@ class ConvertApp {
  const url = URL.createObjectURL(this.currBlob);
  const a = document.createElement("a");
  a.href = url;
- a.download = "icon.ico";
+
+ const name = document.querySelector("#txt-name").value || "favicon.ico";
+ a.download = name;
+
  a.click();
  }
 
@@ -42,7 +53,11 @@ class ConvertApp {
  this.btnDownload.removeAttribute("disabled");
  } catch (e) {
  console.error(e);
- alert("Error converting: " + e.message);
+
+ const msg = e.message;
+ if (msg) {
+ alert("Error converting: " + (ErrorMessages[msg] ?? msg));
+ }
  }
  }