@@ -27,6 +36,13 @@
- Firebase
- Hosting (cPanel, Github pages, Netlify, Firebase, Vercel, Heroku, etc.)
+## Credits
+
+- [macOS Big Sur](https://www.apple.com/in/macos/big-sur/)
+- [macOS Catalina](https://www.apple.com/bw/macos/catalina/)
+- [macOS Icon Gallery](https://www.macosicongallery.com/)
+- [sindresorhus/file-icon-cli](https://github.com/sindresorhus/file-icon-cli)
+
### Members
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..88c026b
--- /dev/null
+++ b/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+ toggleLaunchpad(false)}
+ >
+
+ );
+}
diff --git a/src/components/Spotlight.tsx b/src/components/Spotlight.tsx
new file mode 100644
index 0000000..999cb54
--- /dev/null
+++ b/src/components/Spotlight.tsx
@@ -0,0 +1,336 @@
+import React, { useRef, useState, useEffect } from "react";
+import type { RefObject } from "react";
+import format from "date-fns/format";
+import { BiSearch } from "react-icons/bi";
+import { apps, launchpadApps } from "../configs";
+import type { LaunchpadData, AppsData } from "../types";
+import { useClickOutside } from "../hooks";
+
+const allApps: { [key: string]: (LaunchpadData | AppsData)[] } = {
+ app: apps,
+ portfolio: launchpadApps
+};
+
+const getRandom = (min: number, max: number): number => {
+ min = Math.ceil(min);
+ max = Math.floor(max);
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+};
+
+const getRandomDate = (): string => {
+ const timeStamp = new Date().getTime();
+ const randomStamp = getRandom(0, timeStamp);
+ const date = format(randomStamp, "MM/dd/yyyy");
+ return date;
+};
+
+interface SpotlightProps {
+ toggleSpotlight: () => void;
+ openApp: (id: string) => void;
+ toggleLaunchpad: (target: boolean) => void;
+ btnRef: RefObject
+
+ e.stopPropagation()}
+ >
+
+
+
+
+ setSearchText(e.target.value)}
+ />
+
+ {search().map((app) => (
+
+
+
+ ))}
+
+ e.stopPropagation()}
+ >
+
+
+
+
+ {app.title}
+
+
+
+
+
+ {app.title}
+
+
+ {app.appList.length !== 0 && (
+
+ );
+
+ setAppIdList(newAppIdList);
+ setAppList(newAppList);
+ };
+
+ const setCurrentDetailsWithType = (app: any, type: string): void => {
+ const details = app;
+ details.type = type;
+ setCurDetails(details);
+ };
+
+ const updateCurrentDetails = (): void => {
+ if (appIdList.length === 0) return;
+ const appId = appIdList[selectedIndex];
+ const elem = document.querySelector(`#spotlight-${appId}`) as HTMLElement;
+ const id = appId;
+ const type = elem.dataset.appType as string;
+ const app = allApps[type].find((item: LaunchpadData | AppsData) => {
+ return item.id === id;
+ });
+ setCurrentDetailsWithType(app, type);
+ };
+
+ const updateHighlight = (prevIndex: number, curIndex: number): void => {
+ if (appIdList.length === 0) return;
+
+ // remove highlight
+ const prevAppId = appIdList[prevIndex];
+ const prev = document.querySelector(
+ `#spotlight-${prevAppId}`
+ ) as HTMLElement;
+ let classes = prev.className;
+ classes = classes.replace("text-white", "text-black");
+ classes = classes.replace("bg-blue-500", "bg-transparent");
+ prev.className = classes;
+
+ // add highlight
+ const curAppId = appIdList[curIndex];
+ const cur = document.querySelector(`#spotlight-${curAppId}`) as HTMLElement;
+ classes = cur.className;
+ classes = classes.replace("text-black", "text-white");
+ classes = classes.replace("bg-transparent", "bg-blue-500");
+ cur.className = classes;
+ };
+
+ const handleKeyPress = (e: React.KeyboardEvent
+
+ )}
+ {portfolio.appList.length !== 0 && (
+
+ Applications
+
+ {app.appList}
+
+
+ )}
+
+ Portfolio
+
+ {portfolio.appList}
+
+
+ );
+}
diff --git a/src/components/Window.tsx b/src/components/Window.tsx
new file mode 100644
index 0000000..eaf288d
--- /dev/null
+++ b/src/components/Window.tsx
@@ -0,0 +1,212 @@
+import React, { useState, useEffect } from "react";
+import { useSelector } from "react-redux";
+import { Rnd } from "react-rnd";
+import { IoCloseOutline } from "react-icons/io5";
+import { FiMinus } from "react-icons/fi";
+import { useWindowSize } from "../hooks";
+import type { RootReduxState } from "../types";
+
+const FullIcon = ({ size }: { size: number }) => {
+ return (
+
+ );
+};
+
+const ExitFullIcon = ({ size }: { size: number }) => {
+ return (
+
+ );
+};
+
+const minMarginY = 24;
+const minMarginX = 100;
+
+interface TrafficProps {
+ id: string;
+ max: boolean;
+ setMax: (id: string, target?: boolean) => void;
+ setMin: (id: string) => void;
+ close: (id: string) => void;
+}
+
+interface WindowProps extends TrafficProps {
+ min: boolean;
+ width?: number;
+ height?: number;
+ minWidth?: number;
+ minHeight?: number;
+ title: string;
+ z: number;
+ focus: (id: string) => void;
+ children: React.ReactNode;
+}
+
+interface WindowState {
+ width: number;
+ height: number;
+ x: number;
+ y: number;
+}
+
+const TrafficLights = ({ id, close, max, setMax, setMin }: TrafficProps) => {
+ const closeWindow = (e: React.MouseEvent | React.TouchEvent): void => {
+ e.stopPropagation();
+ close(id);
+ };
+
+ return (
+
+
+ {searchText !== "" && (
+
+
+
+
+
+ )}
+
+ {appList}
+
+
+ {curDetails && (
+
+
+
+ )}
+
+
+
+
+ {curDetails.title}
+
+
+ {`Version: ${getRandom(0, 99)}.${getRandom(0, 999)}`}
+
+
+
+
+
+ Kind
+ Size
+ Created
+ Modified
+ Last opened
+
+
+
+ {curDetails.type === "app" ? "Application" : "Portfolio"}
+
+ {`${getRandom(0, 999)} G`}
+ {getRandomDate()}
+ {getRandomDate()}
+ {getRandomDate()}
+
+
+
+
+
+ );
+};
+
+const Window = (props: WindowProps) => {
+ const dockSize = useSelector((state: RootReduxState) => state.dockSize);
+ const { winWidth, winHeight } = useWindowSize();
+
+ const initWidth = Math.min(winWidth, props.width ? props.width : 640);
+ const initHeight = Math.min(winHeight, props.height ? props.height : 400);
+
+ const [state, setState] = useState props.setMax(props.id)}
+ >
+
+ {children}
+ {children}
+ );
+ }
+ };
+};
+
+const Sidebar = ({ cur, setMidBar }: SidebarProps) => {
+ return (
+
+
+ );
+};
+
+const Middlebar = ({ items, cur, setContent }: MiddlebarProps) => {
+ return (
+
+
+
+ {bear.map((item, index) => (
+
+
+
+ );
+};
+
+const getRepoURL = (url: string) => {
+ return url.slice(0, -10) + "/";
+};
+
+const fixImageURL = (text: string, contentURL: string): string => {
+ text = text.replace(/ /g, "");
+ if (contentURL.indexOf("raw.githubusercontent.com") !== -1) {
+ const repoURL = getRepoURL(contentURL);
+
+ const imgReg = /!\[(.*?)\]\((.*?)\)/;
+ const imgRegGlobal = /!\[(.*?)\]\((.*?)\)/g;
+
+ const imgList = text.match(imgRegGlobal);
+
+ if (imgList) {
+ for (const img of imgList) {
+ const imgURL = (img.match(imgReg) as Array
+ {items.map((item: BearMdData, index: number) => (
+
+
+
+
+ {item.icon}
+
+
+ {item.title}
+ {item.link && (
+
+
+ {item.excerpt}
+
+
+
+ );
+};
+
+const Bear = () => {
+ const [state, setState] = useState
+
+
+
+ );
+};
+
+export default Bear;
diff --git a/src/components/apps/FaceTime.tsx b/src/components/apps/FaceTime.tsx
new file mode 100644
index 0000000..ea363bd
--- /dev/null
+++ b/src/components/apps/FaceTime.tsx
@@ -0,0 +1,60 @@
+import { useRef, useState } from "react";
+import Webcam from "react-webcam";
+
+const videoConstraints = {
+ facingMode: "user"
+};
+
+const FaceTime = () => {
+ const [click, setClick] = useState(false);
+ const [img, setImg] = useState("");
+ const webcamRef = useRef
+
+
+
+
+
+
+ {img && (
+
+ );
+ else
+ return (
+
+ )}
+
+
+
+ );
+};
+
+export default FaceTime;
diff --git a/src/components/apps/Safari.tsx b/src/components/apps/Safari.tsx
new file mode 100644
index 0000000..fe302c6
--- /dev/null
+++ b/src/components/apps/Safari.tsx
@@ -0,0 +1,258 @@
+import React, { useState } from "react";
+import { useSelector } from "react-redux";
+import { websites, wallpapers } from "../../configs";
+import { FaShieldAlt } from "react-icons/fa";
+import { FiChevronLeft, FiChevronRight } from "react-icons/fi";
+import { BsLayoutSidebar } from "react-icons/bs";
+import { IoShareOutline, IoCopyOutline } from "react-icons/io5";
+import { checkURL } from "../../utils";
+import type { SiteSectionData, SiteData, RootReduxState } from "../../types";
+
+interface SafariState {
+ goURL: string;
+ currentURL: string;
+}
+
+interface SafariProps {
+ width?: number;
+}
+
+interface NavProps {
+ width: number;
+ setGoURL: (url: string) => void;
+}
+
+interface NavSectionProps extends NavProps {
+ section: SiteSectionData;
+}
+
+const NavSection = ({ width, section, setGoURL }: NavSectionProps) => {
+ const grid = width < 640 ? "grid-cols-4" : "grid-cols-9";
+
+ return (
+
+
+ );
+};
+
+const numTracker = Math.floor(Math.random() * 99 + 1);
+
+const NavPage = ({ width, setGoURL }: NavProps) => {
+ const dark = useSelector((state: RootReduxState) => state.dark);
+
+ const grid = width < 640 ? "grid-cols-4" : "grid-cols-8";
+ const span = width < 640 ? "col-span-3" : "col-span-7";
+
+ return (
+
+ {section.title}
+
+
+ {section.sites.map((site: SiteData) => (
+
+
+
+ ))}
+
+
+
+ {site.img ? (
+
+
+ {site.title}
+
+ setGoURL(site.link)
+ : () => window.open(site.link)
+ }
+ />
+ ) : (
+
setGoURL(site.link)
+ : () => window.open(site.link)
+ }
+ >
+ {site.title}
+
+ )}
+
+
+ );
+};
+
+const NoInternetPage = () => {
+ const dark = useSelector((state: RootReduxState) => state.dark);
+
+ return (
+
+ {/* Favorites */}
+
+
+
+
+ Privacy Report
+
+
+
+
+
+
+ In the last seven days, Safari has prevent {numTracker} tracker
+ from profiling you.
+
+
+
+ );
+};
+
+const Safari = ({ width }: SafariProps) => {
+ const wifi = useSelector((state: RootReduxState) => state.wifi);
+ const [state, setState] = useState
+
+
+
+
+ You Are Not Connected to the Internet
+
+
+ This page can't be displayed because your computer is currently
+ offline.
+
+
+ {/* browser topbar */}
+
+ );
+};
+
+export default Safari;
diff --git a/src/components/apps/Terminal.tsx b/src/components/apps/Terminal.tsx
new file mode 100644
index 0000000..f2f0909
--- /dev/null
+++ b/src/components/apps/Terminal.tsx
@@ -0,0 +1,423 @@
+import React, { Component } from "react";
+import { terminal } from "../../configs";
+import type { TerminalData } from "../../types";
+
+const emojis = [
+ "\\(o_o)/",
+ "(˚Δ˚)b",
+ "(^-^*)",
+ "(╯‵□′)╯",
+ "\\(°ˊДˋ°)/",
+ "╰(‵□′)╯"
+];
+
+const getEmoji = () => {
+ return emojis[Math.floor(Math.random() * emojis.length)];
+};
+
+const characters =
+ "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789富强民主文明和谐自由平等公正法治爱国敬业诚信友善";
+
+interface HowDareProps {
+ setRMRF: (value: boolean) => void;
+}
+
+interface TerminalState {
+ rmrf: boolean;
+ content: JSX.Element[];
+}
+
+// rain animation is adopted from: https://codepen.io/P3R0/pen/MwgoKv
+class HowDare extends Component
+
+
+ {/* browser content */}
+ {wifi ? (
+ state.goURL === "" ? (
+
+
+
+
+
+
+
+ setState({ ...state, currentURL: e.target.value })}
+ onKeyPress={pressURL}
+ className="h-6 w-full p-2 rounded text-sm text-center font-normal text-gray-500 bg-gray-200 outline-none focus:outline-none border-2 border-transparent focus:border-blue-400"
+ placeholder="Search or enter website name"
+ />
+
+
+
+
+
+ this.props.setRMRF(false)}
+ >
+
+
+ );
+ }
+}
+
+export default class Terminal extends Component<{}, TerminalState> {
+ private history = [] as string[];
+ private curHistory = 0;
+ private curInputTimes = 0;
+ private curDirPath = [] as any;
+ private curChildren = terminal as any;
+ private commands: {
+ [key: string]: { (): void } | { (arg?: string): void };
+ };
+
+ constructor(props: {}) {
+ super(props);
+ this.state = {
+ content: [],
+ rmrf: false
+ };
+ this.commands = {
+ cd: this.cd,
+ ls: this.ls,
+ cat: this.cat,
+ clear: this.clear,
+ help: this.help
+ };
+ }
+
+ componentDidMount() {
+ this.reset();
+ this.generateInputRow(this.curInputTimes);
+ }
+
+ reset = (): void => {
+ const $terminal = document.querySelector(
+ "#terminal-content"
+ ) as HTMLElement;
+ $terminal.innerHTML = "";
+ };
+
+ getCurDirName = () => {
+ if (this.curDirPath.length === 0) return "~";
+ else return this.curDirPath[this.curDirPath.length - 1];
+ };
+
+ getCurChildren = () => {
+ let children = terminal as any;
+ for (const name of this.curDirPath) {
+ children = children.find((item: TerminalData) => {
+ return item.title === name && item.type === "folder";
+ }).children;
+ }
+ return children;
+ };
+
+ // move into a specified folder
+ cd = (args?: string): void => {
+ if (args === undefined || args === "~") {
+ // move to root
+ this.curDirPath = [];
+ this.curChildren = terminal;
+ } else if (args === ".") {
+ // stay in the current folder
+ return;
+ } else if (args === "..") {
+ // move to parent folder
+ if (this.curDirPath.length === 0) return;
+ this.curDirPath.pop();
+ this.curChildren = this.getCurChildren();
+ } else {
+ // move to certain child folder
+ const target = this.curChildren.find((item: TerminalData) => {
+ return item.title === args && item.type === "folder";
+ });
+ if (target === undefined) {
+ this.generateResultRow(
+ this.curInputTimes,
+ {`cd: no such file or directory: ${args}`}
+ );
+ } else {
+ this.curChildren = target.children;
+ this.curDirPath.push(target.title);
+ }
+ }
+ };
+
+ // display content of a specified folder
+ ls = (): void => {
+ const result = [];
+ for (const item of this.curChildren) {
+ result.push(
+
+ {item.title}
+
+ );
+ }
+ this.generateResultRow(
+ this.curInputTimes,
+
+
+ {this.emoji}
+ HOW DARE YOU!
+ Click to go back
+ {result}
+ );
+ };
+
+ // display content of a specified file
+ cat = (args?: string): void => {
+ const file = this.curChildren.find((item: TerminalData) => {
+ return item.title === args && item.type === "file";
+ });
+
+ if (file === undefined) {
+ this.generateResultRow(
+ this.curInputTimes,
+ {`cat: ${args}: No such file or directory`}
+ );
+ } else {
+ this.generateResultRow(this.curInputTimes, {file.content});
+ }
+ };
+
+ // clear terminal
+ clear = (): void => {
+ this.curInputTimes += 1;
+ this.reset();
+ };
+
+ help = (): void => {
+ const help = (
+
+
+ );
+ this.generateResultRow(this.curInputTimes, help);
+ };
+
+ autoComplete = (text: string): string => {
+ if (text === "") return text;
+
+ const input = text.split(" ");
+ const cmd = input[0];
+ const args = input[1];
+
+ let result = text;
+
+ if (args === undefined) {
+ const guess = Object.keys(this.commands).find((item) => {
+ return item.substring(0, cmd.length) === cmd;
+ });
+ if (guess !== undefined) result = guess;
+ } else if (cmd === "cd" || cmd === "cat") {
+ const type = cmd === "cd" ? "folder" : "file";
+ const guess = this.curChildren.find((item: TerminalData) => {
+ return (
+ item.type === type && item.title.substring(0, args.length) === args
+ );
+ });
+ if (guess !== undefined) result = cmd + " " + guess.title;
+ }
+ return result;
+ };
+
+ keyPress = (e: React.KeyboardEvent): void => {
+ const keyCode = e.key;
+ const $input = document.querySelector(
+ `#terminal-input-${this.curInputTimes}`
+ ) as HTMLInputElement;
+ const input_text = $input.value.trim();
+ const input = input_text.split(" ");
+
+ if (keyCode === "Enter") {
+ // ----------- run command -----------
+ this.history.push(input_text);
+
+ const cmd = input[0];
+ const args = input[1];
+
+ // we can't edit the past input
+ $input.setAttribute("readonly", "true");
+
+ if (input_text.substr(0, 6) === "rm -rf") this.setState({ rmrf: true });
+ else if (cmd && Object.keys(this.commands).includes(cmd)) {
+ this.commands[cmd](args);
+ } else {
+ this.generateResultRow(
+ this.curInputTimes,
+ {`zsh: command not found: ${cmd}`}
+ );
+ }
+
+ // point to the last history command
+ this.curHistory = this.history.length;
+
+ // generate new input row
+ this.curInputTimes += 1;
+ this.generateInputRow(this.curInputTimes);
+ } else if (keyCode === "ArrowUp") {
+ // ----------- previous history command -----------
+ if (this.history.length > 0) {
+ if (this.curHistory > 0) this.curHistory--;
+ const historyCommand = this.history[this.curHistory];
+ $input.value = historyCommand;
+ }
+ } else if (keyCode === "ArrowDown") {
+ // ----------- next history command -----------
+ if (this.history.length > 0) {
+ if (this.curHistory < this.history.length) this.curHistory++;
+ if (this.curHistory === this.history.length) $input.value = "";
+ else {
+ const historyCommand = this.history[this.curHistory];
+ $input.value = historyCommand;
+ }
+ }
+ } else if (keyCode === "Tab") {
+ // ----------- auto complete -----------
+ $input.value = this.autoComplete(input_text);
+ // prevent tab outside the terminal
+ e.preventDefault();
+ }
+ };
+
+ focusOnInput = (id: number): void => {
+ const input = document.querySelector(
+ `#terminal-input-${id}`
+ ) as HTMLInputElement;
+ input.focus();
+ };
+
+ generateInputRow = (id: number): void => {
+ const newRow = (
+
+
+ );
+ const content = this.state.content;
+ content.push(newRow);
+ this.setState({ content });
+ };
+
+ generateResultRow = (id: number, result: JSX.Element) => {
+ const newRow = (
+
+
+ zou@macbook-pro{" "}
+ {this.getCurDirName()}
+
+ {">"}
+
+
+
+ {result}
+
+ );
+ const content = this.state.content;
+ content.push(newRow);
+ this.setState({ content });
+ };
+
+ render() {
+ return (
+ this.focusOnInput(this.curInputTimes)}
+ >
+ {this.state.rmrf && (
+
+ );
+ }
+}
diff --git a/src/components/apps/VSCode.tsx b/src/components/apps/VSCode.tsx
new file mode 100644
index 0000000..2cb3e4b
--- /dev/null
+++ b/src/components/apps/VSCode.tsx
@@ -0,0 +1,10 @@
+export default function VSCode() {
+ return (
+
+ );
+}
diff --git a/src/components/dock/Dock.tsx b/src/components/dock/Dock.tsx
new file mode 100644
index 0000000..862629c
--- /dev/null
+++ b/src/components/dock/Dock.tsx
@@ -0,0 +1,71 @@
+import { useSelector } from "react-redux";
+import { useMotionValue } from "framer-motion";
+import { apps } from "../../configs";
+import DockItem from "./DockItem";
+import type { RootReduxState } from "../../types";
+
+interface DockProps {
+ open: (id: string) => void;
+ showApps: {
+ [key: string]: boolean;
+ };
+ showLaunchpad: boolean;
+ toggleLaunchpad: (target: boolean) => void;
+ hide: boolean;
+}
+
+export default function Dock({
+ open,
+ showApps,
+ showLaunchpad,
+ toggleLaunchpad,
+ hide
+}: DockProps) {
+ const { dockSize, dockMag } = useSelector((state: RootReduxState) => ({
+ dockSize: state.dockSize,
+ dockMag: state.dockMag
+ }));
+
+ const openApp = (id: string) => {
+ if (id === "launchpad") toggleLaunchpad(!showLaunchpad);
+ else {
+ toggleLaunchpad(false);
+ open(id);
+ }
+ };
+
+ const mouseX = useMotionValue
+ ヽ(ˋ▽ˊ)ノ: Hey, you found the
+ terminal! Type `help` to get started.
+
+
+ {this.state.content}
+
+
+
+ );
+}
diff --git a/src/components/dock/DockItem.tsx b/src/components/dock/DockItem.tsx
new file mode 100644
index 0000000..471769a
--- /dev/null
+++ b/src/components/dock/DockItem.tsx
@@ -0,0 +1,141 @@
+import { useRef } from "react";
+import type { RefObject } from "react";
+import useRaf from "@rooks/use-raf";
+import {
+ motion,
+ MotionValue,
+ useMotionValue,
+ useSpring,
+ useTransform
+} from "framer-motion";
+import { useWindowSize } from "../../hooks";
+
+// Hover effect is adopted from https://github.com/PuruVJ/macos-web/blob/main/src/components/dock/DockItem.tsx
+
+const useDockHoverAnimation = (
+ mouseX: MotionValue,
+ ref: RefObject mouseX.set(e.nativeEvent.x)}
+ onMouseLeave={() => mouseX.set(null)}
+ style={{
+ height: `${(dockSize as number) + 15}px`
+ }}
+ >
+ {apps.map((app) => (
+
+
+
+ );
+}
diff --git a/src/components/menus/Battery.tsx b/src/components/menus/Battery.tsx
new file mode 100644
index 0000000..5090f0f
--- /dev/null
+++ b/src/components/menus/Battery.tsx
@@ -0,0 +1,39 @@
+import { useBattery } from "../../hooks";
+import { BsBattery, BsFillLightningChargeFill } from "react-icons/bs";
+
+export default function Battery() {
+ const batteryState = useBattery();
+
+ const width = (): number => {
+ return 0.1 + batteryState.level * 0.96;
+ };
+
+ const color = (): string => {
+ if (batteryState.charging) return "bg-green-400";
+
+ if (batteryState.level < 0.2) return "bg-red-500";
+ else if (batteryState.level < 0.5) return "bg-yellow-500";
+ else return "bg-white";
+ };
+
+ return (
+
+
+ {(batteryState.level * 100).toFixed()}%
+
+
+ );
+}
diff --git a/src/components/menus/ControlCenterMenu.tsx b/src/components/menus/ControlCenterMenu.tsx
new file mode 100644
index 0000000..51742dc
--- /dev/null
+++ b/src/components/menus/ControlCenterMenu.tsx
@@ -0,0 +1,213 @@
+import { useRef } from "react";
+import type { RefObject } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import Slider from "react-rangeslider";
+import "react-rangeslider/lib/index.css";
+import {
+ toggleDark,
+ toggleWIFI,
+ toggleAirdrop,
+ toggleBleutooth,
+ toggleFullScreen
+} from "../../redux/action";
+import { music } from "../../configs";
+import { useClickOutside } from "../../hooks";
+import type { RootReduxState } from "../../types";
+
+// ------- import icons -------
+import { FiBluetooth, FiRss } from "react-icons/fi";
+import {
+ BsBrightnessAltHigh,
+ BsPlayFill,
+ BsPauseFill,
+ BsFullscreen,
+ BsFullscreenExit
+} from "react-icons/bs";
+import { IoSunny, IoMoon, IoVolumeHigh } from "react-icons/io5";
+import { MdWifi } from "react-icons/md";
+
+interface SliderProps {
+ icon: JSX.Element;
+ value: number;
+ setValue: (value: number) => void;
+}
+
+const SliderComponent = ({ icon, value, setValue }: SliderProps) => {
+ return (
+
+
+
+
+ );
+};
+
+interface CCMProps {
+ toggleControlCenter: () => void;
+ toggleAudio: (target: boolean) => void;
+ setBrightness: (value: number) => void;
+ setVolume: (value: number) => void;
+ playing: boolean;
+ btnRef: RefObject
+ {icon}
+
+
+
+ );
+}
diff --git a/src/components/menus/TopBar.tsx b/src/components/menus/TopBar.tsx
new file mode 100644
index 0000000..d797235
--- /dev/null
+++ b/src/components/menus/TopBar.tsx
@@ -0,0 +1,237 @@
+import React, { forwardRef, useState, useEffect, useRef } from "react";
+import type { RefObject, ReactNode } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import format from "date-fns/format";
+
+import type { MacActions, RootReduxState } from "../../types";
+import AppleMenu from "./AppleMenu";
+import WifiMenu from "./WifiMenu";
+import Battery from "./Battery";
+import ControlCenterMenu from "./ControlCenterMenu";
+import { isFullScreen } from "../../utils";
+import { setVolume, setBrightness, toggleFullScreen } from "../../redux/action";
+import { music } from "../../configs";
+import { useAudio, useWindowSize, useInterval } from "../../hooks";
+
+// ------- import icons -------
+import { BiSearch } from "react-icons/bi";
+import { MdWifi, MdWifiOff } from "react-icons/md";
+import { RiAppleFill } from "react-icons/ri";
+
+interface TopBarItemProps {
+ hideOnMobile?: boolean;
+ forceHover?: boolean;
+ onClick?: () => void;
+ children: ReactNode;
+}
+
+const TopBarItem = forwardRef((props: TopBarItemProps, ref: any) => {
+ const hide = props.hideOnMobile ? "hidden sm:inline-flex" : "inline-flex";
+ const hover = props.forceHover
+ ? "bg-white bg-opacity-30"
+ : "hover:bg-white hover:bg-opacity-30 rounded";
+ return (
+
+
+
+
+
+ Wi-Fi
+
+ {wifi ? "Home" : "Off"}
+
+
+
+
+
+ Bluetooth
+
+ {bluetooth ? "On" : "Off"}
+
+
+
+
+
+ AirDrop
+
+ {airdrop ? "Contacts Only" : "Off"}
+
+
+
+ {dark ? (
+
+
+
+ {dark ? "Dark Mode" : "Light Mode"}
+
+
+
+
+ dispatch(toggleFullScreen(!fullscreen))}
+ >
+ {fullscreen ? (
+
+
+ Display
+
+
+ Sound
+
+
+
+
+
+ {music.title}
+ {music.artist}
+
+ {playing ? (
+
+ {props.children}
+
+ );
+});
+TopBarItem.displayName = "TopBarItem";
+
+const CCMIcon = ({ size }: { size: number }) => {
+ return (
+
+ );
+};
+
+interface TopBarProps extends MacActions {
+ title: string;
+ setSpotlightBtnRef: (value: RefObject
+
+ );
+};
+
+export default TopBar;
diff --git a/src/components/menus/WifiMenu.tsx b/src/components/menus/WifiMenu.tsx
new file mode 100644
index 0000000..9fcf5c5
--- /dev/null
+++ b/src/components/menus/WifiMenu.tsx
@@ -0,0 +1,40 @@
+import { useRef } from "react";
+import type { RefObject } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import "react-rangeslider/lib/index.css";
+import { toggleWIFI } from "../../redux/action";
+import { useClickOutside } from "../../hooks";
+import type { RootReduxState } from "../../types";
+
+interface WifiMenuProps {
+ toggleWifiMenu: () => void;
+ btnRef: RefObject
+
+
+ {/* Open this when clicking on Apple logo */}
+ {state.showAppleMenu && (
+
+
+
+
+ );
+}
diff --git a/src/components/menus/base.tsx b/src/components/menus/base.tsx
new file mode 100644
index 0000000..00b5e95
--- /dev/null
+++ b/src/components/menus/base.tsx
@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+
+interface MenuItemProps {
+ onClick?: (e: React.MouseEventWi-Fi
+
+
+
+ {props.children}
;
+};
+
+export { MenuItem, MenuItemGroup };
diff --git a/src/configs/apps.tsx b/src/configs/apps.tsx
new file mode 100644
index 0000000..00ef482
--- /dev/null
+++ b/src/configs/apps.tsx
@@ -0,0 +1,78 @@
+import FaceTime from "../components/apps/FaceTime";
+import Terminal from "../components/apps/Terminal";
+import Safari from "../components/apps/Safari";
+import Bear from "../components/apps/Bear";
+import VSCode from "../components/apps/VSCode";
+
+import type { AppsData } from "../types";
+
+const apps: AppsData[] = [
+ {
+ id: "launchpad",
+ title: "Launchpad",
+ desktop: false,
+ img: "img/icons/launchpad.png"
+ },
+ {
+ id: "bear",
+ title: "Bear",
+ desktop: true,
+ show: true,
+ width: 860,
+ height: 500,
+ img: "img/icons/bear.png",
+ content:
+
+ )
+ },
+ {
+ id: "about-interests",
+ title: "interests.txt",
+ type: "file",
+ content:
+ "Machine Learning / Deep Learning / Continual Learning / Meta-Learning / Vision-Language Learning"
+ },
+ {
+ id: "about-who-cares",
+ title: "who-cares.txt",
+ type: "file",
+ content:
+ "I'm open to summer research opportunities for summer 2022 lol."
+ },
+ {
+ id: "about-contact",
+ title: "contact.txt",
+ type: "file",
+ content: (
+
+ Hi! This is The Tech Devs, now a Computer Science master's student
+ at Boston University and a machine learning engineer intern at
+ Kuaishou (Kwai). I'm also working as a research assistant at
+ Peking University.
+
+
+ Before that, I got my bachelor's degree in Software Engineering at
+ Tongji University.
+
+
+
+ )
+ }
+ ]
+ },
+ {
+ id: "about-dream",
+ title: "my-dream.cpp",
+ type: "file",
+ content: (
+
+
+ )
+ }
+];
+
+export default terminal;
diff --git a/src/configs/user.ts b/src/configs/user.ts
new file mode 100644
index 0000000..dce84ae
--- /dev/null
+++ b/src/configs/user.ts
@@ -0,0 +1,9 @@
+import type { UserData } from "../types";
+
+const user: UserData = {
+ name: "The Tech Devs",
+ avatar: "img/ui/avatar.png",
+ password: ""
+};
+
+export default user;
diff --git a/src/configs/wallpapers.ts b/src/configs/wallpapers.ts
new file mode 100644
index 0000000..5c557f8
--- /dev/null
+++ b/src/configs/wallpapers.ts
@@ -0,0 +1,8 @@
+import type { WallpaperData } from "../types";
+
+const wallpapers: WallpaperData = {
+ day: "img/ui/wallpaper-day.jpg",
+ night: "img/ui/wallpaper-night.jpg"
+};
+
+export default wallpapers;
diff --git a/src/configs/websites.ts b/src/configs/websites.ts
new file mode 100644
index 0000000..09dac81
--- /dev/null
+++ b/src/configs/websites.ts
@@ -0,0 +1,162 @@
+import type { WebsitesData } from "../types";
+
+const websites: WebsitesData = {
+ favorites: {
+ title: "SNS Links",
+ sites: [
+ {
+ id: "my-blog",
+ title: "Blog",
+ img: "https://zxh.io/img/avatar.png",
+ link: "https://zxh.io/",
+ inner: true
+ },
+ {
+ id: "my-github",
+ title: "Github",
+ img: "img/sites/github.svg",
+ link: "https://github.com/Renovamen"
+ },
+ {
+ id: "my-linkedin",
+ title: "Linkedin",
+ img: "img/sites/linkedin.svg",
+ link: "https://www.linkedin.com/in/thetechdevs"
+ },
+ {
+ id: "my-zhihu",
+ title: "知乎",
+ img: "img/sites/zhihu.jpeg",
+ link: "https://www.zhihu.com/people/chao-neng-gui-su"
+ },
+ {
+ id: "my-facebook",
+ title: "Facebook",
+ img: "img/sites/facebook.svg",
+ link: "https://www.facebook.com/renovamen.zou"
+ },
+ {
+ id: "my-email",
+ title: "Email",
+ img: "img/sites/gmail.svg",
+ link: "mailto:renovamenzxh@gmail.com"
+ }
+ ]
+ },
+ freq: {
+ title: "Frequently Visited",
+ sites: [
+ {
+ id: "github",
+ title: "Github",
+ img: "img/sites/github.svg",
+ link: "https://github.com/"
+ },
+ {
+ id: "zhihu",
+ title: "知乎",
+ img: "img/sites/zhihu.jpeg",
+ link: "https://www.zhihu.com/"
+ },
+ {
+ id: "bilibili",
+ title: "Bilibili",
+ img: "img/sites/bilibili.svg",
+ link: "https://www.bilibili.com/"
+ },
+ {
+ id: "pinterest",
+ title: "Pinterest",
+ img: "img/sites/pinterest.svg",
+ link: "https://www.pinterest.com/"
+ },
+ {
+ id: "dribbble",
+ title: "Dribbble",
+ img: "img/sites/dribbble.svg",
+ link: "https://dribbble.com/"
+ },
+ {
+ id: "arxiv",
+ title: "arXiv",
+ img: "img/sites/arxiv.png",
+ link: "https://arxiv.org/"
+ },
+ {
+ id: "gmail",
+ title: "Gmail",
+ img: "img/sites/gmail.svg",
+ link: "https://mail.google.com/"
+ },
+ {
+ id: "leetcode",
+ title: "LeetCode",
+ img: "img/sites/leetcode.svg",
+ link: "https://leetcode.com/"
+ },
+ {
+ id: "v2ex",
+ title: "V2EX",
+ img: "https://www.v2ex.com/apple-touch-icon.png",
+ link: "https://www.v2ex.com/"
+ },
+ {
+ id: "reddit",
+ title: "Reddit",
+ img: "img/sites/reddit.svg",
+ link: "https://www.reddit.com/"
+ },
+ {
+ id: "hacker-news",
+ title: "Hacker News",
+ img: "img/sites/hacker.svg",
+ link: "https://news.ycombinator.com/"
+ },
+ {
+ id: "astral",
+ title: "Astral",
+ img: "img/sites/astral.svg",
+ link: "https://app.astralapp.com/"
+ },
+ {
+ id: "gitee",
+ title: "Gitee",
+ // img: "https://gitee.com/static/images/logo-en.svg",
+ img: "img/sites/gitee.svg",
+ link: "https://gitee.com/"
+ },
+ {
+ id: "aideadline",
+ title: "AI Deadlines",
+ img: "https://aideadlin.es/static/img/favicon.ico",
+ link: "https://aideadlin.es/",
+ inner: true
+ },
+ {
+ id: "nazo",
+ title: "Nazo",
+ link: "https://nazo.one-story.cn"
+ },
+ {
+ id: "svgomg",
+ title: "SVGOMG",
+ img: "https://jakearchibald.github.io/svgomg/imgs/icon.png",
+ link: "https://jakearchibald.github.io/svgomg/"
+ },
+ {
+ id: "oh-vue-icons",
+ title: "Vue Icons!",
+ img: "img/sites/oh-vue-icons.svg",
+ link: "https://oh-vue-icons.netlify.app/"
+ },
+ {
+ id: "tiny-png",
+ title: "Tiny PNG",
+ img: "https://tinypng.com/images/panda-chewing-2x.png",
+ link: "https://tinypng.com/"
+ }
+ ]
+ }
+};
+
+export default websites;
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
new file mode 100644
index 0000000..579bd10
--- /dev/null
+++ b/src/hooks/index.ts
@@ -0,0 +1,5 @@
+export * from "./useClickOutside";
+export * from "./useInterval";
+export * from "./useWindowSize";
+export * from "./useAudio";
+export * from "./useBattery";
diff --git a/src/hooks/useAudio.ts b/src/hooks/useAudio.ts
new file mode 100644
index 0000000..2c19c3e
--- /dev/null
+++ b/src/hooks/useAudio.ts
@@ -0,0 +1,81 @@
+import { useEffect, useRef, useState } from "react";
+
+export interface HTMLAudioState {
+ volume: number;
+ playing: boolean;
+}
+
+export interface HTMLAudioProps {
+ src: string;
+ autoReplay?: boolean;
+}
+
+export function useAudio(props: HTMLAudioProps) {
+ const element = new Audio(props.src);
+ const ref = useRef
+ while(
+ sleeping) {"{"}
+
+
+ money
+ ++;
+
+
+ {"}"}
+
+
+
+ );
+}
diff --git a/src/pages/Desktop.tsx b/src/pages/Desktop.tsx
new file mode 100644
index 0000000..c2a6d2e
--- /dev/null
+++ b/src/pages/Desktop.tsx
@@ -0,0 +1,318 @@
+import { Component } from "react";
+import type { RefObject } from "react";
+import { connect } from "react-redux";
+import nightwind from "nightwind/helper";
+
+import type { MacActions } from "../types";
+import TopBar from "../components/menus/TopBar";
+import Dock from "../components/dock/Dock";
+import Launchpad from "../components/Launchpad";
+import Window from "../components/Window";
+import Spotlight from "../components/Spotlight";
+import { apps, wallpapers } from "../configs";
+
+type DesktopRedux = {
+ dark?: boolean;
+ brightness?: number;
+};
+
+type DesktopProps = DesktopRedux & MacActions;
+
+interface DesktopState {
+ showApps: {
+ [key: string]: boolean;
+ };
+ appsZ: {
+ [key: string]: number;
+ };
+ maxApps: {
+ [key: string]: boolean;
+ };
+ minApps: {
+ [key: string]: boolean;
+ };
+ maxZ: number;
+ showLaunchpad: boolean;
+ currentTitle: string;
+ hideDockAndTopbar: boolean;
+ spotlight: boolean;
+ spotlightBtnRef: any;
+}
+
+const minMarginY = 24;
+
+class Desktop extends Component
+
+
+ )}
+ {!restart && !loading && (
+
+ Click to {sleep ? "wake up" : "boot"}
+
+ )}
+
+ {/* Dark Model Toggler */}
+
+
+ {/* Top Menu Bar */}
+
+ );
+ }
+}
+
+const mapStateToProps = (state: DesktopRedux): DesktopRedux => {
+ return {
+ dark: state.dark,
+ brightness: state.brightness
+ };
+};
+
+export default connect(mapStateToProps, null)(Desktop);
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
new file mode 100644
index 0000000..7219020
--- /dev/null
+++ b/src/pages/Login.tsx
@@ -0,0 +1,109 @@
+import React, { useState } from "react";
+import { useSelector } from "react-redux";
+import { BsQuestionSquareFill } from "react-icons/bs";
+import { CgSleep } from "react-icons/cg";
+import { RiShutDownLine, RiRestartLine } from "react-icons/ri";
+
+import type { MacActions, RootReduxState } from "../types";
+import { wallpapers, user } from "../configs";
+
+export default function Login(props: MacActions) {
+ const [password, setPassword] = useState("");
+ const [sign, setSign] = useState("Click to enter");
+ const dark = useSelector((state: RootReduxState) => state.dark);
+
+ const keyPress = (e: React.KeyboardEvent) => {
+ const keyCode = e.key;
+ if (keyCode === "Enter") loginHandle();
+ };
+
+ const handleInputChange = (e: React.ChangeEvent
+ {this.renderAppWindows()}
+
+
+ {/* Spotlight */}
+ {this.state.spotlight && (
+ loginHandle()}
+ >
+
+ );
+}
diff --git a/src/redux/action.ts b/src/redux/action.ts
new file mode 100644
index 0000000..02e88a3
--- /dev/null
+++ b/src/redux/action.ts
@@ -0,0 +1,65 @@
+import nightwind from "nightwind/helper";
+import { enterFullScreen, exitFullScreen } from "../utils";
+
+export const type = {
+ TOGGLE_DARK: "TOGGLE_DARK",
+ SET_VOLUME: "SET_VOLUME",
+ SET_BRIGHTNESS: "SET_BRIGHTNESS",
+ TOGGLE_WIFI: "TOGGLE_WIFI",
+ TOGGLE_BLUETOOTH: "TOGGLE_BLUETOOTH",
+ TOGGLE_AIRDROP: "TOGGLE_AIRDROP",
+ TOGGLE_FULLSCREEN: "TOGGLE_FULLSCREEN",
+ SET_DOCK_SIZE: "SET_DOCK_SIZE",
+ SET_DOCK_MAG: "SET_DOCK_MAG"
+};
+
+export const toggleDark = (dark: boolean) => {
+ nightwind.toggle();
+ return {
+ type: type.TOGGLE_DARK,
+ dark
+ };
+};
+
+export const setVolume = (volume: number) => {
+ return {
+ type: type.SET_VOLUME,
+ volume
+ };
+};
+
+export const setBrightness = (brightness: number) => {
+ return {
+ type: type.SET_BRIGHTNESS,
+ brightness
+ };
+};
+
+export const toggleFullScreen = (fullscreen: boolean) => {
+ fullscreen ? enterFullScreen() : exitFullScreen();
+ return {
+ type: type.TOGGLE_FULLSCREEN,
+ fullscreen
+ };
+};
+
+export const toggleWIFI = (wifi: boolean) => {
+ return {
+ type: type.TOGGLE_WIFI,
+ wifi
+ };
+};
+
+export const toggleBleutooth = (bluetooth: boolean) => {
+ return {
+ type: type.TOGGLE_BLUETOOTH,
+ bluetooth
+ };
+};
+
+export const toggleAirdrop = (airdrop: boolean) => {
+ return {
+ type: type.TOGGLE_AIRDROP,
+ airdrop
+ };
+};
diff --git a/src/redux/reducer.ts b/src/redux/reducer.ts
new file mode 100644
index 0000000..332f10e
--- /dev/null
+++ b/src/redux/reducer.ts
@@ -0,0 +1,66 @@
+import { type } from "./action";
+import type { RootReduxState } from "../types";
+
+const initState: RootReduxState = {
+ dark: false,
+ volume: 100,
+ brightness: 80,
+ wifi: true,
+ bluetooth: true,
+ airdrop: true,
+ fullscreen: false,
+ dockSize: 50,
+ dockMag: 2
+};
+
+export const Reducer = (state = initState, action: any = {}) => {
+ switch (action.type) {
+ case type.TOGGLE_DARK:
+ return {
+ ...state,
+ dark: action.dark
+ };
+ case type.SET_VOLUME:
+ return {
+ ...state,
+ volume: action.volume
+ };
+ case type.SET_BRIGHTNESS:
+ return {
+ ...state,
+ brightness: action.brightness
+ };
+ case type.TOGGLE_FULLSCREEN:
+ return {
+ ...state,
+ fullscreen: action.fullscreen
+ };
+ case type.TOGGLE_WIFI:
+ return {
+ ...state,
+ wifi: action.wifi
+ };
+ case type.TOGGLE_BLUETOOTH:
+ return {
+ ...state,
+ bluetooth: action.bluetooth
+ };
+ case type.TOGGLE_AIRDROP:
+ return {
+ ...state,
+ airdrop: action.airdrop
+ };
+ case type.SET_DOCK_SIZE:
+ return {
+ ...state,
+ dockSize: action.dockSize
+ };
+ case type.SET_DOCK_MAG:
+ return {
+ ...state,
+ dockMag: action.dockMag
+ };
+ default:
+ return state;
+ }
+};
diff --git a/src/redux/store.ts b/src/redux/store.ts
new file mode 100644
index 0000000..b59324f
--- /dev/null
+++ b/src/redux/store.ts
@@ -0,0 +1,6 @@
+import { createStore } from "redux";
+import { Reducer } from "./reducer";
+
+const store = createStore(Reducer);
+
+export default store;
diff --git a/src/styles/bear.css b/src/styles/bear.css
new file mode 100644
index 0000000..bf412dc
--- /dev/null
+++ b/src/styles/bear.css
@@ -0,0 +1,151 @@
+.bear .markdown a {
+ @apply text-red-500;
+}
+
+.bear .markdown h1,
+.bear .markdown h2,
+.bear .markdown h3,
+.bear .markdown h4 {
+ @apply font-bold relative text-gray-800;
+}
+
+.bear .markdown h1,
+.bear .markdown h2,
+.bear .markdown h3,
+.bear .markdown h4 {
+ @apply mt-7;
+}
+
+.bear .markdown h1::before,
+.bear .markdown h2::before,
+.bear .markdown h3::before,
+.bear .markdown h4::before {
+ @apply absolute text-sm text-gray-400 -left-7 bottom-1;
+}
+
+.bear .markdown h1 {
+ @apply text-3xl;
+}
+
+.bear .markdown h1::before {
+ content: "H1";
+}
+
+.bear .markdown h2 {
+ @apply text-2xl;
+}
+
+.bear .markdown h2::before {
+ content: "H2";
+}
+
+.bear .markdown h3 {
+ @apply text-xl;
+}
+
+.bear .markdown h3::before {
+ content: "H3";
+}
+
+.bear .markdown h3 {
+ @apply text-xl;
+}
+
+.bear .markdown h4 {
+ @apply text-lg;
+}
+
+.bear .markdown h4::before {
+ content: "H4";
+}
+
+.bear .markdown p {
+ @apply mt-6;
+}
+
+.bear .markdown h2 + p,
+.bear .markdown h3 + p,
+.bear .markdown h4 + p {
+ @apply mt-4;
+}
+
+.bear .markdown ul,
+.bear .markdown ol {
+ @apply mt-2 pl-5;
+}
+
+.bear .markdown ul {
+ @apply list-disc;
+}
+
+.bear .markdown ul > li::marker {
+ @apply text-red-500;
+}
+
+.bear .markdown ol {
+ @apply list-decimal;
+}
+
+.bear .markdown li p {
+ @apply m-0 mb-2;
+}
+
+.bear .markdown code {
+ @apply text-sm border border-gray-300 rounded py-0.5 px-1 bg-gray-50;
+}
+
+.bear .markdown pre {
+ @apply mt-2 text-sm;
+}
+
+.bear .markdown pre code {
+ @apply text-sm;
+}
+
+.dark .bear .markdown pre code {
+ font-size: 14px !important;
+}
+
+.bear .markdown pre div {
+ @apply border border-gray-300 rounded;
+}
+
+.bear .markdown pre code,
+.dark .bear .markdown pre code {
+ @apply text-base bg-transparent border-none p-0;
+}
+
+.bear .markdown .token {
+ background: transparent !important;
+}
+
+.bear .markdown img {
+ @apply inline-block;
+}
+
+.bear .markdown table {
+ @apply mt-4 block w-full overflow-auto;
+}
+
+.bear .markdown table td,
+.bear .markdown table th {
+ @apply px-3 py-2 border border-gray-300;
+}
+
+.bear .markdown table tr {
+ @apply border-t border-gray-300 bg-transparent;
+}
+
+/**
+ * To avoid circular dependency error (I don't know how it coms ), here I
+ * don't use tailwindcss's @apply.
+ */
+html.dark .bear .markdown,
+html.dark .bear .midbar {
+ background-color: rgb(31 41 55);
+}
+
+html.dark .bear .midbar li.bg-white,
+html.dark .bear .midbar li:hover {
+ background-color: rgb(17 24 39);
+}
diff --git a/src/styles/component.css b/src/styles/component.css
new file mode 100644
index 0000000..5d20579
--- /dev/null
+++ b/src/styles/component.css
@@ -0,0 +1,144 @@
+/* --------- input --------- */
+
+.login input::placeholder {
+ color: white;
+}
+
+.spotlight input::placeholder {
+ @apply text-black opacity-40;
+}
+
+/* --------- spotlight --------- */
+
+.spotlight {
+ width: 660px;
+ margin-left: -330px;
+ left: 50%;
+}
+
+@media (max-width: 639px) {
+ .spotlight {
+ width: 100%;
+ margin-left: 0;
+ left: 0;
+ }
+}
+
+/* --------- app window --------- */
+
+.window-bound {
+ width: 300%;
+ height: 200%;
+ left: -100%;
+}
+
+.innner-window {
+ height: calc(100% - 1.5rem);
+}
+
+.safari-content {
+ height: calc(100% - 2rem);
+}
+
+.traffic_lights svg {
+ @apply hidden;
+}
+
+.traffic_lights:hover svg {
+ @apply block;
+}
+
+/* --------- dock --------- */
+
+.dock ul {
+ box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.17);
+}
+
+.dock li .tooltip {
+ @apply hidden;
+ top: calc(-100% - 5px);
+}
+
+.dock li:hover .tooltip {
+ @apply block;
+ box-shadow: hsla(0deg, 0%, 0%, 20%) 0px 1px 5px 2px, 0 0 0 0 white;
+}
+
+/* --------- control center --------- */
+
+.control-grid {
+ @apply bg-gray-200 bg-opacity-80 rounded-xl backdrop-blur-2xl;
+ box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
+}
+
+/* --------- slider --------- */
+
+.slider .rangeslider {
+ @apply bg-gray-300 w-full h-7 shadow-none m-0 rounded-r-full border-t border-r border-b border-transparent;
+}
+
+.slider .rangeslider .rangeslider__fill {
+ @apply bg-gray-100 shadow-none rounded-none;
+}
+
+.slider .rangeslider .rangeslider__handle {
+ @apply border border-gray-300 outline-none h-7 w-7;
+ background-color: #fff;
+ color: #fff;
+ box-shadow: -3px 0px 8px 0px rgba(17, 17, 17, 0.15);
+}
+
+.slider .rangeslider .rangeslider__handle::after {
+ @apply hidden;
+}
+
+
+/*
+ Credits: W3 Schools: https://www.w3schools.com/howto/howto_css_switch.asp
+*/
+
+/* The switch - the box around the slider */
+.switch-toggle {
+ width: 38px;
+ @apply relative inline-block h-full;
+}
+
+/* Hide default HTML checkbox */
+.switch-toggle input {
+ @apply w-0 h-0 opacity-0;
+}
+
+/* The slider */
+.slider-toggle {
+ @apply absolute rounded-full bg-gray-300 top-0 left-0 right-0 bottom-0 cursor-pointer duration-300;
+}
+
+.slider-toggle:before {
+ content: "";
+ background-color: white;
+ height: 18px;
+ width: 18px;
+ bottom: 2px;
+ left: 2px;
+ @apply absolute rounded-full duration-300;
+}
+
+input:checked + .slider-toggle {
+ background-color: #2196F3;
+}
+
+input:focus + .slider-toggle {
+ box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider-toggle:before {
+ @apply transform translate-x-4;
+}
+
+/* --------- battery --------- */
+
+.battery-level {
+ @apply absolute h-2 top-1/2 -mt-1 left-0;
+ margin-left: 0.1rem;
+ border-radius: 1px;
+}
diff --git a/src/styles/font.css b/src/styles/font.css
new file mode 100644
index 0000000..70b7e0d
--- /dev/null
+++ b/src/styles/font.css
@@ -0,0 +1,39 @@
+@font-face {
+ font-family: "Avenir Next LT Pro";
+ font-style: normal;
+ font-weight: normal;
+ src: local("Avenir Next LT Pro Regular"), url("./fonts/AvenirNextLTPro-Regular.woff") format("woff");
+}
+
+@font-face {
+ font-family: "Avenir Next LT Pro";
+ font-style: italic;
+ font-weight: normal;
+ src: local("Avenir Next LT Pro It"), url("./fonts/AvenirNextLTPro-Italic.woff") format("woff");
+}
+
+@font-face {
+ font-family: "Avenir Next LT Pro";
+ font-style: normal;
+ font-weight: bold;
+ src: local("Avenir Next LT Pro Demi"), url("./fonts/AvenirNextLTPro-Demi.woff") format("woff");
+}
+
+@font-face {
+ font-family: "Avenir Next LT Pro";
+ font-style: italic;
+ font-weight: bold;
+ src: local("Avenir Next LT Pro DemiIt"), url("./fonts/AvenirNextLTPro-DemiItalic.woff") format("woff");
+}
+
+.font-avenir {
+ font-family: "Avenir Next LT Pro", "Helvetica Neue", SFCompactRounded, -apple-system, Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", sans-serif;
+}
+
+.font-terminal {
+ font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+}
+
+body:not(pre) {
+ font-family: "Helvetica Neue", SFCompactRounded, -apple-system, Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", sans-serif;
+}
diff --git a/src/styles/fonts/AvenirNextLTPro-Demi.woff b/src/styles/fonts/AvenirNextLTPro-Demi.woff
new file mode 100644
index 0000000..9d070c1
Binary files /dev/null and b/src/styles/fonts/AvenirNextLTPro-Demi.woff differ
diff --git a/src/styles/fonts/AvenirNextLTPro-DemiItalic.woff b/src/styles/fonts/AvenirNextLTPro-DemiItalic.woff
new file mode 100644
index 0000000..28c93a8
Binary files /dev/null and b/src/styles/fonts/AvenirNextLTPro-DemiItalic.woff differ
diff --git a/src/styles/fonts/AvenirNextLTPro-Italic.woff b/src/styles/fonts/AvenirNextLTPro-Italic.woff
new file mode 100644
index 0000000..bebc47b
Binary files /dev/null and b/src/styles/fonts/AvenirNextLTPro-Italic.woff differ
diff --git a/src/styles/fonts/AvenirNextLTPro-Regular.woff b/src/styles/fonts/AvenirNextLTPro-Regular.woff
new file mode 100644
index 0000000..f9c687b
Binary files /dev/null and b/src/styles/fonts/AvenirNextLTPro-Regular.woff differ
diff --git a/src/styles/index.tailwind.css b/src/styles/index.tailwind.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/src/styles/index.tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/styles/index.ts b/src/styles/index.ts
new file mode 100644
index 0000000..d0bc5f5
--- /dev/null
+++ b/src/styles/index.ts
@@ -0,0 +1,4 @@
+import "./font.css";
+import "./layout.css";
+import "./component.css";
+import "./bear.css";
diff --git a/src/styles/layout.css b/src/styles/layout.css
new file mode 100644
index 0000000..aac7520
--- /dev/null
+++ b/src/styles/layout.css
@@ -0,0 +1,7 @@
+* {
+ @apply m-0 p-0;
+}
+
+html, body, #root {
+ @apply h-full overflow-hidden;
+}
diff --git a/src/types/configs/apps.d.ts b/src/types/configs/apps.d.ts
new file mode 100644
index 0000000..c68b205
--- /dev/null
+++ b/src/types/configs/apps.d.ts
@@ -0,0 +1,13 @@
+export interface AppsData {
+ id: string;
+ title: string;
+ desktop: boolean;
+ img: string;
+ show?: boolean;
+ width?: number;
+ height?: number;
+ minWidth?: number;
+ minHeight?: number;
+ content?: JSX.Element;
+ link?: string;
+}
diff --git a/src/types/configs/bear.d.ts b/src/types/configs/bear.d.ts
new file mode 100644
index 0000000..6f639d3
--- /dev/null
+++ b/src/types/configs/bear.d.ts
@@ -0,0 +1,15 @@
+export interface BearMdData {
+ id: string;
+ title: string;
+ file: string;
+ icon: JSX.Element;
+ excerpt: string;
+ link?: string;
+}
+
+export interface BearData {
+ id: string;
+ title: string;
+ icon: JSX.Element;
+ md: BearMdData[];
+}
diff --git a/src/types/configs/index.d.ts b/src/types/configs/index.d.ts
new file mode 100644
index 0000000..e73f9a7
--- /dev/null
+++ b/src/types/configs/index.d.ts
@@ -0,0 +1,8 @@
+export { AppsData } from "./apps";
+export { BearMdData, BearData } from "./bear";
+export { LaunchpadData } from "./launchpad";
+export { MusicData } from "./music";
+export { TerminalData } from "./terminal";
+export { UserData } from "./user";
+export { WallpaperData } from "./wallpaper";
+export { WebsitesData, SiteSectionData, SiteData } from "./websites";
diff --git a/src/types/configs/launchpad.d.ts b/src/types/configs/launchpad.d.ts
new file mode 100644
index 0000000..5572e0d
--- /dev/null
+++ b/src/types/configs/launchpad.d.ts
@@ -0,0 +1,6 @@
+export interface LaunchpadData {
+ id: string;
+ title: string;
+ img: string;
+ link: string;
+}
diff --git a/src/types/configs/music.d.ts b/src/types/configs/music.d.ts
new file mode 100644
index 0000000..f9c7a4c
--- /dev/null
+++ b/src/types/configs/music.d.ts
@@ -0,0 +1,6 @@
+export interface MusicData {
+ title: string;
+ artist: string;
+ cover: string;
+ audio: string;
+}
diff --git a/src/types/configs/terminal.d.ts b/src/types/configs/terminal.d.ts
new file mode 100644
index 0000000..a6a1498
--- /dev/null
+++ b/src/types/configs/terminal.d.ts
@@ -0,0 +1,7 @@
+export interface TerminalData {
+ id: string;
+ title: string;
+ type: string;
+ content?: JSX.Element | string;
+ children?: TerminalData[];
+}
diff --git a/src/types/configs/user.d.ts b/src/types/configs/user.d.ts
new file mode 100644
index 0000000..61f5080
--- /dev/null
+++ b/src/types/configs/user.d.ts
@@ -0,0 +1,5 @@
+export interface UserData {
+ name: string;
+ avatar: string;
+ password: string;
+}
diff --git a/src/types/configs/wallpaper.d.ts b/src/types/configs/wallpaper.d.ts
new file mode 100644
index 0000000..8993102
--- /dev/null
+++ b/src/types/configs/wallpaper.d.ts
@@ -0,0 +1,4 @@
+export interface WallpaperData {
+ day: string;
+ night: string;
+}
diff --git a/src/types/configs/websites.d.ts b/src/types/configs/websites.d.ts
new file mode 100644
index 0000000..8cc081a
--- /dev/null
+++ b/src/types/configs/websites.d.ts
@@ -0,0 +1,17 @@
+export interface SiteData {
+ id: string;
+ title: string;
+ img?: string;
+ link: string;
+ inner?: boolean;
+}
+
+export interface SiteSectionData {
+ title: string;
+ sites: SiteData[];
+}
+
+export interface WebsitesData {
+ favorites: SiteSectionData;
+ freq: SiteSectionData;
+}
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
new file mode 100644
index 0000000..f00c53f
--- /dev/null
+++ b/src/types/index.d.ts
@@ -0,0 +1,34 @@
+import React from "react";
+
+export interface MacActions {
+ setLogin: (value: boolean | ((prevVar: boolean) => boolean)) => void;
+ shutMac: (e: React.MouseEvent) => void;
+ restartMac: (e: React.MouseEvent) => void;
+ sleepMac: (e: React.MouseEvent) => void;
+}
+
+export interface RootReduxState {
+ dark: boolean;
+ volume: number;
+ brightness: number;
+ wifi: boolean;
+ bluetooth: boolean;
+ airdrop: boolean;
+ fullscreen: boolean;
+ dockSize: number;
+ dockMag: number;
+}
+
+export {
+ AppsData,
+ BearMdData,
+ BearData,
+ LaunchpadData,
+ MusicData,
+ TerminalData,
+ UserData,
+ WallpaperData,
+ WebsitesData,
+ SiteSectionData,
+ SiteData
+} from "./configs";
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 0000000..65516e1
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,2 @@
+export * from "./screen";
+export * from "./url";
diff --git a/src/utils/screen.ts b/src/utils/screen.ts
new file mode 100644
index 0000000..588cec5
--- /dev/null
+++ b/src/utils/screen.ts
@@ -0,0 +1,35 @@
+interface FsDocumentElement extends HTMLElement {
+ msRequestFullscreen?: () => void;
+ mozRequestFullScreen?: () => void;
+ webkitRequestFullscreen?: () => void;
+}
+
+interface FsDocument extends Document {
+ webkitIsFullScreen?: boolean;
+ mozFullScreen?: boolean;
+ msFullscreenElement?: Element;
+}
+
+export const enterFullScreen = (): void => {
+ if (!isFullScreen()) {
+ const element = document.documentElement as FsDocumentElement;
+ if (element.requestFullscreen) element.requestFullscreen();
+ else if (element.msRequestFullscreen) element.msRequestFullscreen();
+ else if (element.mozRequestFullScreen) element.mozRequestFullScreen();
+ else if (element.webkitRequestFullscreen) element.webkitRequestFullscreen();
+ }
+};
+
+export const exitFullScreen = (): void => {
+ if (isFullScreen()) document.exitFullscreen();
+};
+
+export const isFullScreen = (): boolean => {
+ const fsDoc = document as FsDocument;
+ return !!(
+ fsDoc.fullscreenElement ||
+ fsDoc.webkitIsFullScreen ||
+ fsDoc.mozFullScreen ||
+ fsDoc.msFullscreenElement
+ );
+};
diff --git a/src/utils/url.ts b/src/utils/url.ts
new file mode 100644
index 0000000..e4310b2
--- /dev/null
+++ b/src/utils/url.ts
@@ -0,0 +1,13 @@
+// https://stackoverflow.com/questions/5717093/check-if-a-javascript-string-is-a-url
+export const checkURL = (str: string): boolean => {
+ const pattern = new RegExp(
+ "^(https?:\\/\\/)?" + // protocol
+ "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" + // domain name
+ "((\\d{1,3}\\.){3}\\d{1,3}))" + // OR ip (v4) address
+ "(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" + // port and path
+ "(\\?[;&a-z\\d%_.~+=-]*)?" + // query string
+ "(\\#[-a-z\\d_]*)?$",
+ "i" // fragment locator
+ );
+ return !!pattern.test(str);
+};
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..095341d
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,6 @@
+///
+ {/* Avatar */}
+
+
+ {/* buttons */}
+
+ {/*
+ {user.name}
+ */}
+
+ {/* Password Input */}
+
+ e.stopPropagation()}
+ onKeyPress={keyPress}
+ value={password}
+ onChange={handleInputChange}
+ />
+
+
+
+
+
+ {sign}
+
+
+
+ props.sleepMac(e)}
+ >
+
+
+
+ Sleep
+ props.restartMac(e)}
+ >
+
+
+
+ Restart
+ props.shutMac(e)}
+ >
+
+
+
+ Shut Down
+