Added claudflare Turnstile captcha support

Cargo.lock

@@ -29,6 +29,15 @@ dependencies = [
  "zerocopy",
 ]
 
+[[package]]
+name = "aho-corasick"
+version = "1.1.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ddd31a130427c27518df266943a5308ed92d4b226cc639f5a8f1002816174301"
+dependencies = [
+ "memchr",
+]
+
 [[package]]
 name = "allocator-api2"
 version = "0.2.21"
@@ -1574,6 +1583,15 @@ version = "0.1.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "112b39cec0b298b6c1999fee3e31427f74f676e4cb9879ed1a121b43661a4154"
 
+[[package]]
+name = "matchers"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d1525a2a28c7f4fa0fc98bb91ae755d1e2d1505079e05539e35bc876b5d65ae9"
+dependencies = [
+ "regex-automata",
+]
+
 [[package]]
 name = "matchit"
 version = "0.8.4"
@@ -1649,6 +1667,15 @@ dependencies = [
  "version_check",
 ]
 
+[[package]]
+name = "nu-ansi-term"
+version = "0.50.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7957b9740744892f114936ab4a57b3f487491bbeafaf8083688b16841a4240e5"
+dependencies = [
+ "windows-sys 0.61.2",
+]
+
 [[package]]
 name = "num-bigint-dig"
 version = "0.8.6"
@@ -2093,6 +2120,23 @@ dependencies = [
  "bitflags",
 ]
 
+[[package]]
+name = "regex-automata"
+version = "0.4.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6e1dd4122fc1595e8162618945476892eefca7b88c52820e74af6262213cae8f"
+dependencies = [
+ "aho-corasick",
+ "memchr",
+ "regex-syntax",
+]
+
+[[package]]
+name = "regex-syntax"
+version = "0.8.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dc897dd8d9e8bd1ed8cdad82b5966c3e0ecae09fb1907d58efaa013543185d0a"
+
 [[package]]
 name = "reqwest"
 version = "0.12.28"
@@ -2376,6 +2420,15 @@ dependencies = [
  "digest",
 ]
 
+[[package]]
+name = "sharded-slab"
+version = "0.1.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f40ca3c46823713e0d4209592e8d6e826aa57e928f09752619fc696c499637f6"
+dependencies = [
+ "lazy_static",
+]
+
 [[package]]
 name = "shlex"
 version = "1.3.0"
@@ -2724,6 +2777,15 @@ dependencies = [
  "syn",
 ]
 
+[[package]]
+name = "thread_local"
+version = "1.1.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f60246a4944f24f6e018aa17cdeffb7818b76356965d03b07d6a9886e8962185"
+dependencies = [
+ "cfg-if",
+]
+
 [[package]]
 name = "time"
 version = "0.3.47"
@@ -3012,6 +3074,36 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "db97caf9d906fbde555dd62fa95ddba9eecfd14cb388e4f491a66d74cd5fb79a"
 dependencies = [
  "once_cell",
+ "valuable",
+]
+
+[[package]]
+name = "tracing-log"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ee855f1f400bd0e5c02d150ae5de3840039a3f54b025156404e34c23c03f47c3"
+dependencies = [
+ "log",
+ "once_cell",
+ "tracing-core",
+]
+
+[[package]]
+name = "tracing-subscriber"
+version = "0.3.23"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cb7f578e5945fb242538965c2d0b04418d38ec25c79d160cd279bf0731c8d319"
+dependencies = [
+ "matchers",
+ "nu-ansi-term",
+ "once_cell",
+ "regex-automata",
+ "sharded-slab",
+ "smallvec",
+ "thread_local",
+ "tracing",
+ "tracing-core",
+ "tracing-log",
 ]
 
 [[package]]
@@ -3113,6 +3205,12 @@ dependencies = [
  "wasm-bindgen",
 ]
 
+[[package]]
+name = "valuable"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ba73ea9cf16a25df0c8caa16c51acb937d5712a8429db78a3ee29d5dcacd3a65"
+
 [[package]]
 name = "vcpkg"
 version = "0.2.15"
@@ -3255,7 +3353,7 @@ dependencies = [
 
 [[package]]
 name = "web-petting"
-version = "0.1.8"
+version = "0.1.11"
 dependencies = [
  "chrono",
  "chrono-tz",
@@ -3268,6 +3366,8 @@ dependencies = [
  "serde_html_form",
  "serde_json",
  "tokio",
+ "tracing",
+ "tracing-subscriber",
  "uuid",
 ]
 

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "web-petting"
-version = "0.1.8"
+version = "0.1.11"
 edition = "2024"
 
 [dependencies]
@@ -16,3 +16,5 @@ multer = "3"
 futures = "0.3"
 tokio = { version = "1", features = ["fs"] }
 uuid = { version = "1", features = ["v4"] }
+tracing = "0.1"
+tracing-subscriber = { version = "0.3", features = ["env-filter"] }

src/admin.rs

@@ -193,6 +193,7 @@ struct LoginTemplate<'a> {
     t: &'a Translations,
     lang: Lang,
     error: Option<String>,
+    turnstile_site_key: String,
 }
 
 #[derive(Debug, Template)]
@@ -274,6 +275,7 @@ struct ScheduleNewTemplate<'a> {
     clients: Vec<Client>,
     users: Vec<User>,
     current_user_id: i64,
+    timezone: String,
 }
 
 #[derive(Debug, Template)]
@@ -345,10 +347,12 @@ async fn login_page(request: Request, session: Session, db: Database) -> cot::Re
         return Redirect::new(format!("/admin/setup?lang={}", lang.code())).into_response();
     }
 
+    let turnstile_site_key = crate::turnstile::get_site_key(&db).await?;
     let body = LoginTemplate {
         t: lang.t(),
         lang,
         error: None,
+        turnstile_site_key,
     }
     .render()?;
     html_response(body, lang)
@@ -424,11 +428,25 @@ async fn setup_submit(request: Request, session: Session, db: Database) -> cot::
 struct LoginForm {
     login: String,
     password: String,
+    #[serde(default, rename = "cf-turnstile-response")]
+    cf_turnstile_response: Option<String>,
 }
 
 async fn login_submit(request: Request, session: Session, db: Database) -> cot::Result<Response> {
     let (lang, form): (_, LoginForm) = parse_form_from_request(request).await?;
 
+    if !crate::turnstile::verify(&db, form.cf_turnstile_response.as_deref()).await? {
+        let turnstile_site_key = crate::turnstile::get_site_key(&db).await?;
+        let body = LoginTemplate {
+            t: lang.t(),
+            lang,
+            error: Some(lang.t().login_error.to_string()),
+            turnstile_site_key,
+        }
+        .render()?;
+        return html_response(body, lang);
+    }
+
     let login = form.login.clone();
     let user = query!(User, $login == login && $status == "active")
         .get(&db)
@@ -447,10 +465,12 @@ async fn login_submit(request: Request, session: Session, db: Database) -> cot::
         }
     }
 
+    let turnstile_site_key = crate::turnstile::get_site_key(&db).await?;
     let body = LoginTemplate {
         t: lang.t(),
         lang,
         error: Some(lang.t().login_error.to_string()),
+        turnstile_site_key,
     }
     .render()?;
     html_response(body, lang)
@@ -796,6 +816,9 @@ struct SettingsForm {
     pricing_info: String,
     timezone: String,
     site_domain: String,
+    seo_keywords: String,
+    turnstile_site_key: String,
+    turnstile_secret_key: String,
 }
 
 async fn save_settings(request: Request, session: Session, db: Database) -> cot::Result<Response> {
@@ -811,6 +834,9 @@ async fn save_settings(request: Request, session: Session, db: Database) -> cot:
         ("pricing_info", form.pricing_info),
         ("timezone", form.timezone),
         ("site_domain", form.site_domain),
+        ("seo_keywords", form.seo_keywords),
+        ("turnstile_site_key", form.turnstile_site_key),
+        ("turnstile_secret_key", form.turnstile_secret_key),
     ] {
         let k = key.to_string();
         let existing = query!(Setting, $key == k).get(&db).await?;
@@ -1108,6 +1134,7 @@ async fn schedule_new_page(
     let current_user_id = get_admin_id(&session).await.unwrap_or(0);
     let clients = query!(Client, $status == "active").all(&db).await?;
     let users = query!(User, $status == "active").all(&db).await?;
+    let tz = crate::tz::load_tz(&db).await;
     let body = ScheduleNewTemplate {
         t: lang.t(),
         lang,
@@ -1115,6 +1142,7 @@ async fn schedule_new_page(
         clients,
         users,
         current_user_id,
+        timezone: tz.to_string(),
     }
     .render()?;
     html_response(body, lang)
@@ -1172,7 +1200,7 @@ async fn schedule_events(
             .unwrap_or("?");
 
         let (bg_color, text_color) = match v.status.as_str() {
-            "cancelled" => ("#ccc".to_string(), "#666"),
+            "cancelled" => ("#ffb3b3".to_string(), "#a00"),
             "completed" => (format!("{}88", client_color), "#fff"),
             _ => (client_color.to_string(), "#fff"),
         };
@@ -1641,8 +1669,10 @@ async fn media_delete(
         .and_then(|v| v.to_str().ok())
         .map(|s| s.to_string());
     if let Some(mut m) = query!(Media, $id == media_id).get(&db).await? {
+        let file_path = m.file_path.clone();
         m.status = "archived".to_string();
         m.save(&db).await?;
+        let _ = tokio::fs::remove_file(&file_path).await;
     }
     let redirect_url = referer
         .filter(|r| r.contains("/schedule/") && r.contains("/edit"))

src/i18n.rs

@@ -134,6 +134,9 @@ pub struct Translations {
     pub settings_pricing_info: &'static str,
     pub settings_timezone: &'static str,
     pub settings_site_domain: &'static str,
+    pub settings_seo_keywords: &'static str,
+    pub settings_turnstile_site_key: &'static str,
+    pub settings_turnstile_secret_key: &'static str,
     pub landing_contact_label: &'static str,
     pub landing_pricing_title: &'static str,
 
@@ -346,6 +349,9 @@ static RU: Translations = Translations {
     settings_pricing_info: "Блок с ценами (отображается на лендинге)",
     settings_timezone: "Часовой пояс (например Asia/Vladivostok)",
     settings_site_domain: "Домен сайта (например https://example.com)",
+    settings_seo_keywords: "SEO-ключевые слова (через запятую, отображаются на сайте и в мета-теге keywords)",
+    settings_turnstile_site_key: "Cloudflare Turnstile — Site Key (ключ виджета)",
+    settings_turnstile_secret_key: "Cloudflare Turnstile — Secret Key (секретный ключ)",
     landing_contact_label: "Или свяжитесь с нами напрямую",
     landing_pricing_title: "Стоимость",
 
@@ -398,7 +404,7 @@ static RU: Translations = Translations {
     schedule_new_title: "Запланировать визиты",
     schedule_client: "Клиент",
     schedule_admin: "Исполнитель",
-    schedule_default_time: "Время по умолчанию",
+    schedule_default_time: "Время",
     schedule_time_start: "С",
     schedule_time_end: "До",
     schedule_pick_dates: "Добавить дату",
@@ -425,7 +431,7 @@ static RU: Translations = Translations {
     schedule_delete_confirm: "Точно удалить этот визит?",
 
     landing_meta_description: "Профессиональный пет-ситтинг: кормление и уход за кошками, грызунами, рептилиями на вашей территории. Оставьте заявку — позаботимся о вашем любимце!",
-    landing_hero_title: "Позаботимся о вашем питомце, пока вас нет дома",
+    landing_hero_title: "Позаботимся о вашем питомце, пока вас нет дома. Город Хабаровск",
     landing_hero_subtitle: "Кормление и уход за кошками, грызунами, рептилиями на вашей территории. Ежедневные визиты — ваш питомец в надёжных руках, пока вы в отпуске или командировке.",
     landing_hero_description: "Почему лучше оставить кошку дома на время отъезда, чем, скажем, поместить в зоогостиницу? Как известно — кошка территориальное животное. Поэтому, когда кошка оказывается на незнакомой территории — она может испытывать стресс. К тому же в зоогостинице животное часто содержится в клетке. А кошки любят свободу. И дома ожидать своих хозяев — ей будет гораздо проще и комфортнее.",
     landing_hero_cta: "Оставить заявку",
@@ -548,6 +554,9 @@ static EN: Translations = Translations {
     settings_pricing_info: "Pricing block (shown on landing page)",
     settings_timezone: "Timezone (e.g. Asia/Vladivostok)",
     settings_site_domain: "Site domain (e.g. https://example.com)",
+    settings_seo_keywords: "SEO keywords (comma-separated, shown on site and in keywords meta tag)",
+    settings_turnstile_site_key: "Cloudflare Turnstile — Site Key",
+    settings_turnstile_secret_key: "Cloudflare Turnstile — Secret Key",
     landing_contact_label: "Or contact us directly",
     landing_pricing_title: "Pricing",
 
@@ -600,7 +609,7 @@ static EN: Translations = Translations {
     schedule_new_title: "Plan Visits",
     schedule_client: "Client",
     schedule_admin: "Assigned to",
-    schedule_default_time: "Default Time",
+    schedule_default_time: "Time",
     schedule_time_start: "From",
     schedule_time_end: "To",
     schedule_pick_dates: "Add date",

src/main.rs

@@ -4,8 +4,11 @@ mod migrations;
 pub mod models;
 mod public;
 mod telegram;
+mod turnstile;
 mod tz;
 
+use tracing_subscriber;
+
 use cot::cli::CliMetadata;
 use cot::config::{
     DatabaseConfig, MiddlewareConfig, ProjectConfig, SessionMiddlewareConfig, SessionStoreConfig,
@@ -97,5 +100,10 @@ impl Project for PettingProject {
 
 #[cot::main]
 fn main() -> impl Project {
+    let filter = tracing_subscriber::EnvFilter::try_from_default_env()
+        .unwrap_or_else(|_| tracing_subscriber::EnvFilter::new("info"));
+    let _ = tracing_subscriber::fmt()
+        .with_env_filter(filter)
+        .try_init();
     PettingProject
 }

src/public.rs

@@ -6,6 +6,7 @@ use cot::request::extractors::Path;
 use cot::response::{IntoResponse, Redirect, Response};
 use cot::router::{Route, Router};
 use serde::Deserialize;
+use tracing::info;
 
 use cot::db::query;
 
@@ -71,9 +72,11 @@ struct LandingTemplate<'a> {
     lang: Lang,
     contact_info: String,
     pricing_info: String,
+    seo_keywords: String,
     testimonials: Vec<Testimonial>,
     site_domain: String,
     review_count: usize,
+    turnstile_site_key: String,
 }
 
 #[derive(Debug, Template)]
@@ -85,6 +88,33 @@ struct ThankYouTemplate<'a> {
 
 async fn landing_page(request: Request, db: Database) -> cot::Result<Response> {
     let lang = detect_lang(&request);
+
+    let ua = request
+        .headers()
+        .get("user-agent")
+        .and_then(|v| v.to_str().ok())
+        .unwrap_or("-");
+    let referer = request
+        .headers()
+        .get("referer")
+        .and_then(|v| v.to_str().ok())
+        .unwrap_or("-");
+    let ip = request
+        .headers()
+        .get("x-forwarded-for")
+        .and_then(|v| v.to_str().ok())
+        .and_then(|s| s.split(',').next())
+        .map(|s| s.trim())
+        .unwrap_or("-");
+
+    info!(
+        target: "landing",
+        ip = ip,
+        lang = lang.code(),
+        referer = referer,
+        ua = ua,
+        "landing visit"
+    );
     let key = "contact_info".to_string();
     let contact_info = query!(Setting, $key == key)
         .get(&db)
@@ -103,6 +133,13 @@ async fn landing_page(request: Request, db: Database) -> cot::Result<Response> {
         .await?
         .map(|s| s.value)
         .unwrap_or_else(|| "https://example.net".to_string());
+    let seo_key = "seo_keywords".to_string();
+    let seo_keywords = query!(Setting, $key == seo_key)
+        .get(&db)
+        .await?
+        .map(|s| s.value)
+        .unwrap_or_default();
+    let turnstile_site_key = crate::turnstile::get_site_key(&db).await?;
     let mut testimonials = Testimonial::objects().all(&db).await?;
     testimonials.retain(|t| t.status == "active");
     testimonials.sort_by(|a, b| a.sort_order.cmp(&b.sort_order));
@@ -112,9 +149,11 @@ async fn landing_page(request: Request, db: Database) -> cot::Result<Response> {
         lang,
         contact_info,
         pricing_info,
+        seo_keywords,
         testimonials,
         site_domain,
         review_count,
+        turnstile_site_key,
     }
     .render()?;
     html_response(body, lang)
@@ -125,6 +164,8 @@ struct LeadForm {
     name: String,
     phone: Option<String>,
     comment: Option<String>,
+    #[serde(default, rename = "cf-turnstile-response")]
+    cf_turnstile_response: Option<String>,
 }
 
 async fn submit_lead(request: Request, db: Database) -> cot::Result<Response> {
@@ -134,6 +175,10 @@ async fn submit_lead(request: Request, db: Database) -> cot::Result<Response> {
     let form: LeadForm =
         serde_html_form::from_bytes(&bytes).map_err(|e| cot::Error::internal(e.to_string()))?;
 
+    if !crate::turnstile::verify(&db, form.cf_turnstile_response.as_deref()).await? {
+        return Redirect::new(format!("/?lang={}", lang.code())).into_response();
+    }
+
     let mut lead = Lead {
         id: Auto::auto(),
         name: form.name,
@@ -179,6 +224,7 @@ struct ClientPortalTemplate<'a> {
     upcoming: Vec<PortalVisit>,
     past: Vec<PortalVisit>,
     feedback_sent: bool,
+    turnstile_site_key: String,
 }
 
 async fn client_portal(
@@ -250,6 +296,7 @@ async fn client_portal(
     }
     past.reverse(); // newest first
 
+    let turnstile_site_key = crate::turnstile::get_site_key(&db).await?;
     let body = ClientPortalTemplate {
         t: lang.t(),
         lang,
@@ -257,6 +304,7 @@ async fn client_portal(
         upcoming,
         past,
         feedback_sent,
+        turnstile_site_key,
     }
     .render()?;
     html_response(body, lang)
@@ -265,6 +313,8 @@ async fn client_portal(
 #[derive(Deserialize)]
 struct FeedbackForm {
     feedback: String,
+    #[serde(default, rename = "cf-turnstile-response")]
+    cf_turnstile_response: Option<String>,
 }
 
 async fn submit_feedback(
@@ -286,6 +336,15 @@ async fn submit_feedback(
     let form: FeedbackForm =
         serde_html_form::from_bytes(&bytes).map_err(|e| cot::Error::internal(e.to_string()))?;
 
+    if !crate::turnstile::verify(&db, form.cf_turnstile_response.as_deref()).await? {
+        return Redirect::new(format!(
+            "/client/{}?lang={}",
+            token_clone,
+            lang.code()
+        ))
+        .into_response();
+    }
+
     if let Some(mut visit) = query!(Visit, $id == visit_id).get(&db).await? {
         if visit.client_id.primary_key().unwrap() == client_id {
             visit.client_feedback = Some(form.feedback);

src/turnstile.rs

@@ -0,0 +1,48 @@
+use cot::db::{Database, query};
+
+use crate::models::Setting;
+
+/// Read `turnstile_site_key` from Settings. Returns empty string if not configured.
+pub async fn get_site_key(db: &Database) -> cot::Result<String> {
+    let key = "turnstile_site_key".to_string();
+    Ok(query!(Setting, $key == key)
+        .get(db)
+        .await?
+        .map(|s| s.value)
+        .unwrap_or_default())
+}
+
+/// Verify a Turnstile token against Cloudflare.
+/// Returns `true` if verification succeeds, or if no secret key is configured (passthrough).
+pub async fn verify(db: &Database, token: Option<&str>) -> cot::Result<bool> {
+    let secret_key_name = "turnstile_secret_key".to_string();
+    let secret_key = query!(Setting, $key == secret_key_name)
+        .get(db)
+        .await?
+        .map(|s| s.value)
+        .filter(|s| !s.is_empty());
+
+    let Some(secret) = secret_key else {
+        return Ok(true);
+    };
+
+    let token = token.unwrap_or("");
+    let client = reqwest::Client::new();
+    let resp = client
+        .post("https://challenges.cloudflare.com/turnstile/v0/siteverify")
+        .json(&serde_json::json!({
+            "secret": secret,
+            "response": token
+        }))
+        .send()
+        .await;
+
+    Ok(match resp {
+        Ok(r) => r
+            .json::<serde_json::Value>()
+            .await
+            .map(|v| v["success"].as_bool() == Some(true))
+            .unwrap_or(false),
+        Err(_) => false,
+    })
+}

templates/admin/leads.html

@@ -33,12 +33,6 @@
         </div>
         {% if lead.status == "new" || lead.status == "in_progress" %}
         <div class="item-card-actions">
-            {% if lead.status == "new" %}
-                <form method="post" action="/admin/leads/{{ lead.id }}/status">
-                    <input type="hidden" name="status" value="in_progress">
-                    <button type="submit" class="button is-small is-info is-outlined btn-sm">{{ t.action_in_progress }}</button>
-                </form>
-            {% endif %}
             <form method="post" action="/admin/leads/{{ lead.id }}/convert">
                 <button type="submit" class="button is-small is-success is-outlined btn-sm">{{ t.action_convert }}</button>
             </form>

templates/admin/login.html

@@ -6,6 +6,9 @@
     <title>{{ t.nav_title }} — {{ t.login_title }}</title>
     <link rel="icon" type="image/svg+xml" href="/favicon.svg">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1/css/bulma.min.css">
+    {% if !turnstile_site_key.is_empty() %}
+    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
+    {% endif %}
     <style>
         :root { color-scheme: light; }
         body { background: #f5f5f5; display: flex; align-items: center; justify-content: center; min-height: 100vh; color: #333; }
@@ -41,6 +44,9 @@
                     <label class="label">{{ t.users_password }}</label>
                     <div class="control"><input class="input" type="password" name="password" required></div>
                 </div>
+                {% if !turnstile_site_key.is_empty() %}
+                <div class="cf-turnstile" data-sitekey="{{ turnstile_site_key }}" data-theme="light" data-size="compact" style="margin-top:0.75rem;"></div>
+                {% endif %}
                 <button type="submit" class="button is-primary is-fullwidth mt-3">{{ t.login_button }}</button>
             </form>
         </div>

templates/admin/media_upload.html

@@ -14,12 +14,13 @@
         <div><strong>{{ t.schedule_date }}:</strong> {{ visit_label }}</div>
     </div>
 
-    <form method="post" action="/admin/media/{{ visit_id }}/upload/submit" enctype="multipart/form-data">
+    <form id="uploadForm" action="/admin/media/{{ visit_id }}/upload/submit" enctype="multipart/form-data">
         <div class="field">
             <label class="label">{{ t.media_choose_files }}</label>
             <div class="control">
-                <input class="input" type="file" name="files" multiple accept="image/*,video/*" required>
+                <input class="input" type="file" id="uploadFiles" name="files" multiple accept="image/*,video/*" required>
             </div>
+            <p id="fileCount" style="font-size:0.8rem;color:#888;margin-top:0.3rem;"></p>
         </div>
 
         <div class="field">
@@ -29,7 +30,80 @@
             </div>
         </div>
 
-        <button type="submit" class="button is-primary is-fullwidth">{{ t.media_upload }}</button>
+        <!-- Progress -->
+        <div id="uploadProgress" style="display:none;margin-bottom:1rem;">
+            <div style="display:flex;justify-content:space-between;font-size:0.82rem;color:#555;margin-bottom:0.3rem;">
+                <span id="uploadStatusText">{{ t.media_upload }}...</span>
+                <span id="uploadPercent">0%</span>
+            </div>
+            <div style="background:#e8e8e8;border-radius:99px;height:8px;overflow:hidden;">
+                <div id="uploadBar" style="height:100%;width:0%;background:linear-gradient(90deg,#6c63ff,#b06cff);border-radius:99px;transition:width 0.2s;"></div>
+            </div>
+        </div>
+
+        <button type="submit" id="uploadSubmit" class="button is-primary is-fullwidth">{{ t.media_upload }}</button>
     </form>
+
+    <script>
+    (function() {
+        var form       = document.getElementById('uploadForm');
+        var filesInput = document.getElementById('uploadFiles');
+        var fileCount  = document.getElementById('fileCount');
+        var progress   = document.getElementById('uploadProgress');
+        var bar        = document.getElementById('uploadBar');
+        var percent    = document.getElementById('uploadPercent');
+        var statusText = document.getElementById('uploadStatusText');
+        var submitBtn  = document.getElementById('uploadSubmit');
+
+        filesInput.addEventListener('change', function() {
+            var n = this.files.length;
+            fileCount.textContent = n > 0 ? ('Выбрано файлов: ' + n) : '';
+        });
+
+        form.addEventListener('submit', function(e) {
+            e.preventDefault();
+            if (!filesInput.files.length) return;
+
+            var data = new FormData(form);
+            var xhr  = new XMLHttpRequest();
+
+            progress.style.display = 'block';
+            submitBtn.disabled = true;
+            submitBtn.textContent = 'Загрузка...';
+            bar.style.width = '0%';
+            percent.textContent = '0%';
+
+            xhr.upload.addEventListener('progress', function(ev) {
+                if (!ev.lengthComputable) return;
+                var pct = Math.round(ev.loaded / ev.total * 100);
+                bar.style.width = pct + '%';
+                percent.textContent = pct + '%';
+                if (pct === 100) statusText.textContent = 'Обработка...';
+            });
+
+            xhr.addEventListener('load', function() {
+                if (xhr.status >= 200 && xhr.status < 400) {
+                    bar.style.width = '100%';
+                    percent.textContent = '100%';
+                    statusText.textContent = 'Готово!';
+                    setTimeout(function() { window.location.href = xhr.responseURL || '/admin/media'; }, 300);
+                } else {
+                    statusText.textContent = 'Ошибка загрузки (' + xhr.status + ')';
+                    submitBtn.disabled = false;
+                    submitBtn.textContent = '{{ t.media_upload }}';
+                }
+            });
+
+            xhr.addEventListener('error', function() {
+                statusText.textContent = 'Ошибка соединения';
+                submitBtn.disabled = false;
+                submitBtn.textContent = '{{ t.media_upload }}';
+            });
+
+            xhr.open('POST', form.action);
+            xhr.send(data);
+        });
+    })();
+    </script>
 </div>
 {% endblock %}

templates/admin/schedule.html

@@ -32,6 +32,10 @@
     .fc .fc-toolbar-title { font-size: 1.1rem !important; }
     .fc .fc-button { padding: 0.25rem 0.5rem !important; font-size: 0.8rem !important; }
     .fc-event { cursor: pointer; border: none !important; padding: 2px 5px; border-radius: 4px; }
+    .fc-event.ev-completed .fc-event-title,
+    .fc-event.ev-completed .fc-list-event-title { text-decoration: line-through; opacity: 0.75; }
+    .fc-event.ev-cancelled .fc-event-title,
+    .fc-event.ev-cancelled .fc-list-event-title { text-decoration: line-through; }
     .fc .fc-day-today { background: #eef2ff !important; }
     .fc .fc-day.day-weekend { background: #faf5f0; }
     .fc .fc-day-today.day-weekend { background: #eef2ff !important; }
@@ -45,8 +49,6 @@
     .visit-modal { background:#fff; border-radius:12px; padding:1.5rem; width:90%; max-width:380px; box-shadow:0 4px 24px rgba(0,0,0,0.15); }
     .visit-modal h3 { margin:0 0 0.75rem; font-size:1.1rem; }
     .visit-modal .meta { color:#888; font-size:0.85rem; margin-bottom:0.75rem; line-height:1.6; }
-    .visit-modal .actions { display:flex; gap:0.5rem; flex-wrap:wrap; }
-    .visit-modal .actions form { margin:0; }
     .color-dot { display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:6px; vertical-align:middle; }
 </style>
 
@@ -60,12 +62,8 @@
             <div id="vmTime"></div>
             <div id="vmNotes" style="margin-top:0.3rem;"></div>
         </div>
-        <div id="vmStatus" style="margin-bottom:0.75rem;"></div>
+        <div id="vmStatus" style="margin-bottom:1rem;"></div>
-        <div class="actions" id="vmActions"></div>
+        <a id="vmEditLink" href="#" class="button is-primary is-fullwidth" style="font-size:1rem;font-weight:700;padding:0.65rem;">📋 {{ t.schedule_edit_title }}</a>
-        <div style="display:flex;gap:0.5rem;margin-top:0.5rem;">
-            <a id="vmEditLink" href="#" class="button is-info is-small" style="flex:1;">{{ t.schedule_edit_title }}</a>
-            <button class="button is-light is-small" style="flex:1;" onclick="closeModal()">OK</button>
-        </div>
     </div>
 </div>
 
@@ -89,6 +87,11 @@ document.addEventListener('DOMContentLoaded', function() {
             right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
         },
         events: '/admin/schedule/events',
+        eventDidMount: function(info) {
+            var status = info.event.extendedProps.status;
+            if (status === 'completed') info.el.classList.add('ev-completed');
+            if (status === 'cancelled') info.el.classList.add('ev-cancelled');
+        },
         eventClick: function(info) {
             info.jsEvent.preventDefault();
             const ev = info.event;
@@ -102,12 +105,6 @@ document.addEventListener('DOMContentLoaded', function() {
             document.getElementById('vmNotes').textContent = p.notes || '';
             const badge = '<span class="badge badge-visit-' + p.status + '">' + statusLabels[p.status] + '</span>';
             document.getElementById('vmStatus').innerHTML = badge;
-            let actions = '';
-            if (p.status === 'scheduled') {
-                actions += '<form method="post" action="/admin/schedule/' + ev.id + '/done"><button class="button is-small is-success is-outlined">{{ t.schedule_mark_done }}</button></form>';
-                actions += '<form method="post" action="/admin/schedule/' + ev.id + '/cancel"><button class="button is-small is-danger is-outlined">{{ t.schedule_cancel }}</button></form>';
-            }
-            document.getElementById('vmActions').innerHTML = actions;
             document.getElementById('vmEditLink').href = '/admin/schedule/' + ev.id + '/edit?lang=' + lang;
             document.getElementById('visitModal').classList.add('is-open');
         },

templates/admin/schedule_edit.html

@@ -70,14 +70,17 @@
         <!-- Status -->
         <div class="field">
             <label class="label">{{ t.schedule_status }}</label>
-            <div class="control">
+            <input type="hidden" name="status" id="statusInput" value="{{ visit.status }}">
-                <div class="select is-fullwidth">
+            <div class="status-picker">
-                    <select name="status">
+                <button type="button" class="status-btn status-btn-scheduled {% if visit.status == "scheduled" %}is-active{% endif %}" data-value="scheduled">
-                        <option value="scheduled" {% if visit.status == "scheduled" %}selected{% endif %}>{{ t.visit_status_scheduled }}</option>
+                    <span class="status-btn-icon">📅</span>{{ t.visit_status_scheduled }}
-                        <option value="completed" {% if visit.status == "completed" %}selected{% endif %}>{{ t.visit_status_completed }}</option>
+                </button>
-                        <option value="cancelled" {% if visit.status == "cancelled" %}selected{% endif %}>{{ t.visit_status_cancelled }}</option>
+                <button type="button" class="status-btn status-btn-completed {% if visit.status == "completed" %}is-active{% endif %}" data-value="completed">
-                    </select>
+                    <span class="status-btn-icon">✅</span>{{ t.visit_status_completed }}
-                </div>
+                </button>
+                <button type="button" class="status-btn status-btn-cancelled {% if visit.status == "cancelled" %}is-active{% endif %}" data-value="cancelled">
+                    <span class="status-btn-icon">✕</span>{{ t.visit_status_cancelled }}
+                </button>
             </div>
         </div>
 
@@ -150,14 +153,15 @@
     <div class="upload-modal">
         <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;">
             <h3 style="font-size:1.1rem;font-weight:700;margin:0;">{{ t.media_upload_title }}</h3>
-            <button type="button" style="background:none;border:none;font-size:1.2rem;cursor:pointer;color:#888;" onclick="document.getElementById('uploadModal').classList.remove('is-open')">✕</button>
+            <button type="button" id="uploadModalClose" style="background:none;border:none;font-size:1.2rem;cursor:pointer;color:#888;">✕</button>
         </div>
-        <form method="post" action="/admin/media/{{ visit.id }}/upload/submit" enctype="multipart/form-data">
+        <form id="uploadForm" action="/admin/media/{{ visit.id }}/upload/submit" enctype="multipart/form-data">
             <div class="field">
                 <label class="label">{{ t.media_choose_files }}</label>
                 <div class="control">
-                    <input class="input" type="file" name="files" multiple accept="image/*,video/*" required>
+                    <input class="input" type="file" id="uploadFiles" name="files" multiple accept="image/*,video/*" required>
                 </div>
+                <p id="fileCount" style="font-size:0.8rem;color:#888;margin-top:0.3rem;"></p>
             </div>
             <div class="field">
                 <label class="label">{{ t.media_caption }}</label>
@@ -165,12 +169,56 @@
                     <input class="input" type="text" name="caption" placeholder="{{ t.media_caption }}">
                 </div>
             </div>
-            <button type="submit" class="button is-primary is-fullwidth">{{ t.media_upload }}</button>
+
+            <!-- Progress -->
+            <div id="uploadProgress" style="display:none;margin-bottom:1rem;">
+                <div style="display:flex;justify-content:space-between;font-size:0.82rem;color:#555;margin-bottom:0.3rem;">
+                    <span id="uploadStatusText">{{ t.media_upload }}...</span>
+                    <span id="uploadPercent">0%</span>
+                </div>
+                <div style="background:#e8e8e8;border-radius:99px;height:8px;overflow:hidden;">
+                    <div id="uploadBar" style="height:100%;width:0%;background:linear-gradient(90deg,#6c63ff,#b06cff);border-radius:99px;transition:width 0.2s;"></div>
+                </div>
+            </div>
+
+            <button type="submit" id="uploadSubmit" class="button is-primary is-fullwidth">{{ t.media_upload }}</button>
         </form>
     </div>
 </div>
 
 <style>
+    .status-picker {
+        display: flex;
+        gap: 0.5rem;
+    }
+    .status-btn {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.3rem;
+        padding: 0.6rem 0.4rem;
+        border-radius: 10px;
+        border: 2px solid transparent;
+        background: #f5f5f5;
+        font-size: 0.82rem;
+        font-weight: 600;
+        cursor: pointer;
+        color: #777;
+        transition: all 0.15s;
+        line-height: 1.2;
+    }
+    .status-btn-icon { font-size: 1.3rem; line-height: 1; }
+    .status-btn:hover { filter: brightness(0.95); }
+
+    .status-btn-scheduled.is-active  { background: #dbeafe; border-color: #3b82f6; color: #1e40af; }
+    .status-btn-completed.is-active  { background: #d1fae5; border-color: #22c55e; color: #15803d; }
+    .status-btn-cancelled.is-active  { background: #fee2e2; border-color: #ef4444; color: #b91c1c; }
+
+    .status-btn-scheduled:not(.is-active):hover  { background: #eff6ff; color: #3b82f6; }
+    .status-btn-completed:not(.is-active):hover  { background: #f0fdf4; color: #22c55e; }
+    .status-btn-cancelled:not(.is-active):hover  { background: #fff5f5; color: #ef4444; }
+
     .visit-media-grid {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
@@ -229,8 +277,91 @@
 </style>
 
 <script>
-document.getElementById('uploadModal').addEventListener('click', function(e) {
+// Status picker
-    if (e.target === this) this.classList.remove('is-open');
+document.querySelectorAll('.status-btn').forEach(function(btn) {
+    btn.addEventListener('click', function() {
+        document.querySelectorAll('.status-btn').forEach(function(b) { b.classList.remove('is-active'); });
+        btn.classList.add('is-active');
+        document.getElementById('statusInput').value = btn.dataset.value;
+    });
 });
 </script>
+
+<script>
+(function() {
+    var modal = document.getElementById('uploadModal');
+    var form  = document.getElementById('uploadForm');
+    var filesInput  = document.getElementById('uploadFiles');
+    var fileCount   = document.getElementById('fileCount');
+    var progress    = document.getElementById('uploadProgress');
+    var bar         = document.getElementById('uploadBar');
+    var percent     = document.getElementById('uploadPercent');
+    var statusText  = document.getElementById('uploadStatusText');
+    var submitBtn   = document.getElementById('uploadSubmit');
+
+    // Close modal on backdrop click
+    modal.addEventListener('click', function(e) {
+        if (e.target === this) closeModal();
+    });
+    document.getElementById('uploadModalClose').addEventListener('click', closeModal);
+
+    function closeModal() {
+        if (submitBtn.disabled) return; // prevent close during upload
+        modal.classList.remove('is-open');
+    }
+
+    // Show selected file count
+    filesInput.addEventListener('change', function() {
+        var n = this.files.length;
+        fileCount.textContent = n > 0 ? ('Выбрано файлов: ' + n) : '';
+    });
+
+    // Submit via XHR for progress tracking
+    form.addEventListener('submit', function(e) {
+        e.preventDefault();
+        if (!filesInput.files.length) return;
+
+        var data = new FormData(form);
+        var xhr  = new XMLHttpRequest();
+
+        // Show progress bar, disable submit
+        progress.style.display = 'block';
+        submitBtn.disabled = true;
+        submitBtn.textContent = 'Загрузка...';
+        bar.style.width = '0%';
+        percent.textContent = '0%';
+
+        xhr.upload.addEventListener('progress', function(ev) {
+            if (!ev.lengthComputable) return;
+            var pct = Math.round(ev.loaded / ev.total * 100);
+            bar.style.width = pct + '%';
+            percent.textContent = pct + '%';
+            if (pct === 100) statusText.textContent = 'Обработка...';
+        });
+
+        xhr.addEventListener('load', function() {
+            if (xhr.status >= 200 && xhr.status < 400) {
+                bar.style.width = '100%';
+                percent.textContent = '100%';
+                statusText.textContent = 'Готово!';
+                // Reload page to show uploaded media
+                setTimeout(function() { window.location.reload(); }, 300);
+            } else {
+                statusText.textContent = 'Ошибка загрузки (' + xhr.status + ')';
+                submitBtn.disabled = false;
+                submitBtn.textContent = '{{ t.media_upload }}';
+            }
+        });
+
+        xhr.addEventListener('error', function() {
+            statusText.textContent = 'Ошибка соединения';
+            submitBtn.disabled = false;
+            submitBtn.textContent = '{{ t.media_upload }}';
+        });
+
+        xhr.open('POST', form.action);
+        xhr.send(data);
+    });
+})();
+</script>
 {% endblock %}

templates/admin/schedule_new.html

@@ -9,238 +9,421 @@
 </div>
 
 <div class="form-card">
-    <form method="post" action="/admin/schedule/create" id="visitForm">
+<form method="post" action="/admin/schedule/create" id="visitForm">
-        <!-- Client -->
+
-        <div class="field">
+    <!-- Client -->
-            <label class="label">{{ t.schedule_client }}</label>
+    <div class="field">
-            <div class="control">
+        <label class="label">{{ t.schedule_client }}</label>
-                <div class="select is-fullwidth">
+        <div class="control">
-                    <select name="client_id" required>
+            <div class="select is-fullwidth">
-                        <option value="">—</option>
+                <select name="client_id" required>
-                        {% for c in &clients %}
+                    <option value="">—</option>
-                        <option value="{{ c.id }}">{{ c.name }}{% if let Some(p) = c.phone.as_deref() %} ({{ p }}){% endif %}</option>
+                    {% for c in &clients %}
-                        {% endfor %}
+                    <option value="{{ c.id }}">{{ c.name }}{% if let Some(p) = c.phone.as_deref() %} ({{ p }}){% endif %}</option>
-                    </select>
+                    {% endfor %}
-                </div>
+                </select>
             </div>
         </div>
+    </div>
 
-        <!-- Admin -->
+    <!-- Admin -->
-        <div class="field">
+    <div class="field">
-            <label class="label">{{ t.schedule_admin }}</label>
+        <label class="label">{{ t.schedule_admin }}</label>
-            <div class="control">
+        <div class="control">
-                <div class="select is-fullwidth">
+            <div class="select is-fullwidth">
-                    <select name="user_id">
+                <select name="user_id">
-                        {% for u in &users %}
+                    {% for u in &users %}
-                        <option value="{{ u.id }}" {% if u.id.unwrap() == current_user_id %}selected{% endif %}>
+                    <option value="{{ u.id }}" {% if u.id.unwrap() == current_user_id %}selected{% endif %}>
-                            {{ u.display_name.as_deref().unwrap_or(&u.login) }}
+                        {{ u.display_name.as_deref().unwrap_or(&u.login) }}
-                        </option>
+                    </option>
-                        {% endfor %}
+                    {% endfor %}
-                    </select>
+                </select>
-                </div>
             </div>
         </div>
+    </div>
 
-        <!-- Default time -->
+    <!-- Default time -->
-        <div class="field">
+    <div class="field">
-            <label class="label">{{ t.schedule_default_time }}</label>
+        <label class="label">{{ t.schedule_default_time }}</label>
-            <div class="columns is-mobile" style="margin-bottom:0;">
+        <div class="time-row">
-                <div class="column">
+            <div class="time-block">
-                    <div class="control">
+                <span class="time-lbl">{{ t.schedule_time_start }}</span>
-                        <input class="input" type="time" id="defaultStart" value="18:00">
+                <input class="input" type="time" id="defaultStart" value="18:00">
-                    </div>
+            </div>
-                </div>
+            <div class="time-sep">—</div>
-                <div class="column">
+            <div class="time-block">
-                    <div class="control">
+                <span class="time-lbl">{{ t.schedule_time_end }}</span>
-                        <input class="input" type="time" id="defaultEnd" value="19:00">
+                <input class="input" type="time" id="defaultEnd" value="19:00">
-                    </div>
-                </div>
             </div>
         </div>
+    </div>
 
-        <!-- Add individual date -->
+    <!-- Calendar -->
-        <div class="field">
+    <div class="field">
-            <label class="label">{{ t.schedule_pick_dates }}</label>
+        <div class="cal-toolbar">
-            <div class="columns is-mobile" style="margin-bottom:0;">
+            <button type="button" id="rangeModeBtn" class="button is-small is-outlined is-info">⇔ Выбрать диапазон</button>
-                <div class="column">
+            <button type="button" id="resetBtn" class="button is-small is-outlined is-danger" style="display:none;">✕ Сбросить</button>
-                    <div class="control">
-                        <input class="input" type="date" id="pickDate">
-                    </div>
-                </div>
-                <div class="column is-narrow">
-                    <button type="button" class="button is-info" id="addDateBtn">+</button>
-                </div>
-            </div>
         </div>
 
-        <!-- Date range fill -->
+        <div class="sched-cal">
-        <div class="field">
+            <div class="cal-nav">
-            <label class="label is-small has-text-grey">{{ t.schedule_range_from }} — {{ t.schedule_range_to }}</label>
+                <button type="button" id="calPrev">◀</button>
-            <div class="columns is-mobile" style="margin-bottom:0;">
+                <span id="calTitle"></span>
-                <div class="column">
+                <button type="button" id="calNext">▶</button>
-                    <input class="input" type="date" id="rangeFrom">
-                </div>
-                <div class="column">
-                    <input class="input" type="date" id="rangeTo">
-                </div>
-                <div class="column is-narrow">
-                    <button type="button" class="button is-info is-outlined" id="fillRangeBtn">{{ t.schedule_fill_range }}</button>
-                </div>
             </div>
+            <div class="cal-grid" id="calGrid"></div>
         </div>
+    </div>
 
-        <!-- Selected days list -->
+    <!-- Selected days -->
-        <div class="field">
+    <div class="field" id="selectedSection" style="display:none;">
-            <label class="label">{{ t.schedule_selected_days }}</label>
+        <label class="label">{{ t.schedule_selected_days }} <span id="selectedCount" class="tag is-info is-light" style="margin-left:0.4rem;"></span></label>
-            <div id="daysList">
+        <div id="daysList"></div>
-                <p class="has-text-grey is-size-7" id="noDaysMsg">{{ t.schedule_no_days }}</p>
+    </div>
-            </div>
+
+    <!-- Notes -->
+    <div class="field">
+        <label class="label">{{ t.schedule_notes }}</label>
+        <div class="control">
+            <textarea class="textarea" name="notes" rows="2"></textarea>
         </div>
+    </div>
 
-        <!-- Notes -->
+    <input type="hidden" name="days_json" id="daysJson" value="[]">
-        <div class="field">
+    <button type="submit" class="button is-primary is-fullwidth" id="submitBtn" disabled>{{ t.schedule_create }}</button>
-            <label class="label">{{ t.schedule_notes }}</label>
-            <div class="control">
-                <textarea class="textarea" name="notes" rows="2"></textarea>
-            </div>
-        </div>
 
-        <!-- Hidden days data -->
+</form>
-        <input type="hidden" name="days_json" id="daysJson" value="[]">
-
-        <button type="submit" class="button is-primary is-fullwidth" id="submitBtn" disabled>{{ t.schedule_create }}</button>
-    </form>
 </div>
 
 <style>
-    .day-row {
+/* Time row */
-        display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0;
+.time-row { display:flex; align-items:center; gap:0.5rem; }
-        border-bottom: 1px solid #f0f0f0; flex-wrap: wrap;
+.time-block { display:flex; flex-direction:column; flex:1; }
-    }
+.time-lbl { font-size:0.75rem; color:#888; margin-bottom:0.2rem; }
-    .day-row .day-date { font-weight: 600; min-width: 6rem; font-size: 0.9rem; }
+.time-sep { font-size:1.2rem; color:#aaa; padding-top:1.2rem; }
-    .day-row input[type="time"] { width: 7rem; padding: 0.2rem 0.4rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.85rem; }
+
-    .day-row .remove-btn { color: #e55; cursor: pointer; font-size: 0.8rem; margin-left: auto; background: none; border: none; }
+/* Calendar toolbar */
+.cal-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.5rem; }
+
+
+/* Calendar container */
+.sched-cal { background:#fafafa; border:1px solid #eee; border-radius:10px; overflow:hidden; }
+
+.cal-nav { display:flex; align-items:center; justify-content:space-between; padding:0.6rem 0.75rem; background:#fff; border-bottom:1px solid #eee; }
+.cal-nav button { background:none; border:none; font-size:1.1rem; cursor:pointer; color:#6c63ff; padding:0.2rem 0.5rem; border-radius:4px; }
+.cal-nav button:hover { background:#f0eeff; }
+.cal-nav span { font-weight:700; font-size:1rem; color:#333; }
+
+.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); }
+
+.cal-wday { text-align:center; font-size:0.72rem; font-weight:700; color:#aaa; padding:0.4rem 0; background:#fafafa; }
+.cal-wday.is-weekend { color:#f0a0a0; }
+
+.cal-day { text-align:center; padding:0.55rem 0.2rem; font-size:0.9rem; cursor:pointer; color:#333; border-radius:0; transition:background 0.1s; position:relative; user-select:none; -webkit-user-select:none; }
+.cal-day:hover { background:#f0eeff; }
+.cal-day.is-empty { cursor:default; }
+.cal-day.is-empty:hover { background:none; }
+.cal-day.is-today { font-weight:700; color:#6c63ff; }
+.cal-day.is-selected { background:#6c63ff !important; color:#fff !important; border-radius:0; }
+.cal-day.is-range-start { background:#a89cff !important; color:#fff !important; }
+.cal-day.is-past { color:#ccc; }
+
+/* Selected days list */
+.day-row { display:flex; align-items:center; gap:0.4rem; padding:0.45rem 0; border-bottom:1px solid #f5f5f5; }
+.day-row:last-child { border-bottom:none; }
+.day-date { font-weight:600; font-size:0.85rem; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.day-times { display:flex; align-items:center; gap:0.25rem; flex-shrink:0; }
+.day-times .time-sep { color:#bbb; font-size:0.8rem; }
+.day-rm { background:none; border:none; color:#ccc; cursor:pointer; font-size:1rem; padding:0.15rem 0.25rem; flex-shrink:0; line-height:1; }
+.day-rm:hover { color:#e55; }
+
+/* Time badge */
+.time-badge-wrap {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: #ede9ff;
+    color: #5b52d6;
+    border: 1.5px solid #c4beff;
+    border-radius: 20px;
+    padding: 0.15rem 0.5rem;
+    font-size: 0.78rem;
+    font-weight: 700;
+    cursor: pointer;
+    min-width: 3.6rem;
+    white-space: nowrap;
+}
+.time-badge-wrap:focus-within {
+    border-color: #6c63ff;
+    background: #f0eeff;
+}
+.time-badge-label { pointer-events: none; z-index: 1; }
+.time-badge-input {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+    border: none;
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    font-size: 16px; /* prevent iOS zoom */
+}
 </style>
 
 <script>
-const days = new Map(); // date string -> {start, end}
+(function() {
-const removeLabel = '{{ t.schedule_remove_day }}';
+
-const weekdays = '{{ lang.code() }}' === 'ru'
+const IS_RU = '{{ lang.code() }}' === 'ru';
-    ? ['Вс','Пн','Вт','Ср','Чт','Пт','Сб']
+const TZ    = '{{ timezone }}';
-    : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
+const WDAYS  = IS_RU ? ['Пн','Вт','Ср','Чт','Пт','Сб','Вс'] : ['Mo','Tu','We','Th','Fr','Sa','Su'];
+const MONTHS = IS_RU
+    ? ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь']
+    : ['January','February','March','April','May','June','July','August','September','October','November','December'];
+
+const days = new Map(); // dateStr -> {start, end}
+let viewYear, viewMonth;
+let rangeMode = false;
+let rangeStart = null; // dateStr of first tap in range mode
+
+const now       = new Date();
+const todayStr_ = tzDateStr(now);
+viewYear  = parseInt(todayStr_.slice(0, 4));
+viewMonth = parseInt(todayStr_.slice(5, 7)) - 1; // 0-based
+
+function isoDate(y, m, d) {
+    return y + '-' + String(m+1).padStart(2,'0') + '-' + String(d).padStart(2,'0');
+}
 
 function getDefaults() {
     return {
         start: document.getElementById('defaultStart').value || '18:00',
-        end: document.getElementById('defaultEnd').value || '19:00'
+        end:   document.getElementById('defaultEnd').value   || '19:00'
     };
 }
 
-function addDay(dateStr) {
+function addDay(ds) {
-    if (!dateStr || days.has(dateStr)) return;
+    if (!ds || days.has(ds)) return;
     const def = getDefaults();
-    days.set(dateStr, { start: def.start, end: def.end });
+    days.set(ds, { start: def.start, end: def.end });
-    renderDays();
 }
 
-function removeDay(dateStr) {
+function toggleDay(ds) {
-    days.delete(dateStr);
+    if (days.has(ds)) { days.delete(ds); } else { addDay(ds); }
-    renderDays();
 }
 
-function renderDays() {
+// Получить текущую дату в нужном TZ как строку YYYY-MM-DD
-    const list = document.getElementById('daysList');
+function tzDateStr(d) {
-    const msg = document.getElementById('noDaysMsg');
+    const parts = new Intl.DateTimeFormat('en-CA', {
-    const btn = document.getElementById('submitBtn');
+        timeZone: TZ, year: 'numeric', month: '2-digit', day: '2-digit'
+    }).formatToParts(d);
+    const p = {};
+    parts.forEach(function(x) { p[x.type] = x.value; });
+    return p.year + '-' + p.month + '-' + p.day;
+}
 
-    // Remove old day rows
+function fillRange(from, to) {
-    list.querySelectorAll('.day-row').forEach(el => el.remove());
+    if (from > to) { let t = from; from = to; to = t; }
+    // Используем полдень чтобы избежать проблем с переходом суток при смене DST
+    let cur = new Date(from + 'T12:00:00');
+    const end = new Date(to  + 'T12:00:00');
+    while (cur <= end) {
+        addDay(tzDateStr(cur));
+        cur.setDate(cur.getDate() + 1);
+    }
+}
 
+// ── Render calendar ──────────────────────────────────────
+function renderCal() {
+    document.getElementById('calTitle').textContent = MONTHS[viewMonth] + ' ' + viewYear;
+
+    const grid = document.getElementById('calGrid');
+    grid.innerHTML = '';
+
+    // Weekday headers
+    WDAYS.forEach(function(wd, i) {
+        const cell = document.createElement('div');
+        cell.className = 'cal-wday' + (i >= 5 ? ' is-weekend' : '');
+        cell.textContent = wd;
+        grid.appendChild(cell);
+    });
+
+    // First day of month (Mon=0 for our grid)
+    const first = new Date(viewYear, viewMonth, 1);
+    let startDow = first.getDay(); // 0=Sun
+    startDow = (startDow === 0) ? 6 : startDow - 1; // shift to Mon=0
+
+    const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
+    const todayStr = todayStr_;
+
+    // Empty cells before first day
+    for (let i = 0; i < startDow; i++) {
+        const empty = document.createElement('div');
+        empty.className = 'cal-day is-empty';
+        grid.appendChild(empty);
+    }
+
+    for (let d = 1; d <= daysInMonth; d++) {
+        const ds = isoDate(viewYear, viewMonth, d);
+        const cell = document.createElement('div');
+        let cls = 'cal-day';
+        if (ds === todayStr) cls += ' is-today';
+        if (days.has(ds))    cls += ' is-selected';
+        if (ds === rangeStart) cls += ' is-range-start';
+        cell.className = cls;
+        cell.textContent = d;
+        cell.dataset.date = ds;
+        cell.addEventListener('click', onDayClick);
+        grid.appendChild(cell);
+    }
+}
+
+function onDayClick(e) {
+    const ds = e.currentTarget.dataset.date;
+    if (!ds) return;
+    if (rangeMode) {
+        if (days.has(ds)) {
+            days.delete(ds);
+            if (rangeStart === ds) rangeStart = null;
+        } else if (!rangeStart) {
+            rangeStart = ds;
+        } else {
+            fillRange(rangeStart, ds);
+            rangeStart = null;
+        }
+    } else {
+        toggleDay(ds);
+    }
+
+    renderCal();
+    renderList();
+}
+
+// ── Render selected days list ────────────────────────────
+function renderList() {
+    const list    = document.getElementById('daysList');
+    const section = document.getElementById('selectedSection');
+    const count   = document.getElementById('selectedCount');
+    const btn     = document.getElementById('submitBtn');
+
+    list.innerHTML = '';
+
+    const resetBtn = document.getElementById('resetBtn');
     if (days.size === 0) {
-        msg.style.display = '';
+        section.style.display = 'none';
         btn.disabled = true;
         document.getElementById('daysJson').value = '[]';
+        resetBtn.style.display = 'none';
         return;
     }
-    msg.style.display = 'none';
+    resetBtn.style.display = '';
+
+    section.style.display = '';
     btn.disabled = false;
+    count.textContent = days.size;
 
-    // Sort by date
+    const sorted = [...days.entries()].sort((a,b) => a[0].localeCompare(b[0]));
-    const sorted = [...days.entries()].sort((a, b) => a[0].localeCompare(b[0]));
 
-    sorted.forEach(([dateStr, times]) => {
+    sorted.forEach(function([ds, times]) {
-        const d = new Date(dateStr + 'T00:00:00');
+        const d   = new Date(ds + 'T00:00:00');
-        const wd = weekdays[d.getDay()];
+        const dow = IS_RU
-        const label = dateStr.split('-').reverse().join('.') + ' ' + wd;
+            ? ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'][d.getDay()]
+            : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'][d.getDay()];
+        const parts = ds.split('-');
+        const label = parts[2] + '.' + parts[1] + ' ' + dow; // DD.MM Вт
 
         const row = document.createElement('div');
         row.className = 'day-row';
-        row.innerHTML = `
+        row.innerHTML =
-            <span class="day-date">${label}</span>
+            '<span class="day-date">' + label + '</span>' +
-            <input type="time" value="${times.start}" data-date="${dateStr}" data-field="start">
+            '<div class="day-times">' +
-            <span>—</span>
+                '<div class="time-badge-wrap">' +
-            <input type="time" value="${times.end}" data-date="${dateStr}" data-field="end">
+                    '<span class="time-badge-label">' + times.start + '</span>' +
-            <button type="button" class="remove-btn" data-date="${dateStr}">${removeLabel}</button>
+                    '<input type="time" class="time-badge-input" value="' + times.start + '" data-date="' + ds + '" data-field="start">' +
-        `;
+                '</div>' +
+                '<span class="time-sep">—</span>' +
+                '<div class="time-badge-wrap">' +
+                    '<span class="time-badge-label">' + times.end + '</span>' +
+                    '<input type="time" class="time-badge-input" value="' + times.end + '" data-date="' + ds + '" data-field="end">' +
+                '</div>' +
+            '</div>' +
+            '<button type="button" class="day-rm" data-date="' + ds + '" title="Убрать">✕</button>';
         list.appendChild(row);
     });
 
-    // Update hidden JSON
+    list.querySelectorAll('.time-badge-input').forEach(function(inp) {
-    updateJson();
-
-    // Bind events
-    list.querySelectorAll('input[type="time"]').forEach(inp => {
         inp.addEventListener('change', function() {
-            const dt = this.dataset.date;
+            const d = days.get(this.dataset.date);
-            const field = this.dataset.field;
+            if (d) {
-            if (days.has(dt)) {
+                d[this.dataset.field] = this.value;
-                days.get(dt)[field] = this.value;
+                this.previousElementSibling.textContent = this.value;
                 updateJson();
             }
         });
     });
-    list.querySelectorAll('.remove-btn').forEach(btn => {
+    list.querySelectorAll('.day-rm').forEach(function(b) {
-        btn.addEventListener('click', function() {
+        b.addEventListener('click', function() {
-            removeDay(this.dataset.date);
+            days.delete(this.dataset.date);
+            renderCal();
+            renderList();
         });
     });
+
+    updateJson();
 }
 
 function updateJson() {
-    const arr = [...days.entries()].map(([date, t]) => ({
+    const arr = [...days.entries()].map(function([date, t]) {
-        date: date,
+        return { date: date, time_start: t.start, time_end: t.end };
-        time_start: t.start,
+    });
-        time_end: t.end
-    }));
     document.getElementById('daysJson').value = JSON.stringify(arr);
 }
 
-document.getElementById('addDateBtn').addEventListener('click', function() {
+// ── Navigation ───────────────────────────────────────────
-    const v = document.getElementById('pickDate').value;
+document.getElementById('calPrev').addEventListener('click', function() {
-    addDay(v);
+    viewMonth--;
-    document.getElementById('pickDate').value = '';
+    if (viewMonth < 0) { viewMonth = 11; viewYear--; }
+    renderCal();
+});
+document.getElementById('calNext').addEventListener('click', function() {
+    viewMonth++;
+    if (viewMonth > 11) { viewMonth = 0; viewYear++; }
+    renderCal();
 });
 
-document.getElementById('pickDate').addEventListener('keydown', function(e) {
+// ── Range mode toggle ────────────────────────────────────
-    if (e.key === 'Enter') { e.preventDefault(); document.getElementById('addDateBtn').click(); }
+document.getElementById('rangeModeBtn').addEventListener('click', function() {
-});
+    rangeMode = !rangeMode;
-
+    rangeStart = null;
-document.getElementById('fillRangeBtn').addEventListener('click', function() {
+    if (rangeMode) {
-    const from = document.getElementById('rangeFrom').value;
+        this.classList.remove('is-outlined', 'is-info');
-    const to = document.getElementById('rangeTo').value;
+        this.classList.add('is-warning');
-    if (!from || !to || from > to) return;
+        this.textContent = '✕ Выбрать отдельные дни';
-    let cur = new Date(from + 'T00:00:00');
+    } else {
-    const end = new Date(to + 'T00:00:00');
+        this.classList.remove('is-warning');
-    while (cur <= end) {
+        this.classList.add('is-outlined', 'is-info');
-        const ds = cur.toISOString().slice(0, 10);
+        this.textContent = '⇔ Выбрать диапазон';
-        addDay(ds);
-        cur.setDate(cur.getDate() + 1);
     }
-    document.getElementById('rangeFrom').value = '';
+    renderCal();
-    document.getElementById('rangeTo').value = '';
 });
 
-// Set default pick date to today
+document.getElementById('resetBtn').addEventListener('click', function() {
-document.getElementById('pickDate').valueAsDate = new Date();
+    days.clear();
+    rangeStart = null;
+    renderCal();
+    renderList();
+});
+
+// ── Default time change → update existing days ───────────
+// (only updates days that still have the old default)
+// kept simple: doesn't retroactively update already-added days
+
+renderCal();
+renderList();
+
+})();
 </script>
 {% endblock %}

templates/admin/settings.html

@@ -44,7 +44,77 @@
                 <input class="input" type="text" name="timezone" placeholder="Asia/Vladivostok" value="{% for s in &settings %}{% if s.key == "timezone" %}{{ s.value }}{% endif %}{% endfor %}">
             </div>
         </div>
+        <div class="field">
+            <label class="label">{{ t.settings_seo_keywords }}</label>
+            <div class="control">
+                <textarea id="seoKeywordsInput" class="textarea" name="seo_keywords" rows="3"
+                    style="resize:vertical;"
+                    placeholder="зооняня Хабаровск, присмотр за питомцем Хабаровск, догситтер Хабаровск">{% for s in &settings %}{% if s.key == "seo_keywords" %}{{ s.value }}{% endif %}{% endfor %}</textarea>
+            </div>
+            <div id="seoPreview" style="margin-top:0.5rem;padding:0.5rem 0.75rem;background:#fafafa;border:1px solid #eee;border-radius:6px;min-height:2rem;line-height:2;font-size:0.85rem;display:none;"></div>
+            <p style="font-size:0.78rem;color:#aaa;margin-top:0.3rem;">Каждая фраза между запятыми — отдельное ключевое слово</p>
+        </div>
+
+        <div class="field">
+            <label class="label">{{ t.settings_turnstile_site_key }}</label>
+            <div class="control">
+                <input class="input" type="text" name="turnstile_site_key" value="{% for s in &settings %}{% if s.key == "turnstile_site_key" %}{{ s.value }}{% endif %}{% endfor %}">
+            </div>
+        </div>
+        <div class="field">
+            <label class="label">{{ t.settings_turnstile_secret_key }}</label>
+            <div class="control">
+                <input class="input" type="text" name="turnstile_secret_key" value="{% for s in &settings %}{% if s.key == "turnstile_secret_key" %}{{ s.value }}{% endif %}{% endfor %}">
+            </div>
+        </div>
+
         <button type="submit" class="button is-primary">{{ t.settings_save }}</button>
     </form>
 </div>
+
+<script>
+(function() {
+    var COLORS = [
+        'rgba(124,108,255,0.18)',
+        'rgba(255,82,135,0.15)',
+        'rgba(255,140,38,0.18)',
+        'rgba(0,180,150,0.15)',
+        'rgba(77,166,255,0.18)',
+        'rgba(255,179,64,0.18)',
+        'rgba(176,108,255,0.16)',
+        'rgba(34,180,130,0.16)',
+    ];
+
+    var ta      = document.getElementById('seoKeywordsInput');
+    var preview = document.getElementById('seoPreview');
+
+    function esc(s) {
+        return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+    }
+
+    function render() {
+        var text = ta.value.trim();
+        if (!text) { preview.style.display = 'none'; return; }
+
+        var parts = text.split(',');
+        var html = '';
+        parts.forEach(function(part, i) {
+            var word = part.trim();
+            if (word) {
+                var color = COLORS[i % COLORS.length];
+                html += '<span style="background:' + color + ';border-radius:4px;padding:2px 6px;margin:2px;">' + esc(word) + '</span>';
+            }
+            if (i < parts.length - 1) {
+                html += '<span style="color:#ccc;font-size:0.8em;margin:0 1px">,</span>';
+            }
+        });
+
+        preview.innerHTML = html;
+        preview.style.display = 'block';
+    }
+
+    ta.addEventListener('input', render);
+    render();
+})();
+</script>
 {% endblock %}

templates/client_portal.html

@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ t.portal_title }} — {{ client.name }}</title>
     <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    {% if !turnstile_site_key.is_empty() %}
+    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
+    {% endif %}
     <style>
         :root { color-scheme: light; }
         *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@@ -166,6 +169,9 @@
             </div>
             <form class="feedback-form" id="fb-form-{{ pv.visit.id }}" style="display:none;" method="post" action="/client/{{ client.media_token }}/{{ pv.visit.id }}/feedback">
                 <textarea name="feedback" required>{{ fb }}</textarea>
+                {% if !turnstile_site_key.is_empty() %}
+                <div class="cf-turnstile" data-sitekey="{{ turnstile_site_key }}" data-theme="light" data-appearance="interaction-only" style="margin-top:0.4rem;"></div>
+                {% endif %}
                 <div style="display:flex;gap:0.4rem;">
                     <button type="submit">{{ t.portal_feedback_submit }}</button>
                     <button type="button" class="fb-cancel-btn" onclick="hideFbEdit({{ pv.visit.id }})">✕</button>
@@ -174,6 +180,9 @@
             {% else %}
             <form class="feedback-form" method="post" action="/client/{{ client.media_token }}/{{ pv.visit.id }}/feedback">
                 <textarea name="feedback" placeholder="{{ t.portal_feedback_placeholder }}" required></textarea>
+                {% if !turnstile_site_key.is_empty() %}
+                <div class="cf-turnstile" data-sitekey="{{ turnstile_site_key }}" data-theme="light" data-appearance="interaction-only" style="margin-top:0.4rem;"></div>
+                {% endif %}
                 <button type="submit">{{ t.portal_feedback_submit }}</button>
             </form>
             {% endif %}

templates/landing.html

@@ -21,6 +21,10 @@
     <meta property="og:locale" content="{% if lang.code() == "ru" %}ru_RU{% else %}en_US{% endif %}">
     <meta property="og:site_name" content="{{ t.nav_title }}">
 
+    {% if !seo_keywords.is_empty() %}
+    <meta name="keywords" content="{{ seo_keywords }}">
+    {% endif %}
+
     <!-- Twitter Card -->
     <meta name="twitter:card" content="summary">
     <meta name="twitter:title" content="{{ t.nav_title }} — {{ t.landing_hero_title }}">
@@ -46,6 +50,10 @@
     }
     </script>
 
+    {% if !turnstile_site_key.is_empty() %}
+    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
+    {% endif %}
+
     <style>
         /* ── Reset & Base ── */
         *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@@ -301,6 +309,10 @@
             border-top: 1px solid rgba(180,170,220,0.15);
             background: rgba(255,255,255,0.3);
         }
+        .seo-keywords {
+            font-size: 0.72rem; color: #aaa; line-height: 2;
+            max-width: 800px; margin: 0 auto 1rem;
+        }
 
         /* ── Mobile ── */
         @media (max-width: 600px) {
@@ -456,6 +468,9 @@
                 <input type="checkbox" id="consent" name="consent" required style="margin-top:0.2rem;width:auto;flex-shrink:0;">
                 <label for="consent" style="font-size:0.82rem;font-weight:400;color:#7a7599;cursor:pointer;display:inline;">{{ t.landing_form_consent }}</label>
             </div>
+            {% if !turnstile_site_key.is_empty() %}
+            <div class="cf-turnstile" data-sitekey="{{ turnstile_site_key }}" data-theme="light" data-size="compact" style="margin-bottom:1.25rem;"></div>
+            {% endif %}
             <button type="submit" class="form-submit">{{ t.landing_form_submit }}</button>
         </form>
         {% if !contact_info.is_empty() %}
@@ -469,6 +484,9 @@
 
 <!-- Footer -->
 <footer class="site-footer">
+    {% if !seo_keywords.is_empty() %}
+    <p class="seo-keywords" id="seoKeywords">{{ seo_keywords }}</p>
+    {% endif %}
     <p>{{ t.landing_footer_text }}</p>
     <p style="margin-top:0.4rem;">&copy; 2026 {{ t.nav_title }}. {{ t.landing_footer_copyright }}.</p>
 </footer>