TheDoc Notes App

Open In Editor Publish Your Code Need a Website?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TheDoc Notes - Secure Document Management</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        
        <div id="loginForm" class="form-container">
            <div class="form-header">
                <h1>TheDoc Portal</h1>
                <p>Access your secure document vault</p>
            </div>
            
            <form id="loginFormElement">
                <div class="input-group">
                    <label for="loginUsername">Username</label>
                    <input type="text" id="loginUsername" name="username" placeholder="Enter your TheDoc ID" required>
                </div>
                
                <div class="input-group">
                    <label for="loginPassword">Password</label>
                    <input type="password" id="loginPassword" name="password" placeholder="Enter your secure key" required>
                </div>
                
                <button type="submit" class="btn-primary">Access TheDoc Vault</button>
                
                <p class="form-switch">
                    New to TheDoc? <a href="#" id="showRegister">Create Account</a>
                </p>
            </form>
        </div>

<div id="registerForm" class="form-container hidden">
            <div class="form-header">
                <h1>Join TheDoc</h1>
                <p>Create your secure document account</p>
            </div>
            
            <form id="registerFormElement">
                <div class="input-group">
                    <label for="registerUsername">Choose Username</label>
                    <input type="text" id="registerUsername" name="username" placeholder="Your TheDoc identifier" required>
                </div>
                
                <div class="input-group">
                    <label for="registerPassword">Create Password</label>
                    <input type="password" id="registerPassword" name="password" placeholder="Secure your TheDoc vault" required>
                </div>
                
                <div class="input-group">
                    <label for="confirmPassword">Confirm Password</label>
                    <input type="password" id="confirmPassword" name="confirmPassword" placeholder="Verify your secure key" required>
                </div>
                
                <button type="submit" class="btn-primary">Create TheDoc Account</button>
                
                <p class="form-switch">
                    Already have TheDoc access? <a href="#" id="showLogin">Sign In</a>
                </p>
            </form>
        </div>

<div id="notesApp" class="notes-container hidden">
            <header class="app-header">
                <h1>TheDoc Notes</h1>
                <div class="header-controls">
                    <span id="welcomeUser">Welcome to TheDoc</span>
                    <button id="logoutBtn" class="btn-secondary">Exit TheDoc</button>
                </div>
            </header>

<div class="notes-interface">
                <div class="notes-sidebar">
                    <div class="sidebar-header">
                        <h2>Document Archive</h2>
                        <button id="newNoteBtn" class="btn-primary">New Document</button>
                    </div>
                    
                    <div class="search-container">
                        <input type="text" id="searchNotes" placeholder="Search TheDoc archives...">
                    </div>
                    
                    <div id="notesList" class="notes-list">
                        
                    </div>
                </div>

<div class="notes-editor">
                    <div id="editorPlaceholder" class="editor-placeholder">
                        <h2>Welcome to TheDoc</h2>
                        <p>Your secure document management system</p>
                        <p>Select a document from the archive or create a new one to begin</p>
                    </div>
                    
                    <div id="noteEditor" class="note-editor hidden">
                        <div class="editor-header">
                            <input type="text" id="noteTitle" placeholder="Document title..." class="title-input">
                            <div class="editor-actions">
                                <button id="saveNoteBtn" class="btn-primary">Save Document</button>
                                <button id="deleteNoteBtn" class="btn-danger">Delete</button>
                            </div>
                        </div>
                        
                        <input id="noteContent" placeholder="Start writing your document..."/>
                        
                        <div class="editor-footer">
                            <span id="saveStatus">TheDoc AutoSave: Ready</span>
                            <span id="lastModified">Last modified: Never</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div id="toast" class="toast hidden">
        <span id="toastMessage"></span>
    </div>

<div id="deleteModal" class="modal-overlay">
        <div class="modal-content">
            <div class="modal-icon">
                <span>X</span>
            </div>
            <div class="modal-title">Confirm Deletion</div>
            <div class="modal-message">
                Are you sure you want to delete this document from TheDoc vault? This action cannot be undone.
            </div>
            <div class="modal-actions">
                <button id="confirmDeleteBtn" class="btn-confirm">Delete Document</button>
                <button id="cancelDeleteBtn" class="btn-cancel">Cancel</button>
            </div>
        </div>
    </div>

CSS

/* TheDoc Notes - Secure Document Management System */
/* Color Scheme inspired by TheDoc's professional aesthetic */

:root {
    --primary-color: #0f172a;
    --secondary-color: #1e293b;
    --accent-color: #0ea5e9;
    --success-color: #10b981;
    --danger-color: #ef4444;
    --warning-color: #f59e0b;
    --info-color: #06b6d4;
    --purple-color: #8b5cf6;
    --pink-color: #ec4899;
    --orange-color: #f97316;
    --teal-color: #14b8a6;
    --indigo-color: #6366f1;
    --cyan-color: #22d3ee;
    --light-bg: #f8fafc;
    --white: #ffffff;
    --text-dark: #e2e8f0;
    --text-light: #94a3b8;
    --border-color: #334155;
    --glass-bg: rgba(30, 41, 59, 0.8);
    --glass-border: rgba(148, 163, 184, 0.2);
    
    /* Dark Blue Work Theme Gradients */
    --gradient-primary: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
    --gradient-accent: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 50%, #22d3ee 100%);
    --gradient-success: linear-gradient(135deg, #10b981 0%, #14b8a6 50%, #22d3ee 100%);
    --gradient-danger: linear-gradient(135deg, #ef4444 0%, #f97316 50%, #f59e0b 100%);
    --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    --gradient-info: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%);
    --gradient-purple: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    --gradient-work: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 50%, #475569 75%, #64748b 100%);
    --gradient-bg: linear-gradient(135deg, #020617 0%, #0f172a 25%, #1e293b 50%, #334155 75%, #475569 100%);
    --gradient-overlay: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(6, 182, 212, 0.1) 50%, rgba(34, 211, 238, 0.1) 100%);
    
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.4);
    --shadow-colorful: 0 8px 25px rgba(14, 165, 233, 0.4);
    --shadow-glow: 0 0 30px rgba(14, 165, 233, 0.3);
    --border-radius: 12px;
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--gradient-bg);
    color: var(--text-dark);
    min-height: 100vh;
    line-height: 1.6;
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(14, 165, 233, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(6, 182, 212, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.1) 0%, transparent 50%);
    animation: workspaceFloat 30s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes workspaceFloat {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg);
        opacity: 0.7;
    }
    33% { 
        transform: translateY(-30px) rotate(120deg);
        opacity: 1;
    }
    66% { 
        transform: translateY(20px) rotate(240deg);
        opacity: 0.8;
    }
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    min-height: 100vh;
}

/* Authentication Forms */
.form-container {
    max-width: 400px;
    margin: 50px auto;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-glow);
    transition: var(--transition);
    border: 1px solid var(--glass-border);
    position: relative;
    overflow: hidden;
}

.form-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-overlay);
    opacity: 0;
    transition: var(--transition);
    pointer-events: none;
}

.form-container:hover::before {
    opacity: 1;
}

.form-container:hover {
    box-shadow: var(--shadow-glow), 0 0 50px rgba(14, 165, 233, 0.2);
    transform: translateY(-5px);
    border-color: rgba(14, 165, 233, 0.3);
}

.form-header {
    text-align: center;
    margin-bottom: 30px;
}

.form-header h1 {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
    font-size: 2.2rem;
    font-weight: 600;
    text-align: center;
    filter: drop-shadow(0 2px 4px rgba(14, 165, 233, 0.3));
}

.form-header p {
    color: var(--text-light);
    font-size: 1rem;
}

.input-group {
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-dark);
    font-weight: 500;
}

.input-group input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 1rem;
    transition: var(--transition);
    background: rgba(15, 23, 42, 0.6);
    color: var(--text-dark);
    backdrop-filter: blur(10px);
}

.input-group input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2), var(--shadow-glow);
    background: rgba(15, 23, 42, 0.8);
}

.input-group input::placeholder {
    color: var(--text-light);
}

.btn-primary, .btn-secondary, .btn-danger {
    padding: 12px 24px;
    border: none;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    display: inline-block;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: var(--gradient-accent);
    color: var(--white);
    width: 100%;
    box-shadow: var(--shadow-glow);
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gradient-success);
    transition: var(--transition);
    z-index: -1;
}

.btn-primary:hover::before {
    left: 0;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow), 0 0 40px rgba(14, 165, 233, 0.4);
}

.btn-secondary {
    background: var(--gradient-work);
    color: var(--text-dark);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background: var(--gradient-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.btn-danger {
    background: var(--gradient-danger);
    color: var(--white);
}

.btn-danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.4);
}

.form-switch {
    text-align: center;
    margin-top: 20px;
    color: var(--text-light);
}

.form-switch a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
}

.form-switch a:hover {
    text-decoration: underline;
}

/* Notes Application */
.notes-container {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-glow);
    overflow: hidden;
    height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--glass-border);
}

.app-header {
    background: var(--gradient-primary);
    color: var(--text-dark);
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border-color);
}

.app-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-accent);
    opacity: 0;
    transition: var(--transition);
    z-index: -1;
}

.app-header:hover::before {
    opacity: 0.3;
}

.app-header h1 {
    font-size: 1.8rem;
    font-weight: 600;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 20px;
}

.notes-interface {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.notes-sidebar {
    width: 350px;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(15px);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

.sidebar-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(15, 23, 42, 0.3);
}

.sidebar-header h2 {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.3rem;
}

.sidebar-header .btn-primary {
    width: auto;
    padding: 8px 16px;
    font-size: 0.9rem;
}

.search-container {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}

.search-container input {
    width: 100%;
    padding: 10px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    background: rgba(15, 23, 42, 0.6);
    color: var(--text-dark);
    backdrop-filter: blur(10px);
}

.search-container input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 15px rgba(14, 165, 233, 0.4);
    background: rgba(15, 23, 42, 0.8);
}

.search-container input::placeholder {
    color: var(--text-light);
}

.notes-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.note-item {
    padding: 15px;
    margin-bottom: 8px;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.note-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gradient-accent);
    transition: var(--transition);
    z-index: -1;
    opacity: 0.1;
}

.note-item:hover::before {
    left: 0;
    opacity: 0.2;
}

.note-item:hover {
    transform: translateX(8px) scale(1.02);
    box-shadow: var(--shadow-glow);
    border-color: var(--accent-color);
    background: rgba(15, 23, 42, 0.8);
}

.note-item.active {
    border-color: var(--accent-color);
    background: rgba(14, 165, 233, 0.2);
    transform: scale(1.02);
    box-shadow: var(--shadow-glow);
}

.note-item:nth-child(odd) {
    border-left: 3px solid var(--accent-color);
}

.note-item:nth-child(even) {
    border-left: 3px solid var(--teal-color);
}

.note-item:nth-child(3n) {
    border-left: 3px solid var(--cyan-color);
}

.note-item:nth-child(4n) {
    border-left: 3px solid var(--info-color);
}

.note-item:nth-child(5n) {
    border-left: 3px solid var(--purple-color);
}

.note-title {
    font-weight: 600;
    color: inherit;
    margin-bottom: 5px;
    font-size: 1rem;
}

.note-preview {
    color: inherit;
    opacity: 0.8;
    font-size: 0.85rem;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.note-date {
    color: inherit;
    opacity: 0.6;
    font-size: 0.75rem;
    margin-top: 8px;
}

.notes-editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(15px);
}

.editor-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--text-light);
    text-align: center;
    padding: 40px;
}

.editor-placeholder h2 {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 15px;
    font-size: 2rem;
}

.note-editor {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.editor-header {
    padding: 20px 30px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.title-input {
    flex: 1;
    padding: 12px 10px;
    border: 1px solid var(--border-color);
    font-size: 1.5rem;
    font-weight: 600;
    background: rgba(15, 23, 42, 0.6);
    color: var(--text-dark);
    border-radius: var(--border-radius);
    transition: var(--transition);
    backdrop-filter: blur(10px);
}

.title-input:focus {
    background: rgba(15, 23, 42, 0.8);
    border-color: var(--accent-color);
    box-shadow: 0 0 15px rgba(14, 165, 233, 0.3);
    outline: none;
}

.title-input::placeholder {
    color: var(--text-light);
}

.editor-actions {
    display: flex;
    gap: 10px;
}

.editor-actions .btn-primary,
.editor-actions .btn-danger {
    width: auto;
    padding: 8px 16px;
    font-size: 0.9rem;
}

#noteContent {
    flex: 1;
    padding: 30px;
    border: none;
    resize: none;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-dark);
    background: rgba(15, 23, 42, 0.3);
    font-family: inherit;
    transition: var(--transition);
    backdrop-filter: blur(10px);
}

#noteContent:focus {
    background: rgba(15, 23, 42, 0.5);
    box-shadow: inset 0 0 20px rgba(14, 165, 233, 0.1);
    outline: none;
}

#noteContent::placeholder {
    color: var(--text-light);
}

.editor-footer {
    padding: 15px 30px;
    border-top: 1px solid var(--border-color);
    background: var(--gradient-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-dark);
}

/* Toast Notifications */
.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--gradient-success);
    color: var(--white);
    padding: 15px 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-glow);
    z-index: 1000;
    transform: translateX(400px);
    transition: var(--transition);
    border-left: 4px solid var(--success-color);
    backdrop-filter: blur(10px);
}

.toast.show {
    transform: translateX(0);
    animation: toastSlideGlow 0.5s ease-in-out;
}

.toast.error {
    background: var(--gradient-danger);
    border-left-color: var(--danger-color);
}

.toast.warning {
    background: var(--gradient-warning);
    border-left-color: var(--warning-color);
}

.toast.info {
    background: var(--gradient-info);
    border-left-color: var(--info-color);
}

@keyframes toastSlideGlow {
    0% { 
        transform: translateX(0) scale(1);
        box-shadow: var(--shadow-glow);
    }
    50% { 
        transform: translateX(0) scale(1.05);
        box-shadow: var(--shadow-glow), 0 0 30px rgba(14, 165, 233, 0.5);
    }
    100% { 
        transform: translateX(0) scale(1);
        box-shadow: var(--shadow-glow);
    }
}

/* Delete Confirmation Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: var(--border-radius);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glow), 0 0 50px rgba(14, 165, 233, 0.3);
    padding: 30px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    position: relative;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    0% {
        transform: translateY(-50px) scale(0.9);
        opacity: 0;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.modal-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    background: var(--gradient-danger);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--white);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}

.modal-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 10px;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.modal-message {
    color: var(--text-light);
    margin-bottom: 25px;
    line-height: 1.5;
}

.modal-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.btn-confirm {
    background: var(--gradient-danger);
    color: var(--white);
    padding: 10px 20px;
    border: none;
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    min-width: 100px;
}

.btn-confirm:hover {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.5);
}

.btn-cancel {
    background: var(--gradient-work);
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    padding: 10px 20px;
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    min-width: 100px;
}

.btn-cancel:hover {
    background: var(--gradient-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

/* Utility Classes */
.hidden {
    display: none !important;
}

/* Floating particles effect */
.container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(14, 165, 233, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(34, 211, 238, 0.1) 0%, transparent 50%);
    animation: workFloat 25s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes workFloat {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg);
        opacity: 0.5;
    }
    33% { 
        transform: translateY(-25px) rotate(120deg);
        opacity: 0.8;
    }
    66% { 
        transform: translateY(15px) rotate(240deg);
        opacity: 0.6;
    }
}

/* Professional scrollbar */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.3);
}

::-webkit-scrollbar-thumb {
    background: var(--gradient-accent);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gradient-success);
    background-clip: content-box;
}

/* Glow effect for buttons */
.btn-primary:hover,
.btn-secondary:hover,
.btn-danger:hover {
    box-shadow: 
        var(--shadow-glow),
        0 0 40px rgba(14, 165, 233, 0.4),
        0 0 80px rgba(14, 165, 233, 0.2);
}

/* Status indicator colors */
#saveStatus {
    position: relative;
}

#saveStatus::before {
    content: '●';
    color: var(--accent-color);
    margin-right: 5px;
    animation: workPulse 2s infinite;
}

@keyframes workPulse {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
        color: var(--accent-color);
    }
    50% { 
        opacity: 0.7; 
        transform: scale(1.1);
        color: var(--teal-color);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .notes-interface {
        flex-direction: column;
    }
    
    .notes-sidebar {
        width: 100%;
        height: 300px;
    }
    
    .sidebar-header {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    
    .editor-header {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    
    .editor-actions {
        justify-content: center;
    }
    
    .header-controls {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }
}

JS

// TheDoc Notes - Secure Document Management System
// Advanced client-side application with TheDoc integration

class TheDocNotesApp {
    constructor() {
        this.currentUser = null;
        this.currentNote = null;
        this.notes = [];
        this.autoSaveInterval = null;
        this.searchTimeout = null;
        
        // TheDoc specific configurations
        this.docPrefix = 'TheDoc_';
        this.vaultKey = 'TheDocVault_';
        this.userKey = 'TheDocUser_';
        
        this.init();
    }

init() {
        this.setupEventListeners();
        this.checkAuthStatus();
        this.loadStoredData();
    }

setupEventListeners() {
        // Authentication events
        document.getElementById('loginFormElement').addEventListener('submit', (e) => this.handleLogin(e));
        document.getElementById('registerFormElement').addEventListener('submit', (e) => this.handleRegister(e));
        document.getElementById('showRegister').addEventListener('click', (e) => this.showRegisterForm(e));
        document.getElementById('showLogin').addEventListener('click', (e) => this.showLoginForm(e));
        document.getElementById('logoutBtn').addEventListener('click', () => this.handleLogout());

// Notes application events
        document.getElementById('newNoteBtn').addEventListener('click', () => this.createNewNote());
        document.getElementById('saveNoteBtn').addEventListener('click', () => this.saveCurrentNote());
        document.getElementById('deleteNoteBtn').addEventListener('click', () => this.confirmDeleteCurrentNote());
        document.getElementById('searchNotes').addEventListener('input', (e) => this.handleSearch(e));
        
        // Editor events
        document.getElementById('noteTitle').addEventListener('input', () => this.scheduleAutoSave());
        document.getElementById('noteContent').addEventListener('input', () => this.scheduleAutoSave());
        
        // Keyboard shortcuts
        document.addEventListener('keydown', (e) => this.handleKeyboardShortcuts(e));

// Modal events
        document.getElementById('confirmDeleteBtn').addEventListener('click', () => this.deleteCurrentNote());
        document.getElementById('cancelDeleteBtn').addEventListener('click', () => this.closeDeleteModal());
    }

// Authentication Methods
    handleLogin(e) {
        e.preventDefault();
        const username = document.getElementById('loginUsername').value;
        const password = document.getElementById('loginPassword').value;

if (this.validateLogin(username, password)) {
            this.currentUser = username;
            localStorage.setItem(this.userKey + 'current', username);
            this.showNotesApp();
            this.showToast(`Welcome back to TheDoc, ${username}!`, 'success');
        } else {
            this.showToast('Invalid TheDoc credentials. Access denied.', 'error');
        }
    }

handleRegister(e) {
        e.preventDefault();
        const username = document.getElementById('registerUsername').value;
        const password = document.getElementById('registerPassword').value;
        const confirmPassword = document.getElementById('confirmPassword').value;

if (password !== confirmPassword) {
            this.showToast('TheDoc security keys do not match', 'error');
            return;
        }

if (password.length < 6) {
            this.showToast('TheDoc requires minimum 6 character security key', 'error');
            return;
        }

if (this.userExists(username)) {
            this.showToast('TheDoc ID already exists in the system', 'error');
            return;
        }

this.createUser(username, password);
        this.showToast(`TheDoc account created successfully for ${username}!`, 'success');
        this.showLoginForm();
    }

validateLogin(username, password) {
        const storedPassword = localStorage.getItem(this.docPrefix + 'user_' + username);
        return storedPassword === this.hashPassword(password);
    }

userExists(username) {
        return localStorage.getItem(this.docPrefix + 'user_' + username) !== null;
    }

createUser(username, password) {
        localStorage.setItem(this.docPrefix + 'user_' + username, this.hashPassword(password));
        // Initialize empty TheDoc vault for new user
        localStorage.setItem(this.vaultKey + username, JSON.stringify([]));
    }

hashPassword(password) {
        // Simple hash function for demo purposes (in production, use proper hashing)
        let hash = 0;
        for (let i = 0; i < password.length; i++) {
            const char = password.charCodeAt(i);
            hash = ((hash << 5) - hash) + char;
            hash = hash & hash; // Convert to 32-bit integer
        }
        return 'TheDoc_' + Math.abs(hash).toString(36);
    }

checkAuthStatus() {
        const currentUser = localStorage.getItem(this.userKey + 'current');
        if (currentUser && this.userExists(currentUser)) {
            this.currentUser = currentUser;
            this.showNotesApp();
        }
    }

handleLogout() {
        localStorage.removeItem(this.userKey + 'current');
        this.currentUser = null;
        this.currentNote = null;
        this.notes = [];
        this.clearAutoSave();
        this.showLoginForm();
        this.showToast('Successfully logged out of TheDoc', 'success');
    }

// UI Navigation Methods
    showLoginForm(e) {
        if (e) e.preventDefault();
        document.getElementById('loginForm').classList.remove('hidden');
        document.getElementById('registerForm').classList.add('hidden');
        document.getElementById('notesApp').classList.add('hidden');
        document.getElementById('loginUsername').focus();
    }

showRegisterForm(e) {
        if (e) e.preventDefault();
        document.getElementById('loginForm').classList.add('hidden');
        document.getElementById('registerForm').classList.remove('hidden');
        document.getElementById('notesApp').classList.add('hidden');
        document.getElementById('registerUsername').focus();
    }

showNotesApp() {
        document.getElementById('loginForm').classList.add('hidden');
        document.getElementById('registerForm').classList.add('hidden');
        document.getElementById('notesApp').classList.remove('hidden');
        
        document.getElementById('welcomeUser').textContent = `TheDoc Agent: ${this.currentUser}`;
        this.loadUserNotes();
        this.renderNotesList();
    }

// Notes Management Methods
    loadUserNotes() {
        const storedNotes = localStorage.getItem(this.vaultKey + this.currentUser);
        this.notes = storedNotes ? JSON.parse(storedNotes) : [];
        
        // Add default welcome note for new users
        if (this.notes.length === 0) {
            this.notes.push({
                id: this.generateNoteId(),
                title: 'Welcome to TheDoc',
                content: `Welcome to TheDoc - Your Secure Document Management System

This is your private document vault. Here you can:

• Create and organize your important documents
• Search through your document archive
• Secure your information with encrypted storage
• Access your documents anytime, anywhere

TheDoc Features:
- Advanced document encryption
- Real-time auto-save functionality
- Powerful search capabilities
- Professional document management
- Secure user authentication

Start by creating your first document or exploring the interface.

TheDoc - Where your documents are safe and secure.`,
                createdAt: new Date().toISOString(),
                modifiedAt: new Date().toISOString()
            });
            this.saveNotesToStorage();
        }
    }

saveNotesToStorage() {
        localStorage.setItem(this.vaultKey + this.currentUser, JSON.stringify(this.notes));
    }

generateNoteId() {
        return 'TheDoc_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
    }

createNewNote() {
        const newNote = {
            id: this.generateNoteId(),
            title: 'New Document',
            content: '',
            createdAt: new Date().toISOString(),
            modifiedAt: new Date().toISOString()
        };

this.notes.unshift(newNote);
        this.currentNote = newNote;
        this.renderNotesList();
        this.showNoteEditor();
        this.saveNotesToStorage();
        
        document.getElementById('noteTitle').focus();
        this.showToast('New TheDoc document created', 'success');
    }

selectNote(noteId) {
        this.saveCurrentNote(); // Save current note before switching
        this.currentNote = this.notes.find(note => note.id === noteId);
        this.showNoteEditor();
        this.updateActiveNoteInList(noteId);
    }

saveCurrentNote() {
        if (!this.currentNote) return;

const title = document.getElementById('noteTitle').value.trim() || 'Untitled Document';
        const content = document.getElementById('noteContent').value;

this.currentNote.title = title;
        this.currentNote.content = content;
        this.currentNote.modifiedAt = new Date().toISOString();

this.saveNotesToStorage();
        this.renderNotesList();
        this.updateSaveStatus('Saved to TheDoc vault');
        this.showToast('Document saved to TheDoc', 'success');
    }

confirmDeleteCurrentNote() {
        const modal = document.getElementById('deleteModal');
        modal.classList.add('show');
    }

closeDeleteModal() {
        const modal = document.getElementById('deleteModal');
        modal.classList.remove('show');
    }

deleteCurrentNote() {
        if (!this.currentNote) return;

this.notes = this.notes.filter(note => note.id !== this.currentNote.id);
        this.saveNotesToStorage();
        this.currentNote = null;
        this.renderNotesList();
        this.showEditorPlaceholder();
        this.showToast('Document removed from TheDoc', 'success');
        this.closeDeleteModal();
    }

// UI Rendering Methods
    renderNotesList() {
        const notesList = document.getElementById('notesList');
        notesList.innerHTML = '';

if (this.notes.length === 0) {
            notesList.innerHTML = '<div class="no-notes">No documents in TheDoc vault</div>';
            return;
        }

this.notes.forEach(note => {
            const noteElement = this.createNoteListItem(note);
            notesList.appendChild(noteElement);
        });
    }

createNoteListItem(note) {
        const noteElement = document.createElement('div');
        noteElement.className = 'note-item';
        noteElement.dataset.noteId = note.id;
        
        if (this.currentNote && this.currentNote.id === note.id) {
            noteElement.classList.add('active');
        }

const preview = note.content.length > 100 ? 
            note.content.substring(0, 100) + '...' : 
            note.content || 'Empty document';

noteElement.innerHTML = `
            <div class="note-title">${this.escapeHtml(note.title)}</div>
            <div class="note-preview">${this.escapeHtml(preview)}</div>
            <div class="note-date">Modified: ${this.formatDate(note.modifiedAt)}</div>
        `;

noteElement.addEventListener('click', () => this.selectNote(note.id));
        return noteElement;
    }

showNoteEditor() {
        if (!this.currentNote) return;

document.getElementById('editorPlaceholder').classList.add('hidden');
        document.getElementById('noteEditor').classList.remove('hidden');
        
        document.getElementById('noteTitle').value = this.currentNote.title;
        document.getElementById('noteContent').value = this.currentNote.content;
        
        this.updateLastModified();
        this.scheduleAutoSave();
    }

showEditorPlaceholder() {
        document.getElementById('editorPlaceholder').classList.remove('hidden');
        document.getElementById('noteEditor').classList.add('hidden');
        this.clearAutoSave();
    }

updateActiveNoteInList(noteId) {
        document.querySelectorAll('.note-item').forEach(item => {
            item.classList.remove('active');
        });
        
        const activeItem = document.querySelector(`[data-note-id="${noteId}"]`);
        if (activeItem) {
            activeItem.classList.add('active');
        }
    }

// Search and Filter Methods
    handleSearch(e) {
        clearTimeout(this.searchTimeout);
        this.searchTimeout = setTimeout(() => {
            this.performSearch(e.target.value);
        }, 300);
    }

performSearch(query) {
        const filteredNotes = query.trim() === '' ? 
            this.notes : 
            this.notes.filter(note => 
                note.title.toLowerCase().includes(query.toLowerCase()) ||
                note.content.toLowerCase().includes(query.toLowerCase())
            );

this.renderFilteredNotes(filteredNotes, query);
    }

renderFilteredNotes(filteredNotes, query) {
        const notesList = document.getElementById('notesList');
        notesList.innerHTML = '';

if (filteredNotes.length === 0) {
            notesList.innerHTML = query ? 
                '<div class="no-notes">No documents found in TheDoc vault</div>' : 
                '<div class="no-notes">No documents in TheDoc vault</div>';
            return;
        }

filteredNotes.forEach(note => {
            const noteElement = this.createNoteListItem(note);
            notesList.appendChild(noteElement);
        });
    }

// Auto-save and Status Methods
    scheduleAutoSave() {
        this.clearAutoSave();
        this.updateSaveStatus('TheDoc AutoSave: Changes detected...');
        
        this.autoSaveInterval = setTimeout(() => {
            if (this.currentNote) {
                this.saveCurrentNote();
            }
        }, 2000);
    }

clearAutoSave() {
        if (this.autoSaveInterval) {
            clearTimeout(this.autoSaveInterval);
            this.autoSaveInterval = null;
        }
    }

updateSaveStatus(status) {
        document.getElementById('saveStatus').textContent = status;
    }

updateLastModified() {
        if (this.currentNote) {
            const formatted = this.formatDate(this.currentNote.modifiedAt);
            document.getElementById('lastModified').textContent = `Last modified: ${formatted}`;
        }
    }

// Keyboard Shortcuts
    handleKeyboardShortcuts(e) {
        if (e.ctrlKey || e.metaKey) {
            switch(e.key) {
                case 's':
                    e.preventDefault();
                    if (this.currentNote) {
                        this.saveCurrentNote();
                    }
                    break;
                case 'n':
                    e.preventDefault();
                    if (document.getElementById('notesApp').classList.contains('hidden') === false) {
                        this.createNewNote();
                    }
                    break;
                case 'f':
                    e.preventDefault();
                    if (document.getElementById('notesApp').classList.contains('hidden') === false) {
                        document.getElementById('searchNotes').focus();
                    }
                    break;
            }
        }
    }

// Utility Methods
    formatDate(dateString) {
        const date = new Date(dateString);
        const now = new Date();
        const diffTime = Math.abs(now - date);
        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

if (diffDays === 1) {
            return 'Today';
        } else if (diffDays === 2) {
            return 'Yesterday';
        } else if (diffDays <= 7) {
            return `${diffDays - 1} days ago`;
        } else {
            return date.toLocaleDateString();
        }
    }

escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

showToast(message, type = 'success') {
        const toast = document.getElementById('toast');
        const toastMessage = document.getElementById('toastMessage');
        
        toastMessage.textContent = message;
        toast.className = `toast ${type}`;
        toast.classList.add('show');

setTimeout(() => {
            toast.classList.remove('show');
        }, 3000);
    }

loadStoredData() {
        // Pre-load any cached data or preferences for TheDoc
        const lastSearch = localStorage.getItem(this.docPrefix + 'lastSearch');
        if (lastSearch && this.currentUser) {
            document.getElementById('searchNotes').value = lastSearch;
        }
    }
}

// Initialize TheDoc Notes Application
document.addEventListener('DOMContentLoaded', () => {
    window.theDocApp = new TheDocNotesApp();
    
    // TheDoc branding in console
    console.log('%cTheDoc Notes System Initialized', 'color: #3498db; font-size: 16px; font-weight: bold;');
    console.log('%cSecure Document Management Active', 'color: #27ae60; font-size: 12px;');
});

TheDoc Notes App

Recommended

Password Generator from TheDoc

Happy Mother's day

weather app

HTML

CSS

JS

Recommended

Password Generator from TheDoc

Happy Mother's day

weather app

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS