File "index.php"
Full Path: /home/iweedito/roconnect.me/testing/system/index.php
File size: 23.75 KB
MIME-type: text/html
Charset: utf-8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="RoConnect is a social media platform designed for Roblox players to connect, share experiences, and engage in community-driven events and challenges.">
<meta name="keywords" content="RoConnect, Roblox, Social Media, Community, Gamers, Online Platform, Events, Challenges">
<meta name="robots" content="index, follow">
<title>RoConnect</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://kit.fontawesome.com/845b8d45a5.js" crossorigin="anonymous"></script> <!-- Include Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<style>
/* Glassmorphism effect */
.glass-effect {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(50px); /* Increased blur to 50px */
-webkit-backdrop-filter: blur(50px); /* For Safari compatibility */
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Hero section background with blur effect */
.hero-bg {
position: relative;
background-image: url('https://i.imgur.com/QhcKzfB.jpg');
background-size: cover;
background-position: center;
height: 100vh;
}
.hero-bg::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('https://i.imgur.com/QhcKzfB.jpg');
background-size: cover;
background-position: center;
filter: blur(50px); /* Apply blur to the background */
z-index: -1; /* Place the blurred image behind content */
}
/* Style the scrollbar to match the website background */
html, body {
height: 100%;
overflow: hidden; /* Disable scrolling on the root */
}
main {
height: 100vh; /* Ensure it fills the viewport */
overflow-y: auto; /* Allow scrolling within the main content area */
}
/* Customize the scrollbar for Webkit-based browsers (Chrome, Safari, etc.) */
::-webkit-scrollbar {
width: 8px; /* Width of the scrollbar */
}
::-webkit-scrollbar-track {
background-color: rgba(255, 255, 255, 0.1); /* Light track that matches the background */
}
::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.4); /* Semi-transparent thumb */
border-radius: 10px; /* Rounded thumb for a smoother look */
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.6); /* Hover effect */
}
/* Firefox specific scrollbar styling */
* {
scrollbar-width: thin; /* Thin scrollbar */
scrollbar-color: rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.1); /* Thumb and track colors */
}
body {
overflow-y: scroll; /* Enable vertical scrolling */
-ms-overflow-style: none; /* Hide scrollbar in Internet Explorer */
scrollbar-width: none; /* Hide scrollbar in Firefox */
overflow-x: hidden; /* Prevent horizontal scrolling */
}
section {
scroll-snap-align: start; /* This will lock the section to the top when it’s in view */
height: 100vh; /* Ensure each section takes full height */
}
#container {
display: flex;
flex-direction: column;
scroll-snap-type: y mandatory; /* Enable vertical snapping */
height: 100vh;
overflow-y: scroll;
</style>
</head>
<body class="bg-gray-800 text-gray-100 font-sans">
<!-- Navigation Bar -->
<nav class="bg-gray-800 text-white shadow-lg">
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
<!-- Logo and Brand Name -->
<div class="flex items-center space-x-4">
<img src="https://v1.roconnect.me/uploads/logo.png" alt="RoConnect Logo" class="h-10">
<span class="text-2xl font-bold">RoConnect</span>
</div>
<!-- Desktop Links -->
<div class="hidden md:flex space-x-8">
<a href="#home" class="hover:text-gray-400">Home</a>
<a href="#about" class="hover:text-gray-400">About</a>
<a href="#features" class="hover:text-gray-400">Features</a>
<a href="#contact" class="hover:text-gray-400">Contact</a>
</div>
<!-- Mobile Menu Toggle Button -->
<div class="md:hidden">
<button class="text-gray-200 focus:outline-none" id="menu-toggle">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
<!-- Mobile Menu (Hidden by default) -->
<div class="md:hidden bg-gray-800" id="mobile-menu">
<div class="px-6 py-4 space-y-4">
<a href="#home" class="block text-white hover:text-gray-400">Home</a>
<a href="#about" class="block text-white hover:text-gray-400">About</a>
<a href="#features" class="block text-white hover:text-gray-400">Features</a>
<a href="#contact" class="block text-white hover:text-gray-400">Contact</a>
</div>
</div>
</nav>
<script>
// Toggle mobile menu
const menuToggleButton = document.getElementById("menu-toggle");
const mobileMenu = document.getElementById("mobile-menu");
menuToggleButton.addEventListener("click", () => {
mobileMenu.classList.toggle("hidden");
});
</script>
<!-- Hero Section -->
<div id="container">
<!-- Hero Section -->
<section class="bg-gradient-to-br from-blue-500 to-orange-600 flex items-center justify-center text-white relative min-h-screen" id="hero">
<div class="glass-effect p-8 rounded-lg max-w-3xl mx-auto text-center z-10">
<img src="https://v1.roconnect.me/uploads/logo.png" alt="RoConnect Logo" class="h-20 mx-auto mb-6">
<h1 class="text-5xl font-bold mb-4">RoConnect</h1>
<p class="text-xl mb-6">Connecting Roblox enthusiasts worldwide.</p>
<a href="#about" class="bg-blue-500 hover:bg-blue-600 px-6 py-3 rounded-md text-lg font-medium">Learn More</a>
</div>
<div class="absolute inset-0 bg-black bg-opacity-40"></div>
</section>
<!-- About Section -->
<section id="about-company" class="py-20 bg-gray-800 text-white relative min-h-screen">
<div class="container mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold">About RoConnect</h2>
<p class="mt-4 text-gray-400 max-w-2xl mx-auto">Discover who we are and what drives us to create a unique platform for Roblox enthusiasts worldwide.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
<!-- Left Section: Image -->
<div>
<img src="https://i.imgur.com/QhcKzfB.jpg" alt="About RoConnect" class="rounded-lg shadow-lg">
</div>
<!-- Right Section: Text -->
<div>
<h3 class="text-3xl font-bold mb-4">Who We Are</h3>
<p class="text-gray-400 mb-6">RoConnect is a dedicated platform designed to bring Roblox enthusiasts together. Founded in 2024, our mission is to empower players to connect, share, and grow within the vibrant Roblox community.</p>
<h3 class="text-3xl font-bold mb-4">Our Vision</h3>
<p class="text-gray-400 mb-6">To become the ultimate social media destination for Roblox players, fostering creativity, collaboration, and a sense of belonging.</p>
<h3 class="text-3xl font-bold mb-4">Our Core Values</h3>
<ul class="list-disc list-inside text-gray-400">
<li>Community First: Building a welcoming and supportive space for all.</li>
<li>Innovation: Continuously improving and introducing exciting features.</li>
<li>Inclusivity: Ensuring everyone feels valued and represented.</li>
</ul>
</div>
</div>
</div>
</section>
<!-- FEATURES -->
<section id="features" class="py-20 relative min-h-screen bg-gray-800 text-gray-100">
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold text-center mb-12">Key Features of RoConnect</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Feature 1 -->
<div class="text-center bg-blue-600 p-6 rounded-lg shadow-lg transition transform hover:scale-105">
<i class="fas fa-users text-white text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Community Engagement</h3>
<p class="text-white">Connect with like-minded Roblox players, join discussions, and grow your network.</p>
</div>
<!-- Feature 2 -->
<div class="text-center bg-blue-600 p-6 rounded-lg shadow-lg transition transform hover:scale-105">
<i class="fas fa-upload text-white text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Content Sharing</h3>
<p class="text-white">Share your creations, gameplay, and ideas to inspire others in the community.</p>
</div>
<!-- Feature 3 -->
<div class="text-center bg-blue-600 p-6 rounded-lg shadow-lg transition transform hover:scale-105">
<i class="fas fa-trophy text-white text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Events & Challenges</h3>
<p class="text-white">Participate in exclusive events and challenges designed for Roblox enthusiasts.</p>
</div>
<!-- Feature 4 -->
<div class="text-center bg-blue-600 p-6 rounded-lg shadow-lg transition transform hover:scale-105">
<i class="fas fa-bullhorn text-white text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Announcements</h3>
<p class="text-white">Stay updated with the latest news, game features, and platform developments.</p>
</div>
<!-- Feature 5 -->
<div class="text-center bg-blue-600 p-6 rounded-lg shadow-lg transition transform hover:scale-105">
<i class="fas fa-heart text-white text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Inclusive Community</h3>
<p class="text-white">Join a positive and welcoming space where everyone can thrive.</p>
</div>
<!-- Feature 6 -->
<div class="text-center bg-blue-600 p-6 rounded-lg shadow-lg transition transform hover:scale-105">
<i class="fas fa-cogs text-white text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Developer Tools</h3>
<p class="text-white">Access tools and resources to collaborate with developers and creators.</p>
</div>
</div>
</div>
</section>
<section id="status" class="py-20 bg-gray-800 relative min-h-screen">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold mb-8 text-white text-center">System Status</h2>
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<iframe
src="https://status.roconnect.me/"
title="RoConnect System Status"
class="w-full h-96 border-none">
</iframe>
</div>
<p class=" text-center mt-4">
Check the latest system updates and service statuses.
</p>
</div>
</section>
<section id="faq" class="py-20 bg-gray-800 text-white relative min-h-screen">
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold text-center mb-12">Frequently Asked Questions</h2>
<div class="space-y-8">
<!-- FAQ Item 1 -->
<details class="group bg-gray-800 rounded-lg p-6">
<summary class="flex items-center justify-between cursor-pointer">
<h3 class="font-semibold text-xl">What is RoConnect?</h3>
<span class="transition-transform group-open:rotate-180">
<i class="fas fa-chevron-down"></i>
</span>
</summary>
<p class="mt-4 text-gray-300">
RoConnect is a social media platform designed exclusively for Roblox enthusiasts, providing a space for players to connect, share, and grow together.
</p>
</details>
<!-- FAQ Item 2 -->
<details class="group bg-gray-800 rounded-lg p-6">
<summary class="flex items-center justify-between cursor-pointer">
<h3 class="font-semibold text-xl">Is RoConnect free to use?</h3>
<span class="transition-transform group-open:rotate-180">
<i class="fas fa-chevron-down"></i>
</span>
</summary>
<p class="mt-4 text-gray-300">
Yes, RoConnect is free to use. Some premium features may be available for subscription in the future.
</p>
</details>
<!-- FAQ Item 3 -->
<details class="group bg-gray-800 rounded-lg p-6">
<summary class="flex items-center justify-between cursor-pointer">
<h3 class="font-semibold text-xl">How do I join RoConnect?</h3>
<span class="transition-transform group-open:rotate-180">
<i class="fas fa-chevron-down"></i>
</span>
</summary>
<p class="mt-4 text-gray-300">
You can sign up using your email or connect your Roblox account directly on our platform.
</p>
</details>
<!-- FAQ Item 4 -->
<details class="group bg-gray-800 rounded-lg p-6">
<summary class="flex items-center justify-between cursor-pointer">
<h3 class="font-semibold text-xl">Is RoConnect affiliated with Roblox?</h3>
<span class="transition-transform group-open:rotate-180">
<i class="fas fa-chevron-down"></i>
</span>
</summary>
<p class="mt-4 text-gray-300">
No, RoConnect is an independent platform and is not officially affiliated with or endorsed by Roblox Corporation.
</p>
</details>
</div>
</div>
</section>
<section id="our-team" class="py-20 bg-gray-800 text-white relative min-h-screen"">
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold text-center mb-12">Our Team</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Team Member 1 -->
<div class="text-center bg-blue-600 p-6 rounded-lg shadow-lg">
<img
src="https://cdn.discordapp.com/avatars/981335447613632602/792a354162f528b93e32f6cf158a5149.png?size=4096"
alt="Team Member Photo"
class="w-32 h-32 mx-auto rounded-full mb-4"
/>
<h3 class="text-xl font-bold">eisabanana</h3>
<p class=" mb-4">Founder & CEO</p>
</div>
<!-- Team Member 2 -->
<div class="text-center bg-blue-600 p-6 rounded-lg shadow-lg">
<img
src="https://cdn.discordapp.com/avatars/825978480378249247/74517430b466b59b3508c91e9d97ab20.png?size=4096"
alt="Team Member Photo"
class="w-32 h-32 mx-auto rounded-full mb-4"
/>
<h3 class="text-xl font-bold">SirTism</h3>
<p class=" mb-4">Chief Operations Officer</p>
</div>
<!-- Team Member 3 -->
<div class="text-center bg-blue-600 p-6 rounded-lg shadow-lg">
<img
src="https://cdn.discordapp.com/avatars/1256422776210849878/a9d491dc41195e20ba82e29ac352e093.png?size=4096"
alt="Team Member Photo"
class="w-32 h-32 mx-auto rounded-full mb-4"
/>
<h3 class="text-xl font-bold">ELLOMATE BHM</h3>
<p class=" mb-4">Executive Director</p>
</div>
</div>
<div class="text-center bg-gray-800 p-6 rounded-lg shadow-lg">
<img
src="https://via.placeholder.com/150"
alt="Team Member Photo"
class="w-32 h-32 mx-auto rounded-full mb-4"
/>
<h3 class="text-xl font-bold">This Could Be You</h3>
<p class=" mb-4">Apply Now!</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<section id="footer" class="py-20 bg-gray-800 min-h-screen">
<footer class="footer-1 bg-gray-800 text-white py-8 sm:py-12">
<div class="container mx-auto px-4">
<div class="sm:flex sm:flex-wrap sm:-mx-4 md:py-4">
<div class="px-4 sm:w-1/2 md:w-1/4 xl:w-1/6">
<h5 class="text-xl font-bold mb-6">Features</h5>
<ul class="list-none footer-links">
<li class="mb-2">
<a href="#" class="border-b border-solid border-transparent hover:border-purple-800 ">Community Forums</a>
</li>
<li class="mb-2">
<a href="#" class="border-b border-solid border-transparent hover:border-purple-800 ">App Updates</a>
</li>
<li class="mb-2">
<a href="#" class="border-b border-solid border-transparent hover:border-purple-800 ">Events </a>
</li>
<li class="mb-2">
<a href="#" class="border-b border-solid border-transparent hover:border-purple-800 ">Stuff For Developers</a>
</li>
</ul>
</div>
<div class="px-4 sm:w-1/2 md:w-1/4 xl:w-1/6 mt-8 sm:mt-0">
<h5 class="text-xl font-bold mb-6">Resources</h5>
<ul class="list-none footer-links">
<li class="mb-2">
<a href="#" class="border-b border-solid border-transparent hover:border-purple-800 ">Blog</a>
</li>
<li class="mb-2">
<a href="#" class="border-b border-solid border-transparent hover:border-purple-800 ">FAQ</a>
</li>
<li class="mb-2">
<a href="#" class="border-b border-solid border-transparent hover:border-purple-800 ">DMCA</a>
</li>
<li class="mb-2">
<a href="#" class="border-b border-solid border-transparent hover:border-purple-800 ">Community Guidelines</a>
</li>
</ul>
</div>
<div class="px-4 sm:w-1/2 md:w-1/4 xl:w-1/6 mt-8 md:mt-0">
<h5 class="text-xl font-bold mb-6">About</h5>
<ul class="list-none footer-links">
<li class="mb-2">
<a href="#" class="border-b border-solid border-transparent hover:border-purple-800 ">Our Mission</a>
</li>
<li class="mb-2">
<a href="#" class="border-b border-solid border-transparent hover:border-purple-800 ">The Team</a>
</li>
<li class="mb-2">
<a href="#" class="border-b border-solid border-transparent hover:border-purple-800 ">Privacy</a>
</li>
<li class="mb-2">
<a href="#" class="border-b border-solid border-transparent hover:border-purple-800 ">Terms</a>
</li>
</ul>
</div>
<div class="px-4 sm:w-1/2 md:w-1/4 xl:w-1/6 mt-8 md:mt-0">
<h5 class="text-xl font-bold mb-6">Help</h5>
<ul class="list-none footer-links">
<li class="mb-2">
<a href="#" class="border-b border-solid border-transparent hover:border-purple-800 ">Support Center</a>
</li>
<li class="mb-2">
<a href="#" class="border-b border-solid border-transparent hover:border-purple-800 ">Help Center</a>
</li>
<li class="mb-2">
<a href="#" class="border-b border-solid border-transparent hover:border-purple-800 ">Feedback & Suggestions</a>
</li>
</ul>
</div>
<div class="px-4 mt-4 sm:w-1/3 xl:w-1/6 sm:mx-auto xl:mt-0 xl:ml-auto">
<h5 class="text-xl font-bold mb-6 sm:text-center xl:text-left">Stay connected</h5>
<div class="flex sm:justify-center xl:justify-start">
<a href="https://discord.gg/dDmsrmJcEt" class="w-8 h-8 border border-2 border-gray-400 rounded-full text-center py-1 text-gray-600 hover:text-white hover:bg-blue-600 hover:border-blue-600">
<i class="fa-brands fa-discord" style="color: #ffffff;"></i>
</a>
<a href="https://x.com/Ro_Connect" class="w-8 h-8 border border-2 border-gray-400 rounded-full text-center py-1 ml-2 text-gray-600 hover:text-white hover:bg-blue-400 hover:border-blue-400">
<i class="fab fa-twitter" style="color: #ffffff;"></i>
</a>
<a href="https://www.roblox.com/communities/35225204/RoConnect-Connect-Share-Play#!/about" class="w-8 h-8 border border-2 border-gray-400 rounded-full text-center py-1 ml-2 text-gray-600 hover:text-white hover:bg-red-600 hover:border-red-600">
<i class="fa-brands fa-readme" style="color: #ffffff;"></i> </a>
</div>
</div>
</div>
<div class="sm:flex sm:flex-wrap sm:-mx-4 mt-6 pt-6 sm:mt-12 sm:pt-12 border-t">
<div class="sm:w-full px-4 md:w-1/6">
<img src="https://v1.roconnect.me/uploads/logo.png" width="50"/>
<br>
<strong>RoConnect, Inc.</strong>
</div>
<div class="px-4 sm:w-1/2 md:w-1/4 mt-4 md:mt-0">
<h6 class="font-bold mb-2">Email</h6>
<address class="not-italic mb-4 text-sm">
support@roconnect.me
</address>
</div>
<div class="px-4 sm:w-1/2 md:w-1/4 mt-4 md:mt-0">
<h6 class="font-bold mb-2">DMCA Compliance</h6>
<a href="//www.dmca.com/Protection/Status.aspx?ID=7f5cfecd-f0d6-4f48-8726-d9fa2e274855" title="DMCA.com Protection Status" class="dmca-badge"> <img src ="https://images.dmca.com/Badges/DMCA_logo-grn-btn120w.png?ID=7f5cfecd-f0d6-4f48-8726-d9fa2e274855" alt="DMCA.com Protection Status" /></a> <script src="https://images.dmca.com/Badges/DMCABadgeHelper.min.js"> </script> <em><a href="mailto:abuse@roconnect.me">Report Abuse</a></em></p>
</div>
<div class="px-4 md:w-1/4 md:ml-auto mt-6 sm:mt-4 md:mt-0">
<button class="px-4 py-2 bg-purple-800 hover:bg-purple-900 rounded text-white">Get Started</button>
</div>
</div>
</div>
</footer>
</section>
</body>
</html>
<!-- Intersection Observer Script -->
<script>
// Intersection Observer Options
const options = {
root: null, // Relative to the viewport
rootMargin: "0px",
threshold: 0.5 // Trigger when 50% of the element is visible
};
// Intersection Observer Callback
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add("animate__fadeIn"); // Add fadeIn animation
entry.target.classList.remove("animate__fadeOut"); // Remove fadeOut if visible
} else {
entry.target.classList.add("animate__fadeOut"); // Add fadeOut animation
entry.target.classList.remove("animate__fadeIn"); // Remove fadeIn if not visible
}
});
}, options);
// Observing sections
const sections = document.querySelectorAll(".animate__animated");
sections.forEach(section => {
observer.observe(section);
});
document.addEventListener('scroll', function () {
const sections = document.querySelectorAll('section');
const scrollPosition = window.scrollY;
sections.forEach((section) => {
const sectionTop = section.offsetTop;
const sectionHeight = section.offsetHeight;
if (scrollPosition >= sectionTop - 50 && scrollPosition < sectionTop + sectionHeight - 50) {
section.classList.add('animate__fadeIn'); // Example of adding animation when section is in view
} else {
section.classList.remove('animate__fadeIn');
}
});
});
</script>