- 掃描 ID：
- fbe3fd36-8dea-46bb-8341-0d42c3f585d2已完成
- 已提交的 URL：
- https://socialsphere.getenjoyment.net/
- 報告完成時間：
連結 · 找到 0 個
從頁面中識別的傳出連結
JavaScript 變數 · 找到 24 個
在頁面的視窗物件上載入的全域 JavaScript 變數是在函數外部宣告的變數，可從目前範圍內程式碼中的任何位置存取
| 名稱 | 類型 |
|---|---|
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| gtag | function |
| dataLayer | object |
| THREE | object |
| __THREE__ | string |
| gapi | object |
| ___jsl | object |
| default_gsi | object |
主控台記錄訊息 · 找到 1 條
記錄到 Web 主控台的訊息
| 類型 | 類別 | 記錄 |
|---|---|---|
| error | other |
|
HTML
頁面的原始 HTML 主體
<!DOCTYPE html><html lang="en"><head>
<script src="https://apis.google.com/js/platform.js" async="" defer="" gapi_processed="true"></script>
<script src="https://accounts.google.com/gsi/client" async=""></script>
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-2H5KR50ZLJ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-2H5KR50ZLJ');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<meta name="description" content="Introducing SocialSphere: Redefining Social Media!">
<meta name="keywords" content="Social, Sphere, Socialsphere, SocialSphere, socialsphere, spheres, media, Media, SocialMedia, Socialmedia, socialmedia, twitter, facebook, meta">
<meta name="author" content="ItsDaBoSs">
<link rel="icon" type="image/x-icon" href="./favicon.ico">
<title>Socialsphere 2.0</title>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- AOS Animation CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">
<!-- Custom Styles -->
<style>
body { overflow-x: hidden; }
/* Hero 3D Background */
#3d-background, #features-3d, #footer-3d { position: absolute; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; }
/* Background Colors for Sections */
#features { background-color: #1a2a3f; color: white; position: relative; }
#why-us { background-color: #2b2b2b; color: white; }
#community-highlights { background-color: #f1f3f5; color: #333; }
#getting-started { background-color: rgba(21, 21, 33); color: #333; }
#faqs { background-color: #ffffff; color: #333; }
#footer-3d { bottom: 0; }
/* Micro-Animations */
.icon { transition: transform 0.3s ease; }
.icon:hover { transform: scale(1.15); }
.icon-spin:hover { animation: spin 1s infinite linear; }
.icon-bounce:hover { animation: bounce 0.5s ease-in-out infinite alternate; }
.icon-pulse { animation: pulse 2s infinite; }
/* Keyframes */
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-8px); } }
@keyframes pulse { 0%, 100% { color: #007bff; } 50% { color: #ff6b6b; } }
/* Section Spacing */
section { padding: 4rem 0; }
.header {
transition: all 0.3s ease;
background-color: rgba(30, 30, 47);
}
.header.shrink {
background-color: rgba(21, 21, 33);
padding: 0.5em 1em;
}
.header .navbar-brand img {
max-width: 200px;
transition: max-width 0.3s ease;
}
.header.shrink .navbar-brand img {
max-width: 150px;
}
.navbar-toggler {
border: none;
}
.footer {
background-color: #1e1e2f;
padding: 2em 0;
}
.footer .footer-links a {
color: #cccccc;
margin: 0 0.5em;
text-decoration: none;
}
.footer .footer-links a:hover {
color: #ffffff;
}
.highlight-img {
height: 250px;
object-fit: cover;
width: 100%;
}
</style>
<!-- Three.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<style id="googleidentityservice_button_styles">.qJTHM{-moz-user-select:none;color:#202124;direction:ltr;font-family:"Roboto-Regular",arial,sans-serif;font-weight:400;margin:0;overflow:hidden}.ynRLnc{left:-9999px;position:absolute;top:-9999px}.L6cTce{display:none}.bltWBb{word-break:break-all}.hSRGPd{color:#1a73e8;cursor:pointer;font-weight:500;text-decoration:none}.Bz112c-W3lGp{height:16px;width:16px}.Bz112c-E3DyYd{height:20px;width:20px}.Bz112c-r9oPif{height:24px;width:24px}.Bz112c-uaxL4e{-moz-border-radius:10px;border-radius:10px}.LgbsSe-Bz112c{display:block}.S9gUrf-YoZ4jf,.S9gUrf-YoZ4jf *{border:none;margin:0;padding:0}.fFW7wc-ibnC6b>.aZ2wEe>div{border-color:#4285f4}.P1ekSe-ZMv3u>div:nth-child(1){background-color:#1a73e8!important}.P1ekSe-ZMv3u>div:nth-child(2),.P1ekSe-ZMv3u>div:nth-child(3){background-image:linear-gradient(to right,rgba(255,255,255,.7),rgba(255,255,255,.7)),linear-gradient(to right,#1a73e8,#1a73e8)!important}.haAclf{display:inline-block}.nsm7Bb-HzV7m-LgbsSe{border-radius:4px;box-sizing:border-box;transition:background-color .218s,border-color .218s;-moz-user-select:none;background-color:#fff;background-image:none;border:1px solid #dadce0;color:#3c4043;cursor:pointer;font-family:"Google Sans",arial,sans-serif;font-size:14px;height:40px;letter-spacing:0.25px;outline:none;overflow:hidden;padding:0 12px;position:relative;text-align:center;vertical-align:middle;white-space:nowrap;width:auto}@media screen and (-ms-high-contrast:active){.nsm7Bb-HzV7m-LgbsSe{border:2px solid windowText;color:windowText}}.nsm7Bb-HzV7m-LgbsSe.pSzOP-SxQuSe{font-size:14px;height:32px;letter-spacing:0.25px;padding:0 10px}.nsm7Bb-HzV7m-LgbsSe.purZT-SxQuSe{font-size:11px;height:20px;letter-spacing:0.3px;padding:0 8px}.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe{padding:0;width:40px}.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe.pSzOP-SxQuSe{width:32px}.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe.purZT-SxQuSe{width:20px}.nsm7Bb-HzV7m-LgbsSe.JGcpL-RbRzK{border-radius:20px}.nsm7Bb-HzV7m-LgbsSe.JGcpL-RbRzK.pSzOP-SxQuSe{border-radius:16px}.nsm7Bb-HzV7m-LgbsSe.JGcpL-RbRzK.purZT-SxQuSe{border-radius:10px}.nsm7Bb-HzV7m-LgbsSe.MFS4be-Ia7Qfc{border:none;color:#fff}.nsm7Bb-HzV7m-LgbsSe.MFS4be-v3pZbf-Ia7Qfc{background-color:#1a73e8}.nsm7Bb-HzV7m-LgbsSe.MFS4be-JaPV2b-Ia7Qfc{background-color:#202124;color:#e8eaed}.nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-Bz112c{height:18px;margin-right:8px;min-width:18px;width:18px}.nsm7Bb-HzV7m-LgbsSe.pSzOP-SxQuSe .nsm7Bb-HzV7m-LgbsSe-Bz112c{height:14px;min-width:14px;width:14px}.nsm7Bb-HzV7m-LgbsSe.purZT-SxQuSe .nsm7Bb-HzV7m-LgbsSe-Bz112c{height:10px;min-width:10px;width:10px}.nsm7Bb-HzV7m-LgbsSe.jVeSEe .nsm7Bb-HzV7m-LgbsSe-Bz112c{margin-left:8px;margin-right:-4px}.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe .nsm7Bb-HzV7m-LgbsSe-Bz112c{margin:0;padding:10px}.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe.pSzOP-SxQuSe .nsm7Bb-HzV7m-LgbsSe-Bz112c{padding:8px}.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe.purZT-SxQuSe .nsm7Bb-HzV7m-LgbsSe-Bz112c{padding:4px}.nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{border-top-left-radius:3px;border-bottom-left-radius:3px;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;justify-content:center;align-items:center;background-color:#fff;height:36px;margin-left:-10px;margin-right:12px;min-width:36px;width:36px}.nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf .nsm7Bb-HzV7m-LgbsSe-Bz112c,.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf .nsm7Bb-HzV7m-LgbsSe-Bz112c{margin:0;padding:0}.nsm7Bb-HzV7m-LgbsSe.pSzOP-SxQuSe .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{height:28px;margin-left:-8px;margin-right:10px;min-width:28px;width:28px}.nsm7Bb-HzV7m-LgbsSe.purZT-SxQuSe .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{height:16px;margin-left:-6px;margin-right:8px;min-width:16px;width:16px}.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{border-radius:3px;margin-left:2px;margin-right:0;padding:0}.nsm7Bb-HzV7m-LgbsSe.JGcpL-RbRzK .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{border-radius:18px}.nsm7Bb-HzV7m-LgbsSe.pSzOP-SxQuSe.JGcpL-RbRzK .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{border-radius:14px}.nsm7Bb-HzV7m-LgbsSe.purZT-SxQuSe.JGcpL-RbRzK .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{border-radius:8px}.nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-bN97Pc-sM5MNb{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;align-items:center;flex-direction:row;justify-content:space-between;flex-wrap:nowrap;height:100%;position:relative;width:100%}.nsm7Bb-HzV7m-LgbsSe .oXtfBe-l4eHX{justify-content:center}.nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-BPrWId{flex-grow:1;font-family:"Google Sans",arial,sans-serif;font-weight:500;overflow:hidden;text-overflow:ellipsis;vertical-align:top}.nsm7Bb-HzV7m-LgbsSe.purZT-SxQuSe .nsm7Bb-HzV7m-LgbsSe-BPrWId{font-weight:300}.nsm7Bb-HzV7m-LgbsSe .oXtfBe-l4eHX .nsm7Bb-HzV7m-LgbsSe-BPrWId{flex-grow:0}.nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-MJoBVe{transition:background-color .218s;bottom:0;left:0;position:absolute;right:0;top:0}.nsm7Bb-HzV7m-LgbsSe:hover,.nsm7Bb-HzV7m-LgbsSe:focus{box-shadow:none;border-color:#d2e3fc;outline:none}.nsm7Bb-HzV7m-LgbsSe:hover .nsm7Bb-HzV7m-LgbsSe-MJoBVe,.nsm7Bb-HzV7m-LgbsSe:focus .nsm7Bb-HzV7m-LgbsSe-MJoBVe{background:rgba(66,133,244,.04)}.nsm7Bb-HzV7m-LgbsSe:active .nsm7Bb-HzV7m-LgbsSe-MJoBVe{background:rgba(66,133,244,.1)}.nsm7Bb-HzV7m-LgbsSe.MFS4be-Ia7Qfc:hover .nsm7Bb-HzV7m-LgbsSe-MJoBVe,.nsm7Bb-HzV7m-LgbsSe.MFS4be-Ia7Qfc:focus .nsm7Bb-HzV7m-LgbsSe-MJoBVe{background:rgba(255,255,255,.24)}.nsm7Bb-HzV7m-LgbsSe.MFS4be-Ia7Qfc:active .nsm7Bb-HzV7m-LgbsSe-MJoBVe{background:rgba(255,255,255,.32)}.nsm7Bb-HzV7m-LgbsSe .n1UuX-DkfjY{border-radius:50%;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;height:20px;margin-left:-4px;margin-right:8px;min-width:20px;width:20px}.nsm7Bb-HzV7m-LgbsSe.jVeSEe .nsm7Bb-HzV7m-LgbsSe-BPrWId{font-family:"Roboto";font-size:12px;text-align:left}.nsm7Bb-HzV7m-LgbsSe.jVeSEe .nsm7Bb-HzV7m-LgbsSe-BPrWId .ssJRIf,.nsm7Bb-HzV7m-LgbsSe.jVeSEe .nsm7Bb-HzV7m-LgbsSe-BPrWId .K4efff .fmcmS{overflow:hidden;text-overflow:ellipsis}.nsm7Bb-HzV7m-LgbsSe.jVeSEe .nsm7Bb-HzV7m-LgbsSe-BPrWId .K4efff{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;align-items:center;color:#5f6368;fill:#5f6368;font-size:11px;font-weight:400}.nsm7Bb-HzV7m-LgbsSe.jVeSEe.MFS4be-Ia7Qfc .nsm7Bb-HzV7m-LgbsSe-BPrWId .K4efff{color:#e8eaed;fill:#e8eaed}.nsm7Bb-HzV7m-LgbsSe.jVeSEe .nsm7Bb-HzV7m-LgbsSe-BPrWId .K4efff .Bz112c{height:18px;margin:-3px -3px -3px 2px;min-width:18px;width:18px}.nsm7Bb-HzV7m-LgbsSe.jVeSEe .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px;margin-left:12px;margin-right:-10px}.nsm7Bb-HzV7m-LgbsSe.jVeSEe.JGcpL-RbRzK .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{border-radius:18px}.L5Fo6c-sM5MNb{border:0;display:block;left:0;position:relative;top:0}.L5Fo6c-bF1uUb{-moz-border-radius:4px;border-radius:4px;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0}.L5Fo6c-bF1uUb:focus{border:none;outline:none}sentinel{}</style></head>
<body class="bg-dark text-light" data-aos-easing="ease" data-aos-duration="1000" data-aos-delay="0">
<header class="header fixed-top text-white">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="https://socialsphere.getenjoyment.net/dashboard/">
<img src="https://socialsphere.getenjoyment.net/applogo.png" alt="Socialsphere Logo">
</a>
<!-- Toggler for mobile and scroll-collapsed menu -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible Menu -->
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto align-items-center">
<li class="nav-item">
<a class="nav-link text-light mx-2" href="#features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link text-light mx-2" href="#why-us">Why Choose Us</a>
</li>
<li class="nav-item">
<a class="nav-link text-light mx-2" href="#community-highlights">Highlights</a>
</li>
<li class="nav-item">
<a class="nav-link text-light mx-2" href="#getting-started">Getting Started</a>
</li>
<li class="nav-item">
<a class="nav-link text-light mx-2" href="#faqs">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link text-light mx-2" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item d-none d-lg-block">
<a href="https://socialsphere.getenjoyment.net/login/" class="btn btn-outline-light mr-2">Sign In</a>
</li>
<li class="nav-item d-none d-lg-block">
<a href="https://socialsphere.getenjoyment.net/signup/" class="btn btn-light">Sign Up</a>
</li>
</ul>
<div class="d-lg-none mt-3">
<a href="https://socialsphere.getenjoyment.net/login/" class="btn btn-outline-light btn-block mb-2">Sign In</a>
<a href="https://socialsphere.getenjoyment.net/signup/" class="btn btn-light btn-block">Sign Up</a>
</div>
</div>
</nav>
</div>
</header>
<!-- Hero Section -->
<section class="hero position-relative d-flex align-items-center text-center" style="height: 100vh;">
<div id="3d-background"></div>
<div class="hero-content position-absolute w-100 aos-init aos-animate" data-aos="fade-up">
<h1 class="display-4 text-white">Welcome to Socialsphere 2.0</h1>
<p class="lead text-light">Experience a new level of connection and discovery.</p>
<div class="mt-4">
<a href="https://socialsphere.getenjoyment.net/signup/" class="btn btn-primary btn-lg mx-2">Sign Up</a>
<a href="#features" class="btn btn-outline-light btn-lg mx-2">Learn More</a>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="container-fluid py-5">
<h2 class="text-center text-white mb-5 aos-init" data-aos="fade-right">New & Improved Features</h2>
<div class="row text-center">
<div class="col-md-4 mb-4 aos-init" data-aos="fade-up" data-aos-delay="100">
<i class="fas fa-user-shield fa-3x text-primary mb-3 icon icon-bounce"></i>
<h4>Enhanced Privacy</h4>
<p>Keep your data secure with advanced encryption.</p>
</div>
<div class="col-md-4 mb-4 aos-init" data-aos="fade-up" data-aos-delay="200">
<i class="fas fa-bolt fa-3x text-primary mb-3 icon icon-spin"></i>
<h4>Faster Messaging</h4>
<p>Real-time chats with zero delays for a seamless experience.</p>
</div>
<div class="col-md-4 mb-4 aos-init" data-aos="fade-up" data-aos-delay="300">
<i class="fas fa-palette fa-3x text-primary mb-3 icon icon-bounce"></i>
<h4>Customizable Profiles</h4>
<p>Personalize profiles.</p>
</div>
<div class="col-md-4 mb-4 aos-init" data-aos="fade-up" data-aos-delay="400">
<i class="fas fa-chart-line fa-3x text-primary mb-3 icon icon-pulse"></i>
<h4>Data Analytics</h4>
<p>Track your reach and engagement with insights.</p>
</div>
<div class="col-md-4 mb-4 aos-init" data-aos="fade-up" data-aos-delay="500">
<i class="fas fa-lock fa-3x text-primary mb-3 icon icon-bounce"></i>
<h4>End-to-End Encryption</h4>
<p>Your conversations remain private and secure.</p>
</div>
<div class="col-md-4 mb-4 aos-init" data-aos="fade-up" data-aos-delay="600">
<i class="fas fa-comments fa-3x text-primary mb-3 icon icon-pulse"></i>
<h4>Enhanced Group Chats</h4>
<p>Advanced group chat features for seamless interaction.</p>
</div>
</div>
</section>
<!-- Why Choose Us Section -->
<section id="why-us" class="container-fluid py-5 bg-dark text-light">
<div class="container text-center">
<h2 data-aos="fade-left" class="aos-init">Why Socialsphere 2.0?</h2>
<p class="lead mt-3">Discover what sets us apart.</p>
<div class="row mt-4">
<div class="col-md-3 aos-init" data-aos="fade-right" data-aos-delay="100">
<i class="fas fa-ad fa-3x text-primary mb-3 icon icon-spin"></i>
<p>No Ads – Purely User-Focused</p>
</div>
<div class="col-md-3 aos-init" data-aos="fade-right" data-aos-delay="200">
<i class="fas fa-lightbulb fa-3x text-primary mb-3 icon icon-pulse"></i>
<p>AI-Driven Personalization</p>
</div>
<div class="col-md-3 aos-init" data-aos="fade-right" data-aos-delay="300">
<i class="fas fa-headset fa-3x text-primary mb-3 icon icon-bounce"></i>
<p>24/7 Customer Support</p>
</div>
<div class="col-md-3 aos-init" data-aos="fade-right" data-aos-delay="400">
<i class="fas fa-tree fa-3x text-primary mb-3 icon icon-pulse"></i>
<p>Eco-Friendly Infrastructure</p>
</div>
<div class="col-md-3 aos-init" data-aos="fade-right" data-aos-delay="500">
<i class="fas fa-shield-alt fa-3x text-primary mb-3 icon icon-bounce"></i>
<p>Built with Security in Mind</p>
</div>
<div class="col-md-3 aos-init" data-aos="fade-right" data-aos-delay="600">
<i class="fas fa-globe-americas fa-3x text-primary mb-3 icon icon-pulse"></i>
<p>Global Community & Inclusivity</p>
</div>
<div class="col-md-3 aos-init" data-aos="fade-right" data-aos-delay="700">
<i class="fas fa-rocket fa-3x text-primary mb-3 icon icon-spin"></i>
<p>Blazing Fast Messaging</p>
</div>
<div class="col-md-3 aos-init" data-aos="fade-right" data-aos-delay="800">
<i class="fas fa-user-lock fa-3x text-primary mb-3 icon icon-bounce"></i>
<p>Unmatched Privacy Controls</p>
</div>
</div>
</div>
</section>
<!-- Community Highlights Section -->
<section id="community-highlights" class="container-fluid py-5">
<h2 class="text-center text-dark mb-5 aos-init" data-aos="fade-up">Community Highlights</h2>
<div class="row text-center">
<div class="col-md-4 aos-init" data-aos="zoom-in" data-aos-delay="100">
<img src="https://plus.unsplash.com/premium_photo-1677939082123-414edc6aaf25?q=80&w=1632&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Trending Topics" class="img-fluid mb-3 rounded highlight-img">
<h5>Trending Topics</h5>
<p>See what’s buzzing in the Socialsphere community.</p>
</div>
<div class="col-md-4 aos-init" data-aos="zoom-in" data-aos-delay="200">
<img src="https://plus.unsplash.com/premium_photo-1683977922495-3ab3ce7ba4e6?q=80&w=1400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Popular Profiles" class="img-fluid mb-3 rounded highlight-img">
<h5>Popular Profiles</h5>
<p>Follow the most influential users and brands.</p>
</div>
<div class="col-md-4 aos-init" data-aos="zoom-in" data-aos-delay="300">
<img src="https://plus.unsplash.com/premium_photo-1677252438426-595a3a9d5e11?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="User-Generated Content" class="img-fluid mb-3 rounded highlight-img">
<h5>User-Generated Content</h5>
<p>Discover amazing content created by our users.</p>
</div>
</div>
</section>
<!-- Getting Started Section -->
<section id="getting-started" class="container-fluid py-5 text-light">
<h2 class="text-center mb-5 aos-init" data-aos="fade-up">Getting Started is Easy</h2>
<div class="row text-center">
<div class="col-md-4 aos-init" data-aos="fade-up" data-aos-delay="100">
<i class="fas fa-user-plus fa-3x text-primary mb-3 icon"></i>
<h5>1. Sign Up</h5>
<p>Create your free account in just a few clicks.</p>
</div>
<div class="col-md-4 aos-init" data-aos="fade-up" data-aos-delay="200">
<i class="fas fa-sliders-h fa-3x text-primary mb-3 icon"></i>
<h5>2. Customize</h5>
<p>Personalize your profile to fit your style.</p>
</div>
<div class="col-md-4 aos-init" data-aos="fade-up" data-aos-delay="300">
<i class="fas fa-users fa-3x text-primary mb-3 icon"></i>
<h5>3. Connect</h5>
<p>Start connecting with friends and communities.</p>
</div>
</div>
</section>
<!-- FAQs Sectio -->
<section id="faqs" class="bg-info text-light container-fluid py-5 px-5">
<h2 class="text-center mb-5 aos-init" data-aos="fade-down">Frequently Asked Questions</h2>
<div class="accordion" id="faqAccordion">
<div class="card bg-light text-dark aos-init" data-aos="fade-up" data-aos-delay="100">
<div class="card-header" id="faqOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
What is Socialsphere 2.0?
</button>
</h5>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="faqOne" data-parent="#faqAccordion">
<div class="card-body">
Socialsphere 2.0 is a revolutionary social media platform focused on user privacy, innovation, and a high-quality user experience.
</div>
</div>
</div>
<div class="card bg-light text-dark aos-init" data-aos="fade-up" data-aos-delay="200">
<div class="card-header" id="faqTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Can I delete my account?
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="faqTwo" data-parent="#faqAccordion">
<div class="card-body">
Yes, Socialsphere allows you to delete your account whenever you’re ready.
</div>
</div>
</div>
<div class="card bg-light text-dark aos-init" data-aos="fade-up" data-aos-delay="300">
<div class="card-header" id="faqThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Are there any subscription fees?
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="faqThree" data-parent="#faqAccordion">
<div class="card-body">
No, Socialsphere 2.0 is free to use, with no hidden fees or subscription costs.
</div>
</div>
</div>
<div class="card bg-light text-dark aos-init" data-aos="fade-up" data-aos-delay="400">
<div class="card-header" id="faqFour">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
How is my data protected?
</button>
</h5>
</div>
<div id="collapseFour" class="collapse" aria-labelledby="faqFour" data-parent="#faqAccordion">
<div class="card-body">
Socialsphere uses advanced encryption and privacy controls to protect your data. Additionally, we adhere to strict data protection laws.
</div>
</div>
</div>
<div class="card bg-light text-dark aos-init" data-aos="fade-up" data-aos-delay="200">
<div class="card-header" id="faqFive">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
Is there a mobile app available?
</button>
</h5>
</div>
<div id="collapseFive" class="collapse" aria-labelledby="faqFive" data-parent="#faqAccordion">
<div class="card-body">
Yes, Socialsphere 2.0 is available on both iOS and Android devices.
</div>
</div>
</div>
<div class="card bg-light text-dark aos-init" data-aos="fade-up" data-aos-delay="300">
<div class="card-header" id="faqSix">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
How can I secure my account?
</button>
</h5>
</div>
<div id="collapseSix" class="collapse" aria-labelledby="faqSix" data-parent="#faqAccordion">
<div class="card-body">
You can secure your account by using a strong, unique password.
</div>
</div>
</div>
<div class="card bg-light text-dark aos-init" data-aos="fade-up" data-aos-delay="400">
<div class="card-header" id="faqSeven">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
What privacy features are available?
</button>
</h5>
</div>
<div id="collapseSeven" class="collapse" aria-labelledby="faqSeven" data-parent="#faqAccordion">
<div class="card-body">
Socialsphere 2.0 offers enhanced privacy settings, allowing you to control who sees your content and enabling encryption for private messages.
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section id="testimonials" class="container py-5 text-center">
<h2 class="text-white aos-init" data-aos="zoom-in">What Our Users Say</h2>
<div class="row mt-4">
<div class="col-md-6 aos-init" data-aos="flip-left" data-aos-delay="100">
<blockquote class="blockquote">
<p class="mb-3">"Socialsphere 2.0 has transformed the way I connect with my friends and family."</p>
<footer class="blockquote-footer text-light">Alex J.</footer>
</blockquote>
</div>
<div class="col-md-6 aos-init" data-aos="flip-right" data-aos-delay="200">
<blockquote class="blockquote">
<p class="mb-3">"The new features are amazing and make it easy to stay updated."</p>
<footer class="blockquote-footer text-light">Casey M.</footer>
</blockquote>
</div>
</div>
</section>
<!-- Call to Action Section -->
<section id="signup" class="cta text-center py-5 bg-primary aos-init" data-aos="zoom-in">
<h2 class="text-white">Ready to Connect Smarter?</h2>
<a href="#" class="btn btn-light btn-lg mt-3">Get Started</a>
</section>
<!-- Footer Section -->
<footer class="footer text-light mt-5 position-relative">
<div id="footer-3d"></div>
<div class="container">
<div class="row">
<div class="col-md-6 d-flex justify-content-center justify-content-md-start align-items-center mb-3 mb-md-0">
<a href="https://socialsphere.getenjoyment.net/dashboard/">
<img src="https://socialsphere.getenjoyment.net/applogo.png" style="max-width: 200px;" alt="Socialsphere Logo">
</a>
</div>
<!-- Links, Buttons, and Socials Column -->
<div class="col-md-6 text-center text-md-left">
<div class="mb-3">
<a href="https://socialsphere.getenjoyment.net/login/" class="btn btn-outline-light mr-2">Sign In</a>
<a href="https://socialsphere.getenjoyment.net/signup/" class="btn btn-light">Sign Up</a>
</div>
<!-- Privacy Policy, Terms, and Social Links -->
<div class="footer-links mb-3">
<a href="./pp/" class="text-light mx-2">Privacy Policy</a>
<a href="./tos/" class="text-light mx-2">Terms of Service</a>
<a href="#facebook" class="text-light mx-2"><i class="fab fa-facebook-f"></i></a>
<a href="#twitter" class="text-light mx-2"><i class="fab fa-twitter"></i></a>
<a href="#instagram" class="text-light mx-2"><i class="fab fa-instagram"></i></a>
</div>
<!-- Copyright -->
<div class="text-muted mt-2">
© 2024 Socialsphere. All Rights Reserved.
</div>
</div>
</div>
</div>
</footer>
<!-- Bootstrap and AOS JS, and Smooth Scroll -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/16.1.3/smooth-scroll.polyfills.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<!-- Initialize Smooth Scroll and AOS -->
<script>
// Smooth Scroll for Anchor Links
const scroll = new SmoothScroll('a[href*="#"]', {
speed: 800,
offset: 60, // Offset for the fixed header height
});
// Initialize AOS
AOS.init({
duration: 1000,
once: false,
});
// 3D Scene for Hero Section
const heroScene = new THREE.Scene();
heroScene.background = new THREE.Color(0x000000);
const heroCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const heroRenderer = new THREE.WebGLRenderer({ alpha: true });
heroRenderer.setSize(window.innerWidth, window.innerHeight);
heroRenderer.setClearColor(0x000000, 1);
document.getElementById("3d-background").appendChild(heroRenderer.domElement);
const torusGeometry = new THREE.TorusKnotGeometry(10, 3, 100, 16);
const torusMaterial = new THREE.MeshStandardMaterial({ color: 0x0077ff, emissive: 0x004488, wireframe: true });
const torus = new THREE.Mesh(torusGeometry, torusMaterial);
heroScene.add(torus);
heroCamera.position.z = 30;
const ambientLight = new THREE.AmbientLight(0x555555);
heroScene.add(ambientLight);
function animateHero() {
requestAnimationFrame(animateHero);
torus.rotation.x += 0.01;
torus.rotation.y += 0.01;
heroRenderer.render(heroScene, heroCamera);
}
animateHero();
// // 3D Background for Footer Section
// const footerScene = new THREE.Scene();
// const footerCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// const footerRenderer = new THREE.WebGLRenderer({ alpha: true });
// footerRenderer.setSize(window.innerWidth, window.innerHeight);
// document.getElementById("footer-3d").appendChild(footerRenderer.domElement);
// const starGeometry = new THREE.BufferGeometry();
// const starMaterial = new THREE.PointsMaterial({ color: 0xffffff });
// for (let i = 0; i < 1000; i++) {
// const star = new THREE.Vector3(
// Math.random() * 600 - 300,
// Math.random() * 600 - 300,
// Math.random() * 600 - 300
// );
// starGeometry.vertices.push(star);
// }
// const starField = new THREE.Points(starGeometry, starMaterial);
// footerScene.add(starField);
// footerCamera.position.z = 300;
// function animateFooter() {
// requestAnimationFrame(animateFooter);
// starField.rotation.y += 0.001;
// footerRenderer.render(footerScene, footerCamera);
// }
// animateFooter();
// Adjust canvas size on window resize
window.addEventListener('resize', () => {
heroRenderer.setSize(window.innerWidth, window.innerHeight);
heroCamera.aspect = window.innerWidth / window.innerHeight;
heroCamera.updateProjectionMatrix();
});
// Header shrink and hide links on scroll
window.addEventListener("scroll", function() {
const header = document.querySelector(".header");
const navbarNav = document.getElementById("navbarNav");
if (window.scrollY > 50) {
header.classList.add("shrink");
navbarNav.classList.remove("show"); // Collapse menu on scroll
} else {
header.classList.remove("shrink");
}
});
</script>
</body></html>