evcostcalcnetflify/index.html at main · sureshchouksey8/evcostcalcnetflify · 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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>EV Cost Advisor — India</title>
<link rel="stylesheet" href="assets/app.css" />
</head>
<body>
  <div class="container">
    <header class="row">
      <div>
        <h1>EV Cost Advisor — India</h1>
        <div class="subtitle">Compare <b>per-day</b> EV vs petrol costs. Pick a model to begin.</div>
      </div>
      <div class="pills">
        <div class="pill">🇮🇳 India</div><div class="pill">⚡ EV</div><div class="pill">₹/day first</div>
      </div>
    </header>

    <div class="tabs">
      <button id="tab-cars" class="active">Cars</button>
      <button id="tab-scooters">Scooters</button>
    </div>

    <div class="tip">💡 Pick a model → set km/day → we include EV <u>and</u> petrol automatically. Share a WhatsApp-ready image.</div>

    <div class="search">
      <input id="q" placeholder="Search brand, model, segment..." />
      <div id="resultCount" class="small mt8 muted"></div>
    </div>

    <div id="grid" class="grid"></div>
  </div>

  <!-- Calculator -->
  <div id="overlay" class="overlay" aria-hidden="true">
    <div class="modal calc-modal" role="dialog" aria-modal="true">
      <div class="modal-head">
        <div class="row" style="gap:10px">
          <button id="infoBtn" class="badge-btn" title="How this is calculated">i Info</button>
          <button id="emiBtn" class="button">EMI</button>
          <button id="aiBtn" class="button" title="AI suggestion">✨ AI Analysis</button>
          <button id="compareBtn" class="button">Compare</button>
        </div>
        <div class="row">
          <button id="shareBtn" class="button">Share</button>
          <button id="closeBtn" class="button big-x" aria-label="Close">✕</button>
        </div>
      </div>

      <div class="modal-body">
        <div class="grid3">
          <!-- Left -->
          <div>
            <label class="small muted">City preset</label>
            <select id="citySel" class="mt8 input"></select>
            <div class="small mt8">Tariff: <span id="tariffView" class="tabnums">—</span> /kWh</div>

            <div class="mt16">
              <div class="row" style="justify-content:flex-start;gap:10px">
                <label class="small muted">Daily drive (km)</label>
                <span class="badge">Kitna Chalaoge?</span>
              </div>
              <input id="kmRange" type="range" min="0" max="200" step="1" value="20" class="mt8" />
              <div class="small muted mt8"><span id="kmVal" class="tabnums">20</span> km/day</div>
            </div>

            <div class="mt16">
              <label class="small muted">Petrol price (₹/L)</label>
              <input id="petrolIn" type="number" class="input mt8" value="100" />
            </div>

            <!-- Model switcher -->
            <div class="mt16">
              <label class="small muted">Switch model</label>
              <div class="row mt8" style="gap:8px">
                <button id="prevModel" class="badge-btn">◀ Prev</button>
                <select id="modelSwitcher" class="input"></select>
                <button id="nextModel" class="badge-btn">Next ▶</button>
              </div>
            </div>
          </div>

          <!-- Center -->
          <div>
            <div class="row" style="justify-content:flex-start;gap:10px"><span class="badge">Kitna Kharchoge?</span></div>
            <div class="tile ev mt8">
              <div class="small up">Cost per day (EV)</div>
              <div id="perDayEv" class="big tabnums">—</div>
              <div class="small" id="kmNoteEv">For 20 km/day</div>
            </div>
            <div class="tile ice mt16">
              <div class="small up">Cost per day (Petrol)</div>
              <div id="perDayIce" class="big tabnums">—</div>
              <div class="small" id="kmNoteIce">For 20 km/day</div>
            </div>

            <!-- Days slider -->
            <div class="mt20" id="daysBlockCenter">
              <div class="row" style="gap:10px;align-items:center">
                <label class="small muted">Days per month</label>
                <div class="badge tabnums" id="daysBadge">26 days</div>
              </div>
              <input id="daysRange" type="range" min="1" max="31" step="1" value="26" class="mt8" />
            </div>

            <div class="row mt24">
              <div id="statMonthly" class="stat clickable" style="flex:1">
                <div class="row small muted"><span>Monthly running cost</span><span id="monthlyPair" class="tabnums">—</span></div>
                <div class="bar mt12"><div id="barEvM" class="fill" style="width:0%"></div></div>
                <div class="bar mt8"><div id="barIceM" class="fill icebar" style="width:0%"></div></div>
              </div>
              <div id="statYearly" class="stat clickable" style="flex:1">
                <div class="row small muted"><span>Yearly running cost</span><span id="yearlyPair" class="tabnums">—</span></div>
                <div class="bar mt12"><div id="barEvY" class="fill" style="width:0%"></div></div>
                <div class="bar mt8"><div id="barIceY" class="fill icebar" style="width:0%"></div></div>
              </div>
            </div>
          </div>

          <!-- Right -->
          <div class="right-rail">
            <img id="modelPhoto" alt="" />
            <!-- Donut -->
            <svg class="donut" viewBox="0 0 120 120" aria-hidden="true">
              <defs><linearGradient id="dg" x1="0" x2="1" y1="0" y2="1"><stop offset="0" stop-color="#10b981"/><stop offset="1" stop-color="#22d3ee"/></linearGradient></defs>
              <circle cx="60" cy="60" r="46" fill="none" stroke="#e5e7eb" stroke-width="12" stroke-opacity=".6"/>
              <g transform="rotate(-90 60 60)"><circle id="gProg" cx="60" cy="60" r="46" fill="none" stroke="url(#dg)" stroke-width="12" stroke-linecap="round" stroke-dasharray="0 289"/></g>
              <text id="gLabel" x="60" y="56" text-anchor="middle" fill="#0f172a" font-size="22" font-weight="800">—</text>
              <text id="gSub" x="60" y="80" text-anchor="middle" fill="#475569" font-size="12">Savings vs petrol</text>
            </svg>

            <!-- AI card -->
            <div id="aiPanel" class="aiCard mt8" style="display:none">
              <div class="aiHeader"><span>✨ AI analysis</span><span id="aiCity" class="chip"></span></div>
              <div id="aiVerdict" class="aiVerdict">—</div>
              <div id="aiOnroad" class="aiOnroad small mt8">—</div>
              <ul id="aiReasons" class="aiList mt8"></ul>
              <div id="aiAlt" class="small mt8"></div>
              <label class="small mt8" style="display:inline-flex;gap:6px;align-items:center"><input id="aiAddShare" type="checkbox" /> Add AI line to share card</label>
            </div>

            <div class="stat" style="text-align:center">
              <div id="modelName" class="modelTitle">—</div>
              <div id="modelInfo" class="small muted mt8">—</div>
              <div class="small muted mt8">Monthly savings</div>
              <div id="saveMonth" class="bold tabnums mt4" style="font-size:22px">—</div>
              <div id="goodFit" class="good mt8" style="display:none">👍 Good fit</div>
            </div>

            <button id="openShare" class="button primary mt12" style="width:100%">Share this scenario</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Compare modal -->
  <div id="compareOverlay" class="overlay" aria-hidden="true">
    <div class="modal compare-modal" role="dialog" aria-modal="true">
      <div class="modal-head cmp-head">
        <div class="scenario" id="cmpScenario">—</div>
        <div class="row">
          <button id="cmpPrev" class="button">◀</button>
          <button id="cmpNext" class="button">▶</button>
          <button id="cmpClose" class="button big-x" aria-label="Close">✕</button>
        </div>
      </div>
      <div class="modal-body">
        <div id="cmpTrack" class="cmpTrack"></div>
      </div>
    </div>
  </div>

  <!-- Share modal -->
  <div id="shareOverlay" class="overlay" aria-hidden="true">
    <div class="modal" role="dialog" aria-modal="true">
      <div class="modal-head">
        <div class="muted small" id="shareTitle">Share — Mobile portrait (1080×1920)</div>
        <div class="row">
          <button id="dlPng" class="button primary">Download PNG</button>
          <button id="openNew" class="button">Open in new tab</button>
          <button id="copyB64" class="button">Copy Base64</button>
          <button id="shareClose" class="button big-x" aria-label="Close">✕</button>
        </div>
      </div>
      <div class="modal-body">
        <div class="stat" style="margin:auto;max-width:720px">
          <canvas id="shareCanvas" width="1080" height="1920" class="ring" style="border-radius:12px;max-width:100%;display:block;margin:0 auto"></canvas>
        </div>
      </div>
    </div>
  </div>

  <!-- EMI modal -->
  <div id="toolsOverlay" class="overlay" aria-hidden="true">
    <div class="modal emi-modal" role="dialog" aria-modal="true">
      <div class="modal-head">
        <div class="muted small">EMI & Litres Saved</div>
        <div class="row">
          <button id="toolsInfo" class="button">Info</button>
          <button id="shareEmi" class="button">Share EMI card</button>
          <button id="toolsClose" class="button big-x" aria-label="Close">✕</button>
        </div>
      </div>
      <div class="modal-body">
        <div class="emiWrap">
          <div class="emiLeft">
            <div class="emiCard cover">
              <svg class="donut" viewBox="0 0 120 120" aria-hidden="true">
                <circle cx="60" cy="60" r="46" fill="none" stroke="rgba(255,255,255,.28)" stroke-width="12"/>
                <g transform="rotate(-90 60 60)"><circle id="emiProg" cx="60" cy="60" r="46" fill="none" stroke="#ffffff" stroke-width="12" stroke-linecap="round" stroke-dasharray="0 289"/></g>
                <text id="emiLabel" x="60" y="56" text-anchor="middle" fill="#fff" font-size="22" font-weight="800">—</text>
                <text x="60" y="80" text-anchor="middle" fill="rgba(255,255,255,.95)" font-size="12">EMI coverage</text>
              </svg>
              <div class="coverNumbers">
                <div><div class="small mutedLight">EMI / month</div><div id="emiOut" class="value tabnums">—</div></div>
                <div><div class="small mutedLight">Fuel savings / month</div><div id="savingsOut" class="value tabnums">—</div></div>
              </div>
            </div>
          </div>

          <div class="emiRight">
            <div class="emiCard form">
              <div class="gridForm">
                <label>Loan amount (₹)<input id="emiAmount" class="input" type="number" placeholder="500000" /></label>
                <label>Interest %<input id="emiRate" class="input" type="number" step="0.1" placeholder="9.5" /></label>
                <label>Months<input id="emiMonths" class="input" type="number" placeholder="60" /></label>
              </div>
              <div id="emiTip" class="small mt12">Enter values to compare your EMI vs monthly fuel savings.</div>
            </div>

            <div class="emiCard litres">
              <h3>Litres saved / month</h3>
              <div class="gridMini">
                <div><div class="small mutedLight">Your monthly km</div><div id="lsKm" class="value tabnums">—</div></div>
                <div><div class="small mutedLight">Segment km/L</div><div id="lsKmpl" class="value tabnums">—</div></div>
              </div>
              <div class="bigLitres" id="lsLitres">—</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Info modal -->
  <div id="infoOverlay" class="overlay" aria-hidden="true">
    <div class="modal" role="dialog" aria-modal="true">
      <div class="modal-head"><div class="muted small" id="infoTitle">Info</div><div class="row"><button id="infoClose" class="button big-x" aria-label="Close">✕</button></div></div>
      <div class="modal-body"><div id="infoContent" class="stat" style="max-width:820px;margin:auto;font-size:16px"></div></div>
    </div>
  </div>

  <script src="assets/data.js" defer></script>
  <script src="assets/ai.js" defer></script>
  <script src="assets/app.js" defer></script>
</body>
</html>