frontend: add static files

SystemConsultantGroup · Nov 3, 2024 · 07505e2 · 07505e2
1 parent fc34daa
commit 07505e2
Show file tree

Hide file tree

Showing 16 changed files with 274 additions and 0 deletions.
diff --git a/frontend/static/_redirects b/frontend/static/_redirects
@@ -0,0 +1 @@
+/*    /index.html   200
diff --git a/frontend/static/favicon.ico b/frontend/static/favicon.ico
diff --git a/frontend/static/fonts/Montserrat/Montserrat100.woff2 b/frontend/static/fonts/Montserrat/Montserrat100.woff2
diff --git a/frontend/static/fonts/Montserrat/Montserrat200.woff2 b/frontend/static/fonts/Montserrat/Montserrat200.woff2
diff --git a/frontend/static/fonts/Montserrat/Montserrat400.woff2 b/frontend/static/fonts/Montserrat/Montserrat400.woff2
diff --git a/frontend/static/fonts/Montserrat/Montserrat600.woff2 b/frontend/static/fonts/Montserrat/Montserrat600.woff2
diff --git a/frontend/static/fonts/Montserrat/Montserrat800.woff2 b/frontend/static/fonts/Montserrat/Montserrat800.woff2
diff --git a/frontend/static/fonts/Montserrat/Montserrat900.woff2 b/frontend/static/fonts/Montserrat/Montserrat900.woff2
diff --git a/frontend/static/fonts/Pretendard/Pretendard-Black.woff2 b/frontend/static/fonts/Pretendard/Pretendard-Black.woff2
diff --git a/frontend/static/fonts/Pretendard/Pretendard-Bold.woff2 b/frontend/static/fonts/Pretendard/Pretendard-Bold.woff2
diff --git a/frontend/static/fonts/Pretendard/Pretendard-Regular.woff2 b/frontend/static/fonts/Pretendard/Pretendard-Regular.woff2
diff --git a/frontend/static/images/herobg.png b/frontend/static/images/herobg.png
diff --git a/frontend/static/images/herobg.webp b/frontend/static/images/herobg.webp
diff --git a/frontend/static/images/logo.png b/frontend/static/images/logo.png
diff --git a/frontend/static/index.html b/frontend/static/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1.0, width=device-width" key="viewport" />
+    <title>SCG Ask</title>
+    <script type="module">
+      import init from "/wasm.js";
+      init();
+    </script>
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <link rel="stylesheet" type="text/css" href="/styles.css" />
+    <link rel="preload" as="image" href="images/herobg.webp" imagesizes="100vw">
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/frontend/static/styles.css b/frontend/static/styles.css
@@ -0,0 +1,256 @@
+@font-face {
+  font-family: 'Montserrat';
+  font-weight: 100;
+  src: url('./fonts/Montserrat/Montserrat100.woff2') format('woff2');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  font-weight: 200;
+  src: url('./fonts/Montserrat/Montserrat200.woff2') format('woff2');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  font-weight: 400;
+  src: url('./fonts/Montserrat/Montserrat400.woff2') format('woff2');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  font-weight: 600;
+  src: url('./fonts/Montserrat/Montserrat600.woff2') format('woff2');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  font-weight: 800;
+  src: url('./fonts/Montserrat/Montserrat800.woff2') format('woff2');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  font-weight: 900;
+  src: url('./fonts/Montserrat/Montserrat900.woff2') format('woff2');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  font-weight: 400;
+  src: url('./fonts/Pretendard/Pretendard-Regular.woff2') format('woff2');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  font-weight: 700;
+  src: url('./fonts/Pretendard/Pretendard-Bold.woff2') format('woff2');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  font-weight: 900;
+  src: url('./fonts/Pretendard/Pretendard-Black.woff2') format('woff2');
+  font-display: swap;
+}
+
+body,html {height:100%;margin:0;padding:0}
+ul, li, dl, dt, dd, p, span{margin:0;padding:0}
+a{text-decoration:none}
+li{list-style:none}
+a{text-decoration:none}
+*, :after, :before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
+
+body {
+  font-family: "Pretendard";
+
+  background-image: url('/images/herobg.webp');
+  padding-bottom: calc(24px + env(safe-area-inset-bottom));
+  margin: 0;
+}
+
+body::after {
+  content:"";
+  position:absolute;
+  top:0;
+  left:0;
+  width:100%;
+  height:100%;
+  background-color:black;
+  opacity:0.5;
+  z-index: -1;
+}
+
+.navbar {
+  height: 80px;
+  color: white;
+  position: sticky;
+  top: 0;
+  display: flex;
+  padding-left: 40px !important;
+  padding-right: 40px !important;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  align-items: center;
+}
+
+.navbar_title {
+  font-family: "Montserrat";
+  font-weight: 900;
+  font-size: 24px;
+  margin-left: 10px;
+}
+
+.navbar_logo {
+  height: 32px;
+}
+
+.form-container {
+
+  opacity: 0;
+  transition: opacity 1s ease-in-out;
+}
+
+.form-container.animate {
+  opacity: 1;
+}
+
+form {
+  max-width: 500px;
+  margin: 0 40px;
+  padding: 40px;  
+  border-radius: 5px;
+  background-color: rgb(224, 226, 230, 0.8);
+  opacity: 0.9;
+
+  font-family: "Pretendard";
+}
+
+@media screen and (max-width: 600px) {
+  form {
+    max-width: 400px;
+  }
+}
+
+form div {
+  margin-bottom: 15px;
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+  color: #101012;
+
+}
+
+input[type="text"],
+input[type="email"],
+textarea {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+  font-size: 16px;
+  color: #101012;
+}
+
+textarea {
+  height: 180px;
+  resize: vertical;
+}
+
+button[type="submit"] {
+  width: 100%;
+  padding: 10px;
+  background-color: #ededed;
+  color: #101012;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+}
+button[type="submit"]:disabled {
+  background-color: #9f9f9f;
+  cursor: not-allowed;
+}
+
+button[type="submit"]:hover {
+  background-color: #dddddd;
+}
+
+button[type="submit"]:active {
+  background-color: #d6d6d6;
+}
+
+/* 타이핑 */
+.typing-container {
+  font-size: 40px;
+  font-weight: 700;
+  font-family: ui-sans-serif,-apple-system,system-ui,Segoe UI,Helvetica,Apple Color Emoji,Arial,sans-serif,Segoe UI Emoji,Segoe UI Symbol;
+  color: white;
+  margin: 50px;
+  width: 420px;
+  word-break: keep-all;
+}
+
+#cursor {
+  border-left: 2px solid rgb(230, 230, 230); /* 커서 스타일 */
+  animation: blink 0.7s infinite;
+  display: inline-block;
+  margin-left: 2px;
+  height: 35px; /* 폰트 크기와 동일하게 설정 */
+  vertical-align: middle;
+}
+
+@keyframes blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+/* 로딩 */
+.loading_spinner_container {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.loading_spinner {
+  border-radius: 50%;
+  width: 18px;
+  height: 18px;
+  border: 2px solid #333;
+  border-top-color: #fff;
+  animation: loading_spinner_animation 1s infinite linear;
+}
+
+@keyframes loading_spinner_animation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loading_spinner_text {
+  margin-top: 10px;
+}