MicroRay620 · MicroRay620 · May 22, 2025 · May 22, 2025 · May 22, 2025 · May 27, 2025
diff --git a/.gitignore b/.gitignore
@@ -25,3 +25,4 @@ dist-ssr
 
 
 src-tauri/Cargo.lock
+node_modules/
diff --git a/README.md b/README.md
@@ -5,3 +5,6 @@ This template should help get you started developing with Tauri, React and Types
 ## Recommended IDE Setup
 
 - [VS Code](https://code.visualstudio.com/) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer)
+
+Possible Names:
+CypherBlog
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Tauri + React + Typescript</title>
+    <title>CypherLynx</title>
   </head>
 
   <body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,12 +18,16 @@
     "tauri:build": "npm run build:gleam:all && tauri build"
   },
   "dependencies": {
+    "@headlessui/react": "^2.2.4",
     "@reduxjs/toolkit": "^2.8.2",
     "@tailwindcss/vite": "^4.1.7",
-    "@tauri-apps/api": "^2",
+    "@tauri-apps/api": "^2.5.0",
     "@tauri-apps/plugin-opener": "^2",
+    "postcss": "^8.5.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.5.0",
+    "react-router-dom": "^7.6.2",
     "tailwindcss": "^4.1.7"
   },
   "devDependencies": {
@@ -32,6 +36,6 @@
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.4",
     "typescript": "~5.6.2",
-    "vite": "^6.0.3"
+    "vite": "^6.3.5"
   }
 }
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,51 +1,34 @@
-import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import { invoke } from "@tauri-apps/api/core";
-import "./App.css";
+import "./styles/App.css";
+import Navbar from "./Navbar";
+import Footer from "./Footer";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Download from "./Download";
+import DocsHome from "./Doc-home";
+import Login from "./Login";
+import Home from "./Home";
+import PrivacyPolicy from "./PrivacyPolicy";
+import ToS from "./ToS";
 
 function App() {
-  const [greetMsg, setGreetMsg] = useState("");
-  const [name, setName] = useState("");
-
-  async function greet() {
-    // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
-    setGreetMsg(await invoke("greet", { name }));
-  }
-
-  return (
-    <main className="container">
-      <h1>Welcome to Tauri + React</h1>
-
-      <div className="row">
-        <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" className="logo vite" alt="Vite logo" />
-        </a>
-        <a href="https://tauri.app" target="_blank">
-          <img src="/tauri.svg" className="logo tauri" alt="Tauri logo" />
-        </a>
-        <a href="https://reactjs.org" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <p>Click on the Tauri, Vite, and React logos to learn more.</p>
-
-      <form
-        className="row"
-        onSubmit={(e) => {
-          e.preventDefault();
-          greet();
-        }}
-      >
-        <input
-          id="greet-input"
-          onChange={(e) => setName(e.currentTarget.value)}
-          placeholder="Enter a name..."
-        />
-        <button type="submit">Greet</button>
-      </form>
-      <p>{greetMsg}</p>
-    </main>
-  );
+    return (
+        <>
+            <BrowserRouter>
+                <div className="text-center dark:bg-gray-800 dark:text-white min-h-screen flex flex-col">
+                    <Navbar />
+                    <Routes>
+                        <Route path="/" element={<Home />} />
+                        <Route path="/download" element={<Download />} />
+                        <Route path="/docs" element={<DocsHome />} />
+                        <Route path="/login" element={<Login />} />
+                        <Route path="/privacy-policy" element={<PrivacyPolicy />} />
+                        <Route path="/tos" element={<ToS />} />
+                    </Routes>
+                    <br/>
+                    <Footer />
+                </div>
+            </BrowserRouter>
+        </>
+    );
 }
 
-export default App;
+export default App;
diff --git a/src/Chat.tsx b/src/Chat.tsx
@@ -0,0 +1,7 @@
+import "./styles/App.css";
+import "./styles/Chat.css";
+import { useState } from "react";
+
+function Chat() {
+}
+export default Chat;
diff --git a/src/Doc-home.tsx b/src/Doc-home.tsx
@@ -0,0 +1,9 @@
+export default function DocHome() {
+    return (
+        <>
+            <div id={"cl-main-docs-home"}>
+                <h1>THIS PAGE IS UNDER CONSTRUCTION</h1>
+            </div>
+        </>
+    )
+}
diff --git a/src/Download.tsx b/src/Download.tsx
@@ -0,0 +1,9 @@
+export default function Download() {
+    return (
+        <>
+            <div id={"cl-main-download-container"}>
+                <h1>THIS PAGE IS UNDER CONSTRUCTION</h1>
+            </div>
+        </>
+    )
+}
diff --git a/src/Footer.tsx b/src/Footer.tsx
@@ -0,0 +1,41 @@
+import { Link } from "react-router-dom";
+function Footer() {
+    return (
+        <footer id={"cl-footer"}>
+            <hr />
+            <small>
+                <div id={"cl-footer-container"}>
+                    <div id={"cl-disclaimer-container"}>
+                        <span id={"cl-disclaimer-text"}>
+                            CypherLynx is an open-source{/*sauce, this is an inside joke between Ruby and one of her friends*/} project under the 
+                            &nbsp;<a href="https://apache.org/licenses/LICENSE-2.0" id={"cl-apache-license-link"} className={"underline hover:text-blue-400"}>Apache v2 License</a>.
+                            The source code is available on <a href={"https://github.com/MicroRay620/OpenChat"} className={"underline hover:text-blue-400"}>GitHub</a>. All images
+                            are under the <a href="https://creativecommons.org/licenses/by-sa/4.0/" className="underline hover:text-blue-400">CC BY-SA 4.0</a> license.
+                            <br />
+                            Violations of our licenses will make your account subject to suspension and/or termination on 
+                            repeated violations.
+                        </span>
+                    </div>
+                    <div id={"cl-copyright-notice-container"}>
+                        <span id={"cl-copyright-notice-text"}>
+                            Some of the things included in this project are under Copyright. 
+                            We do not own and claim ownership of the copyrighted content in CypherLynx.
+                        </span>
+                    </div>
+                    <hr />
+                    <div id={"cl-link-directions-container"} className="justify-center flex gap-4">
+                        {/* Change the anchors to Link */}
+                        <span id={"cl-link-directions-privacy-policy-container"}>
+                            <Link to="/privacy-policy" id={"cl-privacy-policy-link"} className={"underline hover:text-blue-400"}>Privacy Policy</Link>
+                        </span>
+                        |
+                        <span id={"cl-link-directions-tos-container"}>
+                            <Link to="/tos.tsx" id={"cl-terms-of-service-link"} className={"underline hover:text-blue-400"}>Terms of Service</Link>
+                        </span>
+                    </div>
+                </div>
+            </small>
+        </footer>
+    );
+}
+export default Footer;
diff --git a/src/Home.tsx b/src/Home.tsx
@@ -0,0 +1,59 @@
+import { SectionBreak, ContainerBreak } from "./SectionBreaks";
+
+export default function Home() {
+    return (
+        <>
+            <div id={"cl-main-home-container"}>
+                <div id={"cl-main-home-text-container"}>
+                    <br/>
+                    <h1 id={"cl-main-home-title"} className={"text-4xl"} data-font={"option-five"}>CypherLynx</h1>
+                    <br/>
+                    <div id={"cl-main-home-major-description-container"}>
+                        <span id={"cl-home-major-description-inline-text"}>
+                            CypherLynx is an open-source alternative to 
+                            &nbsp;<a href="https://discord.com" id="cl-main-main-home-discord-link" className={"hover:text-blue-400"}>Discord</a>&trade; 
+                            that primarily focuses on making sure you as the user are in control of your client. 
+                        </span>
+                        <br />
+                        <SectionBreak />
+                        <br />
+                        <span>
+                            To provide a safe and user controlled client, the software focuses heavily on 
+                            <br /><strong className={"text-2xl"}><em>Privacy</em></strong> and <strong className={"text-2xl"}><em>Security</em></strong>.
+                        </span>
+                        <br />
+                        <SectionBreak />
+                        <br />
+                        <span>
+                            CypherLynx also aims to appeal to gamers and the communities of gamers. 
+                            We have a goal of having  integrated support for Steam, Epic Games, GOG, and many other game store 
+                            platforms.
+                        </span>
+                    </div>
+                </div>
+                <ContainerBreak />
+                <div id={"cl-main-oos-container"}>
+                    {/* oos means Overview of Site */}
+                    <section id={"cl-main-oos-section-heading"}>
+                        <h2 id={"cl-main-oos-section-title"} className={"text-3xl"}>What we do</h2>
+                    </section>
+                    <section id={"cl-main-oos-section-text"}>
+                        <article id={"cl-main-oos-container-text-article-general"}>
+                            <span id={"cl-main-oos-container-general-text"}>At CypherLynx we make sure that all data you have on the site and app is secured via (starting out as) peer-to-peer, will later change to end-to-end and peer-to-peer encryption to prevent unwanted visitors from stealing your data.</span>
+                            <br /><span id={"cl-main-oos-container-text-expanded"}>
+                                By having Direct Messages, or DMs, be Peer-to-Peer encrypted it will make it more client side with some server side help for the encryption and data storage. With "Communities" being End-to-End encrypted to all it to be posted and secured to everyone.
+                             </span>
+                        </article>
+                        <SectionBreak />
+                        <article id={"cl-main-oos-text-article-users-privacy"}>
+                            <span id={"cl-main-oos-text-user-privacy-goal-text"}>
+                                With the encryption it also enables us to protect and value your privacy as a user more than if 
+                                it was unencrypted and unsecure.<br />The decryption keys are stored in secure, private, and heavily guarded on the servers and one that's encrypted on your system.
+                            </span>
+                        </article>
+                    </section>
+                </div>
+            </div>
+        </>
+    );
+}
diff --git a/src/Login.tsx b/src/Login.tsx
@@ -0,0 +1,38 @@
+import "./styles/Login.css";
+import { useState } from "react";
+export default function Login() {
+    const [username, setUsername] = useState<string>("");
+    const [email, setEmail] = useState<string>("");
+    const [password, setPassword] = useState<string>("");
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        // Handle form submission here
+        console.log({ username, email, password });
+    };
+
+    return (
+        <>
+            <div id={"user-login-container"}>
+                <br/>
+                <h3 id={"login-heading"}>Register</h3>
+                <form id={"cl-user-login-form"} onSubmit={handleSubmit}>
+                    <div id={"cl-user-login-username-container"}>
+                        <label htmlFor={"username"} className={"cl-user-label"}>Username</label> &nbsp;
+                        <input type={"text"} id={"username"} className={"cl-user-input border border-white bg-transparent text-white px-3 py-2 rounded w-full mt-1"} value={username} onChange={(e) => setUsername(e.target.value)}/>
+                    </div>
+                    <div id={"cl-user-login-email-container"}>
+                        <label htmlFor={"email"} className={"cl-user-label"}>Email</label> &nbsp;
+                        <input type={"email"} id={"email"} className={"cl-user-input border border-white bg-transparent text-white px-3 py-2 rounded w-full mt-1"} value={email} onChange={(e) => setEmail(e.target.value)}/>
+                    </div>
+                    <div id={"cl-user-login-password-container"}>
+                        <label htmlFor={"password"} className={"cl-user-label"}>Password</label> &nbsp;
+                        <input type={"password"} id={"password"} className={"cl-user-input border border-white bg-transparent text-white px-3 py-2 rounded w-full mt-1"} value={password} onChange={(e) => setPassword(e.target.value)}/>
+                    </div>
+                    <button type={"submit"} id={"login-button"} className={"cl-user-button hover:text-blue-600"}>Register</button>
+                </form>
+                <span id={"login-option"}>Already have an account? <a href={"#"}>Login</a></span>
+            </div>
+        </> 
+    );
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -25,3 +25,4 @@ dist-ssr


		src-tauri/Cargo.lock
		node_modules/