Merge branch 'develop' of https://github.com/pirogramming/Moodico into main-test

Author: ZinYan

static/css/main/main.css

@@ -4,6 +4,9 @@
     align-items: center;
     padding: 50px 20px;
     text-align: center;
+    width: 1020px;
+    margin-left: 200px;
+
 }
 
 .main-container h3 {
@@ -24,7 +27,7 @@
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     text-align: center;
     max-width: 1050px;
-    width: 90%;
+    width: 900px;
 }
 
 .banner-content h2 {
@@ -144,6 +147,7 @@
     font-size: 1.2em;
     margin-bottom: 8px;
     font-weight: 600;
+    margin-top: 10px;
 }
 
 .search-info p {
@@ -156,7 +160,7 @@
 .product-preview {
     display: flex;
     align-items: center;
-    gap: 45px;
+    gap: 20px;
     margin-bottom: 20px;
     padding-left: 30px;
 }
@@ -191,7 +195,7 @@
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 10px;
-    margin-bottom: 20px;
+    margin: 50px 0 30px 0;
 }
 
 .mood-option {
@@ -204,6 +208,7 @@
     font-weight: 500;
     cursor: pointer;
     transition: all 0.3s ease;
+    height: 80px;
 }
 
 .mood-option:hover {
@@ -224,8 +229,9 @@
 
 .mini-color-matrix {
     position: relative;
-    width: 500px;
-    height: 350px;
+
+    width: 300px;
+    height: 250px;
     border: 2px solid #ddd;
     border-radius: 10px;
     overflow: hidden;
@@ -345,7 +351,8 @@
 .voting-card {
     background: linear-gradient(135deg, #f0f8ff 0%, #fff 100%);
     position: relative;
-    grid-column: 1 / -1; /* 전체 너비 사용 */
+    grid-column: 1 / -1;
+    /* 전체 너비 사용 */
 }
 
 .voting-products {
@@ -497,6 +504,7 @@
         opacity: 0;
         transform: translateX(-50%) translateY(-20px);
     }
+
     to {
         opacity: 1;
         transform: translateX(-50%) translateY(0);
@@ -546,7 +554,7 @@
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.9));
     border-radius: 30px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
-    width: 1200px;
+    width: 1020px;
 }
 
 .ranking-section .section-header {
@@ -743,15 +751,15 @@
         grid-template-columns: 1fr;
         gap: 20px;
     }
-    
+
     .mood-options {
         grid-template-columns: repeat(2, 1fr);
     }
-    
+
     .color-grid {
         width: 100px;
     }
-    
+
     .color-cell {
         width: 30px;
         height: 30px;
@@ -781,4 +789,52 @@
         width: 100px;
         height: 100px;
     }
+}
+
+.moodico-splash-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: black;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    transition: opacity 0.5s ease-in-out;
+}
+
+.moodico-splash-container.hidden {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.moodico-banner h3,
+.moodico-banner p {
+    color: mediumpurple;
+    text-align: center;
+    opacity: 0;
+    animation: fadeIn 1s ease-in forwards;
+
+    background: linear-gradient(135deg, mediumpurple, #cf8bf3, #f6d2f3);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.moodico-banner h3 {
+    font-size: 3em;
+    margin-bottom: 10px;
+    animation-delay: 0.3s;
+}
+
+.moodico-banner p {
+    font-size: 1.5em;
+    animation-delay: 1s;
+}
+
+@keyframes fadeIn {
+    to {
+        opacity: 1;
+    }
 }

static/css/style.css

@@ -28,7 +28,7 @@ header nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    max-width: 1200px;
+    max-width: 1020px;
     margin: 0 auto;
 }
 

static/js/main/main.js

@@ -195,4 +195,12 @@ document.addEventListener('DOMContentLoaded', function() {
             }
         }, 3000);
     }
+    const splashContainer = document.querySelector('.moodico-splash-container');
+
+    //5초후에 무디코 소개멘트 숨기는거
+    setTimeout(() => {
+        if (splashContainer) {
+            splashContainer.classList.add('hidden');
+        }
+    }, 4000);
 });

templates/main/main.html

@@ -2,9 +2,12 @@
 <link rel="stylesheet" href="{% static 'css/main/main.css' %}" />
 {% endblock%} {% block content %}
 <div class="main-container">
-  <h3>Moodico</h3>
-  <p>당신의 무드에 완벽하게 어울리는 메이크업 조합을 찾아보세요</p>
-
+  <div class="moodico-splash-container">
+    <div class="moodico-banner">
+      <h3>Moodico"</h3>
+      <p>당신의 무드에 완벽하게 어울리는 메이크업 조합을 찾아보세요</p>
+    </div>
+  </div>
   <!-- 퍼스널 컬러 배너 섹션 -->
   <div class="personal-color-banner">
     <div class="banner-content">
@@ -56,12 +59,13 @@ <h3>🎯 오늘의 추천</h3>
         <div class="product-info">
           <h4>{{ recommended_product.product_name }}</h4>
           <p>
-            {% if recommended_product.is_user_liked %} 💖 내가 찜한 제품 | {{ recommended_product.product_brand }} {% else %}
-             {{ recommended_product.product_brand }} | 💜 {{  recommended_product.like_count }}명이 찜함 {% endif %}
+            {% if recommended_product.is_user_liked %} 💖 내가 찜한 제품 | 
+            {{ recommended_product.product_brand }} {% else %} 
+            {{ recommended_product.product_brand }} | 💜 {{
+            recommended_product.like_count }}명이 찜함 {% endif %}
           </p>
         </div>
       </div>
-
     </div>
 
     <!-- 무드 테스트 미리보기 -->