body {
background: #FAF5FC;
min-height: 100vh;
padding: 2rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
}
.datetime-bar {
text-align: center;
color: #9A6A88;
font-size: 0.95rem;
margin-bottom: 0.8rem;
padding-bottom: 0.5rem;
border-bottom: 1px dashed #F0D9E8;
}
.date-text { font-weight: 500; }
.time-text {
font-weight: 600;
color: #B86A98;
font-size: 1.05rem;
margin-left: 0.5rem;
}
.notepad-wrap {
width: 620px;
background: #FFF8FC;
border-radius: 24px;
padding: 1.5rem 1.8rem;
box-shadow: 0 8px 32px rgba(216, 168, 196, 0.25);
border: 2px solid #F4E6EF;
}
.notepad-title {
text-align: center;
font-size: 1.6rem;
color: #B86A98;
font-weight: 600;
margin-bottom: 0.3rem;
}
.note-editor {
width: 100%;
min-height: 260px;
padding: 1rem;
border-radius: 16px;
border: 2px solid #F0D9E8;
background: #FFFFFF;
font-size: 0.95rem;
line-height: 1.8;
color: #5A3F50;
outline: none;
margin-bottom: 0.8rem;
white-space: pre-wrap !important;
word-wrap: break-word;
overflow-wrap: break-word;
}
.note-editor:focus {
border-color: #D898BC;
box-shadow: 0 0 0 4px rgba(216, 152, 188, 0.15);
}
.note-editor:empty:before {
content: "✍️ Type freely — ENTER for new lines! All spacing saved exactly! ✨";
color: #D4B8C8;
pointer-events: none;
}
.btn-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.icon-save-btn {
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
background: linear-gradient(135deg, #E8A8D0, #D488B8);
color: #fff;
font-size: 1.2rem;
cursor: pointer;
transition: all 0.3s ease;
}
.icon-save-btn:hover { transform: scale(1.08); }
.status-text {
font-size: 0.85rem;
color: #779977;
min-height: 1.2rem;
}
.recall-section {
width: 620px;
background: #F0F4FC;
border-radius: 24px;
padding: 1.3rem 1.8rem;
box-shadow: 0 6px 24px rgba(136, 168, 196, 0.2);
border: 2px solid #DCE8F8;
}
.recall-title {
font-size: 1rem;
color: #5878A8;
font-weight: 600;
margin-bottom: 0.7rem;
padding-bottom: 0.4rem;
border-bottom: 1px dashed #D0E0F0;
}
.recall-desc {
font-size: 0.85rem;
color: #7898C8;
margin-bottom: 0.8rem;
line-height: 1.5;
}
.recall-btn {
padding: 0.6rem 1.6rem;
border-radius: 50px;
border: none;
background: linear-gradient(135deg, #88B8E8, #6898D8);
color: #fff;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.recall-btn:hover { transform: scale(1.05); }
/* ✅ ONE SMALL BUBBLE — TWO TIMERS INSIDE */
.single-timer-bubble {
width: 320px;
border-radius: 24px;
background: rgba(255,255,255,0.92);
box-shadow: 0 6px 24px rgba(106, 88, 128, 0.15);
border: 2px solid #E8E0F0;
padding: 1.2rem;
display: flex;
flex-direction: column;
gap: 1rem;
position: relative;
}
.timer-section {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
position: relative;
}
.timer-divider {
height: 1px;
background: linear-gradient(90deg, transparent, #D8C8E0, transparent);
width: 80%;
margin: 0.1rem auto;
}
.time-display {
font-size: 2.4rem;
color: #6A5880;
font-weight: 600;
}
.time-display.blink-red {
color: #B00020;
animation: redGlow 0.6s infinite alternate;
}
@keyframes redGlow {
0% { text-shadow: 0 0 4px #B00020, 0 0 8px #B00020; }
100% { text-shadow: 0 0 8px #B00020, 0 0 16px #FF4060; }
}
.status {
font-size: 0.8rem;
color: #9A82B2;
}
.btn-row {
display: flex;
gap: 0.5rem;
margin-top: 0.2rem;
}
.btn {
padding: 0.45rem 1rem;
font-size: 0.8rem;
border: none;
border-radius: 50px;
background: linear-gradient(90deg, #B8A8CC, #9A82B2);
color: #fff;
cursor: pointer;
transition: transform 0.2s;
}
.btn:hover { transform: scale(1.05); }
.btn.reset {
background: linear-gradient(90deg, #E0B0C0, #C08898);
}
.popup {
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%) scale(0.8);
padding: 0.4rem 0.7rem;
background: #3A3A3C;
color: #fff;
border-radius: 16px;
font-size: 0.75rem;
opacity: 0;
transition: all 0.3s ease;
pointer-events: none;
white-space: nowrap;
}
.popup.show {
opacity: 1;
transform: translateX(-50%) scale(1);
}
.saved-section-wrap {
width: 620px;
background: #FFF8FC;
border-radius: 24px;
padding: 1.5rem 1.8rem;
box-shadow: 0 8px 32px rgba(216, 168, 196, 0.25);
border: 2px solid #F4E6EF;
}
.saved-section-title {
font-size: 1rem;
color: #B86A98;
font-weight: 600;
margin-bottom: 0.8rem;
padding-bottom: 0.4rem;
border-bottom: 1px dashed #F0D9E8;
}
.saved-notes-list {
display: flex;
flex-direction: column;
gap: 0.9rem;
max-height: 320px;
overflow-y: auto;
padding-right: 0.3rem;
}
.saved-notes-list::-webkit-scrollbar {
width: 6px;
}
.saved-notes-list::-webkit-scrollbar-track {
background: #FAF0F6;
border-radius: 10px;
}
.saved-notes-list::-webkit-scrollbar-thumb {
background: #E0BFD0;
border-radius: 10px;
}
.saved-note-card {
background: #FFF;
border: 1px solid #F0D9E8;
border-radius: 14px;
padding: 1rem 1.1rem;
position: relative;
width: 100%;
overflow: hidden;
}
.saved-note-preview {
font-size: 0.9rem;
color: #5A3F50;
line-height: 1.6;
white-space: pre-wrap !important;
word-wrap: break-word;
overflow-wrap: break-word;
max-height: 5rem;
overflow: hidden;
border-bottom: 1px dashed #F4E6EF;
padding-bottom: 0.5rem;
}
.saved-note-date {
font-size: 0.75rem;
color: #C8A8B8;
margin-top: 0.5rem;
}
.saved-note-actions {
position: absolute;
top: 0.8rem;
right: 0.8rem;
display: flex;
gap: 0.4rem;
}
.small-action-btn {
border: none;
background: #F8EEF4;
color: #B86A98;
font-size: 0.7rem;
padding: 0.28rem 0.5rem;
border-radius: 7px;
cursor: pointer;
transition: background 0.2s;
}
.small-action-btn:hover {
background: #F4D8E8;
}
.empty-notes-msg {
text-align: center;
color: #D4B8C8;
font-size: 0.9rem;
padding: 2rem;
font-style: italic;
}
<div class="timer-divider"></div>
<!-- TIMER B — BOTTOM -->
<div class="timer-section">
<div class="popup" id="popupB"></div>
<div class="time-display" id="dispB">2:00</div>
<div class="status" id="statB">Ready — Timer B</div>
<div class="btn-row">
<button class="btn" id="btnB">Start</button>
<button class="btn reset" id="resetB">Reset</button>
</div>
</div>
Offline Notepad
View raw