Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix : dvpn and dwifi page ui #117

Merged
merged 1 commit into from
Aug 28, 2024
+96 −82
Merged

fix : dvpn and dwifi page ui #117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 65 additions & 61 deletions pages/dwifi.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,80 +1,84 @@
import React, { useEffect, useState} from "react";
import React, { useEffect, useState, useRef } from "react";
import Link from "next/link";
import NodeDwifiStream from "../components/nodedataDwifi";
import NodeDwifiStream from "../components/nodedataDwifi";
import { motion } from "framer-motion";
import dynamic from 'next/dynamic';

const DwifiMap = dynamic(() => import('../components/DwifiMap'), { ssr: false });


const Dwifi = () => {
const mapRef = useRef(null);

const scrollToMap = () => {
mapRef.current?.scrollIntoView({ behavior: 'smooth' });
};

return(
<div className="bg-black">
<div className="mx-auto py-20"
return (
<div className="explorer-page">
<div className="mx-auto py-20 lg:h-[40vw]"
style={{
backgroundImage: 'radial-gradient(circle at 0% 7%, rgba(86, 150, 255, 0.6) 4%, #0162FF80 10%, black 30%), url("/explorer2.png")',
backgroundSize: 'cover',
backgroundBlendMode: 'overlay',
}}
>
<div className="flex flex-col lg:flex-row items-start justify-between lg:h-full mt-10 lg:ml-0 lg:mr-0 md:ml-0 md:mr-0 ml-4 mr-4 mb-36 lg:mb-0 px-4 lg:px-20">
<div className="flex flex-col items-start justify-start">
<motion.h1
initial={{ y: 100, opacity: 0 }}
animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
className="text-4xl md:text-5xl lg:text-6xl font-semibold text-gray-300 mb-8 lg:w-4/5"
>
Decentralized Connectivity with Erebrus ÐWi-Fi
</motion.h1>
<motion.h1
initial={{ y: 100, opacity: 0 }}
animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
className="text-xl md:text-2xl text-white mb-8 w-full"
>
<p>Secure and fast Wi-Fi Everywhere</p>
</motion.h1>
<motion.div
initial={{ y: 100, opacity: 0 }}
animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
className="text-black font-bold py-3 px-10 rounded-full bg-white text-lg"
>
<Link href="https://discord.com/invite/5uaFhNpRF6" target="_blank" rel="noopener noreferrer">
Run Your Node
</Link>
</motion.div>
backgroundImage: 'url("/explorerhero.png")',
backgroundSize: 'cover',
backgroundBlendMode: 'overlay',
}}
>
<div className="flex flex-col lg:flex-row items-start justify-between lg:h-full mt-10 lg:ml-0 lg:mr-0 md:ml-0 md:mr-0 ml-4 mr-4 mb-36 lg:mb-0 px-4 lg:px-20">
<div className="flex flex-col items-start justify-start">
<motion.h1
initial={{ y: 100, opacity: 0 }}
animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
className="text-4xl md:text-5xl lg:text-6xl font-semibold text-gray-300 mb-8 lg:w-4/5"
>
Decentralized Connectivity with Erebrus ÐWi-Fi
</motion.h1>
<motion.h1
initial={{ y: 100, opacity: 0 }}
animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
className="text-xl md:text-2xl text-white mb-8 w-full"
>
<p>Secure and fast Wi-Fi Everywhere</p>
</motion.h1>
<div className="flex gap-5">
<motion.div
initial={{ y: 100, opacity: 0 }}
animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
className="text-black font-bold py-3 px-10 rounded-full bg-white text-lg cursor-pointer"
>
<Link href="https://discord.com/invite/5uaFhNpRF6" target="_blank" rel="noopener noreferrer">
Run Your Node
</Link>
</motion.div>
<motion.div
initial={{ y: 100, opacity: 0 }}
animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
className="text-white font-bold py-3 px-10 rounded-full bg-[#5696FF] text-lg cursor-pointer"
onClick={scrollToMap}
>
Active Node Map
</motion.div>
</div>
</div>
</div>
</div>

{/* Animated Image */}
<div className="hidden lg:block lg:w-1/3">
<img
src="/explorerdwifi4.png"
alt="Decorative GIF"
className="w-full h-auto opacity-90 shadow-lg"
/>
</div>
</div>
</div>
<div className=" bg-gradient-to-b from-black to-[#20253A] lg:px-20 pt-16 px-20">
<div className="text-2xl font-semibold text-gray-300 mb-8 ">
<div className="bg-gradient-to-b from-[#20253A] to-[#20253A] lg:px-20 pt-16 px-20">
<div className="text-2xl font-semibold text-gray-300 mb-8">
Erebrus Decentralized Wi-Fi (ÐWi-Fi) Network Nodes Overview
</div>
<div className="text-white">
<p>
Discover the Erebrus decentralized Wi-Fi network with our interactive map. View real-time details about Wi-Fi hotspots, including their location, performance, and usage stats. This dashboard helps you find secure and fast Wi-Fi connections globally. </p>
</div>
</div>
<div className="map-page" style={{ height: '100vh'}}>
<div className="map-container" style={{ height: '100%', width: '100%' }}>
<div className="text-white">
<p>
Discover the Erebrus decentralized Wi-Fi network with our interactive map. View real-time details about Wi-Fi hotspots, including their location, performance, and usage stats. This dashboard helps you find secure and fast Wi-Fi connections globally.
</p>
</div>
</div>
<div ref={mapRef} className="map-page" style={{ height: '100vh' }}>
<div className="map-container" style={{ height: '100%', width: '100%' }}>
<DwifiMap />
</div>
</div>
</div>

<NodeDwifiStream />

{/* <img src="/mapRegions.png"/> */}
</div>
)
</div>
)
}

export default Dwifi;
43 changes: 24 additions & 19 deletions pages/explorer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, { useEffect, useState, useRef } from "react";
import Link from "next/link";
import NodesData from "../components/NodesData";
import dynamic from 'next/dynamic';
Expand All @@ -10,6 +10,7 @@ const EREBRUS_GATEWAY_URL = process.env.NEXT_PUBLIC_EREBRUS_BASE_URL;
const Explorer = () => {
const [nodes, setNodes] = useState([]);
const [activeMap, setActiveMap] = useState('pin');
const mapRef = useRef(null);

useEffect(() => {
async function fetchNodes() {
Expand All @@ -30,16 +31,20 @@ const Explorer = () => {
fetchNodes();
}, []);

const scrollToMap = () => {
mapRef.current?.scrollIntoView({ behavior: 'smooth' });
};

return (
<div className="bg-[#040819]">
<div className="mx-auto relative flex flex-col lg:flex-row items-center lg:items-start lg:justify-between p-4 lg:p-10"
<div className="explorer-page">
<div className="mx-auto relative flex flex-col lg:flex-row items-center lg:items-start lg:justify-between p-4 lg:p-10 lg:h-[40vw]"
style={{
backgroundImage: 'radial-gradient(circle at 0% 7%, rgba(86, 150, 255, 0.6) 4%, #0162FF80 10%, black 30%), url("/explorer4.png")',
backgroundImage: 'url("/explorerhero.png")',
backgroundSize: 'cover',
backgroundBlendMode: 'overlay',
backgroundBlendMode: 'lighten',
}}
>
<div className="flex flex-col items-center lg:items-start lg:w-2/3 lg:pr-10 text-left">
<div className="flex flex-col items-center lg:items-start lg:w-2/3 lg:pr-10 text-left py-40">
<motion.h1
initial={{ y: 100, opacity: 0 }}
animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
Expand All @@ -58,6 +63,7 @@ const Explorer = () => {
Unrestricted Uncensored Web Access
</p>
</motion.h1>
<div className="flex gap-5">
<motion.div
initial={{ y: 100, opacity: 0 }}
animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
Expand All @@ -67,19 +73,19 @@ const Explorer = () => {
Run Your Node
</Link>
</motion.div>
</div>

<div className="hidden lg:block relative lg:self-start lg:mr-auto">
<img
src="/explorerdvpn3.png"
alt="vpn sheield image"
className="w-full h-auto max-h-80 lg:pl-14 shadow-lg"
/>
<motion.div
initial={{ y: 100, opacity: 0 }}
animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
className="text-white font-bold py-3 px-10 rounded-full bg-[#5696FF] text-lg inline-block cursor-pointer"
onClick={scrollToMap}
>
Active Node Map
</motion.div>
</div>

</div>
</div>

<div className="pt-16 px-4 lg:px-20 bg-gradient-to-b from-black to-[#20253A]">
<div className="pt-16 px-4 lg:px-20 bg-gradient-to-b from-[#20253A] to-[#20253A]">
<div className="text-2xl font-semibold text-gray-300 mb-8">
Erebrus Decentralized VPN (ÐVPN) Network Nodes Overview
</div>
Expand All @@ -90,16 +96,15 @@ const Explorer = () => {
</div>
</div>

<div className="map-page" style={{ height: '100vh' }}>
<div ref={mapRef} className="map-page" style={{ height: '100vh' }}>
<div className="map-container" style={{ height: '100%', width: '100%' }}>
<DvpnMap nodes={nodes} />
</div>
</div>

<NodesData />

</div>
);
}

export default Explorer;
export default Explorer;
2 changes: 1 addition & 1 deletion pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ export default function Home() {
Unleash the power of future internet with our ÐVPN and ÐWi-Fi
</p>
</motion.h1>
<div className="lg:flex md:flex lg:space-x-4 md:space-x-4 w-3/5 mr-auto lg:gap-10 md:gap-10 gap-0">
<div className="lg:flex md:flex lg:space-x-4 md:space-x-4 w-3/5 mr-auto lg:gap-5 md:gap-10 gap-0">
<motion.div
initial={{ y: 100, opacity: 0 }}
animate={{ y: 0, opacity: 1, transition: { duration: 1 } }}
Expand Down
1 change: 1 addition & 0 deletions pages/subscription.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,6 +294,7 @@ const Subscription = () => {
setLoading(false);
}
};


const vpnnft = async () => {
setLoading(true);
Expand Down
Binary file modified public/explorer4.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/explorerglobe.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/explorerhero.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 5 additions & 1 deletion styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,4 +150,8 @@ body {
background:
linear-gradient(0deg, #6ea3f9, #ffffff),
linear-gradient(180deg, rgba(118, 224, 250, 0.5) 10%, rgba(57, 133, 255, 0.5) 100%);
}
}
.explorer-page {

background: linear-gradient(180deg, #040819 0%, #092187 21.62%, #20253A 36.5%);
}