Spaces:
Running
Running
| <html lang="et"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MTMehitus – 3D disainid, ehitusprojektid ja täislahendused</title> | |
| <!-- Font Awesome 6 Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <!-- Google Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <style> | |
| /* RESET & PÕHISTIILID */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --primary-dark: #0b1a2e; | |
| --primary-blue: #1e3a5f; | |
| --accent-gold: #f5b042; | |
| --accent-gold-hover: #e09e2f; | |
| --accent-gold-light: #fef4e2; | |
| --light-bg: #f4f7fa; | |
| --white: #ffffff; | |
| --gray-text: #5a6b7c; | |
| --gray-light: #e2e8f0; | |
| --card-shadow: 0 10px 30px rgba(11, 26, 46, 0.08); | |
| --radius-lg: 16px; | |
| --radius-sm: 8px; | |
| } | |
| body { | |
| font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; | |
| background-color: var(--light-bg); | |
| color: #1e2a3a; | |
| line-height: 1.6; | |
| scroll-behavior: smooth; | |
| } | |
| .container { | |
| max-width: 1240px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| /* TÜPOGRAAFIA JA NUPUD */ | |
| h1, h2, h3, h4 { | |
| font-weight: 700; | |
| letter-spacing: -0.02em; | |
| color: var(--primary-dark); | |
| } | |
| h2 { | |
| font-size: 2.2rem; | |
| margin-bottom: 0.8rem; | |
| } | |
| .section-title { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| } | |
| .section-title span { | |
| display: block; | |
| background: var(--accent-gold); | |
| width: 70px; | |
| height: 4px; | |
| border-radius: 4px; | |
| margin: 10px auto 0; | |
| } | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| padding: 14px 32px; | |
| border-radius: 50px; | |
| font-weight: 700; | |
| text-decoration: none; | |
| transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); | |
| border: none; | |
| cursor: pointer; | |
| font-size: 1rem; | |
| } | |
| .btn-primary { | |
| background: var(--accent-gold); | |
| color: var(--primary-dark); | |
| box-shadow: 0 4px 18px rgba(245, 176, 66, 0.35); | |
| } | |
| .btn-primary:hover { | |
| background: var(--accent-gold-hover); | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 25px rgba(245, 176, 66, 0.45); | |
| } | |
| .btn-secondary { | |
| background: var(--primary-blue); | |
| color: var(--white); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--primary-dark); | |
| transform: translateY(-2px); | |
| } | |
| .btn-outline { | |
| background: transparent; | |
| color: var(--white); | |
| border: 2px solid var(--white); | |
| } | |
| .btn-outline:hover { | |
| background: var(--white); | |
| color: var(--primary-dark); | |
| } | |
| /* HEADER & NAVIGATSIOON */ | |
| header { | |
| background: var(--primary-dark); | |
| padding: 16px 0; | |
| position: sticky; | |
| top: 0; | |
| z-index: 1000; | |
| box-shadow: 0 4px 20px rgba(0,0,0,0.25); | |
| } | |
| .header-flex { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .logo a { | |
| font-size: 1.6rem; | |
| font-weight: 800; | |
| color: var(--white); | |
| text-decoration: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .logo a span { | |
| color: var(--accent-gold); | |
| } | |
| nav ul { | |
| display: flex; | |
| list-style: none; | |
| gap: 28px; | |
| align-items: center; | |
| } | |
| nav ul li a { | |
| color: rgba(255,255,255,0.85); | |
| text-decoration: none; | |
| font-weight: 600; | |
| transition: 0.2s; | |
| font-size: 0.95rem; | |
| } | |
| nav ul li a:hover { | |
| color: var(--accent-gold); | |
| } | |
| .nav-cta { | |
| background: var(--accent-gold); | |
| color: var(--primary-dark) ; | |
| padding: 10px 24px; | |
| border-radius: 40px; | |
| font-weight: 700; | |
| } | |
| .nav-cta:hover { | |
| background: var(--accent-gold-hover) ; | |
| } | |
| .menu-toggle { | |
| display: none; | |
| color: var(--white); | |
| font-size: 1.8rem; | |
| cursor: pointer; | |
| } | |
| /* HERO SEKTSIOON */ | |
| .hero { | |
| background: linear-gradient(135deg, var(--primary-dark) 0%, #10263f 100%); | |
| color: var(--white); | |
| padding: 90px 0 100px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero-grid { | |
| display: grid; | |
| grid-template-columns: 1.1fr 0.9fr; | |
| gap: 50px; | |
| align-items: center; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .hero h1 { | |
| font-size: 3.5rem; | |
| color: var(--white); | |
| line-height: 1.15; | |
| margin-bottom: 1.2rem; | |
| } | |
| .hero h1 span { | |
| color: var(--accent-gold); | |
| } | |
| .hero p { | |
| font-size: 1.2rem; | |
| opacity: 0.9; | |
| margin-bottom: 2rem; | |
| max-width: 540px; | |
| } | |
| .hero-badges { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 24px; | |
| margin-top: 2.5rem; | |
| } | |
| .badge-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| background: rgba(255,255,255,0.06); | |
| padding: 8px 16px; | |
| border-radius: 30px; | |
| border: 1px solid rgba(255,255,255,0.1); | |
| } | |
| .badge-item i { | |
| color: var(--accent-gold); | |
| font-size: 1.2rem; | |
| } | |
| .hero-card-preview { | |
| background: rgba(255,255,255,0.05); | |
| border-radius: var(--radius-lg); | |
| padding: 30px; | |
| border: 1px solid rgba(255,255,255,0.15); | |
| backdrop-filter: blur(10px); | |
| text-align: center; | |
| box-shadow: 0 20px 40px rgba(0,0,0,0.3); | |
| } | |
| .hero-card-preview i.main-icon { | |
| font-size: 3.5rem; | |
| color: var(--accent-gold); | |
| margin-bottom: 15px; | |
| } | |
| /* USALDUSRIBA */ | |
| .trust-bar { | |
| background: var(--white); | |
| padding: 30px 0; | |
| box-shadow: 0 4px 20px rgba(0,0,0,0.03); | |
| border-bottom: 1px solid var(--gray-light); | |
| } | |
| .trust-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); | |
| gap: 20px; | |
| text-align: center; | |
| } | |
| .trust-item .number { | |
| font-size: 1.8rem; | |
| font-weight: 800; | |
| color: var(--primary-blue); | |
| display: block; | |
| } | |
| .trust-item .label { | |
| font-size: 0.85rem; | |
| color: var(--gray-text); | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| /* INTERAKTIIVNE KODU KONFIGURAATOR & AI SEKTSIOON */ | |
| .builder-section { | |
| padding: 80px 0; | |
| background: #eef3f8; | |
| } | |
| .builder-card { | |
| background: var(--white); | |
| border-radius: 24px; | |
| padding: 40px; | |
| box-shadow: var(--card-shadow); | |
| border: 1px solid var(--gray-light); | |
| } | |
| .tab-buttons { | |
| display: flex; | |
| gap: 12px; | |
| margin-bottom: 30px; | |
| border-bottom: 2px solid var(--gray-light); | |
| padding-bottom: 12px; | |
| } | |
| .tab-btn { | |
| background: transparent; | |
| border: none; | |
| padding: 12px 24px; | |
| font-weight: 700; | |
| font-size: 1rem; | |
| color: var(--gray-text); | |
| cursor: pointer; | |
| border-radius: 30px; | |
| transition: all 0.2s; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .tab-btn.active { | |
| background: var(--primary-blue); | |
| color: var(--white); | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| /* MUDELI FORMID & VALIKUD */ | |
| .form-grid-2 { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 30px; | |
| } | |
| .form-group { | |
| margin-bottom: 20px; | |
| } | |
| .form-group label { | |
| display: block; | |
| font-weight: 700; | |
| margin-bottom: 8px; | |
| color: var(--primary-dark); | |
| font-size: 0.95rem; | |
| } | |
| .form-control, select, textarea { | |
| width: 100%; | |
| padding: 12px 16px; | |
| border-radius: 12px; | |
| border: 1px solid #cbd5e1; | |
| font-family: inherit; | |
| font-size: 0.95rem; | |
| background: var(--white); | |
| transition: all 0.2s; | |
| } | |
| .form-control:focus, select:focus, textarea:focus { | |
| outline: none; | |
| border-color: var(--primary-blue); | |
| box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.15); | |
| } | |
| .option-cards { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); | |
| gap: 12px; | |
| } | |
| .option-card { | |
| border: 2px solid var(--gray-light); | |
| border-radius: 12px; | |
| padding: 14px 10px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| background: var(--white); | |
| } | |
| .option-card:hover { | |
| border-color: var(--primary-blue); | |
| background: #f8fafc; | |
| } | |
| .option-card.selected { | |
| border-color: var(--primary-blue); | |
| background: #eef6ff; | |
| color: var(--primary-blue); | |
| font-weight: 700; | |
| } | |
| .option-card i { | |
| font-size: 1.5rem; | |
| display: block; | |
| margin-bottom: 6px; | |
| } | |
| /* TULEMUSTE PANEEL & KULUDE JAOTUS */ | |
| .results-panel { | |
| background: #0b1a2e; | |
| color: var(--white); | |
| border-radius: 20px; | |
| padding: 30px; | |
| margin-top: 30px; | |
| } | |
| .results-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border-bottom: 1px solid rgba(255,255,255,0.15); | |
| padding-bottom: 20px; | |
| margin-bottom: 20px; | |
| flex-wrap: wrap; | |
| gap: 15px; | |
| } | |
| .total-price-box { | |
| text-align: right; | |
| } | |
| .total-price-box .price { | |
| font-size: 2.5rem; | |
| font-weight: 800; | |
| color: var(--accent-gold); | |
| line-height: 1; | |
| } | |
| .stage-breakdown { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); | |
| gap: 16px; | |
| margin-bottom: 25px; | |
| } | |
| .stage-card { | |
| background: rgba(255,255,255,0.06); | |
| border-radius: 12px; | |
| padding: 16px; | |
| border: 1px solid rgba(255,255,255,0.08); | |
| } | |
| .stage-card h4 { | |
| color: var(--white); | |
| font-size: 0.95rem; | |
| margin-bottom: 6px; | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .stage-card .stage-price { | |
| color: var(--accent-gold); | |
| font-weight: 700; | |
| } | |
| .materials-list { | |
| background: rgba(255,255,255,0.04); | |
| border-radius: 12px; | |
| padding: 20px; | |
| margin-top: 20px; | |
| font-size: 0.9rem; | |
| } | |
| .materials-list ul { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 10px; | |
| list-style: none; | |
| margin-top: 10px; | |
| } | |
| .materials-list li { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| color: #cbd5e1; | |
| } | |
| .materials-list li i { | |
| color: var(--accent-gold); | |
| font-size: 0.8rem; | |
| } | |
| /* AI VISUAAL */ | |
| .ai-image-container { | |
| width: 100%; | |
| height: 320px; | |
| background: rgba(255,255,255,0.05); | |
| border: 2px dashed rgba(255,255,255,0.2); | |
| border-radius: 16px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| overflow: hidden; | |
| position: relative; | |
| margin-top: 20px; | |
| } | |
| .ai-image-container img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .loading-spinner { | |
| display: none; | |
| text-align: center; | |
| color: var(--accent-gold); | |
| } | |
| .loading-spinner i { | |
| font-size: 2.5rem; | |
| animation: spin 1s linear infinite; | |
| margin-bottom: 10px; | |
| } | |
| @keyframes spin { | |
| 100% { transform: rotate(360deg); } | |
| } | |
| /* TEENUSED & PROJEKTID */ | |
| .services { | |
| padding: 80px 0; | |
| background: var(--white); | |
| } | |
| .services-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 30px; | |
| } | |
| .service-card { | |
| background: var(--light-bg); | |
| padding: 35px 28px; | |
| border-radius: 20px; | |
| transition: all 0.3s; | |
| text-align: center; | |
| border-bottom: 4px solid transparent; | |
| } | |
| .service-card:hover { | |
| transform: translateY(-8px); | |
| border-bottom-color: var(--accent-gold); | |
| box-shadow: var(--card-shadow); | |
| background: var(--white); | |
| } | |
| .service-card i { | |
| font-size: 2.8rem; | |
| color: var(--primary-blue); | |
| margin-bottom: 20px; | |
| } | |
| .service-card h3 { | |
| font-size: 1.3rem; | |
| margin-bottom: 12px; | |
| } | |
| .service-card p { | |
| color: var(--gray-text); | |
| font-size: 0.95rem; | |
| } | |
| /* PROJEKTID */ | |
| .projects { | |
| padding: 80px 0; | |
| background: #f1f5f9; | |
| } | |
| .project-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 30px; | |
| } | |
| .project-card { | |
| background: var(--white); | |
| border-radius: 20px; | |
| overflow: hidden; | |
| box-shadow: var(--card-shadow); | |
| } | |
| .project-img { | |
| height: 220px; | |
| background: #cbd5e1; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--primary-blue); | |
| font-size: 3rem; | |
| background-image: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%); | |
| } | |
| .project-info { | |
| padding: 24px; | |
| } | |
| .project-info h3 { | |
| font-size: 1.25rem; | |
| margin-bottom: 6px; | |
| } | |
| .project-info .location { | |
| font-size: 0.9rem; | |
| color: var(--gray-text); | |
| margin-bottom: 12px; | |
| } | |
| .tag { | |
| background: var(--accent-gold-light); | |
| color: var(--primary-dark); | |
| padding: 4px 14px; | |
| border-radius: 30px; | |
| font-size: 0.8rem; | |
| font-weight: 700; | |
| display: inline-block; | |
| } | |
| /* MEIST */ | |
| .about { | |
| padding: 80px 0; | |
| background: var(--white); | |
| } | |
| .about-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 60px; | |
| align-items: center; | |
| } | |
| .about-list { | |
| list-style: none; | |
| margin-top: 24px; | |
| } | |
| .about-list li { | |
| margin-bottom: 14px; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| font-size: 1rem; | |
| } | |
| .about-list li i { | |
| color: var(--accent-gold); | |
| font-size: 1.2rem; | |
| } | |
| .about-box { | |
| background: var(--light-bg); | |
| border-radius: 24px; | |
| padding: 40px; | |
| border: 2px dashed #cbd5e1; | |
| text-align: center; | |
| } | |
| .about-box i { | |
| font-size: 4rem; | |
| color: var(--primary-blue); | |
| opacity: 0.4; | |
| margin-bottom: 20px; | |
| } | |
| /* KONTAKT */ | |
| .contact { | |
| padding: 80px 0; | |
| background: var(--primary-dark); | |
| color: var(--white); | |
| } | |
| .contact-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 60px; | |
| } | |
| .contact-info h2 { | |
| color: var(--white); | |
| } | |
| .contact-detail { | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| margin: 24px 0; | |
| } | |
| .contact-detail i { | |
| font-size: 1.8rem; | |
| color: var(--accent-gold); | |
| width: 45px; | |
| height: 45px; | |
| background: rgba(255,255,255,0.06); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .contact-form input, | |
| .contact-form textarea, | |
| .contact-form select { | |
| width: 100%; | |
| padding: 16px 20px; | |
| margin-bottom: 18px; | |
| border-radius: 12px; | |
| background: rgba(255,255,255,0.06); | |
| color: var(--white); | |
| font-size: 1rem; | |
| border: 1px solid rgba(255,255,255,0.1); | |
| } | |
| .contact-form input::placeholder, | |
| .contact-form textarea::placeholder { | |
| color: rgba(255,255,255,0.5); | |
| } | |
| .contact-form input:focus, | |
| .contact-form textarea:focus { | |
| outline: none; | |
| background: rgba(255,255,255,0.12); | |
| border-color: var(--accent-gold); | |
| } | |
| /* JALUS */ | |
| footer { | |
| background: #060f1c; | |
| color: rgba(255,255,255,0.6); | |
| padding: 35px 0; | |
| text-align: center; | |
| font-size: 0.9rem; | |
| border-top: 1px solid rgba(255,255,255,0.05); | |
| } | |
| footer a { | |
| color: rgba(255,255,255,0.7); | |
| text-decoration: none; | |
| margin: 0 15px; | |
| } | |
| footer a:hover { | |
| color: var(--accent-gold); | |
| } | |
| /* MÜÜGIRAKENDUSE KOMPONENDID */ | |
| .eyebrow { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| color: var(--accent-gold); | |
| font-weight: 800; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| font-size: 0.78rem; | |
| margin-bottom: 14px; | |
| } | |
| .journey { | |
| background: var(--white); | |
| padding: 34px 0; | |
| border-bottom: 1px solid var(--gray-light); | |
| } | |
| .journey-grid { | |
| display: grid; | |
| grid-template-columns: repeat(5, 1fr); | |
| gap: 12px; | |
| } | |
| .journey-step { | |
| display: flex; | |
| gap: 12px; | |
| align-items: center; | |
| padding: 14px; | |
| border-radius: 14px; | |
| background: var(--light-bg); | |
| font-size: 0.86rem; | |
| font-weight: 700; | |
| } | |
| .journey-step span { | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 50%; | |
| flex: 0 0 30px; | |
| display: grid; | |
| place-items: center; | |
| background: var(--primary-blue); | |
| color: var(--white); | |
| } | |
| .package-selector { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 16px; | |
| margin: 25px 0; | |
| } | |
| .package-option { | |
| position: relative; | |
| border: 2px solid var(--gray-light); | |
| background: var(--white); | |
| border-radius: 16px; | |
| padding: 22px; | |
| cursor: pointer; | |
| transition: 0.2s ease; | |
| } | |
| .package-option:hover, | |
| .package-option.selected { | |
| border-color: var(--accent-gold); | |
| box-shadow: 0 10px 24px rgba(11, 26, 46, 0.1); | |
| transform: translateY(-2px); | |
| } | |
| .package-option.selected::after { | |
| content: "Valitud"; | |
| position: absolute; | |
| top: 12px; | |
| right: 12px; | |
| background: var(--accent-gold); | |
| color: var(--primary-dark); | |
| border-radius: 20px; | |
| padding: 4px 10px; | |
| font-size: 0.72rem; | |
| font-weight: 800; | |
| } | |
| .package-option h3 { margin-bottom: 6px; } | |
| .package-option p { color: var(--gray-text); font-size: 0.88rem; } | |
| .package-price { color: var(--primary-blue); font-size: 1.15rem; font-weight: 800; margin-top: 12px; } | |
| .brief-panel { | |
| margin-top: 22px; | |
| background: linear-gradient(135deg, #eef6ff, #fff8eb); | |
| border: 1px solid #cbd5e1; | |
| border-radius: 18px; | |
| padding: 24px; | |
| } | |
| .brief-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 12px; | |
| margin-top: 15px; | |
| } | |
| .brief-stat { | |
| background: rgba(255,255,255,0.85); | |
| border-radius: 12px; | |
| padding: 14px; | |
| border: 1px solid rgba(30,58,95,0.08); | |
| } | |
| .brief-stat span { display: block; color: var(--gray-text); font-size: 0.75rem; } | |
| .brief-stat strong { color: var(--primary-dark); font-size: 1rem; } | |
| .action-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| margin-top: 20px; | |
| } | |
| .btn-small { | |
| padding: 10px 17px; | |
| font-size: 0.86rem; | |
| } | |
| .catalog-toolbar { | |
| display: grid; | |
| grid-template-columns: 1.5fr repeat(3, 1fr); | |
| gap: 12px; | |
| background: var(--white); | |
| border: 1px solid var(--gray-light); | |
| padding: 16px; | |
| border-radius: 16px; | |
| margin-bottom: 24px; | |
| } | |
| .catalog-toolbar input, | |
| .catalog-toolbar select { | |
| margin: 0; | |
| min-height: 48px; | |
| } | |
| .catalog-meta { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 15px; | |
| margin-bottom: 18px; | |
| color: var(--gray-text); | |
| font-size: 0.9rem; | |
| } | |
| .favorite-counter { | |
| border: 0; | |
| background: var(--accent-gold-light); | |
| color: var(--primary-dark); | |
| border-radius: 30px; | |
| padding: 8px 13px; | |
| font-weight: 800; | |
| cursor: pointer; | |
| } | |
| .project-card { | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| transition: transform 0.25s ease, box-shadow 0.25s ease; | |
| } | |
| .project-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 18px 36px rgba(11,26,46,0.14); | |
| } | |
| .project-img { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .project-img::after { | |
| content: ""; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(to top, rgba(11,26,46,0.5), transparent 60%); | |
| } | |
| .project-img i { position: relative; z-index: 1; color: rgba(255,255,255,0.86); } | |
| .favorite-btn { | |
| position: absolute; | |
| z-index: 3; | |
| top: 14px; | |
| right: 14px; | |
| width: 42px; | |
| height: 42px; | |
| border: 0; | |
| border-radius: 50%; | |
| background: rgba(255,255,255,0.92); | |
| color: var(--primary-blue); | |
| cursor: pointer; | |
| box-shadow: 0 4px 15px rgba(0,0,0,0.18); | |
| } | |
| .favorite-btn.active { background: var(--accent-gold); color: var(--primary-dark); } | |
| .project-info { flex: 1; display: flex; flex-direction: column; } | |
| .project-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding-top: 18px; } | |
| .project-specs { display: flex; flex-wrap: wrap; gap: 7px; margin: 13px 0; } | |
| .project-specs span { background: var(--light-bg); padding: 5px 9px; border-radius: 8px; font-size: 0.76rem; font-weight: 700; color: var(--primary-blue); } | |
| .empty-state { | |
| grid-column: 1 / -1; | |
| text-align: center; | |
| padding: 50px 20px; | |
| color: var(--gray-text); | |
| background: var(--white); | |
| border-radius: 18px; | |
| } | |
| .compare-section { | |
| padding: 80px 0; | |
| background: var(--white); | |
| } | |
| .compare-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 20px; | |
| } | |
| .compare-card { | |
| border: 1px solid var(--gray-light); | |
| border-radius: 20px; | |
| padding: 28px; | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .compare-card.featured { | |
| border: 2px solid var(--accent-gold); | |
| box-shadow: var(--card-shadow); | |
| } | |
| .compare-card .ribbon { | |
| position: absolute; | |
| right: 16px; | |
| top: 16px; | |
| background: var(--accent-gold); | |
| padding: 5px 10px; | |
| border-radius: 20px; | |
| font-size: 0.72rem; | |
| font-weight: 800; | |
| } | |
| .compare-card ul { list-style: none; margin: 18px 0 25px; flex: 1; } | |
| .compare-card li { margin: 10px 0; display: flex; gap: 9px; font-size: 0.9rem; } | |
| .compare-card li i { color: #159957; margin-top: 4px; } | |
| .modal { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(6,15,28,0.76); | |
| z-index: 3000; | |
| display: none; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 20px; | |
| } | |
| .modal.open { display: flex; } | |
| .modal-card { | |
| width: min(760px, 100%); | |
| max-height: 90vh; | |
| overflow: auto; | |
| background: var(--white); | |
| border-radius: 22px; | |
| padding: 30px; | |
| position: relative; | |
| } | |
| .modal-close { | |
| position: absolute; | |
| right: 18px; | |
| top: 18px; | |
| border: 0; | |
| background: var(--light-bg); | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| cursor: pointer; | |
| } | |
| .modal-hero { | |
| min-height: 180px; | |
| border-radius: 16px; | |
| margin: 18px 0; | |
| display: grid; | |
| place-items: center; | |
| font-size: 4rem; | |
| color: rgba(255,255,255,0.86); | |
| } | |
| .toast { | |
| position: fixed; | |
| right: 20px; | |
| bottom: 20px; | |
| z-index: 4000; | |
| max-width: 360px; | |
| background: var(--primary-dark); | |
| color: var(--white); | |
| padding: 15px 18px; | |
| border-radius: 12px; | |
| box-shadow: 0 14px 30px rgba(0,0,0,0.25); | |
| transform: translateY(120px); | |
| opacity: 0; | |
| transition: 0.25s ease; | |
| } | |
| .toast.show { transform: translateY(0); opacity: 1; } | |
| .consent { | |
| display: flex; | |
| gap: 10px; | |
| align-items: flex-start; | |
| color: rgba(255,255,255,0.72); | |
| font-size: 0.82rem; | |
| margin: -3px 0 18px; | |
| } | |
| .consent input { width: auto; margin: 4px 0 0; } | |
| .form-status { display: none; padding: 13px; border-radius: 10px; margin-bottom: 15px; font-size: 0.9rem; } | |
| .form-status.success { display: block; background: rgba(21,153,87,0.18); border: 1px solid rgba(21,153,87,0.5); } | |
| .sticky-project-bar { | |
| position: fixed; | |
| left: 50%; | |
| bottom: 16px; | |
| transform: translateX(-50%); | |
| z-index: 1200; | |
| width: min(720px, calc(100% - 24px)); | |
| background: rgba(11,26,46,0.96); | |
| color: var(--white); | |
| border: 1px solid rgba(255,255,255,0.12); | |
| border-radius: 18px; | |
| padding: 12px 16px; | |
| display: none; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 12px; | |
| box-shadow: 0 14px 34px rgba(0,0,0,0.28); | |
| backdrop-filter: blur(12px); | |
| } | |
| .sticky-project-bar.show { display: flex; } | |
| .sticky-project-bar small { display: block; opacity: 0.68; } | |
| /* RESPONSIIVSUS */ | |
| @media (max-width: 992px) { | |
| .hero-grid, .about-grid, .contact-grid, .form-grid-2 { | |
| grid-template-columns: 1fr; | |
| } | |
| .hero { text-align: center; } | |
| .hero p { margin-left: auto; margin-right: auto; } | |
| .hero-badges { justify-content: center; } | |
| .hero h1 { font-size: 2.8rem; } | |
| .journey-grid { grid-template-columns: repeat(3, 1fr); } | |
| .package-selector, .compare-grid { grid-template-columns: 1fr; } | |
| .brief-grid { grid-template-columns: repeat(2, 1fr); } | |
| .catalog-toolbar { grid-template-columns: 1fr 1fr; } | |
| } | |
| @media (max-width: 768px) { | |
| nav ul { | |
| display: none; | |
| flex-direction: column; | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| width: 100%; | |
| background: var(--primary-dark); | |
| padding: 25px 0; | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.3); | |
| } | |
| nav ul.open { display: flex; } | |
| .menu-toggle { display: block; } | |
| .builder-card { padding: 20px; } | |
| .hero h1 { font-size: 2.2rem; } | |
| .total-price-box { text-align: left; margin-top: 10px; } | |
| .journey-grid, .catalog-toolbar, .brief-grid { grid-template-columns: 1fr; } | |
| .project-actions { grid-template-columns: 1fr; } | |
| .sticky-project-bar { align-items: stretch; } | |
| } | |
| @media print { | |
| header, .hero, .trust-bar, .journey, .services, .projects, .about, .contact, footer, | |
| .tab-buttons, .package-selector, .action-row, .sticky-project-bar, .toast, .ai-image-container { display: none ; } | |
| body, .builder-section { background: #fff; } | |
| .builder-section { padding: 0; } | |
| .builder-card { box-shadow: none; border: 0; padding: 0; } | |
| .results-panel { color: #111; background: #fff; border: 1px solid #ddd; } | |
| .results-panel h3, .results-panel h4, .results-panel strong { color: #111 ; } | |
| .stage-card, .materials-list { border: 1px solid #ddd; background: #fff; color: #111; } | |
| .stage-card p, .materials-list li { color: #333; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- ====== HEADER ====== --> | |
| <header> | |
| <div class="container header-flex"> | |
| <div class="logo"> | |
| <a href="#"><i class="fas fa-hard-hat" style="color: var(--accent-gold);"></i> MTM <span>Ehitus</span> OÜ</a> | |
| </div> | |
| <div class="menu-toggle" id="menuToggle"> | |
| <i class="fas fa-bars"></i> | |
| </div> | |
| <nav> | |
| <ul id="navMenu"> | |
| <li><a href="#kalkulaator">Lahenduse planeerija</a></li> | |
| <li><a href="#paketid">Paketid</a></li> | |
| <li><a href="#teenused">Mida saab tellida?</a></li> | |
| <li><a href="#projektid">Valitud disainid</a></li> | |
| <li><a href="#meist">Meist</a></li> | |
| <li><a href="#kontakt" class="nav-cta">Küsi pakkumist</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- ====== HERO ====== --> | |
| <section class="hero"> | |
| <div class="container hero-grid"> | |
| <div> | |
| <h1>Ideest <span>3D disainini</span>, projektist <span>valmis lahenduseni</span></h1> | |
| <p>MTM Ehitus OÜ loob ja müüb läbimõeldud 3D-disainilahendusi, ehitusprojekte ning terviklikke võtmed-kätte lahendusi. Vali olemasolev kontseptsioon või telli täiesti personaalne projekt.</p> | |
| <div style="display: flex; gap: 15px; flex-wrap: wrap;"> | |
| <a href="#projektid" class="btn btn-primary"><i class="fas fa-cubes"></i> Vaata valitud disaine</a> | |
| <a href="#kalkulaator" class="btn btn-outline"><i class="fas fa-drafting-compass"></i> Koosta oma lähteülesanne</a> | |
| </div> | |
| <div class="hero-badges"> | |
| <div class="badge-item"><i class="fas fa-award"></i> 5+ aastat kogemust</div> | |
| <div class="badge-item"><i class="fas fa-building"></i> 100+ edukat objekti</div> | |
| <div class="badge-item"><i class="fas fa-shield-alt"></i> Usaldusväärne partner</div> | |
| </div> | |
| </div> | |
| <div class="hero-card-preview"> | |
| <i class="fas fa-home main-icon"></i> | |
| <h3>Vali täpselt selline lahendus, nagu vajad</h3> | |
| <p style="font-size: 0.95rem; opacity: 0.8; margin-top: 10px;">Osta 3D-disain, telli selle põhjal terviklik ehitusprojekt või anna kogu teostus meie juhtida.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ====== USALDUSRIBA ====== --> | |
| <section class="trust-bar"> | |
| <div class="container trust-grid"> | |
| <div class="trust-item"> | |
| <span class="number">16263144</span> | |
| <span class="label">Registrikood</span> | |
| </div> | |
| <div class="trust-item"> | |
| <span class="number">2021</span> | |
| <span class="label">Asutatud</span> | |
| </div> | |
| <div class="trust-item"> | |
| <span class="number">EE102412910</span> | |
| <span class="label">KMKR number</span> | |
| </div> | |
| <div class="trust-item"> | |
| <span class="number">0 €</span> | |
| <span class="label">Maksuvõlg</span> | |
| </div> | |
| <div class="trust-item"> | |
| <span class="number">Tallinn</span> | |
| <span class="label">Rävala pst 8</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ====== KLIENDITEEKOND ====== --> | |
| <section class="journey" aria-label="Projekti tellimise etapid"> | |
| <div class="container journey-grid"> | |
| <div class="journey-step"><span>1</span> Vali näidis või oma idee</div> | |
| <div class="journey-step"><span>2</span> Kohanda lähteandmed</div> | |
| <div class="journey-step"><span>3</span> Võrdle teenusepakette</div> | |
| <div class="journey-step"><span>4</span> Saa eelarve ja ajakava</div> | |
| <div class="journey-step"><span>5</span> Saada valmis lähteülesanne</div> | |
| </div> | |
| </section> | |
| <!-- ====== PROJEKTI AI-PLANEERIJA & EELARVEKALKULAATOR ====== --> | |
| <section class="builder-section" id="kalkulaator"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <span class="eyebrow"><i class="fas fa-wand-magic-sparkles"></i> Toimiv projektiplaneerija</span> | |
| <h2>Koosta lähteülesanne, eelarve ja ajakava</h2> | |
| <p style="color: var(--gray-text); max-width: 720px; margin: 10px auto 0;">Vali disain, teenusemaht ja tehnilised lähteandmed. Planeerija koostab kohe jagatava projektikokkuvõtte ning realistliku hinnavahemiku.</p> | |
| <span></span> | |
| </div> | |
| <div class="builder-card"> | |
| <!-- TAB NUPUD --> | |
| <div class="tab-buttons"> | |
| <button class="tab-btn active" onclick="switchTab('customizer')"><i class="fas fa-sliders-h"></i> 1. Lahenduse lähteandmed</button> | |
| <button class="tab-btn" onclick="switchTab('ai-prompt')"><i class="fas fa-magic"></i> 2. Kirjelda oma ideed</button> | |
| </div> | |
| <h3>Vali tellitav lahendus</h3> | |
| <div class="package-selector" id="package-selector"> | |
| <div class="package-option" data-package="concept" onclick="selectPackage('concept', this)"> | |
| <i class="fas fa-cube" style="color: var(--primary-blue); font-size: 1.7rem;"></i> | |
| <h3>3D-kontseptsioon</h3> | |
| <p>Välisilme, mahud, materjalid ja esitlusvisuaalid.</p> | |
| <div class="package-price">alates 1 450 €</div> | |
| </div> | |
| <div class="package-option selected" data-package="project" onclick="selectPackage('project', this)"> | |
| <i class="fas fa-drafting-compass" style="color: var(--primary-blue); font-size: 1.7rem;"></i> | |
| <h3>Ehitusprojekt</h3> | |
| <p>3D-kontseptsioon, joonised ja tehnilised põhilahendused.</p> | |
| <div class="package-price">alates 4 900 €</div> | |
| </div> | |
| <div class="package-option" data-package="turnkey" onclick="selectPackage('turnkey', this)"> | |
| <i class="fas fa-key" style="color: var(--primary-blue); font-size: 1.7rem;"></i> | |
| <h3>Täislahendus</h3> | |
| <p>Disain, projekt, juhtimine ja valmis teostus.</p> | |
| <div class="package-price">personaalne eelarve</div> | |
| </div> | |
| </div> | |
| <!-- TAHVEL 1: PARAMEETRITE PÕHJAL KONFIGURAATOR --> | |
| <div id="tab-customizer" class="tab-content active"> | |
| <div class="form-grid-2"> | |
| <div> | |
| <div class="form-group"> | |
| <label><i class="fas fa-map-location-dot"></i> Projekti asukoht / piirkond</label> | |
| <select id="project-region" onchange="updateCalculator()"> | |
| <option value="harju">Harjumaa / Tallinn</option> | |
| <option value="tartu">Tartumaa</option> | |
| <option value="parnu">Pärnumaa</option> | |
| <option value="rapla">Raplamaa</option> | |
| <option value="other">Muu Eesti piirkond</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label><i class="fas fa-building-user"></i> Hoone kasutusotstarve</label> | |
| <select id="building-use" onchange="updateCalculator()"> | |
| <option value="home">Eramu</option> | |
| <option value="summer">Suvila / puhkemaja</option> | |
| <option value="office">Äri- või büroohoone</option> | |
| <option value="outbuilding">Abihoone / stuudio</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label><i class="fas fa-ruler-combined"></i> Kavandatava hoone üldpindala: <span id="area-val" style="color: var(--primary-blue); font-weight: 800;">120</span> m²</label> | |
| <input type="range" id="house-area" min="40" max="350" value="120" step="5" class="form-control" oninput="updateCalculator()"> | |
| </div> | |
| <div class="form-group"> | |
| <label><i class="fas fa-layer-group"></i> Korruste arv</label> | |
| <div class="option-cards" id="floors-options"> | |
| <div class="option-card selected" onclick="selectOption('floors', 1, this)"><i class="fas fa-align-justify"></i> 1 Korrus</div> | |
| <div class="option-card" onclick="selectOption('floors', 1.5, this)"><i class="fas fa-cubes"></i> 1.5 Korrust (katusekorrus)</div> | |
| <div class="option-card" onclick="selectOption('floors', 2, this)"><i class="fas fa-building"></i> 2 Täiskorrust</div> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label><i class="fas fa-cubes"></i> Vundamendi tüüp</label> | |
| <select id="foundation-type" onchange="updateCalculator()"> | |
| <option value="plate">Plaatvundament (Parim energiatõhusus & põrandaküte)</option> | |
| <option value="strip">Lintvundament (Klassikaline ja tugev)</option> | |
| <option value="pile">Vaiavundament (Nõudlikumale pinnasele)</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label><i class="fas fa-border-all"></i> Seinte konstruktsioon</label> | |
| <select id="wall-type" onchange="updateCalculator()"> | |
| <option value="block">Kergplokk (Bauroc / Leca) + krohv/vooder</option> | |
| <option value="wood">Puitkarkass / Elementmaja (Kiire paigaldus)</option> | |
| <option value="clt">CLT Ristkihtpuit (Ökoloogiline & eksklusiivne)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="form-group"> | |
| <label><i class="fas fa-home"></i> Katuse tüüp ja kattematerjal</label> | |
| <select id="roof-type" onchange="updateCalculator()"> | |
| <option value="gable-tin">Viilkatus - Profiilplekk</option> | |
| <option value="gable-tile">Viilkatus - Betoon/Keraamiline kivi</option> | |
| <option value="flat">Lamekatus - SBS rullmaterjal</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label><i class="fas fa-fire"></i> Küttesüsteem ja energiaklass</label> | |
| <select id="heating-type" onchange="updateCalculator()"> | |
| <option value="geo">Maaküte + Soojustagastusega ventilatsioon (A-klass)</option> | |
| <option value="air-water">Õhk-vesi soojuspump + Ventilatsioon (A-klass)</option> | |
| <option value="air-air">Õhksoojuspump + Elektripõrandaküte (B-klass)</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label><i class="fas fa-paint-roller"></i> Viimistlusaste</label> | |
| <div class="option-cards" id="finish-options"> | |
| <div class="option-card" onclick="selectOption('finish', 'shell', this)"><i class="fas fa-square"></i> Kinnine karp</div> | |
| <div class="option-card" onclick="selectOption('finish', 'white', this)"><i class="fas fa-brush"></i> Valge karp</div> | |
| <div class="option-card selected" onclick="selectOption('finish', 'turnkey', this)"><i class="fas fa-key"></i> Võtmed kätte</div> | |
| </div> | |
| </div> | |
| <button class="btn btn-secondary" style="width: 100%; margin-top: 10px;" onclick="saveDraft()"> | |
| <i class="fas fa-floppy-disk"></i> Salvesta projekt mustandina | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- TAHVEL 2: AI KIRJELDUS JA PILDI ANALÜÜS --> | |
| <div id="tab-ai-prompt" class="tab-content"> | |
| <div class="form-group"> | |
| <label><i class="fas fa-comment-dots"></i> Kirjelda soovitud disaini, ruumiprogrammi ja kasutusotstarvet:</label> | |
| <textarea id="ai-description" rows="4" placeholder="Nt. Soovin 140 m² modernset ühekorruselist hoonet. Avatud eluruum, 3 magamistuba, maaküte, puitfassaad tumedate detailidega. Esmalt vajan 3D-disaini ja seejärel ehitusprojekti..."></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label><i class="fas fa-camera"></i> Või laadi üles krundifoto / inspiratsioonipilt (Valikuline):</label> | |
| <input type="file" id="ai-image-upload" accept="image/*" class="form-control"> | |
| </div> | |
| <button class="btn btn-primary" onclick="analyzeProjectIdea()"><i class="fas fa-list-check"></i> Analüüsi ideed ja koosta projektisuund</button> | |
| <div id="ai-analysis-result" style="display: none; margin-top: 20px; padding: 20px; background: var(--light-bg); border-radius: 12px; border-left: 4px solid var(--primary-blue);"> | |
| <h4><i class="fas fa-clipboard-check"></i> Projektianalüüs ja soovitused:</h4> | |
| <p id="ai-text-output" style="margin-top: 10px; color: var(--gray-text); font-size: 0.95rem;"></p> | |
| </div> | |
| </div> | |
| <!-- AUTOMAATNE PROJEKTIKAART --> | |
| <div class="brief-panel" id="project-brief"> | |
| <h3><i class="fas fa-file-signature"></i> Sinu projekti hetkeseis</h3> | |
| <p id="brief-title" style="color: var(--gray-text);">Uus 120 m² eramu – ehitusprojekti pakett</p> | |
| <div class="brief-grid"> | |
| <div class="brief-stat"><span>Valitud lahendus</span><strong id="brief-package">Ehitusprojekt</strong></div> | |
| <div class="brief-stat"><span>Hinnavahemik</span><strong id="brief-range">4 900–7 900 €</strong></div> | |
| <div class="brief-stat"><span>Eeldatav kestus</span><strong id="brief-duration">8–14 nädalat</strong></div> | |
| <div class="brief-stat"><span>Valmidusaste</span><strong id="brief-readiness">60%</strong></div> | |
| </div> | |
| <div class="action-row"> | |
| <button class="btn btn-secondary btn-small" onclick="downloadBrief()"><i class="fas fa-download"></i> Laadi lähteülesanne</button> | |
| <button class="btn btn-secondary btn-small" onclick="window.print()"><i class="fas fa-print"></i> Prindi / salvesta PDF</button> | |
| <button class="btn btn-secondary btn-small" onclick="copyBrief()"><i class="fas fa-copy"></i> Kopeeri kokkuvõte</button> | |
| </div> | |
| </div> | |
| <!-- TULEMUSTE JA KULUDE DYNAMILINE PANEEL --> | |
| <div class="results-panel"> | |
| <div class="results-header"> | |
| <div> | |
| <h3>Täislahenduse esialgne teostuseelarve</h3> | |
| <p style="opacity: 0.8; font-size: 0.9rem;">Hinnanguline projekteerimise ja ehituse lähte-eelarve valitud parameetrite põhjal. See ei ole kinnisvara müügihind ega siduv pakkumine.</p> | |
| </div> | |
| <div class="total-price-box"> | |
| <span style="font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; opacity: 0.8;">Täislahenduse lähte-eelarve:</span> | |
| <div class="price" id="total-price">180,000 €</div> | |
| <span style="font-size: 0.8rem; color: #cbd5e1;" id="price-per-m2">~1500 € / m²</span> | |
| </div> | |
| </div> | |
| <h4 style="color: var(--accent-gold); margin-bottom: 15px;"><i class="fas fa-list-ol"></i> Paketi etapid ja eelarvejaotus:</h4> | |
| <div class="stage-breakdown"> | |
| <div class="stage-card"> | |
| <h4><span id="stage-label-1">1. Lähteülesanne</span> <span class="stage-price" id="cost-foundation">980 €</span></h4> | |
| <p id="stage-desc-1" style="font-size: 0.8rem; opacity: 0.7;">Vajadused, krundiinfo, ruumiprogramm ja eesmärgid.</p> | |
| </div> | |
| <div class="stage-card"> | |
| <h4><span id="stage-label-2">2. Kontseptsioon</span> <span class="stage-price" id="cost-walls">1 960 €</span></h4> | |
| <p id="stage-desc-2" style="font-size: 0.8rem; opacity: 0.7;">Mahud, plaaniloogika, välisilme ja materjalid.</p> | |
| </div> | |
| <div class="stage-card"> | |
| <h4><span id="stage-label-3">3. Põhijoonised</span> <span class="stage-price" id="cost-roof">1 470 €</span></h4> | |
| <p id="stage-desc-3" style="font-size: 0.8rem; opacity: 0.7;">Plaanid, vaated, lõiked ja põhikonstruktsioonid.</p> | |
| </div> | |
| <div class="stage-card"> | |
| <h4><span id="stage-label-4">4. Tehniline kooskõla</span> <span class="stage-price" id="cost-utility">980 €</span></h4> | |
| <p id="stage-desc-4" style="font-size: 0.8rem; opacity: 0.7;">Konstruktsioonide ja tehnosüsteemide lähteinfo.</p> | |
| </div> | |
| <div class="stage-card"> | |
| <h4><span id="stage-label-5">5. Üleandmine</span> <span class="stage-price" id="cost-finish">490 €</span></h4> | |
| <p id="stage-desc-5" style="font-size: 0.8rem; opacity: 0.7;">Failipakett, konsultatsioon ja järgmiste sammude plaan.</p> | |
| </div> | |
| </div> | |
| <!-- VALITUD PAKETI PÕHISISU --> | |
| <div class="materials-list"> | |
| <h4 style="color: var(--white);"><i class="fas fa-boxes"></i> Valitud paketi põhisisu:</h4> | |
| <ul> | |
| <li><i class="fas fa-check"></i> <strong id="deliverable-1" style="color:var(--white);">Lähteülesanne ja ruumiprogramm</strong></li> | |
| <li><i class="fas fa-check"></i> <strong id="deliverable-2" style="color:var(--white);">3D-kontseptsioon ja materjalid</strong></li> | |
| <li><i class="fas fa-check"></i> <strong id="deliverable-3" style="color:var(--white);">Plaanid, vaated ja lõiked</strong></li> | |
| <li><i class="fas fa-check"></i> <strong id="deliverable-4" style="color:var(--white);">Failipakett ja konsultatsioon</strong></li> | |
| </ul> | |
| </div> | |
| <div class="action-row" style="justify-content: flex-end;"> | |
| <button class="btn btn-secondary" onclick="shareByEmail()"><i class="fas fa-envelope"></i> Saada e-postiga</button> | |
| <button class="btn btn-secondary" onclick="shareByWhatsApp()"><i class="fab fa-whatsapp"></i> WhatsApp</button> | |
| <button class="btn btn-primary" onclick="sendProjectToForm()"> | |
| <i class="fas fa-paper-plane"></i> Küsi selle lahenduse personaalset pakkumist | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ====== PAKETTIDE VÕRDLUS ====== --> | |
| <section class="compare-section" id="paketid"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <span class="eyebrow"><i class="fas fa-scale-balanced"></i> Läbipaistev teenusemaht</span> | |
| <h2>Kolm võimalust projektiga edasi minna</h2> | |
| <p style="color: var(--gray-text);">Alustada saab ainult visuaalsest kontseptsioonist ja liikuda hiljem sama lähteinfo põhjal järgmisse etappi.</p> | |
| <span></span> | |
| </div> | |
| <div class="compare-grid"> | |
| <article class="compare-card"> | |
| <h3>3D-kontseptsioon</h3> | |
| <p class="package-price">1 450–2 900 €</p> | |
| <p style="color: var(--gray-text);">Sobib idee, mahu ja välisilme kinnitamiseks.</p> | |
| <ul> | |
| <li><i class="fas fa-check-circle"></i> Lähteülesande töötuba</li> | |
| <li><i class="fas fa-check-circle"></i> 2 ruumilise lahenduse suunda</li> | |
| <li><i class="fas fa-check-circle"></i> 4 esitlusvisualiseeringut</li> | |
| <li><i class="fas fa-check-circle"></i> 2 parandusringi</li> | |
| <li><i class="fas fa-check-circle"></i> Materjali- ja värvikaart</li> | |
| </ul> | |
| <button class="btn btn-secondary" onclick="choosePackageAndScroll('concept')">Vali 3D-disain</button> | |
| </article> | |
| <article class="compare-card featured"> | |
| <span class="ribbon">Enim valitud</span> | |
| <h3>Ehitusprojekt</h3> | |
| <p class="package-price">4 900–11 900 €</p> | |
| <p style="color: var(--gray-text);">Sobib ehitusloa ja hinnapakkumiste ettevalmistamiseks.</p> | |
| <ul> | |
| <li><i class="fas fa-check-circle"></i> Kõik 3D-kontseptsiooni osad</li> | |
| <li><i class="fas fa-check-circle"></i> Plaanid, vaated ja lõiked</li> | |
| <li><i class="fas fa-check-circle"></i> Põhikonstruktsioonide lahendus</li> | |
| <li><i class="fas fa-check-circle"></i> Tehnosüsteemide lähteinfo</li> | |
| <li><i class="fas fa-check-circle"></i> Projekti eelarve lähteandmed</li> | |
| </ul> | |
| <button class="btn btn-primary" onclick="choosePackageAndScroll('project')">Vali ehitusprojekt</button> | |
| </article> | |
| <article class="compare-card"> | |
| <h3>Täislahendus</h3> | |
| <p class="package-price">alates 1 550 €/m²</p> | |
| <p style="color: var(--gray-text);">Sobib kliendile, kes soovib üht vastutavat partnerit.</p> | |
| <ul> | |
| <li><i class="fas fa-check-circle"></i> Disain ja ehitusprojekt</li> | |
| <li><i class="fas fa-check-circle"></i> Detailne kalkulatsioon</li> | |
| <li><i class="fas fa-check-circle"></i> Hanked ja partnerite juhtimine</li> | |
| <li><i class="fas fa-check-circle"></i> Ehituse teostus ja kvaliteedikontroll</li> | |
| <li><i class="fas fa-check-circle"></i> Üleandmisdokumentatsioon</li> | |
| </ul> | |
| <button class="btn btn-secondary" onclick="choosePackageAndScroll('turnkey')">Vali täislahendus</button> | |
| </article> | |
| </div> | |
| <p style="text-align: center; color: var(--gray-text); margin-top: 20px; font-size: 0.82rem;">Hinnad on esialgsed vahemikud. Lõplik hind sõltub mahust, asukohast, lähteandmete valmidusest ja eriosade vajadusest.</p> | |
| </div> | |
| </section> | |
| <!-- ====== TEENUSED ====== --> | |
| <section class="services" id="teenused"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>Vali sobiv koostöömaht</h2> | |
| <p style="color: var(--gray-text);">Alusta ideest või vali terviklahendus – iga etappi saab tellida eraldi</p> | |
| <span></span> | |
| </div> | |
| <div class="services-grid"> | |
| <div class="service-card"> | |
| <i class="fas fa-cube"></i> | |
| <h3>3D-disain ja kontseptsioon</h3> | |
| <p>Hoone välisilme, mahu, materjalide ja ruumilise idee professionaalne visualiseerimine enne projekteerimist.</p> | |
| </div> | |
| <div class="service-card"> | |
| <i class="fas fa-drafting-compass"></i> | |
| <h3>Ehitusprojekt</h3> | |
| <p>Valitud 3D-kontseptsiooni arendamine tehniliseks projektiks koos vajalike jooniste ja lahendustega.</p> | |
| </div> | |
| <div class="service-card"> | |
| <i class="fas fa-key"></i> | |
| <h3>Võtmed-kätte täislahendus</h3> | |
| <p>Disain, projekteerimine, eelarvestamine, ehitusjuhtimine ja teostus ühe vastutava partneri kaudu.</p> | |
| </div> | |
| <div class="service-card"> | |
| <i class="fas fa-pencil-ruler"></i> | |
| <h3>Personaalne erilahendus</h3> | |
| <p>Individuaalne arhitektuurne kontseptsioon kliendi krundi, vajaduste, stiili ja eelarve järgi.</p> | |
| </div> | |
| <div class="service-card"> | |
| <i class="fas fa-sync-alt"></i> | |
| <h3>Olemasoleva disaini kohandamine</h3> | |
| <p>Klientide poolt valitud lahenduste kohandamine uuele krundile, ruumiprogrammile või viimistlusstiilile.</p> | |
| </div> | |
| <div class="service-card"> | |
| <i class="fas fa-tasks"></i> | |
| <h3>Projekti- ja ehitusjuhtimine</h3> | |
| <p>Partnerite koordineerimine, ajakava, eelarve ja kvaliteedi juhtimine ideest valmimiseni.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ====== PROJEKTID ====== --> | |
| <section class="projects" id="projektid"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>Klientide valitud 3D-disainid ja lahendused</h2> | |
| <p style="color: var(--gray-text);">Filtreeri näidiseid, ava detailvaade, salvesta lemmikud ja kasuta sobivat lahendust oma projekti lähtepunktina.</p> | |
| <span></span> | |
| </div> | |
| <div class="catalog-toolbar"> | |
| <input type="search" id="catalog-search" placeholder="Otsi nime, stiili või materjali..." oninput="renderProjects()"> | |
| <select id="catalog-type" onchange="renderProjects()"> | |
| <option value="all">Kõik hoonetüübid</option> | |
| <option value="home">Eramud</option> | |
| <option value="summer">Puhkemajad</option> | |
| <option value="office">Ärihooned</option> | |
| <option value="outbuilding">Abihooned</option> | |
| </select> | |
| <select id="catalog-area" onchange="renderProjects()"> | |
| <option value="all">Kõik suurused</option> | |
| <option value="small">Kuni 100 m²</option> | |
| <option value="medium">101–160 m²</option> | |
| <option value="large">Üle 160 m²</option> | |
| </select> | |
| <select id="catalog-sort" onchange="renderProjects()"> | |
| <option value="featured">Soovitatud enne</option> | |
| <option value="area-asc">Pindala: väiksem enne</option> | |
| <option value="area-desc">Pindala: suurem enne</option> | |
| <option value="price-asc">Disainihind: väiksem enne</option> | |
| </select> | |
| </div> | |
| <div class="catalog-meta"> | |
| <span id="catalog-count">6 lahendust</span> | |
| <button class="favorite-counter" onclick="toggleFavoritesOnly()"><i class="fas fa-heart"></i> Lemmikud <span id="favorite-count">0</span></button> | |
| </div> | |
| <div class="project-grid" id="project-grid"></div> | |
| </div> | |
| </section> | |
| <!-- ====== MEIST ====== --> | |
| <section class="about" id="meist"> | |
| <div class="container about-grid"> | |
| <div> | |
| <h2>MTM Ehitus OÜ – üks partner kogu projektile</h2> | |
| <p style="color: var(--gray-text); margin-top: 12px;">Oleme Eesti projekteerimis- ja ehituspartner, kes ühendab 3D-disaini, tehnilise projekti ning teostuse üheks selgeks tervikuks. Klient võib tellida ühe etapi või kogu lahenduse ideest valmimiseni.</p> | |
| <ul class="about-list"> | |
| <li><i class="fas fa-check-circle"></i> <strong>Äriregistri kood:</strong> 16263144</li> | |
| <li><i class="fas fa-check-circle"></i> <strong>KMKR:</strong> EE102412910</li> | |
| <li><i class="fas fa-check-circle"></i> <strong>Asukoht:</strong> Rävala pst 8, Tallinn</li> | |
| <li><i class="fas fa-check-circle"></i> <strong>Juhatuse liikmed:</strong> Marek Telpt ja Külli Kuusaru</li> | |
| <li><i class="fas fa-check-circle"></i> <strong>Maksuvõlad:</strong> Puuduvad – puhas ajalugu</li> | |
| </ul> | |
| </div> | |
| <div class="about-box"> | |
| <i class="fas fa-users-cog"></i> | |
| <h3>Pühendunud meeskond</h3> | |
| <p style="color: var(--gray-text); margin-top: 10px;">Iga projekt algab läbimõeldud ideest ning liigub kontrollitult disaini, tehnilise lahenduse ja kvaliteetse teostuseni.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ====== KONTAKT ====== --> | |
| <section class="contact" id="kontakt"> | |
| <div class="container contact-grid"> | |
| <div class="contact-info"> | |
| <h2>Võta meiega ühendust</h2> | |
| <p style="opacity: 0.8; margin-top: 10px;">Kirjelda, kas vajad 3D-disaini, ehitusprojekti või täislahendust. Koostame sinu soovile vastava personaalse pakkumise.</p> | |
| <div class="contact-detail"> | |
| <i class="fas fa-phone-alt"></i> | |
| <div> | |
| <strong>Telefon:</strong><br> | |
| +372 507 1042 | |
| </div> | |
| </div> | |
| <div class="contact-detail"> | |
| <i class="fas fa-envelope"></i> | |
| <div> | |
| <strong>E-post:</strong><br> | |
| info@mtmehitus.ee | |
| </div> | |
| </div> | |
| <div class="contact-detail"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| <div> | |
| <strong>Aadress:</strong><br> | |
| Rävala pst 8, 10143 Tallinn | |
| </div> | |
| </div> | |
| </div> | |
| <div class="contact-form"> | |
| <form id="quote-form" onsubmit="handleFormSubmit(event)"> | |
| <div id="form-status" class="form-status" role="status"></div> | |
| <input type="text" id="form-name" placeholder="Teie Nimi *" required> | |
| <input type="email" id="form-email" placeholder="Teie E-post *" required> | |
| <input type="tel" id="form-phone" placeholder="Telefoninumber"> | |
| <select id="form-package" required> | |
| <option value="">Vali soovitud teenus *</option> | |
| <option value="3D-kontseptsioon">3D-kontseptsioon</option> | |
| <option value="Ehitusprojekt">Ehitusprojekt</option> | |
| <option value="Täislahendus">Täislahendus</option> | |
| <option value="Konsultatsioon">Vajan esmalt konsultatsiooni</option> | |
| </select> | |
| <textarea id="form-message" rows="5" placeholder="Kirjelda soovitud disaini, projekti või täislahendust..." required></textarea> | |
| <input type="text" id="form-company" tabindex="-1" autocomplete="off" style="position:absolute; left:-9999px;" aria-hidden="true"> | |
| <label class="consent"> | |
| <input type="checkbox" id="form-consent" required> | |
| <span>Nõustun, et MTM Ehitus OÜ kasutab sisestatud andmeid sellele päringule vastamiseks. Andmeid ei kasutata automaatselt turunduseks.</span> | |
| </label> | |
| <button type="submit" class="btn btn-primary" style="width: 100%;"><i class="fas fa-paper-plane"></i> Küsi personaalset pakkumist</button> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ====== PROJEKTI DETAILVAADE ====== --> | |
| <div class="modal" id="project-modal" role="dialog" aria-modal="true" aria-labelledby="modal-title" onclick="closeModalFromBackdrop(event)"> | |
| <div class="modal-card"> | |
| <button class="modal-close" onclick="closeProjectModal()" aria-label="Sulge"><i class="fas fa-times"></i></button> | |
| <span class="tag" id="modal-tag">3D-disain</span> | |
| <h2 id="modal-title" style="margin-top: 10px;">Projekti nimi</h2> | |
| <div class="modal-hero" id="modal-hero"><i class="fas fa-house"></i></div> | |
| <p id="modal-description" style="color: var(--gray-text);"></p> | |
| <div class="project-specs" id="modal-specs"></div> | |
| <h3 style="margin-top: 20px;">Mida saab kohandada?</h3> | |
| <p id="modal-customize" style="color: var(--gray-text); margin-top: 8px;"></p> | |
| <div class="action-row"> | |
| <button class="btn btn-primary" id="modal-use-btn"><i class="fas fa-sliders-h"></i> Kasuta lähtepunktina</button> | |
| <button class="btn btn-secondary" id="modal-quote-btn"><i class="fas fa-paper-plane"></i> Küsi pakkumist</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="toast" id="toast" role="status" aria-live="polite"></div> | |
| <div class="sticky-project-bar" id="sticky-project-bar"> | |
| <div> | |
| <small>Valitud lähteprojekt</small> | |
| <strong id="sticky-project-name">Projekt</strong> | |
| </div> | |
| <button class="btn btn-primary btn-small" onclick="document.querySelector('#kalkulaator').scrollIntoView({behavior:'smooth'})">Jätka planeerimist</button> | |
| </div> | |
| <!-- ====== JALUS ====== --> | |
| <footer> | |
| <div class="container"> | |
| <div style="margin-bottom: 15px;"> | |
| <a href="#kalkulaator">Lahenduse planeerija</a> | |
| <a href="#teenused">Koostöövõimalused</a> | |
| <a href="#projektid">Valitud disainid</a> | |
| <a href="#meist">Meist</a> | |
| <a href="#kontakt">Kontakt</a> | |
| </div> | |
| <p>© 2026 MTM Ehitus OÜ (Reg. 16263144) – Kõik õigused kaitstud.</p> | |
| </div> | |
| </footer> | |
| <!-- LOGIKA JA CALCULATOR JS --> | |
| <script type="application/legacy-disabled"> | |
| // GEMINI API SEADISTUS | |
| const apiKey = ""; // API võti käitusaegsest keskkonnast | |
| // MOBIILI MENÜÜ | |
| const menuToggle = document.getElementById('menuToggle'); | |
| const navMenu = document.getElementById('navMenu'); | |
| menuToggle.addEventListener('click', () => { | |
| navMenu.classList.toggle('open'); | |
| }); | |
| // KONFIGURAATORI OLEK (STATE) | |
| let configState = { | |
| area: 120, | |
| floors: 1, | |
| foundation: 'plate', | |
| wall: 'block', | |
| roof: 'gable-tin', | |
| heating: 'geo', | |
| finish: 'turnkey' | |
| }; | |
| // VALIKU SEADISTAMINE (NUPUD) | |
| function selectOption(type, value, element) { | |
| configState[type] = value; | |
| const parent = element.parentElement; | |
| parent.querySelectorAll('.option-card').forEach(card => card.classList.remove('selected')); | |
| element.classList.add('selected'); | |
| updateCalculator(); | |
| } | |
| // TAB MEELEOLU VAHETAMINE | |
| function switchTab(tabName) { | |
| document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active')); | |
| document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active')); | |
| if(tabName === 'customizer') { | |
| document.querySelectorAll('.tab-btn')[0].classList.add('active'); | |
| document.getElementById('tab-customizer').classList.add('active'); | |
| } else { | |
| document.querySelectorAll('.tab-btn')[1].classList.add('active'); | |
| document.getElementById('tab-ai-prompt').classList.add('active'); | |
| } | |
| } | |
| // KULUDE JA MATERJALIDE ARVUTAMINE | |
| function updateCalculator() { | |
| const area = parseInt(document.getElementById('house-area').value); | |
| configState.area = area; | |
| document.getElementById('area-val').innerText = area; | |
| configState.foundation = document.getElementById('foundation-type').value; | |
| configState.wall = document.getElementById('wall-type').value; | |
| configState.roof = document.getElementById('roof-type').value; | |
| configState.heating = document.getElementById('heating-type').value; | |
| // BAASHIND / M² | |
| let baseRate = 1200; // Valge karp base | |
| // Korruste kordaja | |
| if(configState.floors === 1.5) baseRate += 100; | |
| if(configState.floors === 2) baseRate += 180; | |
| // Vundament | |
| if(configState.foundation === 'plate') baseRate += 60; | |
| if(configState.foundation === 'pile') baseRate += 40; | |
| // Seinad | |
| if(configState.wall === 'clt') baseRate += 220; | |
| if(configState.wall === 'wood') baseRate += 50; | |
| // Küte | |
| if(configState.heating === 'geo') baseRate += 80; | |
| if(configState.heating === 'air-water') baseRate += 50; | |
| // Viimistlusaste | |
| if(configState.finish === 'shell') baseRate -= 350; | |
| if(configState.finish === 'turnkey') baseRate += 250; | |
| // KOGUSUMMA | |
| const totalPrice = area * baseRate; | |
| // Etappide kulujaotus (protsendina) | |
| const foundationCost = Math.round(totalPrice * 0.12); | |
| const wallCost = Math.round(totalPrice * 0.30); | |
| const roofCost = Math.round(totalPrice * 0.18); | |
| const utilityCost = Math.round(totalPrice * 0.18); | |
| const finishCost = Math.round(totalPrice * 0.22); | |
| // EEKUVA DYNAMIC UPDATE | |
| document.getElementById('total-price').innerText = totalPrice.toLocaleString('et-EE') + ' €'; | |
| document.getElementById('price-per-m2').innerText = `~${Math.round(baseRate)} € / m²`; | |
| document.getElementById('cost-foundation').innerText = foundationCost.toLocaleString('et-EE') + ' €'; | |
| document.getElementById('cost-walls').innerText = wallCost.toLocaleString('et-EE') + ' €'; | |
| document.getElementById('cost-roof').innerText = roofCost.toLocaleString('et-EE') + ' €'; | |
| document.getElementById('cost-utility').innerText = utilityCost.toLocaleString('et-EE') + ' €'; | |
| document.getElementById('cost-finish').innerText = finishCost.toLocaleString('et-EE') + ' €'; | |
| // MATERJALIKOGUSTE DÜNAAMILINE HINNANG | |
| const concreteM3 = Math.round(area * 0.22); | |
| const insulationM2 = Math.round(area * 1.6); | |
| const roofM2 = Math.round(area * (configState.floors > 1 ? 0.75 : 1.25)); | |
| document.getElementById('mat-concrete').innerText = `~${concreteM3} m³`; | |
| document.getElementById('mat-insulation').innerText = `~${insulationM2} m²`; | |
| document.getElementById('mat-walls').innerText = `~${area} m² (pindala alusel)`; | |
| document.getElementById('mat-roof').innerText = `~${roofM2} m²`; | |
| } | |
| // LEGACY INITIALIZER DISABLED – enhanced app.js initializes the application. | |
| // RETRY WITH EXPONENTIAL BACKOFF LOGIC | |
| async function fetchWithRetry(url, options, retries = 5) { | |
| const delays = [1000, 2000, 4000, 8000, 16000]; | |
| for (let i = 0; i < retries; i++) { | |
| try { | |
| const response = await fetch(url, options); | |
| if (response.ok) return await response.json(); | |
| } catch (err) { | |
| if (i === retries - 1) throw err; | |
| } | |
| await new Promise(res => setTimeout(res, delays[i])); | |
| } | |
| throw new Error("Päring ebaõnnestus pärast mitut katset."); | |
| } | |
| // AI PILDI GENEREERIMINE (IMAGEN API) | |
| async function generateAiHouseImage() { | |
| const loading = document.getElementById('ai-loading'); | |
| const imgPlaceholder = document.getElementById('ai-img-placeholder'); | |
| const imgEl = document.getElementById('ai-generated-img'); | |
| loading.style.display = 'block'; | |
| imgPlaceholder.style.display = 'none'; | |
| imgEl.style.display = 'none'; | |
| const promptText = `Modern architecturally designed ${configState.area} sqm private home in Estonia, ${configState.floors} storeys, with ${configState.wall} wall texture, modern roof, beautifully landscaped backyard, professional architectural visualization 8k render daylight`; | |
| try { | |
| const url = `https://generativelanguage.googleapis.com/v1beta/models/imagen-4.0-generate-001:predict?key=${apiKey}`; | |
| const payload = { | |
| instances: [{ prompt: promptText }], | |
| parameters: { sampleCount: 1 } | |
| }; | |
| const result = await fetchWithRetry(url, { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify(payload) | |
| }); | |
| if (result.predictions && result.predictions[0] && result.predictions[0].bytesBase64Encoded) { | |
| imgEl.src = `data:image/png;base64,${result.predictions[0].bytesBase64Encoded}`; | |
| imgEl.style.display = 'block'; | |
| } else { | |
| alert('Pildi genereerimine ei õnnestunud, proovige uuesti.'); | |
| imgPlaceholder.style.display = 'block'; | |
| } | |
| } catch (err) { | |
| console.error(err); | |
| alert('Pildi genereerimisel tekkis viga.'); | |
| imgPlaceholder.style.display = 'block'; | |
| } finally { | |
| loading.style.display = 'none'; | |
| } | |
| } | |
| // AI TEKSTI JA PILDI ANALÜÜS (GEMINI 2.5 FLASH) | |
| async function analyzeAiPrompt() { | |
| const desc = document.getElementById('ai-description').value; | |
| const fileInput = document.getElementById('ai-image-upload'); | |
| const resultBox = document.getElementById('ai-analysis-result'); | |
| const textOutput = document.getElementById('ai-text-output'); | |
| if (!desc && fileInput.files.length === 0) { | |
| alert('Palun sisesta kirjeldus või laadi üles pilt!'); | |
| return; | |
| } | |
| textOutput.innerText = 'Analüüsin sinu ideed ja koostan MTM Ehituse projektisuunda...'; | |
| resultBox.style.display = 'block'; | |
| let parts = [{ text: `Oled MTM Ehitus OÜ disaini- ja projektikonsultant. Kasutaja soovib 3D-disaini, ehitusprojekti või täislahendust. Kirjeldus: "${desc}". Anna lühike professionaalne soovitus sobiva teenusemahu, arhitektuurse suuna, peamiste tehniliste valikute ja järgmiste sammude kohta. Ära käsitle seda valmis maja või kinnisvara müügina.` }]; | |
| if (fileInput.files.length > 0) { | |
| const file = fileInput.files[0]; | |
| const base64Data = await new Promise((res) => { | |
| const reader = new FileReader(); | |
| reader.onload = e => res(e.target.result.split(',')[1]); | |
| reader.readAsDataURL(file); | |
| }); | |
| parts.push({ inlineData: { mimeType: file.type, data: base64Data } }); | |
| } | |
| try { | |
| const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`; | |
| const payload = { contents: [{ parts: parts }] }; | |
| const result = await fetchWithRetry(url, { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify(payload) | |
| }); | |
| const text = result.candidates?.[0]?.content?.parts?.[0]?.text; | |
| if (text) { | |
| textOutput.innerText = text; | |
| } else { | |
| textOutput.innerText = 'Analüüsi tegemine ebaõnnestus. Palun proovi uuesti.'; | |
| } | |
| } catch (err) { | |
| console.error(err); | |
| textOutput.innerText = 'Viga tehisintellektiga ühenduse loomisel.'; | |
| } | |
| } | |
| // PROJEKTI EDASISAATMINE KONTAKTIVORMIGA | |
| function sendProjectToForm() { | |
| const price = document.getElementById('total-price').innerText; | |
| const details = `PÄRING PROJEKTI PLANEERIJAST: | |
| - Kavandatav üldpindala: ${configState.area} m² | |
| - Korruseid: ${configState.floors} | |
| - Vundament: ${configState.foundation} | |
| - Seinad: ${configState.wall} | |
| - Katus: ${configState.roof} | |
| - Küte: ${configState.heating} | |
| - Viimistlusaste: ${configState.finish} | |
| - Täislahenduse esialgne lähte-eelarve: ${price} | |
| Soovin personaalset pakkumist 3D-disainile, ehitusprojektile või täislahendusele.`; | |
| document.getElementById('form-message').value = details; | |
| document.querySelector('#kontakt').scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| // VALITUD DISAINI PÄRINGUSSE LISAMINE | |
| function chooseDesign(designName) { | |
| document.getElementById('form-message').value = `Soovin pakkumist lahendusele „${designName}“. | |
| Mind huvitab: | |
| - 3D-disaini ostmine ja kohandamine | |
| - ehitusprojekti koostamine | |
| - täislahendus disainist teostuseni | |
| Palun võtke minuga ühendust, et täpsustada sobiv maht ja hind.`; | |
| document.querySelector('#kontakt').scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| // TEATED VORMI SAATMISEL | |
| function handleFormSubmit(e) { | |
| e.preventDefault(); | |
| alert('Aitäh! Teie päring MTM Ehitus OÜ-le on edukalt saadetud. Võtame teiega ühendust 24h jooksul.'); | |
| document.getElementById('quote-form').reset(); | |
| } | |
| </script> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> | |