Spaces:

sergotsev
/

calendar

Running

App Files Files Community

sergotsev commited on Mar 29, 2025

Commit

871b5c9

verified ·

1 Parent(s): 581ea5a

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +1417 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Calendar
-emoji: 🔥
-colorFrom: green
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: calendar
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1417 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Smart Calendar</title>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            /* Light theme */
+            --primary-color: #4285f4;
+            --secondary-color: #34a853;
+            --accent-color: #ea4335;
+            --background: #ffffff;
+            --surface: #f5f5f5;
+            --on-background: #212121;
+            --on-surface: #424242;
+            --border-color: #e0e0e0;
+            --card-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        [data-theme="dark"] {
+            --primary-color: #8ab4f8;
+            --secondary-color: #81c995;
+            --accent-color: #f28b82;
+            --background: #121212;
+            --surface: #1e1e1e;
+            --on-background: #e0e0e0;
+            --on-surface: #b0b0b0;
+            --border-color: #333333;
+            --card-shadow: 0 2px 10px rgba(0,0,0,0.3);
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            transition: background-color 0.3s, color 0.3s;
+        }
+        body {
+            font-family: 'Roboto', sans-serif;
+            background-color: var(--background);
+            color: var(--on-background);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+        header {
+            padding: 16px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background-color: var(--primary-color);
+            color: white;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+        }
+        .logo {
+            font-weight: 500;
+            font-size: 1.5rem;
+        }
+        .controls {
+            display: flex;
+            gap: 16px;
+        }
+        .icon-btn {
+            background: none;
+            border: none;
+            color: inherit;
+            cursor: pointer;
+            font-size: 1.2rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+        }
+        .icon-btn:hover {
+            background-color: rgba(255,255,255,0.1);
+        }
+        .tabs {
+            display: flex;
+            border-bottom: 1px solid var(--border-color);
+            background-color: var(--surface);
+        }
+        .tab {
+            flex: 1;
+            text-align: center;
+            padding: 16px;
+            cursor: pointer;
+            position: relative;
+            font-weight: 500;
+            color: var(--on-surface);
+        }
+        .tab.active {
+            color: var(--primary-color);
+        }
+        .tab.active::after {
+            content: '';
+            position: absolute;
+            bottom: -1px;
+            left: 0;
+            right: 0;
+            height: 3px;
+            background-color: var(--primary-color);
+        }
+        main {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+        .calendar-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 16px;
+            background-color: var(--surface);
+        }
+        .month-year {
+            font-weight: 500;
+            font-size: 1.2rem;
+        }
+        .weekdays {
+            display: grid;
+            grid-template-columns: repeat(7, 1fr);
+            text-align: center;
+            padding: 8px 0;
+            background-color: var(--surface);
+            color: var(--on-surface);
+            font-weight: 500;
+        }
+        .days {
+            display: grid;
+            grid-template-columns: repeat(7, 1fr);
+            grid-auto-rows: minmax(60px, 1fr);
+            flex: 1;
+        }
+        .day {
+            border: 1px solid var(--border-color);
+            padding: 4px;
+            display: flex;
+            flex-direction: column;
+            cursor: pointer;
+            position: relative;
+        }
+        .day.inactive {
+            color: var(--on-surface);
+            opacity: 0.5;
+        }
+        .day-number {
+            align-self: flex-end;
+            padding: 2px 6px;
+            border-radius: 50%;
+            margin-bottom: 4px;
+            font-size: 0.9rem;
+        }
+        .day.today .day-number {
+            background-color: var(--primary-color);
+            color: white;
+        }
+        .event-dot {
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            margin: 1px auto;
+        }
+        .work {
+            background-color: #4285f4;
+        }
+        .home {
+            background-color: #34a853;
+        }
+        .hobby {
+            background-color: #ea4335;
+        }
+        .other {
+            background-color: #fbbc05;
+        }
+        .floating-btn {
+            position: fixed;
+            bottom: 24px;
+            right: 24px;
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background-color: var(--primary-color);
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+            cursor: pointer;
+            border: none;
+            z-index: 10;
+        }
+        .floating-btn .material-icons {
+            font-size: 24px;
+        }
+        .modal {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: rgba(0,0,0,0.5);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 20;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s;
+        }
+        .modal.active {
+            opacity: 1;
+            pointer-events: all;
+        }
+        .modal-content {
+            background-color: var(--background);
+            border-radius: 8px;
+            width: 90%;
+            max-width: 500px;
+            max-height: 90vh;
+            overflow-y: auto;
+            transform: translateY(20px);
+            transition: transform 0.3s;
+        }
+        .modal.active .modal-content {
+            transform: translateY(0);
+        }
+        .modal-header {
+            padding: 16px;
+            border-bottom: 1px solid var(--border-color);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .modal-title {
+            font-weight: 500;
+            font-size: 1.2rem;
+        }
+        .modal-body {
+            padding: 16px;
+        }
+        .input-group {
+            margin-bottom: 16px;
+        }
+        .input-label {
+            display: block;
+            margin-bottom: 8px;
+            color: var(--on-surface);
+            font-size: 0.9rem;
+        }
+        .input-field {
+            width: 100%;
+            padding: 12px;
+            border: 1px solid var(--border-color);
+            border-radius: 4px;
+            background-color: var(--surface);
+            color: var(--on-background);
+            font-family: inherit;
+        }
+        .checkbox-group {
+            display: flex;
+            align-items: center;
+            margin-bottom: 8px;
+        }
+        .checkbox-label {
+            margin-left: 8px;
+            font-size: 0.9rem;
+            color: var(--on-surface);
+        }
+        .color-option {
+            display: inline-flex;
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            margin-right: 8px;
+            cursor: pointer;
+            position: relative;
+        }
+        .color-option.selected::after {
+            content: '✓';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: white;
+        }
+        .modal-footer {
+            padding: 16px;
+            border-top: 1px solid var(--border-color);
+            display: flex;
+            justify-content: flex-end;
+            gap: 8px;
+        }
+        .btn {
+            padding: 10px 16px;
+            border-radius: 4px;
+            border: none;
+            font-weight: 500;
+            cursor: pointer;
+            font-family: inherit;
+        }
+        .btn-primary {
+            background-color: var(--primary-color);
+            color: white;
+        }
+        .btn-secondary {
+            background-color: var(--surface);
+            color: var(--on-surface);
+        }
+        .participants-list {
+            max-height: 150px;
+            overflow-y: auto;
+            border: 1px solid var(--border-color);
+            border-radius: 4px;
+            margin-top: 8px;
+        }
+        .participant {
+            display: flex;
+            align-items: center;
+            padding: 8px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        .participant:last-child {
+            border-bottom: none;
+        }
+        .participant-avatar {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background-color: var(--primary-color);
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 8px;
+            font-size: 0.8rem;
+        }
+        .participant-name {
+            flex: 1;
+            font-size: 0.9rem;
+        }
+        .time-slots {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 8px;
+            margin-top: 8px;
+        }
+        .time-slot {
+            padding: 8px;
+            border: 1px solid var(--border-color);
+            border-radius: 4px;
+            text-align: center;
+            cursor: pointer;
+            background-color: var(--surface);
+            font-size: 0.8rem;
+        }
+        .time-slot.selected {
+            background-color: var(--primary-color);
+            color: white;
+            border-color: var(--primary-color);
+        }
+        .time-slot.unavailable {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        .todo-item {
+            display: flex;
+            align-items: center;
+            padding: 8px 0;
+            border-bottom: 1px solid var(--border-color);
+        }
+        .todo-item:last-child {
+            border-bottom: none;
+        }
+        .todo-checkbox {
+            margin-right: 8px;
+        }
+        .todo-text {
+            flex: 1;
+            font-size: 0.9rem;
+        }
+        .add-todo {
+            display: flex;
+            margin-top: 8px;
+        }
+        .add-todo-input {
+            flex: 1;
+            padding: 8px;
+            border: 1px solid var(--border-color);
+            border-radius: 4px;
+            margin-right: 8px;
+            background-color: var(--surface);
+            color: var(--on-background);
+        }
+        .day-events {
+            flex: 1;
+            overflow-y: auto;
+            max-height: 120px;
+            margin-top: 4px;
+            padding-top: 4px;
+            border-top: 1px dashed var(--border-color);
+        }
+        .day-event {
+            font-size: 0.7rem;
+            padding: 2px 4px;
+            margin-bottom: 2px;
+            border-radius: 2px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .day-event.work {
+            background-color: rgba(66, 133, 244, 0.1);
+            color: var(--primary-color);
+        }
+        .day-event.home {
+            background-color: rgba(52, 168, 83, 0.1);
+            color: var(--secondary-color);
+        }
+        .day-event.hobby {
+            background-color: rgba(234, 67, 53, 0.1);
+            color: var(--accent-color);
+        }
+        .day-event.other {
+            background-color: rgba(251, 188, 5, 0.1);
+            color: #fbbc05;
+        }
+        .mic-animation {
+            position: relative;
+            width: 24px;
+            height: 24px;
+        }
+        .mic-icon {
+            position: absolute;
+            font-size: 24px;
+            color: white;
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.1); }
+            100% { transform: scale(1); }
+        }
+        .loading {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 3px solid rgba(255,255,255,.3);
+            border-radius: 50%;
+            border-top-color: white;
+            animation: spin 1s ease-in-out infinite;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        @media (max-width: 600px) {
+            .time-slots {
+                grid-template-columns: repeat(2, 1fr);
+            }
+            .day-number {
+                font-size: 0.8rem;
+            }
+            .event-dot {
+                width: 5px;
+                height: 5px;
+            }
+        }
+        /* Animation classes */
+        .slide-in-right {
+            animation: slideInRight 0.3s forwards;
+        }
+        @keyframes slideInRight {
+            from { transform: translateX(100%); opacity: 0; }
+            to { transform: translateX(0); opacity: 1; }
+        }
+        .fade-in {
+            animation: fadeIn 0.3s forwards;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="logo">Smart Calendar</div>
+        <div class="controls">
+            <button class="icon-btn" id="theme-toggle">
+                <span class="material-icons">brightness_6</span>
+            </button>
+            <button class="icon-btn" id="search-btn">
+                <span class="material-icons">search</span>
+            </button>
+        </div>
+    </header>
+    <main>
+        <div class="tabs">
+            <div class="tab active" data-tab="personal">Личное</div>
+            <div class="tab" data-tab="team">Совместное</div>
+        </div>
+        <div class="calendar-header">
+            <button class="icon-btn" id="prev-month">
+                <span class="material-icons">chevron_left</span>
+            </button>
+            <div class="month-year" id="month-year">Июнь 2023</div>
+            <button class="icon-btn" id="next-month">
+                <span class="material-icons">chevron_right</span>
+            </button>
+        </div>
+        <div class="weekdays">
+            <div>Пн</div>
+            <div>Вт</div>
+            <div>Ср</div>
+            <div>Чт</div>
+            <div>Пт</div>
+            <div>Сб</div>
+            <div>Вс</div>
+        </div>
+        <div class="days" id="calendar-days">
+            <!-- Calendar days will be generated by JavaScript -->
+        </div>
+    </main>
+    <button class="floating-btn" id="add-event-btn">
+        <span class="material-icons">add</span>
+    </button>
+    <!-- Add Event Modal -->
+    <div class="modal" id="event-modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <div class="modal-title">Новое событие</div>
+                <button class="icon-btn close-modal">
+                    <span class="material-icons">close</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="input-group">
+                    <label class="input-label">Название</label>
+                    <input type="text" class="input-field" id="event-title" placeholder="Введите название">
+                </div>
+                <div class="input-group">
+                    <label class="input-label">Дата и время</label>
+                    <input type="datetime-local" class="input-field" id="event-datetime">
+                </div>
+                <div class="input-group">
+                    <label class="input-label">Категория</label>
+                    <div>
+                        <div class="color-option work selected" data-category="work" title="Работа"></div>
+                        <div class="color-option home" data-category="home" title="Дом"></div>
+                        <div class="color-option hobby" data-category="hobby" title="Хобби"></div>
+                        <div class="color-option other" data-category="other" title="Другое"></div>
+                    </div>
+                </div>
+                <div class="input-group">
+                    <label class="input-label">Место</label>
+                    <input type="text" class="input-field" id="event-location" placeholder="Место встречи">
+                </div>
+                <div class="input-group">
+                    <label class="input-label">Напоминание</label>
+                    <select class="input-field" id="event-reminder">
+                        <option value="none">Нет</option>
+                        <option value="15">15 минут до</option>
+                        <option value="30">30 минут до</option>
+                        <option value="60">1 час до</option>
+                        <option value="1440">1 день до</option>
+                    </select>
+                </div>
+                <div class="input-group">
+                    <label class="input-label">Описание</label>
+                    <textarea class="input-field" id="event-description" rows="3" placeholder="Дополнительные детали"></textarea>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-secondary close-modal">Отмена</button>
+                <button class="btn btn-primary" id="save-event">Сохранить</button>
+            </div>
+        </div>
+    </div>
+    <!-- Meeting Modal -->
+    <div class="modal" id="meeting-modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <div class="modal-title">Планирование встречи</div>
+                <button class="icon-btn close-modal">
+                    <span class="material-icons">close</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="input-group">
+                    <label class="input-label">Название встречи</label>
+                    <input type="text" class="input-field" id="meeting-title" placeholder="Введите название">
+                </div>
+                <div class="input-group">
+                    <label class="input-label">Участники</label>
+                    <div class="participants-list" id="participants-list">
+                        <div class="participant">
+                            <div class="participant-avatar">ИИ</div>
+                            <div class="participant-name">Иван Иванов</div>
+                            <button class="icon-btn remove-participant">
+                                <span class="material-icons">close</span>
+                            </button>
+                        </div>
+                        <div class="participant">
+                            <div class="participant-avatar">ПП</div>
+                            <div class="participant-name">Петр Петров</div>
+                            <button class="icon-btn remove-participant">
+                                <span class="material-icons">close</span>
+                            </button>
+                        </div>
+                    </div>
+                    <button class="btn btn-secondary" id="add-participant" style="margin-top: 8px; width: 100%;">
+                        <span class="material-icons" style="font-size: 1rem;">person_add</span> Добавить участника
+                    </button>
+                </div>
+                <div class="input-group">
+                    <label class="input-label">Дата</label>
+                    <input type="date" class="input-field" id="meeting-date">
+                </div>
+                <div class="input-group">
+                    <label class="input-label">Доступные слоты</label>
+                    <div class="time-slots" id="time-slots">
+                        <div class="time-slot">09:00 - 10:00</div>
+                        <div class="time-slot">10:00 - 11:00</div>
+                        <div class="time-slot unavailable">11:00 - 12:00</div>
+                        <div class="time-slot">12:00 - 13:00</div>
+                        <div class="time-slot selected">13:00 - 14:00</div>
+                        <div class="time-slot">14:00 - 15:00</div>
+                        <div class="time-slot">15:00 - 16:00</div>
+                        <div class="time-slot">16:00 - 17:00</div>
+                        <div class="time-slot unavailable">17:00 - 18:00</div>
+                    </div>
+                </div>
+                <div class="input-group">
+                    <label class="input-label">Место</label>
+                    <input type="text" class="input-field" id="meeting-location" placeholder="Место встречи">
+                </div>
+                <div class="input-group">
+                    <label class="input-label">Описание</label>
+                    <textarea class="input-field" id="meeting-description" rows="3" placeholder="Цель встречи"></textarea>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-secondary close-modal">Отмена</button>
+                <button class="btn btn-primary" id="send-invites">
+                    <span class="material-icons" style="font-size: 1rem; vertical-align: middle;">send</span> Отправить приглашения
+                </button>
+            </div>
+        </div>
+    </div>
+    <!-- Voice Input Modal -->
+    <div class="modal" id="voice-modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <div class="modal-title">Голосовой ввод</div>
+                <button class="icon-btn close-modal">
+                    <span class="material-icons">close</span>
+                </button>
+            </div>
+            <div class="modal-body" style="text-align: center; padding: 40px;">
+                <div class="mic-animation">
+                    <span class="material-icons mic-icon">mic</span>
+                </div>
+                <p style="margin-top: 20px; color: var(--on-surface);">Говорите сейчас...</p>
+                <div id="voice-text" style="margin-top: 20px; padding: 10px; border: 1px dashed var(--border-color); border-radius: 4px; min-height: 50px;"></div>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-secondary" id="stop-recording">
+                    <span class="material-icons" style="font-size: 1rem; vertical-align: middle;">stop</span> Остановить
+                </button>
+                <button class="btn btn-primary" id="use-voice-input">
+                    <span class="material-icons" style="font-size: 1rem; vertical-align: middle;">check</span> Использовать
+                </button>
+            </div>
+        </div>
+    </div>
+    <!-- Add Participant Modal -->
+    <div class="modal" id="participant-modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <div class="modal-title">Добавить участника</div>
+                <button class="icon-btn close-modal">
+                    <span class="material-icons">close</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="input-group">
+                    <label class="input-label">Поиск контактов</label>
+                    <input type="text" class="input-field" id="search-contact" placeholder="Имя или номер телефона">
+                </div>
+                <div class="input-group">
+                    <label class="input-label">Контакты</label>
+                    <div class="participants-list" id="contacts-list">
+                        <div class="participant">
+                            <div class="participant-avatar">СС</div>
+                            <div class="participant-name">Сергей Сергеев</div>
+                            <button class="btn btn-primary add-contact" style="padding: 4px 8px; font-size: 0.8rem;">
+                                <span class="material-icons" style="font-size: 1rem;">add</span>
+                            </button>
+                        </div>
+                        <div class="participant">
+                            <div class="participant-avatar">АА</div>
+                            <div class="participant-name">Анна Андреева</div>
+                            <button class="btn btn-primary add-contact" style="padding: 4px 8px; font-size: 0.8rem;">
+                                <span class="material-icons" style="font-size: 1rem;">add</span>
+                            </button>
+                        </div>
+                        <div class="participant">
+                            <div class="participant-avatar">ММ</div>
+                            <div class="participant-name">Мария Михайлова</div>
+                            <button class="btn btn-primary add-contact" style="padding: 4px 8px; font-size: 0.8rem;">
+                                <span class="material-icons" style="font-size: 1rem;">add</span>
+                            </button>
+                        </div>
+                        <div class="participant">
+                            <div class="participant-avatar">ДП</div>
+                            <div class="participant-name">Дмитрий Павлов</div>
+                            <button class="btn btn-primary add-contact" style="padding: 4px 8px; font-size: 0.8rem;">
+                                <span class="material-icons" style="font-size: 1rem;">add</span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-secondary close-modal">Отмена</button>
+                <button class="btn btn-primary" id="confirm-participants">Готово</button>
+            </div>
+        </div>
+    </div>
+    <!-- Event Details Modal -->
+    <div class="modal" id="details-modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <div class="modal-title">Детали события</div>
+                <button class="icon-btn close-modal">
+                    <span class="material-icons">close</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div style="margin-bottom: 16px;">
+                    <div style="font-size: 1.2rem; font-weight: 500; margin-bottom: 4px;" id="event-detail-title">Встреча с командой</div>
+                    <div style="display: flex; align-items: center; color: var(--on-surface); margin-bottom: 8px;">
+                        <span class="material-icons" style="font-size: 1rem; margin-right: 4px;">schedule</span>
+                        <span id="event-detail-time">15 июня, 14:00 - 15:30</span>
+                    </div>
+                    <div style="display: flex; align-items: center; color: var(--on-surface);">
+                        <span class="material-icons" style="font-size: 1rem; margin-right: 4px;">location_on</span>
+                        <span id="event-detail-location">Офис, переговорная 3</span>
+                    </div>
+                    <div style="margin-top: 8px;">
+                        <span class="day-event work" style="display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 0.7rem;">Работа</span>
+                    </div>
+                </div>
+                <div style="margin-bottom: 16px; border-top: 1px solid var(--border-color); padding-top: 16px;">
+                    <div style="font-size: 0.9rem; color: var(--on-surface);" id="event-detail-description">
+                        Обсуждение нового проекта и распределение задач между участниками команды.
+                    </div>
+                </div>
+                <div style="margin-bottom: 16px; border-top: 1px solid var(--border-color); padding-top: 16px;">
+                    <div style="font-weight: 500; margin-bottom: 8px;">Чек-лист</div>
+                    <div class="todo-item">
+                        <input type="checkbox" class="todo-checkbox" id="todo1" checked>
+                        <label for="todo1" class="todo-text" style="text-decoration: line-through;">Подготовить презентацию</label>
+                    </div>
+                    <div class="todo-item">
+                        <input type="checkbox" class="todo-checkbox" id="todo2">
+                        <label for="todo2" class="todo-text">Отправить план проекта</label>
+                    </div>
+                    <div class="todo-item">
+                        <input type="checkbox" class="todo-checkbox" id="todo3">
+                        <label for="todo3" class="todo-text">Обновить бюджет</label>
+                    </div>
+                    <div class="add-todo">
+                        <input type="text" class="add-todo-input" placeholder="Добавить новую задачу">
+                        <button class="btn btn-primary" style="padding: 8px;">
+                            <span class="material-icons" style="font-size: 1rem;">add</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-secondary" id="edit-event">
+                    <span class="material-icons" style="font-size: 1rem; vertical-align: middle;">edit</span> Редактировать
+                </button>
+                <button class="btn btn-primary" id="share-event">
+                    <span class="material-icons" style="font-size: 1rem; vertical-align: middle;">share</span> Поделиться
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Current date
+            let currentDate = new Date();
+            let currentMonth = currentDate.getMonth();
+            let currentYear = currentDate.getFullYear();
+            // Sample events data
+            let events = [
+                { id: 1, title: 'Совещание', date: new Date(currentYear, currentMonth, 10, 14, 0), category: 'work', location: 'Офис', reminder: '30' },
+                { id: 2, title: 'Покупки', date: new Date(currentYear, currentMonth, 15, 18, 0), category: 'home', location: 'ТЦ', reminder: '60' },
+                { id: 3, title: 'Тренировка', date: new Date(currentYear, currentMonth, 20, 9, 0), category: 'hobby', reminder: '15' },
+                { id: 4, title: 'Встреча с другом', date: new Date(currentYear, currentMonth, 5, 12, 0), category: 'other' },
+                { id: 5, title: 'Доклад', date: new Date(currentYear, currentMonth, 7, 11, 0), category: 'work', location: 'Конференц-зал' },
+                { id: 6, title: 'Ремонт', date: new Date(currentYear, currentMonth, 12, 8, 0), category: 'home', reminder: '1440' },
+                { id: 7, title: 'Фотосессия', date: new Date(currentYear, currentMonth, 18, 16, 0), category: 'hobby', location: 'Студия' },
+                { id: 8, title: 'Врач', date: new Date(currentYear, currentMonth, 22, 10, 0), category: 'other', reminder: '30' },
+                { id: 9, title: 'Презентация', date: new Date(currentYear, currentMonth, 25, 13, 0), category: 'work', location: 'Клиентский офис' },
+                { id: 10, title: 'Генеральная уборка', date: new Date(currentYear, currentMonth, 28, 9, 0), category: 'home' }
+            ];
+            // Sample meeting data
+            let sampleMeeting = {
+                title: 'Обсуждение проекта',
+                date: new Date(currentYear, currentMonth, 15, 14, 0),
+                participants: [
+                    { name: 'Иван Иванов', initials: 'ИИ' },
+                    { name: 'Петр Петров', initials: 'ПП' }
+                ],
+                location: 'Переговорная 3',
+                description: 'Обсуждение нового проекта и распределение задач'
+            };
+            // UI Elements
+            const monthYearElement = document.getElementById('month-year');
+            const calendarDays = document.getElementById('calendar-days');
+            const prevMonthButton = document.getElementById('prev-month');
+            const nextMonthButton = document.getElementById('next-month');
+            const addEventButton = document.getElementById('add-event-btn');
+            const tabs = document.querySelectorAll('.tab');
+            // Modals
+            const eventModal = document.getElementById('event-modal');
+            const meetingModal = document.getElementById('meeting-modal');
+            const voiceModal = document.getElementById('voice-modal');
+            const participantModal = document.getElementById('participant-modal');
+            const detailsModal = document.getElementById('details-modal');
+            const allModals = document.querySelectorAll('.modal');
+            // Close buttons
+            const closeModalButtons = document.querySelectorAll('.close-modal');
+            // Event form elements
+            const eventTitle = document.getElementById('event-title');
+            const eventDatetime = document.getElementById('event-datetime');
+            const eventLocation = document.getElementById('event-location');
+            const eventReminder = document.getElementById('event-reminder');
+            const eventDescription = document.getElementById('event-description');
+            const saveEventButton = document.getElementById('save-event');
+            // Meeting form elements
+            const meetingTitle = document.getElementById('meeting-title');
+            const meetingDate = document.getElementById('meeting-date');
+            const meetingLocation = document.getElementById('meeting-location');
+            const meetingDescription = document.getElementById('meeting-description');
+            const participantsList = document.getElementById('participants-list');
+            const addParticipantButton = document.getElementById('add-participant');
+            const sendInvitesButton = document.getElementById('send-invites');
+            // Voice input elements
+            const voiceText = document.getElementById('voice-text');
+            const stopRecordingButton = document.getElementById('stop-recording');
+            const useVoiceInputButton = document.getElementById('use-voice-input');
+            // Participant modal elements
+            const searchContact = document.getElementById('search-contact');
+            const contactsList = document.getElementById('contacts-list');
+            const confirmParticipantsButton = document.getElementById('confirm-participants');
+            // Details modal elements
+            const editEventButton = document.getElementById('edit-event');
+            const shareEventButton = document.getElementById('share-event');
+            // Theme toggle
+            const themeToggle = document.getElementById('theme-toggle');
+            // Initialize the calendar
+            function initCalendar() {
+                updateCalendar();
+                // Add event listeners
+                prevMonthButton.addEventListener('click', () => {
+                    currentMonth--;
+                    if (currentMonth < 0) {
+                        currentMonth = 11;
+                        currentYear--;
+                    }
+                    updateCalendar();
+                });
+                nextMonthButton.addEventListener('click', () => {
+                    currentMonth++;
+                    if (currentMonth > 11) {
+                        currentMonth = 0;
+                        currentYear++;
+                    }
+                    updateCalendar();
+                });
+                addEventButton.addEventListener('click', () => {
+                    const now = new Date();
+                    const defaultDate = new Date(now.getTime() + 60 * 60 * 1000); // 1 hour from now
+                    defaultDate.setMinutes(0, 0, 0);
+                    // Set default values
+                    eventTitle.value = '';
+                    eventDatetime.value = formatDatetimeInput(defaultDate);
+                    eventLocation.value = '';
+                    eventReminder.value = 'none';
+                    eventDescription.value = '';
+                    // Reset category selection
+                    document.querySelectorAll('.color-option').forEach(option => {
+                        option.classList.remove('selected');
+                    });
+                    document.querySelector('.color-option[data-category="work"]').classList.add('selected');
+                    // Select the personal tab when adding event
+                    document.querySelector('.tab[data-tab="personal"]').click();
+                    showModal(eventModal);
+                });
+                // Tab switching
+                tabs.forEach(tab => {
+                    tab.addEventListener('click', () => {
+                        tabs.forEach(t => t.classList.remove('active'));
+                        tab.classList.add('active');
+                        // Here you would normally filter events based on tab
+                        updateCalendar();
+                    });
+                });
+                // Category selection
+                document.querySelectorAll('.color-option').forEach(option => {
+                    option.addEventListener('click', () => {
+                        document.querySelectorAll('.color-option').forEach(opt => {
+                            opt.classList.remove('selected');
+                        });
+                        option.classList.add('selected');
+                    });
+                });
+                // Save event
+                saveEventButton.addEventListener('click', () => {
+                    const title = eventTitle.value.trim();
+                    if (!title) {
+                        alert('Пожалуйста, введите название события');
+                        return;
+                    }
+                    const datetime = eventDatetime.value;
+                    if (!datetime) {
+                        alert('Пожалуйста, укажите дату и время');
+                        return;
+                    }
+                    const selectedCategory = document.querySelector('.color-option.selected').dataset.category;
+                    const eventDate = new Date(datetime);
+                    if (isNaN(eventDate.getTime())) {
+                        alert('Неверная дата и время');
+                        return;
+                    }
+                    const newEvent = {
+                        id: events.length + 1,
+                        title: title,
+                        date: eventDate,
+                        category: selectedCategory,
+                        location: eventLocation.value.trim(),
+                        reminder: eventReminder.value,
+                        description: eventDescription.value.trim()
+                    };
+                    events.push(newEvent);
+                    hideModal(eventModal);
+                    updateCalendar();
+                });
+                // Show meeting modal
+                document.getElementById('team').addEventListener('click', () => {
+                    meetingTitle.value = sampleMeeting.title;
+                    meetingDate.value = formatDateInput(sampleMeeting.date);
+                    meetingLocation.value = sampleMeeting.location;
+                    meetingDescription.value = sampleMeeting.description;
+                    // Populate participants
+                    participantsList.innerHTML = '';
+                    sampleMeeting.participants.forEach(participant => {
+                        participantsList.appendChild(createParticipantElement(participant.name, participant.initials));
+                    });
+                    showModal(meetingModal);
+                });
+                // Add participant button
+                addParticipantButton.addEventListener('click', () => {
+                    showModal(participantModal);
+                });
+                // Send invites button
+                sendInvitesButton.addEventListener('click', () => {
+                    sendInvitesButton.innerHTML = '<span class="loading"></span> Отправка...';
+                    sendInvitesButton.disabled = true;
+                    setTimeout(() => {
+                        hideModal(meetingModal);
+                        sendInvitesButton.innerHTML = '<span class="material-icons" style="font-size: 1rem; vertical-align: middle;">send</span> Отправить приглашения';
+                        sendInvitesButton.disabled = false;
+                        alert('Приглашения успешно отправлены!');
+                    }, 1500);
+                });
+                // Time slot selection
+                document.querySelectorAll('.time-slot:not(.unavailable)').forEach(slot => {
+                    slot.addEventListener('click', () => {
+                        document.querySelectorAll('.time-slot').forEach(s => {
+                            s.classList.remove('selected');
+                        });
+                        slot.classList.add('selected');
+                    });
+                });
+                // Voice recording simulation
+                document.querySelector('.color-option[data-category="work"]').addEventListener('dblclick', () => {
+                    showModal(voiceModal);
+                    voiceText.innerHTML = '';
+                    // Simulate voice recognition
+                    setTimeout(() => {
+                        voiceText.innerHTML = 'Встреча с командой проекта завтра в 14:00 в главном офисе';
+                    }, 2000);
+                });
+                stopRecordingButton.addEventListener('click', () => {
+                    hideModal(voiceModal);
+                });
+                useVoiceInputButton.addEventListener('click', () => {
+                    eventTitle.value = 'Встреча с командой проекта';
+                    eventDatetime.value = formatDatetimeInput(new Date(new Date().getTime() + 24 * 60 * 60 * 1000).setHours(14, 0, 0, 0));
+                    eventLocation.value = 'Главный офис';
+                    document.querySelectorAll('.color-option').forEach(opt => {
+                        opt.classList.remove('selected');
+                    });
+                    document.querySelector('.color-option[data-category="work"]').classList.add('selected');
+                    hideModal(voiceModal);
+                });
+                // Add contact
+                document.querySelectorAll('.add-contact').forEach(btn => {
+                    btn.addEventListener('click', (e) => {
+                        const participantElement = e.target.closest('.participant');
+                        const name = participantElement.querySelector('.participant-name').textContent;
+                        const initials = participantElement.querySelector('.participant-avatar').textContent;
+                        participantsList.appendChild(createParticipantElement(name, initials));
+                        hideModal(participantModal);
+                    });
+                });
+                // Close modal buttons
+                closeModalButtons.forEach(btn => {
+                    btn.addEventListener('click', () => {
+                        hideModal(btn.closest('.modal'));
+                    });
+                });
+                // Theme toggle
+                themeToggle.addEventListener('click', () => {
+                    if (document.body.hasAttribute('data-theme')) {
+                        document.body.removeAttribute('data-theme');
+                        themeToggle.innerHTML = '<span class="material-icons">brightness_6</span>';
+                    } else {
+                        document.body.setAttribute('data-theme', 'dark');
+                        themeToggle.innerHTML = '<span class="material-icons">brightness_5</span>';
+                    }
+                });
+            }
+            // Update calendar view
+            function updateCalendar() {
+                const firstDay = new Date(currentYear, currentMonth, 1);
+                const lastDay = new Date(currentYear, currentMonth + 1, 0);
+                const startDay = firstDay.getDay() === 0 ? 6 : firstDay.getDay() - 1; // Adjust so Monday is first
+                const totalDays = lastDay.getDate();
+                // Previous month days
+                const prevMonthLastDay = new Date(currentYear, currentMonth, 0).getDate();
+                // Next month days
+                const daysFromNextMonth = (7 - (startDay + totalDays) % 7) % 7;
+                // Update month and year display
+                const months = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
+                monthYearElement.textContent = `${months[currentMonth]} ${currentYear}`;
+                // Clear calendar
+                calendarDays.innerHTML = '';
+                // Add days from previous month
+                for (let i = startDay - 1; i >= 0; i--) {
+                    const day = createDayElement(prevMonthLastDay - i, true);
+                    calendarDays.appendChild(day);
+                }
+                // Add days from current month
+                for (let i = 1; i <= totalDays; i++) {
+                    const day = createDayElement(i, false);
+                    // Mark today
+                    const today = new Date();
+                    if (i === today.getDate() && currentMonth === today.getMonth() && currentYear === today.getFullYear()) {
+                        day.classList.add('today');
+                    }
+                    // Add events for this day
+                    const dayEvents = events.filter(event =>
+                        event.date.getDate() === i &&
+                        event.date.getMonth() === currentMonth &&
+                        event.date.getFullYear() === currentYear
+                    );
+                    if (dayEvents.length > 0) {
+                        const eventDots = document.createElement('div');
+                        dayEvents.forEach(event => {
+                            const dot = document.createElement('div');
+                            dot.className = `event-dot ${event.category}`;
+                            eventDots.appendChild(dot);
+                        });
+                        day.appendChild(eventDots);
+                        // For day view (details modal)
+                        if (dayEvents.length > 0) {
+                            const dayEventsContainer = document.createElement('div');
+                            dayEventsContainer.className = 'day-events';
+                            dayEvents.slice(0, 3).forEach(event => {
+                                const eventElement = document.createElement('div');
+                                eventElement.className = `day-event ${event.category}`;
+                                eventElement.textContent = event.title;
+                                dayEventsContainer.appendChild(eventElement);
+                            });
+                            if (dayEvents.length > 3) {
+                                const moreEvents = document.createElement('div');
+                                moreEvents.className = 'day-event other';
+                                moreEvents.textContent = `+${dayEvents.length - 3} ещё`;
+                                dayEventsContainer.appendChild(moreEvents);
+                            }
+                            day.appendChild(dayEventsContainer);
+                        }
+                    }
+                    // Add click event for details
+                    day.addEventListener('click', () => {
+                        if (dayEvents.length > 0) {
+                            const event = dayEvents[0]; // Show first event for simplicity
+                            // Set details
+                            document.getElementById('event-detail-title').textContent = event.title;
+                            const endTime = new Date(event.date);
+                            endTime.setHours(endTime.getHours() + 1);
+                            document.getElementById('event-detail-time').textContent = formatDateTimeRange(event.date, endTime);
+                            document.getElementById('event-detail-location').textContent = event.location || 'Место не указано';
+                            document.getElementById('event-detail-description').textContent = event.description || 'Описание отсутствует';
+                            showModal(detailsModal);
+                        }
+                    });
+                    calendarDays.appendChild(day);
+                }
+                // Add days from next month
+                for (let i = 1; i <= daysFromNextMonth; i++) {
+                    const day = createDayElement(i, true);
+                    calendarDays.appendChild(day);
+                }
+            }
+            // Helper functions
+            function createDayElement(dayNumber, inactive) {
+                const day = document.createElement('div');
+                day.className = 'day';
+                if (inactive) day.classList.add('inactive');
+                const dayNum = document.createElement('div');
+                dayNum.className = 'day-number';
+                dayNum.textContent = dayNumber;
+                day.appendChild(dayNum);
+                return day;
+            }
+            function createParticipantElement(name, initials) {
+                const participant = document.createElement('div');
+                participant.className = 'participant';
+                const avatar = document.createElement('div');
+                avatar.className = 'participant-avatar';
+                avatar.textContent = initials;
+                const nameElement = document.createElement('div');
+                nameElement.className = 'participant-name';
+                nameElement.textContent = name;
+                const removeBtn = document.createElement('button');
+                removeBtn.className = 'icon-btn remove-participant';
+                removeBtn.innerHTML = '<span class="material-icons">close</span>';
+                removeBtn.addEventListener('click', () => {
+                    participant.remove();
+                });
+                participant.appendChild(avatar);
+                participant.appendChild(nameElement);
+                participant.appendChild(removeBtn);
+                return participant;
+            }
+            function formatDatetimeInput(date) {
+                const d = new Date(date);
+                const year = d.getFullYear();
+                const month = String(d.getMonth() + 1).padStart(2, '0');
+                const day = String(d.getDate()).padStart(2, '0');
+                const hours = String(d.getHours()).padStart(2, '0');
+                const minutes = String(d.getMinutes()).padStart(2, '0');
+                return `${year}-${month}-${day}T${hours}:${minutes}`;
+            }
+            function formatDateInput(date) {
+                const d = new Date(date);
+                const year = d.getFullYear();
+                const month = String(d.getMonth() + 1).padStart(2, '0');
+                const day = String(d.getDate()).padStart(2, '0');
+                return `${year}-${month}-${day}`;
+            }
+            function formatDateTimeRange(start, end) {
+                const months = ['янв', 'фев', 'мар', 'апр', 'мая', 'июн', 'июл', 'авг', 'сен', 'окт', 'ноя', 'дек'];
+                const startDay = start.getDate();
+                const startMonth = months[start.getMonth()];
+                const startHours = String(start.getHours()).padStart(2, '0');
+                const startMinutes = String(start.getMinutes()).padStart(2, '0');
+                const endHours = String(end.getHours()).padStart(2, '0');
+                const endMinutes = String(end.getMinutes()).padStart(2, '0');
+                return `${startDay} ${startMonth}, ${startHours}:${startMinutes} - ${endHours}:${endMinutes}`;
+            }
+            function showModal(modal) {
+                modal.classList.add('active');
+                // Add animation class based on modal type
+                if (modal === voiceModal) {
+                    modal.querySelector('.modal-content').classList.add('fade-in');
+                } else {
+                    modal.querySelector('.modal-content').classList.add('slide-in-right');
+                }
+            }
+            function hideModal(modal) {
+                modal.classList.remove('active');
+                modal.querySelector('.modal-content').classList.remove('slide-in-right', 'fade-in');
+            }
+            // Touch events for swiping
+            let touchStartX = 0;
+            let touchEndX = 0;
+            document.addEventListener('touchstart', e => {
+                touchStartX = e.changedTouches[0].screenX;
+            }, {passive: true});
+            document.addEventListener('touchend', e => {
+                touchEndX = e.changedTouches[0].screenX;
+                handleSwipe();
+            }, {passive: true});
+            function handleSwipe() {
+                const threshold = 50;
+                if (touchEndX < touchStartX - threshold) {
+                    // Swipe left - next month
+                    nextMonthButton.click();
+                }
+                if (touchEndX > touchStartX + threshold) {
+                    // Swipe right - previous month
+                    prevMonthButton.click();
+                }
+            }
+            // Initialize the calendar
+            initCalendar();
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
+</html>