Mitime Mongolia

Митайм -д тавтай морил — Сэтгэлээ шингээн амьдралыг бүтээнэ МИНТАЙМ МОНГОЛИА

Монгол

Англи Монгол

Бидэнтэй холбогдох:

+976 7775-6789

И-Мэйл хаяг:

office-mgl@mitime.group

Цагийн хуваарь:

Да - Бя: 09:30 - 17:00

БИД БҮТЭЭНЭ, ТАНЬД АМЖИЛТЫГ АВЧИРНА

ЧАНАРААР БҮТЭЭЖ,

ҮНЭ ЦЭНЭЭР МӨНХӨЛНӨ

Барилгын салбарт тэргүүлэгч байр суурийг эзэлж, харилцагчдынхаа итгэлийг даасан бүтээн байгуулалтыг бид цогцлооно.

Бидэнтэй холбогдох

БИД БҮТЭЭНЭ, ТАНЬД АМЖИЛТЫГ АВЧИРНА

ШИНЭ ИРЭЭДҮЙГ

БИД БҮТЭЭЛЦЭНЭ

Олон улсын стандартад нийцсэн чанартай барилга угсралт, инженерийн шийдлүүд.

Бидэнтэй холбогдох

БИД БҮТЭЭНЭ, ТАНЬД АМЖИЛТЫГ АВЧИРНА

АЮУЛГҮЙ БАЙДАЛ

БИДНИЙ ТЭРГҮҮЛЭХ ЧИГЛЭЛ

Хөдөлмөрийн аюулгүй байдлыг дээд зэргээр хангаж, байгаль орчинд ээлтэй бүтээн байгуулалт.

Бидэнтэй холбогдох

МИТАЙМ МОНГОЛ

Харилцагч байгууллагууд

ehy

Gem

Toson

Selenge

Raid

ciaarm

Gihg

Hhuyg

ehy

Gem

Toson

Selenge

Raid

ciaarm

Gihg

Hhuyg

// Data Configuration const timelineData = [ { id: 1, year: '2023', date: '2023.11.01', title: 'Өвлийн бүтээн байгуулалт', description: 'Өвлийн улиралд ч зогсолтгүй үргэлжлэх бүтээн байгуулалтын ажил амжилттай явагдаж, төлөвлөгөөт хугацаандаа ашиглалтад орох боломж бүрдлээ.', imageUrl: 'https://images.unsplash.com/photo-1517524008697-84bbe3c3fd98?auto=format&fit=crop&q=80&w=600' }, { id: 2, year: '2023', date: '2023.03.16', title: 'Шүүх явдлын яамны дүрэм', description: 'Монгол улс дахь нотариатын үүсэл, хөгжил Монгол Улсын Засгийн газрын тогтоолоор баталсан түүхэн өдөр.', imageUrl: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&q=80&w=600' }, { id: 3, year: '2022', date: '2022.07.22', title: 'Шинэчлэлийн дараах үйлчилгээ', description: 'Хууль зүйн салбарын шинэчлэлийн хүрээнд нотариатын үйлчилгээг цахимжуулах ажлын эхлэл тавигдаж, иргэдэд үйлчлэх хүртээмжийг нэмэгдүүлэв.', imageUrl: 'https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?q=80&w=1170&auto=format&fit=crop' }, { id: 4, year: '2022', date: '2022.02.10', title: 'Инновацийн шагнал', description: 'Салбартаа нэвтрүүлсэн шинэ технологи, инновацийн шийдлээрээ "Оны шилдэг бүтээн байгуулалт" шагналыг хүртэв.', imageUrl: 'https://images.unsplash.com/photo-1531403009284-440f080d1e12?auto=format&fit=crop&q=80&w=600' }, { id: 5, year: '2021', date: '2021.05.23', title: 'Барилгын салбарын түүхэн өсөлт', description: 'Цар тахлын дараах эдийн засгийн сэргэлтийн үед барилгын салбар огцом өсөлт үзүүлж, томоохон төслүүд амжилттай хэрэгжиж эхэллээ.', imageUrl: 'https://images.unsplash.com/photo-1496568816309-51d7c20e3b21?auto=format&fit=crop&q=80&w=600' }, { id: 6, year: '2020', date: '2020.09.23', title: 'Шинэ оффисийн нээлт', description: 'Компанийн үйл ажиллагаа өргөжиж, Улаанбаатар хотын төвд орчин үеийн стандартын шаардлага хангасан шинэ төв оффис ашиглалтад орлоо.', imageUrl: 'https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&q=80&w=600' }, { id: 7, year: '2019', date: '2019.06.15', title: 'Олон улсын шагнал', description: 'Манай компани Азийн барилгын салбарын шилдэг гүйцэтгэгч шагналыг хүртэж, олон улсын тавцанд Монгол улсын нэрийг гаргалаа.', imageUrl: 'https://images.unsplash.com/photo-1464938050520-ef2270bb8ce8?auto=format&fit=crop&q=80&w=600' }, { id: 8, year: '2018', date: '2018.04.10', title: 'Анхны томоохон төсөл', description: 'Компанийн түүхэн дэх анхны 50 давхар барилгын төслийг амжилттай эхлүүлж, салбартаа шинэ жишиг тогтоов.', imageUrl: 'https://images.unsplash.com/photo-1486325212027-8081e485255e?auto=format&fit=crop&q=80&w=600' }, { id: 9, year: '2017', date: '2017.02.01', title: 'Үүсгэн байгуулагдсан нь', description: 'Митаүм Монголиа компани албан ёсоор үүсгэн байгуулагдаж, барилга, бүтээн байгуулалтын салбарт үйл ажиллагаа явуулж эхлэв.', imageUrl: 'https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&q=80&w=600' } ]; // Sort timelineData by date ascending for proper timeline flow (oldest to newest left to right) const parseDate = (dateStr) => { const [year, month, day] = dateStr.split('.'); return new Date(year, month - 1, day); }; timelineData.sort((a, b) => parseDate(b.date) - parseDate(a.date)); // --- Logic --- let activeYear = '2023'; // Get unique years and sort descending (recent first in tabs) const years = Array.from(new Set(timelineData.map(item => item.year))) .sort((a, b) => Number(b) - Number(a)); const yearTabsContainer = document.getElementById('year-tabs'); const timelineTrack = document.getElementById('timeline-track'); const scrollContainer = document.getElementById('timeline-scroll-area'); const btnPrev = document.getElementById('btn-prev'); const btnNext = document.getElementById('btn-next'); function renderYears() { yearTabsContainer.innerHTML = years.map(year => { const isActive = activeYear === year; const activeClassText = isActive ? 'text-brand-red scale-110' : 'text-gray-400 group-hover:text-gray-600'; const activeClassDot = isActive ? 'border-white bg-primary scale-125' : 'bg-white border border-dark border-1 group-hover:border-gray-400'; return ` <button onclick="handleYearClick('${year}')" class="group relative flex flex-col items-center min-w-[60px] focus:outline-none"> <span class="text-sm md:text-base font-bold mb-4 transition-colors duration-300 ${activeClassText}"> ${year} </span> <div class="absolute -bottom-[10px] left-1/2 transform -translate-x-1/2 w-3 h-3 rounded-full transition-all duration-300 z-10 ${activeClassDot}"></div> </button> `; }).join(''); } function renderTimelineItems() { const line = '<div class="absolute top-1/2 left-0 w-full h-[2px] bg-gray-200/80 z-0"></div>'; const itemsHtml = timelineData.map((item, index) => { const isOdd = index % 2 === 0; const isTop = isOdd; // Matches the React Logic: index 0 (even) -> Bottom, index 1 (odd) -> Top const verticalLineClass = isTop ? 'bottom-1/2 h-[40px] group-hover:h-[50px] origin-bottom' : 'top-1/2 h-[40px] group-hover:h-[50px] origin-top'; const cardWrapperClass = isTop ? 'bottom-1/2 mb-[40px] group-hover:mb-[50px]' : 'top-1/2 mt-[40px] group-hover:mt-[50px]'; const arrowClass = isTop ? '-bottom-2 border-r border-b rotate-45' // Point down : '-top-2 border-l border-t rotate-45'; // Point up return ` <div class="relative w-[350px] mx-4 flex-shrink-0 h-[450px] group flex justify-center timelineItem" data-year="${item.year}">  <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-sm font-bold text-white z-20 shadow-sm group-hover:scale-125 transition-transform duration-300 whitespace-nowrap bg-primary px-2 py-1 rounded-lg"> ${item.date} </div>  <div class="absolute left-1/2 transform -translate-x-1/2 w-[1px] bg-gray-300 -z-10 transition-all duration-500 ${verticalLineClass}"></div>  <div class="absolute left-0 w-full transition-all duration-500 px-2 ${cardWrapperClass}">  <div class="bg-white p-4 rounded-lg shadow-md border border-gray-100 relative group-hover:shadow-2xl transition-all duration-300">  <div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-white border-gray-100 z-10 ${arrowClass}"></div>  <div class="h-36 w-full overflow-hidden rounded mb-3 relative"> <img src="${item.imageUrl}" alt="${item.title}" class="w-full h-full object-cover transform group-hover:scale-110 transition duration-700" /> <div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition duration-300"></div> </div> <h3 class="font-bold text-base md:text-lg mb-2 text-gray-800 leading-tight group-hover:text-brand-red transition-colors"> ${item.title} </h3> <p class="text-xs text-gray-500 leading-relaxed line-clamp-3"> ${item.description} </p> </div> </div> </div> `; }).join(''); const spacer = '<div class="w-20 flex-shrink-0"></div>'; timelineTrack.innerHTML = line + itemsHtml + spacer; } // --- Interaction --- window.handleYearClick = (year) => { activeYear = year; renderYears(); // Update UI for active year // Find the first index of the year const firstIndex = timelineData.findIndex(item => item.year === year); if (firstIndex === -1) return; // Count number of items in this year const numItems = timelineData.filter(item => item.year === year).length; // Calculate group bounds let minLeft = Infinity; let maxRight = -Infinity; for (let i = 0; i < numItems; i++) { const itemIndex = firstIndex + i; const targetItem = timelineTrack.children[itemIndex + 1]; // +1 for the line if (targetItem) { const itemLeft = targetItem.offsetLeft; const itemWidth = targetItem.offsetWidth; minLeft = Math.min(minLeft, itemLeft); maxRight = Math.max(maxRight, itemLeft + itemWidth); } } if (minLeft !== Infinity && maxRight !== -Infinity) { const groupCenter = (minLeft + maxRight) / 2; const containerWidth = scrollContainer.clientWidth; scrollContainer.scrollTo({ left: groupCenter - (containerWidth / 2), behavior: 'smooth' }); } }; btnPrev.addEventListener('click', () => { const currentIndex = years.indexOf(activeYear); const newIndex = Math.max(0, currentIndex - 1); // To newer year if (newIndex !== currentIndex) { const newYear = years[newIndex]; handleYearClick(newYear); } }); btnNext.addEventListener('click', () => { const currentIndex = years.indexOf(activeYear); const newIndex = Math.min(years.length - 1, currentIndex + 1); // To older year if (newIndex !== currentIndex) { const newYear = years[newIndex]; handleYearClick(newYear); } }); // Initialize renderYears(); renderTimelineItems(); // Initial scroll to active year handleYearClick(activeYear);