ACal/index.html at main · AzizX-coder/ACal · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ACal - AI Calorie Tracker</title>
  <meta name="description" content="Track calories with AI-powered food scanning. Snap a photo and get instant nutritional breakdown.">
  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔥</text></svg>">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    :root { --primary: #00D9FF; --secondary: #FF6B35; --bg: #0A0A0F; --surface: #1A1A24; --text: #fff; --text-secondary: #8A8A9A; }
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }

    .hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; background: radial-gradient(ellipse at top, rgba(0,217,255,0.15) 0%, transparent 50%), radial-gradient(ellipse at bottom right, rgba(123,97,255,0.15) 0%, transparent 50%); }
    .logo { font-size: 4rem; margin-bottom: 1rem; }
    h1 { font-size: clamp(2.5rem, 8vw, 4.5rem); font-weight: 800; background: linear-gradient(135deg, var(--primary), #7B61FF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 1rem; }
    .tagline { font-size: 1.25rem; color: var(--text-secondary); max-width: 500px; margin-bottom: 2rem; }

    .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; max-width: 900px; margin: 3rem auto; padding: 0 1rem; }
    .feature { background: var(--surface); padding: 1.5rem; border-radius: 16px; text-align: left; }
    .feature-icon { font-size: 2rem; margin-bottom: 0.75rem; }
    .feature h3 { font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--primary); }
    .feature p { font-size: 0.9rem; color: var(--text-secondary); }

    .download { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin: 2rem 0; }
    .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 1rem 2rem; border-radius: 12px; font-weight: 600; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; }
    .btn-primary { background: linear-gradient(135deg, var(--primary), #7B61FF); color: #000; }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,217,255,0.3); }
    .btn-secondary { background: var(--surface); color: var(--text); border: 1px solid #333; }
    .btn-secondary:hover { border-color: var(--primary); }

    footer { padding: 2rem; text-align: center; color: var(--text-secondary); font-size: 0.875rem; }
    footer a { color: var(--primary); text-decoration: none; }
  </style>
</head>
<body>
  <section class="hero">
    <div class="logo">🔥</div>
    <h1>ACal</h1>
    <p class="tagline">AI-Powered Calorie Tracking. Snap a photo of your food and get instant nutritional analysis.</p>

    <div class="download">
      <a href="https://github.com/AzizX-coder/ACal/releases/latest/download/app-debug.apk" class="btn btn-primary" download>📥 Download APK</a>
      <a href="https://github.com/AzizX-coder/ACal" class="btn btn-secondary">⭐ GitHub</a>
    </div>

    <div class="features">
      <div class="feature">
        <div class="feature-icon">📸</div>
        <h3>Photo Scanning</h3>
        <p>Take a photo of any meal and let AI analyze calories, protein, carbs, and fat instantly.</p>
      </div>
      <div class="feature">
        <div class="feature-icon">💬</div>
        <h3>Voice Describe</h3>
        <p>Simply describe what you ate and get accurate nutritional data.</p>
      </div>
      <div class="feature">
        <div class="feature-icon">📊</div>
        <h3>Smart Dashboard</h3>
        <p>Beautiful calorie ring and macro tracking to stay on top of your goals.</p>
      </div>
      <div class="feature">
        <div class="feature-icon">🔒</div>
        <h3>Privacy First</h3>
        <p>All data stored locally on your device. No cloud accounts required.</p>
      </div>
    </div>
  </section>

  <footer>
    <p>Built with ❤️ using Ionic + React + Ollama AI</p>
    <p><a href="https://github.com/AzizX-coder/ACal">GitHub</a> • <a href="https://github.com/AzizX-coder/ACal/releases">Releases</a></p>
  </footer>
</body>
</html>