<!DOCTYPE html>
<html lang="en">
<head>
				<meta charset="UTF-8">
				<meta name="viewport" content="width=device-width, initial-scale=1.0">
			<link rel="icon" href="https://i.imgur.com/UZmT213.jpeg" type="image/jpeg">
<link rel="shortcut icon" type="image/jpeg" href="https://i.imgur.com/UZmT213.jpeg">
				<meta property="og:image" content="https://i.imgur.com/UZmT213.jpeg">
				<meta name="description" content="𝐀𝐌𝐈𝐍𝐔𝐋-𝐁𝐎𝐓: A customizable Messenger chatbot with advanced interaction features, including rich media support and flexible commands.">
				<title>GAminul bot Uptime Dashboard</title>
				<meta name="theme-color" content="#152238"/><script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9617830914888908" crossorigin="anonymous"></script><script async="" src="https://www.googletagmanager.com/gtag/js?id=G-RHEDXL1GCS"></script>
				<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
				<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
				<script src="https://cdn.jsdelivr.net/npm/howler@2.2.4/dist/howler.min.js"></script>
	<style>
		body {
			font-family: 'Poppins', sans-serif;
			font-size: 16px;
			color: white;
			margin: 0;
			width: 100vw;
			height: 100vh;
			background-color: #1E1E2D;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
		}

		.background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
			background-image: url('https://i.ibb.co/8NqDx0j/bg.png');
			background-size: cover;
		background-repeat: no-repeat;
		background-color: #121212
			clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
		}

		.container {
			max-width: 500px;
			margin: 20px;
			padding: 30px 40px;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 16px;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
			text-align: center;
			position: relative;
		}

		.avatar {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			border: 1px solid rgba(255, 255, 255, 0.3);
			overflow: hidden;
			margin: -70px auto 20px;
			background-color: #fff;
		}

		.avatar img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		h1 {
			font-size: 1.5em;
			margin-bottom: 20px;
			color: #fff;
		}

		.uptime {
			font-size: 1.2em;
			margin-bottom: 20px;
			color: #b3c5d1;
		}

		.info {
			font-size: 0.9em;
			color: #ddd;
			text-align: left;
			margin: 0 auto;
		}

		.info div {
			margin-bottom: 12px;
		}

		.nav-container {
			position: absolute;
			top: 20px;
			left: 20px;
			z-index: 1000;
		}

		.hamburger {
			width: 40px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: transform 0.3s ease;
		}

		.hamburger div {
			width: 30px;
			height: 3px;
			background: white;
			border-radius: 2px;
			transition: transform 0.3s ease, opacity 0.3s ease;
			position: relative;
		}

		.hamburger div::before,
		.hamburger div::after {
			content: "";
			position: absolute;
			width: 30px;
			height: 3px;
			background: white;
			border-radius: 2px;
			transition: transform 0.3s ease;
		}

		.hamburger div::before {
			transform: translateY(-8px);
		}

		.hamburger div::after {
			transform: translateY(8px);
		}

		.hamburger.active div {
			opacity: 0;
		}

		.hamburger.active div::before {
			transform: rotate(45deg) translateY(0);
		}

		.hamburger.active div::after {
			transform: rotate(-45deg) translateY(0);
		}

		.nav {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.9);
			transform: translateY(-100%);
			transition: transform 0.3s ease, opacity 0.3s ease;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			opacity: 0;
			z-index: 1000;
		}

		.nav.show {
			transform: translateY(0);
			opacity: 1;
		}

		.nav a {
			color: white;
			text-decoration: none;
			font-size: 20px;
			margin: 20px 0;
			transition: color 0.3s ease;
		}

		.nav a:hover {
			color: #00d4ff;
		}

		.close-btn {
			position: absolute;
			top: 20px;
			right: 20px;
			font-size: 24px;
			color: white;
			cursor: pointer;
			transition: color 0.3s ease;
		}

		.close-btn:hover {
			color: #00d4ff;
		}

		.popup-container {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.7);
			display: flex;
			align-items: center;
			justify-content: center;
			opacity: 0;
			visibility: hidden;
			transition: opacity 0.5s ease, visibility 0.5s ease;
			z-index: 2000;
		}

		.popup-container.show {
			opacity: 1;
			visibility: visible;
		}

		.popup {
			background: #2E4053;
			padding: 30px 20px;
			border-radius: 16px;
			width: 80%;
			max-width: 500px;
			font-size: 14px;
			text-align: left;
			color: #fff;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
		}

		.popup-close {
			position: absolute;
			top: 1px;
			right: 5px;
			font-size: 24px;
			cursor: pointer;
			color: #ddd;
			transition: color 0.3s ease;
		}

		.popup-close:hover {
			color: #fff;
		}

		.popup-image {
			width: 100%;
			height: auto;
			border-radius: 8px;
			margin-bottom: 20px;
		}

		@keyframes fadeIn {
			from {
					opacity: 0;
			}
			to {
					opacity: 1;
			}
		}
		</style>
</head>
<body>
				<div class="background"></div>
				<div class="nav-container">
								<div class="hamburger">
												<div></div>
								</div>
								<div class="nav">
												<span class="close-btn">&times;</span>
												<a href="#about">About</a>
												<a href="#contact">Contact</a>
												<a href="#terms">Terms of Service</a>
												<a href="#privacy">Privacy Policy</a>
								</div>
				</div>
				<div class="container">
								<div class="avatar">
												<img src="https://i.ibb.co/gFZhsTW/Picsart-24-09-23-20-29-25-134.png" alt="Avatar">
								</div>
								<h1>Uptime Dashboard</h1>
								<div class="uptime">
												<div id="botUptime" class="uptime-small">Loading bot uptime...</div>
								</div>
								<div class="info">
									<div id="cores">Cores: Loading...</div>
												<div id="os">OS: Loading...</div>
												<div id="arch">Architecture: Loading...</div>
												<div id="cpu">CPU: Loading...</div>
												<div id="loadAvg">Load Average: Loading...</div>
												<div id="processMemory">Process Memory: Loading...</div>
								</div>
				</div>
				<div id="popup-container" class="popup-container">
								<div class="popup">
												<span class="popup-close">&times;</span>
												<div id="popup-content"></div>
								</div>
				</div>

				<script>
								function fetchUptime() {
												fetch('/uptime')
																.then(response => response.json())
																.then(data => {
																				document.getElementById('botUptime').textContent = `Bot Uptime: ${data.botUptime}`;

document.getElementById('cores').textContent = `Cores: ${data.cores}`;
																	document.getElementById('os').textContent = `OS: ${data.os}`;
																				document.getElementById('arch').textContent = `Architecture: ${data.arch}`;
																				document.getElementById('cpu').textContent = `CPU: ${data.cpu}`;
																				document.getElementById('loadAvg').textContent = `Load Average: ${data.loadAvg.join(', ')}`;
																				document.getElementById('processMemory').textContent = `Process Memory: ${data.processMemory}`;
																});
								}

setInterval(fetchUptime, 1000);
		 document.addEventListener('DOMContentLoaded', fetchUptime);

		 const hamburger = document.querySelector('.hamburger');
		 const nav = document.querySelector('.nav');
		 const closeBtn = document.querySelector('.close-btn');

		 hamburger.addEventListener('click', () => {
			 nav.classList.toggle('show');
			 hamburger.classList.toggle('active');
		 });

		 closeBtn.addEventListener('click', () => {
			 nav.classList.remove('show');
			 hamburger.classList.remove('active');
		 });

		const popupContainer = document.getElementById('popup-container');
		const popupContent = document.getElementById('popup-content');
		const popupClose = document.querySelector('.popup-close');

		const popups = {
			about: {
				image: "https://i.imgur.com/7I0lQf6.jpeg",
				content: "<strong><h3>About Us:</h3></strong> <p>Welcome to Goat Bot V2! We specialize in creating interactive and intelligent Messenger bots designed to provide a unique and responsive user experience. </p> <p>Our mission is to enhance digital communication through innovative technology.Admin Facebook id Link :https://www.facebook.com/br4nd.abir.your.next.bf.jan?mibextid=ZbWKwL</p>"
			},
			contact: {
				image: "https://i.imgur.com/xmnHoMz.jpeg",
				content: "<strong><h3>Contact:</h3></strong> <p>Need assistance or have feedback? Contact us through our support channels. </p><p>We're dedicated to providing prompt and helpful responses to ensure a smooth experience with Goat Bot V2.</p>"
			},
			privacy: {
				image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMyH5EepMFlImHNHu3aOZaWkDkNVM_vaRUtw&usqp=CAU",
				content: "<strong><h3>Privacy Policy:</h3></strong> <p>At Goat Bot V2, we value your privacy. Our Privacy Policy explains how we handle your personal data, including collection, use, and protection measures.</p><p> We are committed to transparency and security in all interactions.</p>"
			},
			terms: {
				image: "https://cdn.staticans.com/live/image/catalog/brandstore/trimacare/Terms-Of-Service-1920x500px.png",
				content: "<strong><h3>Terms of Services:</strong></h3><p> Using Goat Bot V2 means agreeing to our Terms of Service. These terms define the guidelines for using our bot, including user responsibilities and our service commitments.</p><p> Please review them carefully to understand your rights and obligations.</p>"
			}
		};

		document.querySelectorAll('.nav a').forEach(link => {
			link.addEventListener('click', (event) => {
				const section = event.target.getAttribute('href').substring(1);
				if (popups[section]) {
					popupContent.innerHTML = `
										<img src="${popups[section].image}" alt="${section} Image" class="popup-image">
										<div class="popup-text">${popups[section].content}</div>
								`;
					popupContainer.classList.add('show');
				}
			});
		});

		popupClose.addEventListener('click', () => {
			popupContainer.classList.remove('show');
		});

		document.addEventListener('click', (event) => {
			if (event.target === popupContainer) {
				popupContainer.classList.remove('show');
			}
		});

								let sound = new Howl({
									src: ["https://raw.githubusercontent.com/Kaizenji/Kaizenji/main/i-have-no-enemies.mp3"],
									autoplay: true,
									loop: true,
									format: ["mp3"],
									volume: 1,
									onend: () => {},
								});
								sound.play();
							 // setTimeout(() => sound.play(), 0*1000);
	 </script>
</body>
</html>