eeeeeeeee

Author: Stanford47

README.md

@@ -1,2 +1,3 @@
 # SimpleModBot Dashboard
-I will update this later.
+
+## Someone should add something here!!! -@Stanford47

src/App.tsx

@@ -8,6 +8,7 @@ import { FourOhFour, About } from './pages/other';
 
 import { Home } from './pages/Home';
 import { Menu } from './pages/Menu';
+import { Docs } from './pages/Docs';
 
 import { User, CacheUser, CacheGuild, CacheAdditional } from './pages/user';
 
@@ -28,6 +29,7 @@ function App() {
 				<Route path='/*' element={<FourOhFour />} />
 				<Route path='/menu' element={<Menu />} />
 				<Route path='/about' element={<About />} />
+				<Route path="/docs" element={<Docs />} />
 
 				<Route path='/user' element={<User />} />
 				<Route path='/user/cache/user' element={<CacheUser />} />
@@ -45,7 +47,9 @@ function App() {
 				<Route path='/guild/updatecc' element={<EditCC />} />
 				<Route path='/guild/delcc' element={<DeleteCC />} />
 				<Route path='/guild/listcc' element={<ListCC />} />
+				
 			</Routes>
+			
 		</React.StrictMode>
 	);
 }

src/components/Appbar.tsx

@@ -52,15 +52,15 @@ export const Appbar = () => {
 				src={`https://cdn.discordapp.com/icons/${cguild.id}/${cguild.icon}.webp?size=128`}
 				alt='guild-icon'
 			></img>
-			<Link to='/menu' id='1' style={{ fontSize: '20px', padding: '1px 0px' }}>
+			<Link to='/menu' id='1' style={{ fontSize: '17px', paddingLeft: '15px', textAlign: 'right'}}>
 				Configuring {cguild.name}
 			</Link>
 
-			<Link to='/' id='home' style={{ position: 'relative', left: `0px`, padding: '1px 0px' }}>
+			<Link to='/' id='home' style={{ position: 'relative', justifySelf: 'center', padding: '1px 0px',}}>
 				Home
 			</Link>
 
-			<Link to='/user/' style={{ fontSize: '20px', marginLeft: 'auto', padding: '1px 0px' }}>
+			<Link to='/user/' style={{ fontSize: '17px', marginLeft: 'auto', paddingRight: '15px', textAlign: 'left' }}>
 				{cuser.username}
 			</Link>
 			<img
@@ -72,7 +72,8 @@ export const Appbar = () => {
 					justifySelf: 'right',
 				}}
 				src={`https://cdn.discordapp.com/avatars/${cuser.id}/${cuser.avatar}.png?size=128`}
-				alt='user-icon'
+				alt='????'
+				
 			></img>
 		</div>
 	);

src/components/UserBar.tsx

@@ -41,7 +41,7 @@ export const Userbar = () => {
 				Home
 			</Link>
 
-			<Link to='/user/' style={{ fontSize: '20px', marginLeft: 'auto', padding: '1px 0px' }}>
+			<Link to='/user/' style={{ fontSize: '17px', marginLeft: 'auto', paddingRight: '15px', textAlign: 'left' }}>
 				{cuser.username}
 			</Link>
 			<img

src/index.css

@@ -3,7 +3,7 @@
 body {
   margin: 0;
   color: whitesmoke;
-  background-color: #2a3344;
+  background-color: #1a202b;
   opacity: 0.9;
   height: 100%;
   font-family: "PT Sans", sans-serif;
@@ -21,10 +21,23 @@ a {
 }
 
 a:visited {
-  color: #5757e7
+  color: whitesmoke;
 }
 
 a:hover {
   transition-duration: 250ms;
   text-decoration: underline;
+}
+
+/* Highlight text */
+@keyframes id-target-highlight {
+  0% { background-color: rgba(255,255,255,0.8); }
+  100% { background-color: rgba(255,255,255,0); }
+}
+
+:target {
+  animation-name: id-target-highlight;
+  animation-iteration-count: 1;
+  animation-duration: 1000ms;
+  scroll-behavior: smooth;
 }

src/pages/Docs.tsx

@@ -0,0 +1,37 @@
+import { Appbar } from "../components/Appbar";
+import { InputField } from "../utils/styles";
+
+export function Docs() {
+    return (
+        <div>
+            <div className="searchContainer">
+
+            </div>
+            <h1 style={{ textAlign: "center" }}>Documentation</h1>
+            <div style={{
+                maxWidth: "1000px",
+                marginLeft: "25%"
+            }}>
+                <p style={{ textAlign: "center" }}>
+                    Do you want to learn about a command the SMB has?
+                    Maybe you want to know how a command works.
+                    Use this page to find out information about SimpleModBot's commands. Here, you can find
+                    <a href="#abc"  style={{
+                        color: "#7265ff",
+                    }}> a list of all of the commands in alphabetical order
+                    </a>, 
+                </p>
+            </div>
+                <h2 id="abc" style={{
+                textAlign: "center",
+                width: "fit-content",
+                margin: "auto",
+            }}>Commands</h2>
+            <div style={{
+                display: "flex",
+            }}>
+
+            </div>
+        </div>
+    );
+}

src/pages/Home.tsx

@@ -81,7 +81,7 @@ export function Home() {
 				</HomeButton>
 				<HomeButton
 					onClick={() => {
-						window.location.href = 'https://discord.gg/49KeKwXc8g';
+						window.open('https://discord.gg/49KeKwXc8g', '_blank');
 					}}
 				>
 					<FaQuestionCircle size={45} />

src/pages/other.tsx

@@ -35,6 +35,7 @@ function getRandom404Message() {
 		'The requested page does not exist or is not implemented.',
 		'Makefile > CMake',
 		'Why does DEATH\'s keyboard scream at me??', // seriously wtf
+		"Stanford47 still thinks that C++ is better than TS or JS. (can you stop removing this one pls :p)"
 	];
 
 	return messages[~~(Math.random() * messages.length)];

src/pages/user.tsx

@@ -233,9 +233,16 @@ export function CacheAdditional() {
 						>
 							Log out
 						</TextButton>
+						<TextButton>
+							Disable Particles
+						</TextButton>
 					</Grid>
 				</CategoryContainer>
 			</Container>
+
+			<div>
+				<a href='/'>Home</a>
+			</div>
 		</div>
 	);
 }