| Linux in-mum-web1499.main-hosting.eu 5.14.0-503.40.1.el9_5.x86_64 #1 SMP PREEMPT_DYNAMIC Mon May 5 06:06:04 EDT 2025 x86_64 Path : /home/u901718425/domains/claremontgoregaon.com/public_html/ |
| Current File : /home/u901718425/domains/claremontgoregaon.com/public_html/index.html |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Grid</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: #333;
color: white;
}
header .logo {
font-size: 1.5em;
font-weight: bold;
}
header .search-bar {
width: 40%;
}
header .search-bar input {
width: 100%;
padding: 5px;
font-size: 1em;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
padding: 20px;
}
.grid-item {
position: relative;
text-align: center;
}
.grid-item img {
width: 100%;
height: auto;
border-radius: 8px;
cursor: pointer;
}
.grid-item .play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2em;
color: white;
pointer-events: none;
}
.grid-item .video-name {
margin-top: 5px;
font-size: 0.9em;
cursor: pointer;
}
.video-player {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
display: none;
}
.video-player video {
max-width: 90%;
max-height: 80%;
}
.video-player .close-btn {
position: absolute;
top: 10px;
right: 20px;
font-size: 2em;
color: white;
cursor: pointer;
}
footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: #333;
color: white;
}
</style>
</head>
<body>
<header>
<div class="logo"><img class="logo" src=" https://cdn.urbanpillar.in/images/urban.avif" alt="urbanpillar logo" loading="lazy" style="width:190px;" ></div>
<div class="search-bar">
<input type="text" id="search" placeholder="Search videos by name...">
</div>
</header>
<div class="grid-container" id="videoGrid">
<!-- Videos will be populated here dynamically -->
</div>
<div class="video-player" id="videoPlayer">
<span class="close-btn" id="closeBtn">×</span>
<video id="videoElement" controls autoplay muted></video>
</div>
<footer>
<div class="logo">Video Gallery</div>
<div>Contact: +1234567890</div>
</footer>
<script>
const videos = [
{ name: "Code Name 63 Tathwade", thumbnail: "thumbnails/cropped-63-Tathawade-jpg", url: "uploads/63 codename.MOV" },
{ name: "Advantage 3 BHK", thumbnail: "thumbnails/cropped-63-Tathawade-jpg", url: "uploads/Advantage 3bhk.MOV" },
{ name: "Central Park", thumbnail: "thumbnails/cropped-63-Tathawade-jpg", url: "uploads/Central park 3bhk.mov" },
{ name: "Parth Kiona 3 Bhk", thumbnail: "thumbnails/cropped-63-Tathawade-jpg", url: "uploads/Parth Kiona 3bhk.mov" },
{ name: "CROWN Mahindra 3 Bhk", thumbnail: "thumbnails/cropped-63-Tathawade-jpg", url: "uploads/CROWN Mahindra 3bhk.mov" },
{ name: "Gawade Galore", thumbnail: "thumbnails/cropped-63-Tathawade-jpg", src: "uploads/Gawade Galore.MOV" },
{ name: "Majestique 3 BHK", thumbnail: "thumbnails/cropped-63-Tathawade-jpg", url: "uploads/Majestique 3bhk.MOV" },
{ name: "Malpani", thumbnail: "thumbnails/cropped-63-Tathawade-jpg", url: "uploads/Malpani.mov" },
{ name: "Meteor", thumbnail: "thumbnails/cropped-63-Tathawade-jpg", url: "uploads/Meteor.MOV" },
{ name: "Prestine", thumbnail: "thumbnails/cropped-63-Tathawade-jpg", url: "uploads/63 codename.MOV" },
{ name: "Riverdale Kohinoor 3bhk ", thumbnail: "thumbnails/cropped-63-Tathawade-jpg", url: "uploads/Riverdale kohinoor 3bhk.mov" },
{ name: "the Ornate", thumbnail: "thumbnails/cropped-63-Tathawade-jpg", url: "uploads/the Ornate.MOV" },
{ name: "Parth Kiona 3 Bhk", thumbnail: "thumbnails/cropped-63-Tathawade-jpg", src: "uploads/Parth Kiona 3bhk.mov" },
{ name: "Tristar", thumbnail: "thumbnails/cropped-63-Tathawade-jpg", url: "uploads/Tristar.MOV" },
{ name: "Virkar 7", thumbnail: "thumbnails/cropped-63-Tathawade-jpg", url: "uploads/Virkar 7.MOV" },
{ name: "VTP Ceilo", thumbnail: "thumbnails/cropped-63-Tathawade-jpg", url: "uploads/VTP Ceilo.MOV" },
{ name: "VTP Earth 1 2 Bhk", thumbnail: "thumbnails/cropped-63-Tathawade-jpg", url: "uploads/VTP Earth 1 3bhk (furnished).mp4" },
{ name: "Meteor", thumbnail: "thumbnails/cropped-63-Tathawade-jpg", url: "uploads/63 codename.MOV" },
];
const videoGrid = document.getElementById("videoGrid");
const videoPlayer = document.getElementById("videoPlayer");
const videoElement = document.getElementById("videoElement");
const closeBtn = document.getElementById("closeBtn");
const searchInput = document.getElementById("search");
// Populate grid with video thumbnails and names
function populateGrid() {
videoGrid.innerHTML = "";
videos.forEach((video, index) => {
const gridItem = document.createElement("div");
gridItem.classList.add("grid-item");
const thumbnail = document.createElement("img");
thumbnail.src = video.thumbnail;
thumbnail.alt = video.name;
thumbnail.dataset.index = index;
thumbnail.addEventListener("click", () => playVideo(index));
const playIcon = document.createElement("div");
playIcon.classList.add("play-icon");
playIcon.innerHTML = "▶";
const videoName = document.createElement("div");
videoName.classList.add("video-name");
videoName.textContent = video.name;
videoName.dataset.index = index;
videoName.addEventListener("click", () => playVideo(index));
gridItem.appendChild(thumbnail);
gridItem.appendChild(playIcon);
gridItem.appendChild(videoName);
videoGrid.appendChild(gridItem);
});
}
// Play video
function playVideo(index) {
videoElement.src = videos[index].url;
videoPlayer.style.display = "flex";
videoElement.play();
}
// Close video player
closeBtn.addEventListener("click", () => {
videoPlayer.style.display = "none";
videoElement.pause();
videoElement.src = "";
});
// Search videos
searchInput.addEventListener("input", () => {
const query = searchInput.value.toLowerCase();
const filteredVideos = videos.filter(video =>
video.name.toLowerCase().includes(query)
);
videoGrid.innerHTML = "";
filteredVideos.forEach((video, index) => {
const gridItem = document.createElement("div");
gridItem.classList.add("grid-item");
const thumbnail = document.createElement("img");
thumbnail.src = video.thumbnail;
thumbnail.alt = video.name;
thumbnail.dataset.index = index;
thumbnail.addEventListener("click", () => playVideo(index));
const playIcon = document.createElement("div");
playIcon.classList.add("play-icon");
playIcon.innerHTML = "▶";
const videoName = document.createElement("div");
videoName.classList.add("video-name");
videoName.textContent = video.name;
videoName.dataset.index = index;
videoName.addEventListener("click", () => playVideo(index));
gridItem.appendChild(thumbnail);
gridItem.appendChild(playIcon);
gridItem.appendChild(videoName);
videoGrid.appendChild(gridItem);
});
});
// Initialize grid
populateGrid();
</script>
</body>
</html>