Код:
<!--HTML-->
<script>
// ДАННЫЕ О ДОМАХ
// adress: "адрес дома",
// type: "тип недвижимости (аренда/продажа/только аренда)",
// price: "цена (может быть договорная или указана в формате $X/месяц или $X,XXX,XXX)",
// gif: "ссылка на гифку",
// description: "описание дома можно использовать <br/> для переноса строк",
// amenities: [“высокие панорамные окна”, “просторная терраса”, “частный пляж”, “двухэтажная планировка”, “полностью меблированная кухня”, “гостиная с камином”, “несколько спален”, “система кондиционирования”, “вечерняя зона с костром”],
// neighbors: ["список соседних домов", "в таком формате"],
// apartments: [
// { number: "номер квартиры", status: "статус (free/occupied)", residents: "имена жильцов (если есть)" },
// { number: "квартира 2", status: "occupied", residents: "Ande Barckett & Lionell Stewens" }
// ]
// Чтобы вставить новый дом, просто поставьте запятую после последней } и перед закрывающей ]
// скопируйте один из домов от { до }, вставьте после запятой и измените данные
// Чтобы удалить дом удалить все его данные от { до }
var housesData = [
{
address: "500 Bayshore Blvd, Tampa, FL — 500 Бэйшор Бульвар, Тампа, Флорида",
type: "аренда/продажа",
price: "эконом вариант",
gif: "https://upforme.ru/uploads/001c/85/fe/3/779670.gif",
description:
"трёхэтажный дом на несколько квартир в живописной тампе — редкая находка для ценителей жизни у океана. современное здание с просторными балконами и панорамными окнами открывает потрясающий вид на воду и закаты над заливом. каждая квартира продумана до мелочей: светлые интерьеры, функциональные планировки и стильная отделка.<br/>на территории — частная парковка, зелёная зона для отдыха и прямой выход к пляжу. идеальное место для жизни, отдыха или инвестиций в сердце флориды.",
amenities: ["панорамные окна с видом на залив", "просторные балконы", "частная парковка", "зеленая зона для отдыха", "прямой выход к пляжу", "функциональные планировки квартир", "современная отделка", "лифты на каждый этаж", "кондиционирование с климат-контролем"],
neighbors: ["115 N Franklin St, Tampa, FL — 115 Норт Франклин Стрит, Тампа, Флорида", "600 E Twiggs St, Tampa, FL — 600 Ист Твиггс Стрит, Тампа, Флорида"],
apartments: [
{ number: "квартира 1", status: "free", residents: null },
{ number: "квартира 2", status: "free", residents: null },
{ number: "квартира 3", status: "free", residents: null },
{ number: "квартира 4", status: "free", residents: null },
{ number: "квартира 5", status: "free", residents: null },
{ number: "квартира 6", status: "free", residents: null },
{ number: "квартира 7", status: "free", residents: null },
{ number: "квартира 8", status: "free", residents: null },
{ number: "квартира 9", status: "free", residents: null },
{ number: "квартира 10", status: "free", residents: null },
]
},
{
address: "115 N Franklin St, Tampa, FL — 115 Норт Франклин Стрит, Тампа, Флорида",
type: "аренда/продажа",
price: "бизнес вариант",
gif: "https://upforme.ru/uploads/001c/85/fe/3/150907.gif",
description:
"гостиная, просторная кухня, несколько спален, большие окна, благодаря которым дневной свет легко проникает внутрь. деревья вокруг, шум океана...<br/>этот симпатичный и полностью обставленный домик в уютном районе придется по душе молодым парам, которым хочется находиться в центре событий. в паре минут находится шумный квартал, где поют караоке, разливают напитки, катаются на аттракционах. идеальное место для свидания!.",
amenities: [
"мебель в современном стиле", "кухня с посудомоечной машиной", "гостиная с камином", "кабинет для работы", "гардеробная", "маленький садик во дворе", "тихая улица", "система «умный дом»", "балкон с видом на деревья"
],
neighbors: ["600 E Twiggs St, Tampa, FL — 600 Ист Твиггс Стрит, Тампа, Флорида", "500 Bayshore Blvd, Tampa, FL — 500 Бэйшор Бульвар, Тампа, Флорида"],
apartments: [ { number: "основной дом", status: "free", residents: null }]
},
{
address: "200 Harbour Island Blvd, Tampa, FL — 200 Харбор-Айленд Бульвар, Тампа, Флорида",
type: "аренда/продажа",
price: "люкс вариант",
gif: "https://upforme.ru/uploads/001c/85/fe/3/27211.gif",
description:
"хочется домашнего уюта не отходя от рабочего места? тогда это предложение точно для вас. этот старый дом долгое время был заброшен, но все же дождался реставрации и теперь поступил в продажу. он подходит для тех, кто не любит долго добираться до работы.<br/>да, это маяк. нет, не действующий. главное условие приобретения данного жилья - создание музея города прямо в башне маяка. если вы не против - дерзайте. посетителями будете обеспечены, поскольку неподалеку находится парк развлечений.",
amenities: [
"башня-маяк", "реставрированный интерьер", "просторная кухня, несколько спален", "панорамные окна", "малый сад на территории", "рабочий кабинет", "парковка на территории", "близость к парку развлечений"
],
neighbors: ["1420 W Kennedy Blvd, Tampa, FL — 1420 Уэст Кеннеди Бульвар, Тампа, Флорида"],
apartments: [{ number: "основной дом", status: "free", residents: null }]
},
{
address: "600 E Twiggs St, Tampa, FL — 600 Ист Твиггс Стрит, Тампа, Флорида",
type: "аренда/продажа",
price: "люкс вариант",
gif: "https://upforme.ru/uploads/001c/85/fe/3/139031.gif",
description:
"этот современный жилой комплекс расположен в центре тампы и идеально подойдет тем, кто предпочитает активный и насыщенный образ жизни. если вы не из тех, кто хочет камин в доме, огромный задний двор и пруд - тогда это для вас. несколько двухэтажных домиков, где есть все необходимые удобства. каждый этаж сдается в аренду, но при желании, можно приобрести домик целиком.<br/> здесь вы никогда не будете в одиночестве, поскольку большие панорамные окна не дадут вам скрываться в темноте помещений. для кого-то это плохо, а кто-то будет рад.",
amenities: ["двухэтажные домики", "панорамные окна", "современные кухни", "гостиные с открытой планировкой", "балконы", "кондиционеры", "охрана территории", "парковочные места", "общий сад/двор для жителей"],
neighbors: ["500 Bayshore Blvd, Tampa, FL — 500 Бэйшор Бульвар, Тампа, Флорида", "115 N Franklin St, Tampa, FL — 115 Норт Франклин Стрит, Тампа, Флорида"],
apartments: [
{ number: "дом 1", status: "free", residents: null },
{ number: "дом 2", status: "free", residents: null },
{ number: "дом 3", status: "free", residents: null },
{ number: "дом 4", status: "free", residents: null },
{ number: "дом 5", status: "free", residents: null },
{ number: "дом 6", status: "free", residents: null },
{ number: "дом 7 - первый этаж", status: "free", residents: null },
{ number: "дом 7 - второй этаж", status: "free", residents: null },
{ number: "дом 8 - первый этаж", status: "free", residents: null },
{ number: "дом 8 - второй этаж", status: "free", residents: null },
{ number: "дом 9 - первый этаж", status: "free", residents: null },
{ number: "дом 9 - второй этаж", status: "free", residents: null },
{ number: "дом 10 - первый этаж", status: "free", residents: null },
{ number: "дом 10 - второй этаж", status: "free", residents: null },
{ number: "дом 11 - первый этаж", status: "free", residents: null },
{ number: "дом 11 - второй этаж", status: "free", residents: null },
{ number: "дом 12 - первый этаж", status: "free", residents: null },
{ number: "дом 12 - второй этаж", status: "free", residents: null },
]
},
{
address: "1201 Gulf Blvd, Tampa, FL — 1201 Галф Бульвар, Тампа, Флорида",
type: "аренда",
price: "эконом вариант",
gif: "https://upforme.ru/uploads/001c/85/fe/3/470569.gif",
description:
"настоящий жемчуг прибрежной недвижимости - стильный пляжный коттедж, созданный для тех, кто ценит комфорт, простор и дух океанского бриза.<br/> этот двухэтажный дом в классическом cape cod стиле с белоснежным фасадом и высокими панорамными окнами буквально утопает в солнечном свете. благодаря просторной террасе с видом на песчаные дюны вы сможете встречать рассвет с чашкой кофе и провожать закат в мягком свете фонарей. особая изюминка - частная зона отдыха прямо на пляже.<br/>это не просто дом - это образ жизни, в котором соединяются утренние пробежки по берегу, обеды на веранде и вечерние посиделки у костра под шум прибоя.",
amenities: ["высокие панорамные окна", "просторная терраса", "частный пляж", "двухэтажная планировка", "полностью меблированная кухня", "гостиная с камином", "несколько спален", "система кондиционирования", "вечерняя зона с костром"],
neighbors: ["3401 Bayshore Blvd, Tampa, FL — 3401 Бэйшор Бульвар, Тампа, Флорида"],
apartments: [
{ number: "основной дом", status: "free", residents: null },
]
},
{
address: "3401 Bayshore Blvd, Tampa, FL — 3401 Бэйшор Бульвар, Тампа, Флорида",
type: "аренда",
price: "бизнес вариант",
gif: "https://upforme.ru/uploads/001c/85/fe/3/917178.gif",
description:
"в достаточно большом таунхаусе с великолепным видом на побережье найдется место для всего! арендаторы могут полностью переделать внутреннюю обстановку и создать собственное идеальное жилище, и неважно, насколько грандиозны идеи.<br/> просторная кухня, гостиная, несколько спален и большой задний двор - все это создает уют и тепло дома. за годы существования таунхаус повидал огромное количество богатых и влиятельных хозяев.",
amenities: ["просторная кухня", "гостиная с панорамными окнами", "несколько спален", "большой задний двор", "индивидуальный вход", "полностью меблированные комнаты", "балкон с видом на побережье", "кондиционер", "частная парковка", "тренажёрный уголок"
],
neighbors: ["1201 Gulf Blvd, Tampa, FL — 1201 Галф Бульвар, Тампа, Флорида"],
apartments: [
{ number: "таунхаус", status: "free", residents: null },
]
},
{
address: "1420 W Kennedy Blvd, Tampa, FL — 1420 Уэст Кеннеди Бульвар, Тампа, Флорида",
type: "продажа",
price: "люкс вариант",
gif: "https://upforme.ru/uploads/001c/85/fe/3/380366.gif",
description:
"когда-то этот дом принадлежал известному местному шеф-повару. даже поговаривают, что одно из популярных блюд было придумано именно здесь на кухне. но разбогатев, он сменил место жительства, поэтому сейчас дом выставлен на продажу.<br/> если вы также любите готовить, приглашать гостей и устраивать домашние посиделки - не теряйте время и немедленно заселяйтесь.<br/> в шаговой доступности один из районов, где много разных кафе и ресторанов, а также необычных магазинчиков. ",
amenities: ["профессиональная кухня", "дегустационный зал", "сад с травами", "барная стойка", "библиотека рецептов", "винный погреб", "камин", "терраса", "гараж", "современная система безопасности"],
neighbors: ["200 Harbour Island Blvd, Tampa, FL — 200 Харбор-Айленд Бульвар, Тампа, Флорида"],
apartments: [
{ number: "основной дом", status: "free", residents: null },
]
},
{
address: "1250 Davis Islands Blvd, Tampa, FL — 1250 Дэвис-Айлендс Бульвар, Тампа, Флорида",
type: "аренда",
price: "люкс вариант",
gif: "https://upforme.ru/uploads/001c/85/fe/3/515216.gif",
description:
"красивая вилла полна загадок. говорят, когда-то она принадлежала влюбленным по имени марк и мери, но однажды внезапно опустела. если верить рассказам, дом бросили вскоре после того, как мери изменила бедному марку (или он ей). но даже зная эту историю, люди все равно охотно арендуют эту красивую и прекрасно расположенную виллу: им хочется доказать, что их любви трагическое прошлое нипочем. кто знает, может однажды ее кто-то выкупит и полностью перестроит? может это будете именно вы? ",
amenities: ["зимний сад", "фонтан", "балкон с колоннами", "камин", "мраморные полы", "библиотека", "система «умный дом»", "зона отдыха в саду", "бассейн"],
neighbors: ["400 S Gulfview Blvd, Tampa, FL — 400 Саут Галфвью Бульвар, Тампа, Флорида"],
apartments: [
{ number: "основной дом", status: "free", residents: null },
]
},
{
address: "400 S Gulfview Blvd, Tampa, FL — 400 Саут Галфвью Бульвар, Тампа, Флорида",
type: "продажа",
price: "люкс вариант",
gif: "https://upforme.ru/uploads/001c/85/fe/3/944216.gif",
description:
"с первого взгляда этот утончённый особняк пленяет своей аутентичностью: нежный бежевый фасад, выгоревшие на солнце ставни цвета морской волны, ажурные кронштейны на веранде и балкон, откуда открывается панорамный вид на зелёные кроны пальм и тёплый закат. <br/> здесь два этажа, наполненные светом и прохладой морского бриза. прямая дорожка из мягкого песка к пляжу - никаких тротуаров и дорог. <br/> живя в этом доме, вы ощутите атмосферу старинной прибрежной виллы с нотками прованса и кариб. идеальное сочетание приватности и близости к городской жизни тампы. ",
amenities: [ "сад с оливами ", "арочные окна ", "мраморные ванные ", "бассейн-инфинити ", "терраса ", "камин ", "винный погреб ", "летняя кухня ", "балкон с видом на океан "],
neighbors: ["1250 Davis Islands Blvd, Tampa, FL — 1250 Дэвис-Айлендс Бульвар, Тампа, Флорида"],
apartments: [
{ number: "основной дом", status: "free", residents: null },
]
},
];
// Чтобы вставить новый дом, просто поставьте запятую после последней } и перед закрывающей ]
// скопируйте один из домов с { }, вставьте после запятой и измените данные
// Чтобы удалить дом удалить все его данные от { до }
</script>
<div class="main-container">
<!-- Секция с каруселью -->
<div class="carousel-section">
<div class="carousel-header">
<p style="color: #6f6f6f; margin: 0">самое время выбрать себе жилище, согласен? будет ли твой персонаж жить в лакшери особняке или делить с соседом комнату в многоквартирном доме, где по ночам слышно как тусят соседи — решать только тебе! говорят, дом очень многое говорит о своем жильце. расскажет ли нам выбранный вариант о тебе? </p>
</div>
<div class="carousel-container">
<div class="carousel-track" id="carouselTrack">
<!-- Карточки домов будут сгенерированы через JavaScript -->
</div>
</div>
<div class="navigation">
<button class="nav-btn" id="prevBtn">‹</button>
<div class="indicators" id="indicators">
<!-- Индикаторы будут сгенерированы через JavaScript -->
</div>
<button class="nav-btn" id="nextBtn">›</button>
</div>
<div style="text-align: center; margin-top: 10px">
<span class="counter" id="counter">1 / 1</span>
</div>
</div>
</div>
<script>
let currentSlide = 0;
function generateHouseCards() {
const track = document.getElementById("carouselTrack");
track.innerHTML = "";
housesData.forEach((house, index) => {
const card = document.createElement("div");
card.className = "house-card";
card.innerHTML = `
<div class="house-header">
<div>
<p class="house-title">${house.address}</p>
</div>
<div class="house-price">
<div class="house-price-amount">
<span class="icon icon-coin"></span>
${house.price}
</div>
<div class="house-price-type">${house.type}</div>
</div>
</div>
<div class="house-media-content">
<div class="house-gif">
<img src="${house.gif}" alt="${house.address}">
</div>
<div class="house-content">
<div class="house-description">
${house.description}
</div>
</div>
</div>
<div class="house-details">
<div class="detail-section">
<div class="detail-title">
<span class="icon icon-amenities"></span>
удобства
</div>
<div class="detail-content">
<div class="amenities-list">
${house.amenities.map((amenity) => `<span class="amenity-item">${amenity}</span>`).join("")}
</div>
</div>
</div>
<div class="detail-section neighbors">
<div class="detail-title neighbors-title">
<span class="icon icon-neighbors"></span>
соседи
</div>
<div class="detail-content">
<div class="neighbors-list">
${house.neighbors.map((neighbor) => `<span class="neighbor-item">${neighbor}</span>`).join("")}
</div>
</div>
</div>
</div>
<div class="apartments-section">
<div class="apartments-title">
<span class="icon icon-apartments"></span>
квартиры
</div>
<div class="apartments-grid">
${house.apartments
.map(
(apt) => `
<div class="apartment-item">
<div class="apartment-number">♦ ${apt.number}</div>
<div class="apartment-status ${apt.status}">
${apt.status === "free" ? "свободно" : apt.residents}
</div>
</div>
`
)
.join("")}
</div>
</div>
`;
track.appendChild(card);
});
}
function generateIndicators() {
const indicatorsContainer = document.getElementById("indicators");
indicatorsContainer.innerHTML = "";
housesData.forEach((_, index) => {
const indicator = document.createElement("div");
indicator.className = "indicator";
if (index === 0) indicator.classList.add("active");
indicator.addEventListener("click", () => goToSlide(index));
indicatorsContainer.appendChild(indicator);
});
}
function goToSlide(slideIndex) {
const track = document.getElementById("carouselTrack");
const indicators = document.querySelectorAll(".indicator");
const counter = document.getElementById("counter");
const prevBtn = document.getElementById("prevBtn");
const nextBtn = document.getElementById("nextBtn");
currentSlide = slideIndex;
track.style.transform = `translateX(-${currentSlide * 940}px)`;
indicators.forEach((indicator, index) => {
indicator.classList.toggle("active", index === currentSlide);
});
counter.textContent = `${currentSlide + 1} / ${housesData.length}`;
prevBtn.disabled = currentSlide === 0;
nextBtn.disabled = currentSlide === housesData.length - 1;
}
function nextSlide() {
if (currentSlide < housesData.length - 1) {
goToSlide(currentSlide + 1);
}
}
function prevSlide() {
if (currentSlide > 0) {
goToSlide(currentSlide - 1);
}
}
document.addEventListener("DOMContentLoaded", function () {
generateHouseCards();
generateIndicators();
goToSlide(0);
document.getElementById("nextBtn").addEventListener("click", nextSlide);
document.getElementById("prevBtn").addEventListener("click", prevSlide);
document.addEventListener("keydown", function (e) {
if (e.key === "ArrowLeft") {
prevSlide();
} else if (e.key === "ArrowRight") {
nextSlide();
}
});
});
</script>
[hideprofile]
Код:
[b]улица[/b] название улицы [b]покупка или аренда[/b] выбираем нужное [b]номер квартиры и жильцы[/b] указываем в какую квартиру и ссылки и имена жильцов, если это дом то указываем только жильцов
