diff --git a/frontend/static/_redirects b/frontend/static/_redirects new file mode 100644 index 0000000..50a4633 --- /dev/null +++ b/frontend/static/_redirects @@ -0,0 +1 @@ +/* /index.html 200 \ No newline at end of file diff --git a/frontend/static/favicon.ico b/frontend/static/favicon.ico new file mode 100644 index 0000000..4c8b60e Binary files /dev/null and b/frontend/static/favicon.ico differ diff --git a/frontend/static/fonts/Montserrat/Montserrat100.woff2 b/frontend/static/fonts/Montserrat/Montserrat100.woff2 new file mode 100644 index 0000000..1d0d30c Binary files /dev/null and b/frontend/static/fonts/Montserrat/Montserrat100.woff2 differ diff --git a/frontend/static/fonts/Montserrat/Montserrat200.woff2 b/frontend/static/fonts/Montserrat/Montserrat200.woff2 new file mode 100644 index 0000000..70cfdee Binary files /dev/null and b/frontend/static/fonts/Montserrat/Montserrat200.woff2 differ diff --git a/frontend/static/fonts/Montserrat/Montserrat400.woff2 b/frontend/static/fonts/Montserrat/Montserrat400.woff2 new file mode 100644 index 0000000..694d308 Binary files /dev/null and b/frontend/static/fonts/Montserrat/Montserrat400.woff2 differ diff --git a/frontend/static/fonts/Montserrat/Montserrat600.woff2 b/frontend/static/fonts/Montserrat/Montserrat600.woff2 new file mode 100644 index 0000000..11098b7 Binary files /dev/null and b/frontend/static/fonts/Montserrat/Montserrat600.woff2 differ diff --git a/frontend/static/fonts/Montserrat/Montserrat800.woff2 b/frontend/static/fonts/Montserrat/Montserrat800.woff2 new file mode 100644 index 0000000..a75e620 Binary files /dev/null and b/frontend/static/fonts/Montserrat/Montserrat800.woff2 differ diff --git a/frontend/static/fonts/Montserrat/Montserrat900.woff2 b/frontend/static/fonts/Montserrat/Montserrat900.woff2 new file mode 100644 index 0000000..3b776db Binary files /dev/null and b/frontend/static/fonts/Montserrat/Montserrat900.woff2 differ diff --git a/frontend/static/fonts/Pretendard/Pretendard-Black.woff2 b/frontend/static/fonts/Pretendard/Pretendard-Black.woff2 new file mode 100644 index 0000000..7a14207 Binary files /dev/null and b/frontend/static/fonts/Pretendard/Pretendard-Black.woff2 differ diff --git a/frontend/static/fonts/Pretendard/Pretendard-Bold.woff2 b/frontend/static/fonts/Pretendard/Pretendard-Bold.woff2 new file mode 100644 index 0000000..de72dfa Binary files /dev/null and b/frontend/static/fonts/Pretendard/Pretendard-Bold.woff2 differ diff --git a/frontend/static/fonts/Pretendard/Pretendard-Regular.woff2 b/frontend/static/fonts/Pretendard/Pretendard-Regular.woff2 new file mode 100644 index 0000000..640be93 Binary files /dev/null and b/frontend/static/fonts/Pretendard/Pretendard-Regular.woff2 differ diff --git a/frontend/static/images/herobg.png b/frontend/static/images/herobg.png new file mode 100644 index 0000000..7506a44 Binary files /dev/null and b/frontend/static/images/herobg.png differ diff --git a/frontend/static/images/herobg.webp b/frontend/static/images/herobg.webp new file mode 100644 index 0000000..1fac535 Binary files /dev/null and b/frontend/static/images/herobg.webp differ diff --git a/frontend/static/images/logo.png b/frontend/static/images/logo.png new file mode 100644 index 0000000..2941411 Binary files /dev/null and b/frontend/static/images/logo.png differ diff --git a/frontend/static/index.html b/frontend/static/index.html new file mode 100644 index 0000000..9bbcdd7 --- /dev/null +++ b/frontend/static/index.html @@ -0,0 +1,17 @@ + + + + + + SCG Ask + + + + + + + + \ No newline at end of file diff --git a/frontend/static/styles.css b/frontend/static/styles.css new file mode 100644 index 0000000..cf887f2 --- /dev/null +++ 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; +} \ No newline at end of file