---

📋 Table of Contents

• About Chande!?
• Features
• Live Demo
• Project Structure
• Usage
• Local Setup
• Tech Stack
• APIs & External Services
• Deployment
• Troubleshooting
• Contributing
• License
• Author

---

👋 About Chande!?

Chande!? is a simple, fast, and customizable web app that displays real-time fiat, gold, and cryptocurrency prices. Select and reorder the currencies you care about, switch between dark and light themes, and tap any card to copy its price. It is built as a Progressive Web App (PWA), so it installs to your home screen and works across desktop, tablet, and mobile — no build step, no framework, no dependencies to install.

---

✨ Features

• Real-time Rates: Live prices for fiat currencies, gold (incl. 18k gold), Telegram Stars & Premium, and cryptocurrencies, fetched from two APIs in parallel.
• Customizable Currency List: Add, remove, search, and reorder currencies via drag & drop or arrow buttons — your selection is saved locally and restored on your next visit.
• Price History at a Glance: Each card shows the change since the last time you viewed it (↑/↓), and clicking a card opens a modal with a one-click copy button.
• Theme Toggle: Seamlessly switch between dark and light modes; the choice is remembered.
• Responsive Design: Optimized for a consistent experience on desktops, tablets, and mobile devices.
• Progressive Web App (PWA): Installable with a service worker for fast startup and offline shell support.

---

📂 Project Structure

.
├── index.html                        # Entry point — loads styles, scripts, and manifest
├── LICENSE                           # MIT license
├── README.md                         # This file
├── .github/
│   └── workflows/
│       └── static.yml                # Deploys the site to GitHub Pages on push to main
└── src/
    ├── script.js                     # App logic: data fetching, UI, modals, drag & drop, PWA
    ├── styles.css                    # All styles, including dark-mode theme support
    ├── currency-meta.json            # Currency definitions: name, flag icon, type, API keys
    ├── manifest.json                 # PWA manifest (name, icons, theme colors)
    ├── service-worker.js             # Registers the app shell for PWA/offline support
    ├── SF-Pro-Rounded-Regular.otf    # Bundled display font
    └── icons/                        # PWA icons (48, 72, 96, 144, 192, 512 px) + Telegram SVGs

---

🔴 Live Demo

---

🚀 Usage

1. View Rates: Open the site to see current prices for your selected currencies.
2. Customize Currencies: Click the settings icon () to open the currency selector. Add, remove, search, or reorder currencies with drag & drop or the arrow buttons.
3. Toggle Theme: Use the theme toggle button ( / ) to switch between light and dark modes.
4. Copy Price: Click on any currency card to open a price modal, view its price, and copy it to the clipboard.

Local Setup

Prerequisites: any modern web browser and Git. Node.js or Python is optional but recommended for serving the site locally.

1. Clone the repository:

   git clone https://github.com/WhoisNeon/Chande.git
   cd Chande

2. Serve the site locally — the app loads src/currency-meta.json with fetch(), which browsers block on file:// URLs, so open it through a local server instead of double-clicking index.html:

   # Option A — Node.js
   npx serve .
   
   # Option B — Python
   python -m http.server 8000

   Then open the URL printed in your terminal (e.g. http://localhost:3000 or http://localhost:8000).

3. Customize currencies (optional): edit src/currency-meta.json to add or change currencies. Fiat and gold entries only need the key the API returns under — the display name and icon come from the API:

   {
     "usd": {
       "type": "fiat",
       "apiKey": "USD"
     },
     "tgstars": {
       "icon": "src/icons/telegram-stars.svg",
       "type": "telegram",
       "apiKey": "stars"
     }
   }

   type is one of fiat, gold, telegram, or crypto. For telegram, apiKey is stars or premium.<months> (premium.3, premium.6, premium.12); the icon is hardcoded because the API ships none. For crypto, apiSymbol must match a Bitpin pair and the local en/icon are used.

There is no build step — the code runs as-is.

---

🛠️ Tech Stack

Technology	Icon
HTML5
CSS3
JavaScript (ES6+)

No frameworks and no build step — just plain HTML, CSS, and ES6+ JavaScript. Third-party libraries are loaded from CDN:

• Sortable.js — drag & drop reordering in the currency selector
• Phosphor Icons — icon set used throughout the UI

---

🌐 APIs & External Services

• Fiat, gold & Telegram prices: https://chand.clf.dpdns.org/api — returns { fiat, gold, crypto, market, telegram, updated }, where every entry carries its own en, fa, sell, buy and icon. Fiat/gold names and icons are read straight from this response; Telegram quotes are nested (telegram.stars and telegram.premium.months) and are quoted in toman via the toman field.
• Crypto prices: https://api.bitpin.org/api/v1/mkt/tickers/ — spot tickers from Bitpin; pairs are resolved via apiSymbol in src/currency-meta.json.
• Currency metadata: src/currency-meta.json (local) — only crypto names/icons (from circle-flags) and the hardcoded Telegram icons; fiat and gold names/icons come from the API.
• Phosphor Icons: https://unpkg.com/@phosphor-icons/web
• Sortable.js: https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js
• GoatCounter (analytics): https://chande.goatcounter.com/count

---

🚢 Deployment

The site is deployed automatically to GitHub Pages by the static.yml workflow: every push to main uploads the repository as static content and publishes it. You can also trigger a deploy manually from the Actions tab (Run workflow).

Live URL: https://whoisneon.github.io/Chande/

---

🧩 Troubleshooting

• Data not loading / empty cards: Check your internet connection and open the browser dev console (F12 → Network) to confirm both price APIs respond. Note that opening the page via file:// fails on the metadata fetch — serve the folder over HTTP instead (see Local Setup).
• Prices stuck or outdated: Price data is fetched from remote APIs on each refresh; if they are down, the console logs Error fetching data:.
• PWA installation issues: Check the dev console for service worker registration errors. src/service-worker.js and src/manifest.json must be reachable, and the page must be served over HTTPS (or localhost).

---

🤝 Contributing

Contributions are welcome! If you have suggestions for improvements, feel free to fork the repository and submit a pull request. You can also open an issue with the tag "enhancement".

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📄 License

Distributed under the MIT License.

---

✍️ Author

Created by CertMusashi. Revamped by WhoisNeon.