https://github.com/helloruru/no-sugar-log

戒糖日誌 — 用蓋章的方式追蹤每天的含糖飲料攝取，手帳風設計，純前端本地儲存
https://github.com/helloruru/no-sugar-log

Last synced: 14 days ago
JSON representation

戒糖日誌 — 用蓋章的方式追蹤每天的含糖飲料攝取，手帳風設計，純前端本地儲存

• Host: GitHub
• URL: https://github.com/helloruru/no-sugar-log
• Owner: HelloRuru
• License: mit
• Created: 2026-03-21T15:43:57.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2026-03-21T16:00:50.000Z (3 months ago)
• Last Synced: 2026-03-22T06:08:22.419Z (3 months ago)
• Language: HTML
• Size: 17.6 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
No Sugar Log




  Stamp your way to a sugar-free life.


  A daily stamp tracker for quitting sugary drinks.


  Like a school contact book — but for your health.





  

  

  

  

  



---

## WHAT — Quitting sugar is hard without visibility

You tell yourself "I'll drink less this week." But by Friday, you've lost count. Was it three cups? Four? You can't remember which days were clean and which weren't.

No Sugar Log gives you a calendar you can stamp — like a kid's contact book. One glance and you know exactly where you stand.

---

## WHY — Because seeing your progress changes behavior

- **Visual accountability** — empty days stare back at you; stamped days feel earned

- **No guilt, just data** — broke your streak? Log it, see the pattern, adjust

- **Your rules, your pace** — set your own weekly goal, from zero-sugar to "max 3 cups"

---

## HOW — Stamp, log, review

### :calendar: Calendar View

Monthly grid with one cell per day. Tap a day, pick a stamp:

| Stamp | Meaning | When to use |

| :--- | :--- | :--- |

| :white_check_mark: **Sugar-free day** | No sugary drinks today | The goal — stamp it and feel good |

| :droplet: **Sugar-free drink** | Had a drink, but no sugar | Unsweetened tea, black coffee, water with lemon |

| :zap: **Broke the streak** | Had a sugary drink | Log it — shop, drink, sugar level, ice |

Stamps bounce when you tap them. Sugar-free days get a celebration animation.

### :clipboard: Drink Logger

When you break the streak, the app asks you to log:

- **Shop** — where you bought it (remembers your frequent shops)

- **Drink** — what you ordered

- **Sugar level** — unsweetened / light / half / less / full

- **Ice level** — no ice / light / less / regular / warm / hot

- **Notes** — optional, for context

### :bar_chart: Stats at a Glance

Three numbers at the top, always visible:

- **Sugar-free days** this month

- **Broke days** this month

- **Current streak** — consecutive sugar-free days

### :dart: Custom Goals

Set your own weekly target:

- **Zero sugar** — the strict mode, any sugary drink breaks it

- **Max N cups** — a gentler goal, with a progress bar showing how much quota you've used

### :new_moon: Week View

Switch to week view for a closer look. Each week is a card showing 7 days + a summary (sugar-free vs broke count).

### :crescent_moon: Dark Mode

One tap to switch. Warm cocoa tones — no cold blue-black.

---

## :iphone: Mobile First

Designed for phones. The calendar grid, stamp picker, and drink logger are all optimized for thumb-friendly tapping on small screens. Works on desktop too, but mobile is the primary experience.

---

## :floppy_disk: Data Storage

All data lives in your browser's `localStorage`. Nothing is sent to any server. Your data stays on your device.

- Switch browsers or clear data = start fresh

- Same browser, same device = your history is there

---

## :package: Setup

No build step. No dependencies. Just one HTML file.

**Option A — Use it online:**

Visit [tools.helloruru.com/no-sugar-log](https://tools.helloruru.com/no-sugar-log/)

**Option B — Self-host:**

```bash

git clone https://github.com/HelloRuru/no-sugar-log.git

# Open index.html in your browser. That's it.

```

**Option C — Add to home screen (PWA-ready meta tags):**

Open the URL on your phone → Share → Add to Home Screen. It behaves like a native app.

---

## :art: Design

Built with the [Hello Ruru Design System](https://ohruru.com) (DS Classic v2.2), styled as a **journal / planner (筆記手帳風)**:

- Warm pink-brown palette with lavender accents

- GenSenRounded + Huninn (粉圓體) dual font system

- Paper texture backgrounds with notebook ruled lines

- Washi tape decorations on cards and section dividers

- Dashed borders mimicking journal page aesthetics

- Stamp bounce animation on tap

- Dark mode with warm cocoa tones

---

Changelog

**v1.1.0 — Journal Style Update**

- Redesigned as 筆記手帳風 (journal/planner style)

- Added Huninn (粉圓體) font for headers and UI elements

- CSS paper texture backgrounds with subtle dot pattern

- Notebook ruled lines inside calendar and cards

- Washi tape decorations (CSS-based, no image dependencies)

- Dashed borders replacing solid borders for journal feel

- Section tape dividers between content blocks

- Wavy underline on interactive elements

**v1.0.0 — Initial Release**

- Monthly calendar view with tap-to-stamp

- Week view with per-week summary cards

- Three stamp types: sugar-free day, sugar-free drink, broke streak

- Drink logger: shop, drink name, sugar level, ice level, notes

- Shop memory (remembers frequent shops)

- Weekly goal setting (zero sugar or max N cups)

- Stats: sugar-free days, broke days, current streak

- Dark mode (warm cocoa)

- Mobile-first responsive design

- SEO meta tags + Open Graph + Twitter Card

- PWA-ready meta tags

File structure

```

no-sugar-log/

  index.html    # Everything — HTML, CSS, JS in one file

  README.md     # This file

  LICENSE       # MIT

```

---

## License

MIT — see [LICENSE](LICENSE) for details.

---



  Made by HelloRuru