# Email Signature Generator A tiny, no-backend tool that lets everyone at a company (or a group of companies) generate their own HTML email signature: pick a template from a visual gallery, fill in name/title/email/phone, then copy or download the result. Adding a new company's signature is just dropping in one `.html` file — no code, no build step. **[🇻🇳 Xem hướng dẫn tiếng Việt bên dưới](#-hướng-dẫn-tiếng-việt)** --- ## What's in this repo ``` index.html the generator page style.css styling for the generator page script.js generator logic — you shouldn't need to touch this templates/ manifest.txt the list of template files to show, one per line classic-example.html logo + info + social icons grid-example.html labeled contact table (M./E./W./A.) minimal-example.html text only, no images needed assets/ logo-placeholder.png generic placeholder logo (only used by the examples) icons/ generic placeholder social icons README.md LICENSE ``` ## How it works Each file in `templates/` is one **complete, self-contained email signature** — logo, company name, colors, address, social links, all just plain HTML you edit directly in that one file, exactly like editing a small web page. The only parts the generator fills in automatically are four placeholders: `{{name}}`, `{{title}}`, `{{email}}`, `{{phone}}` (and an optional `{{#if phone}}...{{/if}}` block that disappears when someone leaves phone blank). Open any of the three example files to see this in practice. The generator reads `templates/manifest.txt` to know which files to show, loads each one, and renders a live preview thumbnail for every template in a gallery at the top of the page — pick the one for your company, fill in your info below it, done. ## Add your own company's signature 1. Duplicate one of the three example files in `templates/` (pick whichever layout is closest to what you want) and rename it, e.g. `acme-corp.html`. 2. Open it in any text editor and replace the company name, logo, address, website, social links, and colors with your own. Leave the four `{{...}}` placeholders and the `{{#if phone}}...{{/if}}` block exactly as they are. 3. **Logo and icon images must be public `https://` URLs** — email clients load signature images from the internet, so a local file path shows as a broken image once the signature is pasted into Gmail/Outlook. The easiest free option: put your image files in this repo's `assets/` folder, enable GitHub Pages (**Settings → Pages** → deploy from `main`), then your files are served at `https://.github.io//assets/your-logo.png`. 4. Add your new file's exact name to `templates/manifest.txt` (one line — this is the only "registration" step, no code or JSON involved). 5. Commit and push. Refresh the generator page — your template now appears in the gallery with a live preview. ## Hosting note — this needs a real web server The gallery loads `manifest.txt` and every template file with the browser's `fetch()`, which is blocked on a page opened directly from disk (double-clicking `index.html`). **Host this on GitHub Pages** (free, see step 3 above) or any static web server — then it works for everyone, no install needed. If you see "Could not load the template gallery," you're most likely opening the file directly instead of through a hosted URL. ## Multiple companies / sub-brands This is the default mode, really — just add one `.html` file per company/brand to `templates/` and list each in `manifest.txt`. Everyone sees all of them in the gallery and picks their own. ## Notes on the images used in the examples The logo and social icons in `assets/` are generic placeholders made for this template — not any real company's branding. Replace them (or point your own template files at your own hosted images) before using this for real. ## License MIT — see `LICENSE`. Use, fork, and modify freely for your own team. --- ## 🇻🇳 Hướng dẫn tiếng Việt Công cụ nhỏ, không cần máy chủ backend, giúp mọi người trong một công ty (hoặc nhiều công ty/thương hiệu con) tự tạo chữ ký email HTML: chọn 1 mẫu từ gallery trực quan, điền tên/chức vụ/email/số điện thoại, rồi copy hoặc tải về. Thêm chữ ký của một công ty mới chỉ đơn giản là bỏ thêm 1 file `.html` — không cần code, không cần bước build nào. ### Cấu trúc thư mục ``` index.html trang tạo chữ ký style.css giao diện trang tạo chữ ký script.js logic xử lý — thường không cần đụng vào templates/ manifest.txt danh sách file mẫu sẽ hiển thị, mỗi dòng 1 file classic-example.html logo + thông tin + icon mạng xã hội grid-example.html bảng liên hệ dạng nhãn (M./E./W./A.) minimal-example.html chỉ có chữ, không cần ảnh assets/ logo-placeholder.png logo mẫu chung chung (chỉ dùng trong các file ví dụ) icons/ icon mạng xã hội mẫu chung chung README.md LICENSE ``` ### Cách hoạt động Mỗi file trong `templates/` là MỘT chữ ký email hoàn chỉnh, tự chứa mọi thứ — logo, tên công ty, màu sắc, địa chỉ, link mạng xã hội, tất cả chỉ là HTML thường bạn sửa trực tiếp trong đúng file đó, giống như sửa một trang web nhỏ. Phần duy nhất bộ tạo chữ ký tự động điền là 4 placeholder: `{{name}}`, `{{title}}`, `{{email}}`, `{{phone}}` (và khối tuỳ chọn `{{#if phone}}...{{/if}}` sẽ tự biến mất nếu ai đó để trống số điện thoại). Mở 1 trong 3 file ví dụ để xem thực tế. Bộ tạo chữ ký đọc file `templates/manifest.txt` để biết cần hiển thị những file nào, tải từng file, và hiển thị bản xem trước thu nhỏ cho mỗi mẫu trong 1 gallery ở đầu trang — chọn mẫu của công ty bạn, điền thông tin bên dưới, là xong. ### Thêm chữ ký cho công ty của bạn 1. Sao chép 1 trong 3 file ví dụ trong `templates/` (chọn bố cục gần giống nhất với ý bạn muốn) và đổi tên, vd `acme-corp.html`. 2. Mở bằng trình soạn thảo văn bản bất kỳ và thay tên công ty, logo, địa chỉ, website, link mạng xã hội, màu sắc bằng thông tin của bạn. Giữ nguyên 4 chỗ `{{...}}` và khối `{{#if phone}}...{{/if}}`, đừng sửa các chỗ này. 3. **URL logo và icon phải là địa chỉ `https://` công khai** — trình email tải ảnh chữ ký từ Internet, nên đường dẫn file cục bộ sẽ bị vỡ ảnh ngay khi dán chữ ký vào Gmail/Outlook. Cách miễn phí dễ nhất: bỏ file ảnh của bạn vào thư mục `assets/` của repo này, bật GitHub Pages (**Settings → Pages** → deploy từ nhánh `main`), khi đó ảnh của bạn sẽ chạy tại `https://.github.io//assets/logo-cua-ban.png`. 4. Ghi đúng tên file mới vào `templates/manifest.txt` (một dòng — đây là bước "đăng ký" duy nhất, không cần code hay JSON gì cả). 5. Commit và push. Refresh lại trang tạo chữ ký — mẫu mới của bạn sẽ hiện trong gallery kèm bản xem trước. ### Lưu ý về hosting — cần một web server thật Gallery tải `manifest.txt` và từng file mẫu bằng `fetch()` của trình duyệt, việc này bị chặn trên trang mở trực tiếp từ ổ đĩa (double-click mở `index.html`). **Hãy host trên GitHub Pages** (miễn phí, xem bước 3 ở trên) hoặc bất kỳ web server tĩnh nào — khi đó ai cũng dùng được, không cần cài gì. Nếu bạn thấy dòng "Could not load the template gallery", nhiều khả năng bạn đang mở file trực tiếp thay vì qua URL đã host. ### Nhiều công ty / nhiều thương hiệu con Đây thực ra là chế độ mặc định — chỉ cần thêm mỗi công ty/thương hiệu 1 file `.html` vào `templates/` và ghi tên vào `manifest.txt`. Mọi người sẽ thấy tất cả trong gallery và tự chọn mẫu của mình. ### Lưu ý về hình ảnh dùng trong các file ví dụ Logo và icon mạng xã hội trong `assets/` là ảnh mẫu chung chung được tạo cho template này — không phải thương hiệu thật của bất kỳ công ty nào. Hãy thay bằng ảnh thật (hoặc trỏ file mẫu của bạn tới ảnh do bạn tự host) trước khi dùng chính thức. ### Giấy phép MIT — xem file `LICENSE`. Tự do dùng, fork, và chỉnh sửa cho team của bạn.