connectify / index.html
Praveenstakez's picture
Update index.html
aa6efc8 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Connectify - Communication Platform</title>
<style>
/* Overall styles */
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #000;
color: #fff;
}
/* Header styles */
header {
background-color: #000;
text-align: center;
padding: 20px 0;
}
h1 {
margin: 0;
font-size: 2.5rem;
font-weight: bold;
color: #fff;
}
/* Main content styles */
main {
padding: 20px;
text-align: center;
}
section {
margin-bottom: 40px;
}
h2 {
font-size: 2rem;
margin-bottom: 20px;
color: #fff;
}
p {
line-height: 1.6;
}
/* Call-to-action button styles */
a.button {
display: inline-block;
padding: 15px 30px;
background-color: #f65261;
color: #fff;
text-decoration: none;
font-weight: bold;
border-radius: 5px;
transition: background-color 0.3s ease, transform 0.3s ease;
}
a.button:hover {
background-color: #e53746;
transform: scale(1.1);
}
a.button:active {
transform: scale(0.9);
}
/* Loader styles */
.loader {
border: 8px solid #f3f3f3;
border-radius: 50%;
border-top: 8px solid #f65261;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
display: none;
margin: 20px auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Centering loader and text */
.center {
text-align: center;
}
/* Detailed animations */
.fadeIn {
opacity: 0;
animation: fadeIn 1.5s forwards;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
.slideUp {
transform: translateY(50px);
opacity: 0;
animation: slideUp 1.5s forwards;
}
@keyframes slideUp {
to {
transform: translateY(0);
opacity: 1;
}
}
</style>
</head>
<body>
<header class="fadeIn">
<h1>Connectify</h1>
</header>
<main>
<section class="slideUp">
<h2>Communication Policies and Rules</h2>
<p>At Connectify, we are committed to fostering a positive and inclusive community. Our communication policies include:</p>
<ul>
<li>Respectful and courteous language</li>
<li>Zero tolerance for hate speech, harassment, or bullying</li>
<li>Prohibition of sharing explicit or inappropriate content</li>
<li>Guidelines for handling disagreements and conflicts respectfully</li>
<li>Respect for others' privacy and personal boundaries</li>
<li>Reporting mechanism for users to flag abusive behavior</li>
<li>Hacking and Breaching will Ban you permanently from the Portal</li>
</ul>
</section>
<section class="slideUp" style="animation-delay: 0.5s;">
<h2>Discover Connectify v6.0 !!!</h2>
<p>Explore the functionalities of Connectify:</p>
<div class="center">
<div id="loader" class="loader"></div>
<a href="https://praveenstakez.rf.gd/chatting/" id="anonymousChatLink" class="button">Anonymous Chat</a><br><br>
<a href="https://praveenstakez.rf.gd/Anonymous/" id="anonymousThoughtsLink" class="button">Anonymous Thoughts</a><br><br>
<a href="https://praveenstakez.share.zrok.io/dashboard/connectify/main/dashboard.php" id="connectifyLink" class="button">Connectify</a><br>
</div>
</section>
</main>
<script>
document.getElementById("connectifyLink").addEventListener("click", function(event) {
document.getElementById("loader").style.display = "block";
});
</script>
</body>
</html>