Design : Change CSS and logo image

- #8
Make-Zenerator · Mar 12, 2024 · d8ec8f4 · d8ec8f4
1 parent 4e91581
commit d8ec8f4
Show file tree

Hide file tree

Showing 10 changed files with 74 additions and 57 deletions.
diff --git a/mz_v1_front/src/components/header/header_login.svelte b/mz_v1_front/src/components/header/header_login.svelte
@@ -18,12 +18,23 @@
     a {
    text-decoration: none;
  }
+
+ @font-face {
+    font-family: 'yg-jalnan';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/JalnanOTF00.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
 </style>
 
+
+
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Titan+One&display=swap" rel="stylesheet">
 
+
+
 <div
 style="
   background: var(--neutral-0, #ffffff);
@@ -42,35 +53,37 @@ style="
   overflow: hidden;
 "
 >
+<div>
 <a href="/home" style="flex-shrink: 0; width: 299px; height: 55px; position: static">
   <div
     style="
     color: var(--7b95b7, #6b6b6b);
     text-align: center;
-    font-family: 'DmSans-Bold', sans-serif;
+    font-family: 'yg-jalnan';
     line-height: 28px;
     font-weight: 400;
-    font-size: 26px;
+    font-size: 20px;
     position: absolute;
-    left: 178px;
-    top: 22px;
+    left: 200px;
+    top: 27px;
     "
   >
     <strong>Make Zenerator</strong>
   </div>
   <img
     class="{'image-2 ' + className}"
     style="
-      width: 80px;
+      width: 70px;
       position: absolute;
-      left: 98px;
-      top: 8.5px;
+      left: 130px;
+      top: 2px;
       object-fit: cover;
     "
     src="./logo/logo1.png"
     alt="logo"
   />
 </a>
+</div>
 <div
   style="
     display: flex;

diff --git a/mz_v1_front/src/components/header/header_non.svelte b/mz_v1_front/src/components/header/header_non.svelte
@@ -10,6 +10,13 @@
      a {
     text-decoration: none;
   }
+
+  @font-face {
+    font-family: 'yg-jalnan';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/JalnanOTF00.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
 </style>
 
 <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -35,36 +42,35 @@
     overflow: hidden;
   "
 >
-  <div style="flex-shrink: 0; width: 299px; height: 55px; position: static">
-    <a href="/">
+  <a href="/" style="flex-shrink: 0; width: 299px; height: 55px; position: static">
       <div
-      style="
-      color: var(--7b95b7, #6b6b6b);
-      text-align: center;
-      font-family: 'DmSans-Bold', sans-serif;
-      line-height: 28px;
-      font-weight: 400;
-      font-size: 26px;
-      position: absolute;
-      left: 178px;
-      top: 22px;
-    "
-      >
-        <strong>Make Zenerator</strong>
-      </div>
-      <img href="/"
-        class="{'image-2 ' + className}"
-        style="
-      width: 80px;
-      position: absolute;
-      left: 98px;
-      top: 8.5px;
-      object-fit: cover;
+    style="
+    color: var(--7b95b7, #6b6b6b);
+    text-align: center;
+    font-family: 'yg-jalnan';
+    line-height: 28px;
+    font-weight: 400;
+    font-size: 20px;
+    position: absolute;
+    left: 170px;
+    top: 27px;
     "
-        src="logo/logo1.png"
-        alt="logo"
-      /></a>
+  >
+    <strong>Make Zenerator</strong>
   </div>
+  <img
+  class="{'image-2 ' + className}"
+  style="
+    width: 70px;
+    position: absolute;
+    left: 100px;
+    top: 2px;
+    object-fit: cover;
+  "
+  src="./logo/logo1.png"
+  alt="logo"
+/>
+    </a>
   <div
     style="
       display: flex;

diff --git a/mz_v1_front/src/routes/+page.svelte b/mz_v1_front/src/routes/+page.svelte
@@ -1,23 +1,22 @@
 <script>
     import ButtonStyleFilled from "./join/ButtonStyleFilled.svelte";
     import ButtonStyleOutlined from "./join/ButtonStyleOutlined.svelte";
-    import PlaceholderImage from "./join/PlaceholderImage.svelte";
     import Header from "../components/header/header_non.svelte";
     let className = "";
     export { className as class };
     export let style;
 
   </script>
   <div
-  style="{'background: var(--neutral-0, #ffffff);padding: 0px 0px 120px 0px; display: flex; flex-direction: column; gap: 180px; align-items: center; justify-content: flex-start;  position: relative; ' + style}"
+  style="{'background: var(--neutral-0, #ffffff);padding: 0px 0px 120px 0px; display: flex; flex-direction: column; gap: 100px; align-items: center; justify-content: flex-start;  position: relative; ' + style}"
   >
   <Header/>
  <div>
     <div
       style="
         display: flex;
         flex-direction: column;
-        gap: 170px;
+        gap: 120px;
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
@@ -157,7 +156,7 @@
           </div>
         </div>
         <video autoplay loop muted style="width:40% ">
-          <source src="http://127.0.0.1:9000/voice2face/site/hj_24fps_square.mp4" type="video/mp4">
+          <source src="http://223.130.133.236:9000/voice2face-public/site/main/main_sample.mp4" type="video/mp4">
           Your browser does not support the video tag.
         </video>
       </div>

diff --git a/mz_v1_front/src/routes/aboutus/+page.svelte b/mz_v1_front/src/routes/aboutus/+page.svelte
@@ -34,7 +34,7 @@
         font-weight: var(--title-large-font-weight, 700);
         position: relative;
         width: 412px;
-        height: 52px;
+        height: 62px;
       "
     >
       About Us
@@ -65,7 +65,7 @@
       font-weight: var(--title-large-font-weight, 700);
       position: relative;
       width: 412px;
-      height: 112px;
+      height: 32px;
     "
   >
     MZ Members

diff --git a/mz_v1_front/src/routes/join/+page.svelte b/mz_v1_front/src/routes/join/+page.svelte
@@ -6,7 +6,6 @@
   import { goto } from '$app/navigation';
   export let targetPath = "/";
   let className = "";
-  let radioValue;
   export { className as class };
   export let style;
   let join_email;
@@ -37,13 +36,11 @@ $: {
 async function handleSubmit(event) {
     event.preventDefault();
 
-    // 개인정보 수집 동의 확인
     if (!join_agree) {
       alert("개인정보 수집 이용에 동의를 체크해주셔야 서비스를 이용하실 수 있습니다.");
       return;
     }
 
-    // 비밀번호 일치 확인
     if (join_pswd !== join_check) {
       alert("비밀번호가 일치하지 않습니다.");
       return;
@@ -56,7 +53,6 @@ async function handleSubmit(event) {
     formData.append('gender', join_gender);
     
 
-    // 폼 데이터를 JSON으로 서버에 전송
     try {
       const response = await fetch('http://175.45.194.59:5050/api/v1/users', {
         method: 'POST',
@@ -227,7 +223,7 @@ async function handleSubmit(event) {
                     text-align: center;
                     font-family: 'DmSans-Medium', sans-serif;
                     font-size: 14px;
-                    line-height: 40px;
+                    line-height: 30px;
                     font-weight: 500;
                     position: relative;
                     width: 100%;
@@ -282,7 +278,7 @@ async function handleSubmit(event) {
                     text-align: center;
                     font-family: 'DmSans-Medium', sans-serif;
                     font-size: 14px;
-                    line-height: 40px;
+                    line-height: 30px;
                     font-weight: 500;
                     position: relative;
                     width: 100%;
@@ -337,7 +333,7 @@ async function handleSubmit(event) {
                     text-align: center;
                     font-family: 'DmSans-Medium', sans-serif;
                     font-size: 14px;
-                    line-height: 40px;
+                    line-height: 30px;
                     font-weight: 500;
                     position: relative;
                     width: 100%;
@@ -434,7 +430,7 @@ async function handleSubmit(event) {
                 line-height: 40px;
                 font-weight: 500;
                 border: none;
-                width: 100%; /* 입력 상자가 div를 꽉 채우도록 조정 */
+                width: 100%; 
                 height: 40px; /* 입력 상자의 높이 조정 */
                 background: transparent; /* 배경색 투명 */
                 -webkit-appearance: none; /* 스타일 초기화 */
@@ -503,7 +499,7 @@ async function handleSubmit(event) {
                   color: rgba(0, 0, 0, 0.87);
                   text-align: left;
                   font-family: 'DmSans-Medium', sans-serif;
-                  font-size: 10px;
+                  font-size: 12px;
                   line-height: 15px;
                   font-weight: 500;
                   margin: 0px;

diff --git a/mz_v1_front/src/routes/result/+page.svelte b/mz_v1_front/src/routes/result/+page.svelte
@@ -85,7 +85,7 @@ style="
       position: relative;
       object-fit: cover;
     "
-    src="/join/image-21.png"
+    src="/logo/logo.png"
     alt="logo"
   />
   <div
@@ -659,17 +659,20 @@ style="
     안녕하세요! 사용자의 목소리를 기반으로 가상의 얼굴을 생성하는 서비스, <br >
     <span><strong>Voice2Face</strong></span>를 개발 중인 <span><strong>Make Zenerator</strong></span>팀입니다.
     <br />
-    ~서비스에 대한 간단 소개 및 향후 계획~
+    저희는 온라인 상에서 얼굴을 드러내고 싶지 않은 사람들에게 목소리를 기반으로 생성한 얼굴을 제공하여, 
+    <br />
+    목소리와 이미지 간의 이질감을 없애고 사생활을 보장받으며 온라인 상에서 활동할 수 있도록 하는 서비스를 제공하고자 합니다.
+    <br>
+    저희는 사용자의 목소리를 바탕으로 현실적인 얼굴을 만드는 것을 목표로 서비스를 고도화 하고 있습니다. <br>
     <br /><br />
-    지금까지의 서비스 이용 경험을 바탕으로 아래의 설문 조사에 참여해주시면 감사드리겠습니다.
+    서비스 품질 향상을 위해 지금까지의 서비스 이용 경험을 바탕으로 아래의 설문 조사에 참여해주시면 감사드리겠습니다.
     <br />
     설문 예상 소요 시간은 <span><strong>약 5분 내외</strong></span>이며  
     <br /> 
-    참여하신 분들 중 추첨을 통해 5분께 <span><strong>스타벅스 카페 아메리카노</strong></span> 기프티콘을 드릴 예정입니다
-    <br />
-    생성된 이미지 결과별로 설문 가능합니다. 많이 작성해주시면 확률이 올라갑니다.
+    참여하신 분들 중 추첨을 통해 5분께 <span><strong>스타벅스 카페 아메리카노</strong></span> 기프티콘을 드릴 예정입니다.
     <br />
-    (50명 넘으면 치킨으로 바뀔수도..? ^^)</div>
+    생성된 이미지 결과별로 설문 가능합니다. (많이 작성해주시면 확률이 올라갑니다.)
+    </div>
 
     <div 
       style="

diff --git a/mz_v1_front/src/routes/resultlist/+page.svelte b/mz_v1_front/src/routes/resultlist/+page.svelte
@@ -58,7 +58,7 @@ style="{'background: var(--neutral-0, #ffffff);padding: 0px 0px 120px 0px; displ
     style="
       flex-shrink: 0;
       width: 166px;
-      height: 106px;
+
       position: relative;
       object-fit: cover;
       margin-left: auto;

diff --git a/mz_v1_front/static/logo/login_f.png b/mz_v1_front/static/logo/login_f.png
diff --git a/mz_v1_front/static/logo/logo.png b/mz_v1_front/static/logo/logo.png
diff --git a/mz_v1_front/static/logo/logo1.png b/mz_v1_front/static/logo/logo1.png