diff --git a/index.html b/index.html index 7a2e609..d3ea436 100644 --- a/index.html +++ b/index.html @@ -1,195 +1,802 @@ - - - Caller ID Log - + h1 { + color: var(--primary-color); + margin-bottom: 25px; + font-weight: 700; + text-align: center; + font-size: 2rem; + } + + .controls { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 15px; + margin-bottom: 20px; + } + + .select-container, + .btn-container { + display: flex; + gap: 10px; + } + + select, + button { + padding: 10px 15px; + border-radius: 6px; + border: 1px solid var(--border-color); + font-size: 14px; + cursor: pointer; + transition: all 0.3s ease; + } + + select { + background-color: white; + min-width: 180px; + } + + button { + background-color: var(--primary-color); + color: white; + border: none; + font-weight: 500; + display: flex; + align-items: center; + gap: 8px; + } + + button:hover { + background-color: var(--hover-color); + transform: translateY(-1px); + } + + button:active { + transform: translateY(0); + } + + .footer-controls { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 15px; + margin-top: 20px; + } + + .format-toggles { + display: flex; + gap: 15px; + } + + .format-toggle { + display: flex; + align-items: center; + gap: 10px; + background: var(--secondary-color); + padding: 8px 12px; + border-radius: 6px; + font-size: 14px; + } + + .toggle-switch { + position: relative; + display: inline-block; + width: 50px; + height: 24px; + } + + .toggle-switch input { + opacity: 0; + width: 0; + height: 0; + } + + .toggle-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + transition: 0.4s; + border-radius: 24px; + } + + .toggle-slider:before { + position: absolute; + content: ""; + height: 16px; + width: 16px; + left: 4px; + bottom: 4px; + background-color: white; + transition: 0.4s; + border-radius: 50%; + } + + input:checked + .toggle-slider { + background-color: var(--primary-color); + } + + input:checked + .toggle-slider:before { + transform: translateX(26px); + } + + table { + width: 100%; + border-collapse: separate; + border-spacing: 0; + margin-top: 20px; + overflow: hidden; + border-radius: 8px; + } + + th { + background-color: var(--primary-color); + color: white; + font-weight: 500; + padding: 15px; + text-align: left; + position: sticky; + top: 0; + } + + td { + padding: 12px 15px; + border-bottom: 1px solid var(--border-color); + text-align: left; + vertical-align: middle; + } + + tr:last-child td { + border-bottom: none; + } + + tr:hover td { + background-color: var(--secondary-color); + } + + .today-row { + background-color: var(--today-bg); + } + + .yesterday-row { + background-color: var(--yesterday-bg); + } + + a { + color: var(--primary-color); + text-decoration: none; + font-weight: 500; + } + + a:hover { + text-decoration: underline; + } + +.badge { + display: inline-block; + padding: 3px 8px; + border-radius: 12px; + font-size: 16px; /* Increased font size */ + font-weight: 500; + background-color: #e0e0e0; + color: var(--text-color); +} + +.badge-withheld { + background-color: #ffebee; + color: #c62828; + font-size: 16px; /* Match font size */ +} + +.badge-private { + background-color: #fff8e1; + color: #ff8f00; + font-size: 16px; /* Match font size */ +} + + + + .status-bar { + padding: 10px; + background-color: var(--secondary-color); + border-radius: 6px; + text-align: center; + font-size: 14px; + color: var(--light-text); + } + + @media (max-width: 768px) { + .controls { + flex-direction: column; + align-items: stretch; + } + + .select-container, + .btn-container { + flex-direction: column; + } + + select, + button { + width: 100%; + } + + .footer-controls { + flex-direction: column; + } + + .format-toggles { + width: 100%; + justify-content: space-between; + } + + .format-toggle { + flex-grow: 1; + justify-content: center; + } + + th, + td { + padding: 10px 12px; + font-size: 14px; + } + } + + @media (max-width: 480px) { + .container { + padding: 15px; + } + + h1 { + font-size: 1.5rem; + } + + .format-toggles { + flex-direction: column; + gap: 8px; + } + + th, + td { + padding: 8px 10px; + font-size: 13px; + } + } + + /* Animation for new rows */ + @keyframes fadeIn { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } + } + + .new-call { + animation: fadeIn 0.5s ease-out; + } + +
+

📞 Caller ID Log

+ +
+
+ + + +
+ +
+ + + +
+
-

Phone Log

- - - - - - - - - - - + + + + + + + + + + + + +
DateTimeNumberName
Loading...
DateTimeNumberCaller
Loading call log...
- +
+
+
+ UK (DD/MM) + + US (MM/DD) +
- +
+ 12-hour + + 24-hour +
- + +
+ Who-Called.co.uk Lookup + +
+
- + const displayNumber = formatNumber(number); + const trimmedName = name.trim() === "" ? "NO NAME" : name.trim(); + let nameDisplay = trimmedName; + if ( + whoCalledEnabled && + !["WITHHELD", "PRIVATE", "NO NAME"].includes(trimmedName) + ) { + const lookupUrl = whoCalledLookupUrl(number); + nameDisplay = `${trimmedName}`; + } + + // Highlight today's and yesterday's calls with background color + let rowClass = ""; + if (dateObj.toDateString() === today.toDateString()) { + rowClass = "today-row"; + } else if (dateObj.toDateString() === yesterday.toDateString()) { + rowClass = "yesterday-row"; + } + + // Highlight new calls since last load + const isNewCall = index < newCallsCount; + + const tr = document.createElement("tr"); + if (rowClass) tr.classList.add(rowClass); + if (isNewCall) tr.classList.add("new-call"); + + tr.innerHTML = ` + ${formatDate(date, dateFormat)} + ${formatTime(time, timeFormat)} + ${displayNumber} + ${nameDisplay} + `; + logBody.appendChild(tr); + } + }); + + if (totalFiltered === 0) { + logBody.innerHTML = `No calls match the filter criteria.`; + } + + updateStatusBar(logLines.length, totalFiltered); + + // Play beep if new calls arrived + if (newCallsCount > 0) { + const beep = document.getElementById("beepSound"); + beep.play().catch(() => { + // Audio playback might be blocked by browser autoplay policy + }); + } + } catch (error) { + console.error("Error loading call log:", error); + document.getElementById("logBody").innerHTML = ` + + Error loading call log. Please try refreshing. + + `; + } + } + + function downloadLog() { + if (!previousLog) { + alert("Call log is not loaded yet."); + return; + } + const blob = new Blob([previousLog], { type: "text/plain" }); + const url = URL.createObjectURL(blob); + const a = document.createElement("a"); + a.href = url; + a.download = `cidcall-${new Date().toISOString().slice(0, 10)}.log`; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + URL.revokeObjectURL(url); + } + +