-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathhot-flash-log.html
More file actions
157 lines (152 loc) · 12.6 KB
/
hot-flash-log.html
File metadata and controls
157 lines (152 loc) · 12.6 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Free Hot Flash Tracker — Log, Triggers & Patterns</title>
<meta name="description" content="Track hot flashes with one tap. Log time, severity, duration, and triggers. See frequency patterns and identify what causes your hot flashes. 100% private.">
<link rel="canonical" href="https://www.quicktools.mom/hot-flash-log.html">
<meta property="og:title" content="Hot Flash Tracker & Log"><meta property="og:type" content="website"><meta property="og:url" content="https://www.quicktools.mom/hot-flash-log.html"><meta name="twitter:card" content="summary">
<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"How many hot flashes per day is normal during menopause?","acceptedAnswer":{"@type":"Answer","text":"Most women experience 1-10 hot flashes per day during peak menopause. The average is about 7 per day. Frequency and severity vary greatly between individuals."}},{"@type":"Question","name":"What triggers hot flashes?","acceptedAnswer":{"@type":"Answer","text":"Common triggers include caffeine, alcohol, spicy food, stress, warm rooms, tight clothing, sugar, and smoking. Tracking helps identify your personal triggers."}}]}</script>
<link rel="stylesheet" href="style.css">
<style>
.flash-btn{width:100%;padding:1.5rem;border-radius:16px;border:none;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;font-size:1.5rem;font-weight:800;cursor:pointer;transition:all 0.15s;box-shadow:0 4px 20px rgba(239,68,68,0.3);}
.flash-btn:hover{transform:translateY(-2px);box-shadow:0 6px 30px rgba(239,68,68,0.4);}
.flash-btn:active{transform:scale(0.97);}
.sev-opt{display:flex;gap:0.4rem;justify-content:center;margin:0.75rem 0;}
.sev-opt button{padding:0.5rem 1rem;border-radius:8px;border:1px solid var(--border);background:var(--bg-secondary);cursor:pointer;font-size:0.85rem;transition:all 0.15s;color:var(--text-primary);}
.sev-opt button.active{color:#fff;border-color:transparent;}
.trigger-tags{display:flex;gap:0.3rem;flex-wrap:wrap;margin:0.5rem 0;}
.trigger-tag{padding:4px 12px;border-radius:20px;border:1px solid var(--border);background:var(--bg-secondary);cursor:pointer;font-size:0.8rem;transition:all 0.15s;}
.trigger-tag.active{background:var(--accent);color:#fff;border-color:var(--accent);}
.flash-entry{display:flex;align-items:center;gap:0.75rem;padding:0.6rem 0;border-bottom:1px solid var(--border);font-size:0.85rem;}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.75rem;margin-top:1rem;}
.stat-box{padding:1rem;background:var(--bg-secondary);border-radius:10px;text-align:center;}
.stat-num{font-size:1.8rem;font-weight:800;}
.stat-label{font-size:0.7rem;color:var(--text-muted);}
</style>
</head>
<body>
<div class="page-wrapper">
<header class="site-header"><a href="index.html" class="site-logo"><span class="icon">⚡</span> QuickTools</a><nav class="site-nav"><a href="index.html">All Tools</a></nav></header>
<div class="ad-zone ad-zone-top">Ad Space</div>
<div class="tool-header"><div class="tool-badge">🩷 Women's Health</div><h1>Hot Flash Tracker</h1><p>One tap to log. Identify triggers. See your patterns over time.</p></div>
<div class="tool-card" style="text-align:center;">
<button class="flash-btn" onclick="logFlash()">🔥 Log Hot Flash NOW</button>
<div style="font-size:0.8rem;color:var(--text-muted);margin-top:0.5rem;">Tap when it starts — we'll record the time</div>
</div>
<div class="tool-card" id="detailPanel" style="display:none;">
<h3 style="font-size:0.95rem;margin-bottom:0.5rem;">Quick Details (optional)</h3>
<div><strong style="font-size:0.85rem;">Severity:</strong></div>
<div class="sev-opt">
<button onclick="setSev(1,this)" style="border-color:#84cc16;">😌 Mild</button>
<button onclick="setSev(2,this)" class="active" style="background:#f59e0b;color:#fff;border-color:#f59e0b;">😰 Moderate</button>
<button onclick="setSev(3,this)" style="border-color:#ef4444;">🥵 Severe</button>
</div>
<div><strong style="font-size:0.85rem;">Duration:</strong></div>
<div class="sev-opt">
<button onclick="setDur(1,this)">< 1 min</button>
<button onclick="setDur(3,this)" class="active" style="background:var(--accent);color:#fff;">1-5 min</button>
<button onclick="setDur(7,this)">5-10 min</button>
<button onclick="setDur(15,this)">10+ min</button>
</div>
<div><strong style="font-size:0.85rem;">Possible triggers:</strong></div>
<div class="trigger-tags">
<span class="trigger-tag" onclick="toggleTrigger(this)">☕ Caffeine</span>
<span class="trigger-tag" onclick="toggleTrigger(this)">🍷 Alcohol</span>
<span class="trigger-tag" onclick="toggleTrigger(this)">🌶️ Spicy food</span>
<span class="trigger-tag" onclick="toggleTrigger(this)">😰 Stress</span>
<span class="trigger-tag" onclick="toggleTrigger(this)">🏠 Warm room</span>
<span class="trigger-tag" onclick="toggleTrigger(this)">👔 Tight clothes</span>
<span class="trigger-tag" onclick="toggleTrigger(this)">🧁 Sugar</span>
<span class="trigger-tag" onclick="toggleTrigger(this)">🏃 Exercise</span>
<span class="trigger-tag" onclick="toggleTrigger(this)">😴 Poor sleep</span>
<span class="trigger-tag" onclick="toggleTrigger(this)">❓ Unknown</span>
</div>
<button class="btn btn-primary" onclick="saveDetails()" style="width:100%;margin-top:0.5rem;">✅ Save Details</button>
</div>
<div class="tool-card">
<h3 style="font-size:0.95rem;margin-bottom:0.5rem;">📊 Your Stats</h3>
<div class="stat-grid">
<div class="stat-box"><div class="stat-num" id="todayCount">0</div><div class="stat-label">Today</div></div>
<div class="stat-box"><div class="stat-num" id="weekAvg">0</div><div class="stat-label">7-Day Avg/Day</div></div>
<div class="stat-box"><div class="stat-num" id="topTrigger">—</div><div class="stat-label">Top Trigger</div></div>
</div>
</div>
<div class="tool-card">
<h3 style="font-size:0.95rem;margin-bottom:0.5rem;">📋 Recent Log</h3>
<div id="logList"></div>
</div>
<div class="tool-card" style="max-width:720px;">
<h2 style="font-size:1rem;margin-bottom:0.75rem;">📖 About Hot Flash Tracker</h2>
<p style="font-size:0.85rem;line-height:1.7;color:var(--text-muted);">This hot flash tracker is designed for quick, one-tap logging during a hot flash — because the last thing you need in that moment is a complicated app. Tap the big red button when a flash starts, then optionally add severity, duration, and possible triggers afterward. Over time, the tracker reveals patterns: how many flashes per day, which triggers correlate with more frequent or severe episodes, and whether your frequency is increasing or decreasing. The most common triggers are caffeine, alcohol, spicy food, stress, warm environments, tight clothing, and sugar. The average woman experiences hot flashes for 7.4 years during menopause. Tracking helps your doctor determine if treatment changes are needed and gives objective data instead of estimates from memory. All entries are stored in your browser's local storage — completely private, never uploaded. This tool is for tracking purposes and does not constitute medical advice.</p>
<h3 style="font-size:0.9rem;margin-bottom:0.5rem;">How to Use</h3>
<ol style="font-size:0.85rem;color:var(--text-muted);line-height:1.7;padding-left:1.2rem;">
<li><strong>Tap the red button</strong> — When a hot flash starts.</li>
<li><strong>Add details</strong> — Severity, duration, and triggers (optional).</li>
<li><strong>Check your stats</strong> — Daily count, weekly average, top triggers.</li>
<li><strong>Share with doctor</strong> — Show your log at appointments.</li>
</ol>
</div>
<div class="ad-zone">Ad Space</div>
<div class="related-tools"><h2>Related Tools</h2><div class="related-grid"><a href="menopause-tracker.html"><span class="tool-icon">📊</span> Symptom Tracker</a><a href="menopause-quiz.html"><span class="tool-icon">❓</span> Stage Quiz</a><a href="period-calculator.html"><span class="tool-icon">🩷</span> Period</a><a href="mental-wellness.html"><span class="tool-icon">💙</span> Wellness</a></div></div>
<div class="ad-zone ad-zone-bottom">Ad Space</div>
<footer class="site-footer"><p>© 2026 QuickTools.</p><div class="footer-links"><a href="index.html">All Tools</a></div></footer>
</div>
<script>
let pendingEntry=null;let pendingSev=2;let pendingDur=3;let pendingTriggers=[];
function logFlash(){
pendingEntry={time:new Date().toISOString(),severity:2,duration:3,triggers:[]};
pendingSev=2;pendingDur=3;pendingTriggers=[];
document.getElementById('detailPanel').style.display='';
document.getElementById('detailPanel').scrollIntoView({behavior:'smooth'});
// Quick save immediately (can update with details)
saveEntry(pendingEntry);
}
function setSev(v,btn){pendingSev=v;btn.parentElement.querySelectorAll('button').forEach(b=>{b.classList.remove('active');b.style.background='';b.style.color='';});
btn.classList.add('active');const colors=['','#84cc16','#f59e0b','#ef4444'];btn.style.background=colors[v];btn.style.color='#fff';}
function setDur(v,btn){pendingDur=v;btn.parentElement.querySelectorAll('button').forEach(b=>{b.classList.remove('active');b.style.background='';b.style.color='';});
btn.classList.add('active');btn.style.background='var(--accent)';btn.style.color='#fff';}
function toggleTrigger(el){el.classList.toggle('active');}
function saveDetails(){
const triggers=[...document.querySelectorAll('.trigger-tag.active')].map(t=>t.textContent.trim());
const data=JSON.parse(localStorage.getItem('qk_hotflash')||'[]');
if(data.length){const last=data[data.length-1];last.severity=pendingSev;last.duration=pendingDur;last.triggers=triggers;}
localStorage.setItem('qk_hotflash',JSON.stringify(data));
document.getElementById('detailPanel').style.display='none';
renderStats();renderLog();
}
function saveEntry(entry){const data=JSON.parse(localStorage.getItem('qk_hotflash')||'[]');data.push(entry);
if(data.length>500)data.shift();localStorage.setItem('qk_hotflash',JSON.stringify(data));renderStats();renderLog();}
function renderStats(){
const data=JSON.parse(localStorage.getItem('qk_hotflash')||'[]');
const today=new Date().toISOString().split('T')[0];
const todayCount=data.filter(d=>d.time.startsWith(today)).length;
document.getElementById('todayCount').textContent=todayCount;
// 7-day avg
const week=new Date();week.setDate(week.getDate()-7);
const weekData=data.filter(d=>new Date(d.time)>=week);
const days=new Set(weekData.map(d=>d.time.split('T')[0])).size||1;
document.getElementById('weekAvg').textContent=(weekData.length/days).toFixed(1);
// Top trigger
const trig={};data.forEach(d=>(d.triggers||[]).forEach(t=>{trig[t]=(trig[t]||0)+1;}));
const top=Object.entries(trig).sort((a,b)=>b[1]-a[1])[0];
document.getElementById('topTrigger').textContent=top?top[0]:'—';
document.getElementById('topTrigger').style.fontSize=top?'0.8rem':'1.8rem';
}
function renderLog(){
const data=JSON.parse(localStorage.getItem('qk_hotflash')||'[]').slice(-20).reverse();
if(!data.length){document.getElementById('logList').innerHTML='<div style="text-align:center;color:var(--text-muted);font-size:0.85rem;padding:1rem;">No hot flashes logged yet.</div>';return;}
const sevEmoji=['','😌','😰','🥵'];const sevLabel=['','Mild','Moderate','Severe'];
document.getElementById('logList').innerHTML=data.map(d=>{
const t=new Date(d.time);const time=t.toLocaleTimeString('en-US',{hour:'2-digit',minute:'2-digit'});
const date=t.toLocaleDateString('en-US',{month:'short',day:'numeric'});
const triggers=(d.triggers||[]).join(' ');
return`<div class="flash-entry"><span style="width:75px;flex-shrink:0;font-weight:600;">${date}</span><span style="width:55px;flex-shrink:0;">${time}</span><span>${sevEmoji[d.severity]||'😰'} ${sevLabel[d.severity]||'Mod'}</span><span style="color:var(--text-muted);">${d.duration||3} min</span><span style="flex:1;text-align:right;font-size:0.75rem;">${triggers}</span></div>`;
}).join('');
}
renderStats();renderLog();
</script>
<script src="share.js"></script>
<script src="ads.js"></script>
</body>
</html>