Offline Notepad View raw

Shared snapshot

NOTEPAD

.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: 1rem;
  white-space: pre-wrap !important;
  word-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! Saved exactly as typed! ✨"; color: #D4B8C8; pointer-events: none; }

.bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.status-text { font-size: 0.85rem; color: #779977; min-height: 1.2rem; flex: 1; }

.timers-bubble {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1.2rem;
  background: linear-gradient(135deg, #F6F0FB, #F0E6F8);
  border-radius: 50px;
  border: 2px solid #E0D0F0;
  box-shadow: 0 2px 12px rgba(154,130,178,0.15);
  position: relative;
}

.mini-timer { display: flex; align-items: center; gap: 0.4rem; position: relative; }
.mini-time {
  font-size: 1.15rem; font-weight: 700; color: #6A5880;
  min-width: 65px; text-align: center; font-variant-numeric: tabular-nums;
}
.mini-time.orange { color: #D4A017; }
.mini-time.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; }
}

.timer-popup {
  position: absolute;
  top: -48px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #FFE888, #FFD840);
  color: #886600;
  padding: 0.45rem 0.9rem;
  border-radius: 20px;
  font-size: 0.73rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 3px 12px rgba(200,150,0,0.3);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateX(-50%) translateY(5px);
  pointer-events: none;
  z-index: 10;
}
.timer-popup.show { 
  opacity: 1; 
  transform: translateX(-50%) translateY(0);
  animation: popBounce 0.4s ease;
}
@keyframes popBounce {
  0% { transform: translateX(-50%) scale(0.7); }
  50% { transform: translateX(-50%) scale(1.1); }
  100% { transform: translateX(-50%) scale(1); }
}

.mini-btn {
  padding: 0.3rem 0.6rem; font-size: 0.78rem; border: none;
  border-radius: 12px; background: linear-gradient(90deg, #B8A8CC, #9A82B2);
  color: #fff; cursor: pointer; transition: transform 0.2s;
}
.mini-btn:hover { transform: scale(1.05); }
.mini-btn.reset { background: linear-gradient(90deg, #E0B0C0, #C08898); }

.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;
}
.icon-save-btn:hover { transform: scale(1.08); }

.recall-section {
  width: 620px; background: #F0F4FC; border-radius: 24px;
  padding: 1.3rem 1.8rem; box-shadow: 0 2px 12px rgba(136,168,196,0.12);
  border: 2px solid #DCE8F8; border-bottom: 3px solid #B8C8E8; margin-bottom: 0.5rem;
}
.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; }
.recall-btn:hover { transform: scale(1.05); }

.backup-list-container { margin-top: 1rem; padding: 1rem; background: #FFF; border-radius: 14px; border: 1px solid #D0E0F0; display: none; }
.backup-list-container.show { display: block; }
.backup-item { padding: 0.7rem 0.9rem; border-radius: 8px; background: #F8FAFC; margin-bottom: 0.5rem; cursor: pointer; transition: background 0.2s; }
.backup-item:hover { background: #E8F0FC; }
.backup-date { font-size: 0.8rem; color: #5878A8; font-weight: 500; margin-bottom: 0.2rem; }
.backup-preview { font-size: 0.85rem; color: #6A7890; white-space: pre-wrap !important; word-wrap: break-word; max-height: 4.5rem; overflow: hidden; }
.no-backup-msg { font-size: 0.85rem; color: #B0B8C8; text-align: center; padding: 1rem; }

.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; margin-top: 0.5rem;
}
.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: 450px; 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; cursor: pointer; 
  transition: all 0.3s ease;
}
.saved-note-card:hover { border-color: #E0BFD0; box-shadow: 0 2px 8px rgba(184,106,152,0.1); }

.saved-note-preview { 
  font-size: 0.9rem; color: #5A3F50; line-height: 1.6; 
  white-space: pre-wrap !important; word-wrap: break-word;
  max-height: 5rem; overflow: hidden; transition: max-height 0.3s ease;
}
.saved-note-card.expanded .saved-note-preview { max-height: 9999px; }

.saved-note-expand-hint { font-size: 0.7rem; color: #C8A8B8; margin-top: 0.4rem; user-select: none; }
.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; }
.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="bottom-row">
  <div class="status-text" id="noteStatus"></div>
  
  <div class="timers-bubble">
    <div class="mini-timer">
      <div class="timer-popup" id="popupA"></div>
      <span class="mini-time" id="miniDispA">2:00</span>
      <button class="mini-btn" id="miniBtnA">Start</button>
      <button class="mini-btn reset" id="miniResetA">Reset</button>
    </div>
    <div class="mini-timer">
      <div class="timer-popup" id="popupB"></div>
      <span class="mini-time" id="miniDispB">2:00</span>
      <button class="mini-btn" id="miniBtnB">Start</button>
      <button class="mini-btn reset" id="miniResetB">Reset</button>
    </div>
  </div>

  <button class="icon-save-btn" id="saveBtn" title="Save Note">💾</button>
</div>