RomanNum3ral
/
map3d
mirror of https://github.com/cartesiancs/map3d.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: add front page

This commit is contained in:
Huh Hyeongjun 2025-02-24 12:32:27 +09:00
parent b2670f0578
commit b461b32aa8
11 changed files with 166 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -1,10 +1,10 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title> <title>map3d</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

12
src/App.tsx
View File

@ -1,12 +0,0 @@
import { css } from "@emotion/react";
import { Space } from "./space/Space";
function App() {
return (
<div css={css({ height: "100%", width: "100%" })}>
<Space />
</div>
);
}
export default App;

33
src/components/FullscreenModal.tsx Normal file
View File

@ -0,0 +1,33 @@
import { css } from "@emotion/react";
import React from "react";
export function FullscreenModal({
children,
isOpen = false,
}: {
children: React.ReactNode;
isOpen?: boolean;
}) {
return (
<div
css={css({
width: "100%",
height: "100%",
position: "fixed",
zIndex: 999,
backgroundColor: "#ffffffc9",
backdropFilter: "blur(12px)",
display: isOpen ? "flex" : "none",
})}
>
<div
css={css({
padding: "2rem",
width: "100%",
})}
>
{children}
</div>
</div>
);
}

27
src/components/flex/Column.tsx Normal file
View File

@ -0,0 +1,27 @@
import { css } from "@emotion/react";
export function Column({
children,
gap = "0.25rem",
justify = "unset",
height = "auto",
}: {
children?: React.ReactNode;
gap?: string;
justify?: string;
height?: string;
}) {
return (
<div
css={css({
display: "flex",
flexDirection: "column",
gap: gap,
justifyContent: justify,
height: height,
})}
>
{children}
</div>
);
}

28
src/components/flex/Row.tsx Normal file
View File

@ -0,0 +1,28 @@
import { css } from "@emotion/react";
import { Properties } from "csstype";
export function Row({
children,
gap = "0.25rem",
justify = "unset",
overflow = "visible",
}: {
children?: React.ReactNode;
gap?: string;
justify?: string;
overflow?: Properties["overflow"];
}) {
return (
<div
css={css({
display: "flex",
flexDirection: "row",
gap: gap,
justifyContent: justify,
overflow: overflow,
})}
>
{children}
</div>
);
}

17
src/components/text/Description.tsx Normal file
View File

@ -0,0 +1,17 @@
import { css } from "@emotion/react";
import { DESC_COLOR } from "@/theme/color";
export function Description({ children }: { children?: React.ReactNode }) {
return (
<p
css={css({
margin: 0,
color: DESC_COLOR,
fontSize: "1rem",
fontWeight: "400",
})}
>
{children}
</p>
);
}

17
src/components/text/Title.tsx Normal file
View File

@ -0,0 +1,17 @@
import { css } from "@emotion/react";
import { SUBTITLE_COLOR } from "@/theme/color";
export function Title({ children }: { children?: React.ReactNode }) {
return (
<p
css={css({
margin: 0,
color: SUBTITLE_COLOR,
fontSize: "1.125rem",
fontWeight: "600",
})}
>
{children}
</p>
);
}

13
src/index.css
View File

@ -1,7 +1,20 @@
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
html, html,
body, body,
#root { #root {
height: 100%; height: 100%;
width: 100%; width: 100%;
margin: 0; margin: 0;
font-family: "Pretendard Variable", Pretendard, -apple-system,
BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
"Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}
* {
font-family: "Pretendard Variable", Pretendard, -apple-system,
BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
"Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
} }

2
src/main.tsx
View File

@ -1,5 +1,5 @@
import { createRoot } from "react-dom/client"; import { createRoot } from "react-dom/client";
import "./index.css"; import "./index.css";
import App from "./App.tsx"; import App from "./ui/App.tsx";
createRoot(document.getElementById("root")!).render(<App />); createRoot(document.getElementById("root")!).render(<App />);

4
src/theme/color.ts Normal file
View File

@ -0,0 +1,4 @@
export const BORDER_COLOR = "#ededf290";
export const SUBTITLE_COLOR = "#5b5d63";
export const DESC_COLOR = "#8f8f96";
export const ACTION_ICON_COLOR = "#5b5d63";

24
src/ui/App.tsx Normal file
View File

@ -0,0 +1,24 @@
import { css } from "@emotion/react";
import { Space } from "../space/Space";
import { FullscreenModal } from "../components/FullscreenModal";
import { Title } from "@/components/text/Title";
import { Description } from "@/components/text/Description";
import { Column } from "@/components/flex/Column";
function App() {
return (
<div css={css({ height: "100%", width: "100%" })}>
<FullscreenModal isOpen={true}>
<Column gap="0.5rem">
<Title>Generate 3d map</Title>
<Description>
Tools to create 3D maps based on maps and export them in 3D format
</Description>
</Column>
</FullscreenModal>
<Space />
</div>
);
}
export default App;