diff --git a/favicon.png b/favicon.png new file mode 100644 index 0000000..da0f50f Binary files /dev/null and b/favicon.png differ diff --git a/index.html b/index.html index 36b8046..3b66ffb 100644 --- a/index.html +++ b/index.html @@ -3,12 +3,14 @@ - Mirage + Mirage - Privacy Focused Chat App - + + +
diff --git a/src/App.jsx b/src/App.jsx index 84bad57..535a644 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,10 +1,18 @@ import React from 'react'; import Body from './components/Body'; +import {useState} from 'react'; function App() { + const [toggleTheme, setToggleTheme] = useState(false); + + const handleToggle = () => { + setToggleTheme((prev) => !prev); + }; + return ( - + ); -} +}; + export default App; diff --git a/src/components/Body.css b/src/components/Body.css new file mode 100644 index 0000000..d0763d8 --- /dev/null +++ b/src/components/Body.css @@ -0,0 +1,418 @@ +@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap'); + +body { + border-right: 3px solid #ff477e; + min-height: 100vh; + width: 100%; + background-color: white; + font-family: "Sora", sans-serif; + font-optical-sizing: auto; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 0; + transition: background-color 0.3s, color 0.3s; +} + +::-webkit-scrollbar { + width: 5px; +} + +::-webkit-scrollbar-track { + background-color: white; +} + +::-webkit-scrollbar-thumb { + background-color: #ff477e; +} + +.container { + justify-content: space-between; + display: flex; + padding: 20px; + flex-wrap: wrap; +} + +.header { + margin-bottom: 45px; + justify-content: start; + font-size: 3.5rem; +} + +.contain1 { + padding-right: 206px; +} + +.description { + font-size: 1.1rem; + margin-bottom: 1rem; + max-width: 500px; +} + +.cta-button { + border-radius: 10px; + width: 50%; + display: block; + margin: 18px 0px; + padding: 13px 20px; + font-size: 1rem; + color: white; + background-color: #ff477e; + border: none; + cursor: pointer; + text-decoration: none; + transition: background-color 0.3s; +} + +.cta-button:hover { + border: 2px solid white; + background-color: #1b1f38; +} + + +.contributors { + margin-top: 3rem; +} + +.contributors-images { + margin: 15px 0; +} + +.dark-mode-toggle { + border-radius: 8px; + position: fixed; + top: 24px; + right: 29px; + padding: 10px; + background-color: #1b1f38; + color: white; + border: none; + cursor: pointer; +} + +.dark-mode-toggle:hover { + background-color: #393e5e; +} + +.stats { + margin-top: 3rem; +} + +.footer { + font-size: 0.9rem; + text-align: center; + color: white; + padding: 20px 0; + width: 100%; +} + +.footer a { + color: #007bff; + text-decoration: none; + margin: 0 5px; +} + +.footer a:hover { + text-decoration: underline; +} + +/* Modal Styles */ +.modal { + display: none; + position: fixed; + z-index: 1000; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0, 0, 0, 0.7); + justify-content: center; + align-items: center; +} + +.modal-content { + background-color: #fefefe; + margin: 15% auto; + padding: 20px; + border: 1px solid #888; + width: 80%; + max-width: 600px; +} + +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: black; + text-decoration: none; + cursor: pointer; +} + +.contributors-map { + position: relative; + height: 500px; + width: 100%; + margin-top: 50px; + background: url('https://via.placeholder.com/800x500') no-repeat center center; + background-size: cover; + border: 1px solid #ddd; +} + +.contributors-text { + font-size: 21px; + margin-bottom: 10px; + text-align: center; +} + +.contributors-images-map { + position: relative; + height: 100%; + width: 100%; +} + +.contributor-pin { + position: absolute; + width: 60px; + height: 60px; + transition: transform 0.3s ease; +} + +.contributor-pin img { + width: 100%; + height: 100%; + border-radius: 50%; + border: 2px solid #ff477e; +} + +.contributor-pin:hover { + transform: scale(1.2); +} + +.contributor-pin a { + display: inline-block; + text-decoration: none; + color: white; + font-size: 0.9rem; + text-align: center; + display: block; + margin-top: 5px; +} + +/* Stats Section */ +.stats { + margin-top: 3rem; + color: #fff; + background-color: #2a2d47; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + text-align: center; + font-size: 1.1rem; +} + +.stats p { + margin: 10px 0; +} + +.stats strong { + color: #ff477e; +} + +.contributors-images { + display: flex; + justify-content: center; + flex-wrap: wrap; + max-width: 100%; + margin: 10px 0; +} + +.contributors-images img { + max-width: 100%; + height: auto; + width: 292px; + margin: 5px; +} + +.contributors-images1 { + display: flex; + justify-content: center; + flex-wrap: wrap; + max-width: 100%; + margin: 10px 0; +} + + +.login-container{ + margin: 45px 0px; + display: flex; + justify-content: center; + text-align: center; +} +.form{ + display: flex; + flex-direction: column; +} + +.input-container > input { + border-radius: 6px; + width: 98%; + margin: 12px 0px; + padding: 17px 39px; +} + +.form h2{ + font-size: 32px; +} +.form h2 img{ + height: 55px; +} + + +.input-container { + position: relative; + margin-bottom: 15px; +} + +.input-container i { + position: absolute; + top: 50%; + left: 10px; + transform: translateY(-50%); + color: #555; + font-size: 18px; +} + +.btn { + border: none; + border-radius: 6px; + cursor: pointer; + margin: auto; + width: 100%; + color: white; + background-color: #ff477e; + font-size: 16px; + padding: 9px; + margin-top: 45px; +} + +.btn:hover { + border: 2px solid white; + background-color: #1b1f38; +} +.button { + width: 115%; + margin: auto; +} + +#showPassword{ + justify-content: start; + margin: 32px 0px; +} + +input:focus{ + border: 2px solid #1b1f38; +} + +input:hover{ + border: 2px solid #1b1f38; +} + +/* Media Queries for responsiveness */ +@media (max-width: 1200px) { + .header { + font-size: 3rem; + } + + .container { + flex-direction: column; + align-items: center; + } + + .cta-button { + width: 80%; + } +} + +@media (max-width: 768px) { + body{ + border: none; + } + .header { + font-size: 2.5rem; + text-align: center; + } + + .cta-button { + text-align: center; + width: 86%; + } + + .contributors-map { + height: 400px; + } + + .contributor-pin { + width: 50px; + height: 50px; + } + + .contain1 { + padding-right: 0px; + } +} + +@media (max-width: 480px) { + body { + min-height: auto; + width: 100%; + border: none; + } + + .header { + font-size: 2rem; + text-align: center; + } + + .description { + font-size: 1rem; + max-width: 100%; + } + + .contain1 { + padding-right: 0px; + } + + .cta-button { + text-align: center; + width: 97%; + padding: 10px; + font-size: 0.9rem; + } + + .stats p { + font-size: 14px; + margin: 12px 0; + } + + .contributors-map { + height: 300px; + } + + .contributors-text { + font-size: 15px; + margin-bottom: 45px; + text-align: center; + } + + .contributor-pin { + width: 40px; + height: 40px; + } +} \ No newline at end of file diff --git a/src/components/Body.jsx b/src/components/Body.jsx index 67d810f..937fdcb 100644 --- a/src/components/Body.jsx +++ b/src/components/Body.jsx @@ -1,74 +1,84 @@ import React, { useEffect, useState } from "react"; +import { io } from "socket.io-client"; +import { FaSun, FaMoon } from "react-icons/fa"; // Import sun and moon icons +import CountUp from "react-countup"; import Footer from "./Footer"; +import './Body.css'; import { TfiLock } from "react-icons/tfi"; -import { FiEyeOff } from "react-icons/fi"; -import { FiShield } from "react-icons/fi"; -import { io } from 'socket.io-client'; -import CountUp from 'react-countup'; +import { FiEyeOff, FiShield } from "react-icons/fi"; -const Body = () => { +const Body = ({ toggleTheme, handleToggle }) => { // Receive toggleTheme and handleToggle as props const [dailyUsersCount, setDailyUsersCount] = useState(0); const [todaysUserCount, setTodaysUsersCount] = useState(0); - + useEffect(() => { - const socket = io('https://mirage-o081.onrender.com/'); - - socket.on('connect', () => { - // console.log('Successfully connected to Mirage test net server!', socket.id); + const socket = io("https://mirage-o081.onrender.com/"); + socket.on("connect", () => { // Get metrics once connected to server - socket.emit('get_metrics'); + socket.emit("get_metrics"); - // Update daily users count and todays users count states - socket.on('metrics', (data) => { - // console.log(data); + // Update daily users count and today's users count states + socket.on("metrics", (data) => { setDailyUsersCount(data.total); setTodaysUsersCount(data.today); - }) - }) + }); + }); // Close socket connection return () => socket.disconnect(); }, []); + return ( -
-
-
-

+
+
+
+ +
+ Welcome to
Mirage -

-

- Your Conversations, Your Privacy. Secured. -

-
-

- At Mirage, privacy is not just a feature; it's our foundation. We - are dedicated to safeguarding your personal conversations with - end-to-end encryption, ensuring that only you and your chosen - recipients have access to your messages. -

+
+ Experience privacy at its core. Mirage is a privacy-based chat app + that makes sure your conversations stay secure and encrypted. +
+ + Get Started + openModal()}>See How Mirage Works
-
-
+
+
+
+ Thanks to the people who worked on this project :) +
+
+ + Mirage Contributors + +
+
+ + Mirage-web Contributors + +
+
+ +

Daily Users:

Today's Users:

-
-
-
+ {/*
@@ -110,49 +120,13 @@ const Body = () => { confidential—no third parties, no breaches.

-
+
*/} -
-
-
-
- heart -
-

Free & open source

-
-

- Mirage is MIT Licensed and will always be free and open source. - This is made possible by our contributors and these companies: -

-
-
-
- Thanks to the people who worked on this project :) -
- -
- - Mirage Contributors - - - Mirage-web Contributors -
- -
+
); diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index 2641819..c88da99 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -6,7 +6,7 @@ const Footer = () => { return (
-
+
x.com/dunkelkron diff --git a/tailwind.config.js b/tailwind.config.js index c397d1e..237328c 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,6 +6,11 @@ module.exports = { fontFamily: { manrope: ['Manrope', 'sans-serif'], inter: ['Inter', 'sans-serif'], + sora: ['Sora', 'sans-serif'], // Add Sora font + }, + colors: { + 'custom-blue': '#1b1f38', // Custom blue color + 'custom-gray': '#f8f9fa', // Add another color if needed }, }, },