final

woorifisa-service-dev-4th · Jan 3, 2025 · 67cdf2f · 67cdf2f
1 parent 6a445c0
commit 67cdf2f
Show file tree

Hide file tree

Showing 17 changed files with 359 additions and 0 deletions.
diff --git a/img/dog.png b/img/dog.png
diff --git a/img/dragon.png b/img/dragon.png
diff --git a/img/fortune.png b/img/fortune.png
diff --git a/img/horse.png b/img/horse.png
diff --git a/img/monkey.png b/img/monkey.png
diff --git a/img/mouse.png b/img/mouse.png
diff --git a/img/ox.png b/img/ox.png
diff --git a/img/pig.png b/img/pig.png
diff --git a/img/rabbit.png b/img/rabbit.png
diff --git a/img/rooster.png b/img/rooster.png
diff --git a/img/sheep.png b/img/sheep.png
diff --git a/img/snake.png b/img/snake.png
diff --git a/img/tiger.png b/img/tiger.png
diff --git a/index.html b/index.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>2025년 신년운세</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <!-- 헤더 -->
+    <header>
+        <div class = "container_header">
+            <h1>2025년 신년운세</h1>
+            <div class="fortune-teller">
+                <img src="img/fortune.png" alt="점술가">
+            </div>
+        </div>
+    </header>
+
+    <!-- 본문 -->
+    <div class= "container_body">
+        <form action="result.html" method="get">
+            <!-- 이름 -->
+            <label for="name">이름</label>
+            <input type="text" id="name" name="name" placeholder="이름을 입력해주세요." required>
+
+            <!-- 음/양력 -->
+            <label>음/양력</label>
+            <div class = "calendar-selection">
+                <input type="radio" name="calendar" value="solar" id="solar" checked>
+                <label for="solar">양력</label>
+
+                <input type="radio" name="calendar" value="lunar" id="lunar">
+                <label for="lunar">음력</label>
+
+                <input type="radio" name="calendar" value="lunar-leap" id="lunar-leap">
+                <label for="lunar-leap">음력(윤달)</label>
+            </div>
+
+            <!-- 생년월일 -->
+            <label>생년월일</label>
+            <div class="birth-date">
+                <!-- 년 -->
+                <select name="year" required>
+                    <option value="">년</option>
+                    <script>
+                        for (let year = 1926; year <= 2025; year++) {
+                            document.write(`<option value="${year}">${year}</option>`);
+                        }
+                    </script>
+                </select>
+
+                <!-- 월 -->
+                <select name="month" required>
+                    <option value="">월</option>
+                    <script>
+                        for (let month = 1; month <= 12; month++) {
+                            document.write(`<option value="${month}">${month}월</option>`);
+                        }
+                    </script>
+                </select>
+
+                <!-- 일 -->
+                <select name="day" required>
+                    <option value="">일</option>
+                    <script>
+                        for (let day = 1; day <= 31; day++) {
+                            document.write(`<option value="${day}">${day}일</option>`);
+                        }
+                    </script>
+                </select>
+            </div>
+
+            <!-- 제출 버튼 -->
+            <button type="submit" class="submit">운세 확인하러 가기</button>
+        </form>
+    </div>
+</body>
+</html>
diff --git a/result.html b/result.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>2025년 신년운세 결과</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <!-- 헤더 -->
+    <header>
+        <div class="container_header">
+            <h1>2025년 신년운세</h1>
+            <div class="fortune-teller">
+                <img id="zodiac-image" src="" alt="십이지신 이미지">
+        </div>
+        </div>
+    </header>
+
+    <!-- 본문 -->
+    <div class="container_body">
+        <label>총운</label>
+        <div id="result">
+            <h2 id="fortune-title"></h2>
+            <p id="fortune-content"></p>
+        </div>
+
+        <div class="share-section">
+            <label>친구에게 공유하기</label>
+            <button onclick="copyLink()">링크 복사하기</button>
+        </div>
+    </div>
+
+    <script>
+        // URL에서 파라미터 가져오기
+        const urlParams = new URLSearchParams(window.location.search);
+        const year = parseInt(urlParams.get('year'));
+        const name = urlParams.get('name');
+
+        // 띠 계산
+        const zodiacSigns = ["원숭이", "닭", "개", "돼지", "쥐", "소", "호랑이", "토끼", "용", "뱀", "말", "양"];
+        const zodiacImages = {
+            "쥐": "img/mouse.png",
+            "소": "img/ox.png",
+            "호랑이": "img/tiger.png",
+            "토끼": "img/rabbit.png",
+            "용": "img/dragon.png",
+            "뱀": "img/snake.png",
+            "말": "img/horse.png",
+            "양": "img/sheep.png",
+            "원숭이": "img/monkey.png",
+            "닭": "img/rooster.png",
+            "개": "img/dog.png",
+            "돼지": "img/pig.png"
+        };
+        const zodiac = zodiacSigns[year % 12];
+
+        // 결과 텍스트 업데이트
+        document.getElementById('fortune-title').textContent = `${name}님의 띠는 ${zodiac}입니다!`;
+        document.getElementById('fortune-content').textContent = `${name}님, ${zodiac} 띠의 해운세는 매우 좋습니다! 행복한 한 해가 되시길 바랍니다.`;
+
+        // 이미지 업데이트
+        const zodiacImage = document.getElementById('zodiac-image');
+        zodiacImage.src = zodiacImages[zodiac];
+        zodiacImage.alt = `${zodiac} 이미지`;
+
+        // 링크 복사 기능
+        function copyLink() {
+            const dummy = document.createElement('textarea');
+            dummy.value = window.location.href;
+            document.body.appendChild(dummy);
+            dummy.select();
+            document.execCommand('copy');
+            document.body.removeChild(dummy);
+            alert('링크가 복사되었습니다!');
+        }
+    </script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,26 @@
+document.getElementById('zodiac-form').addEventListener('submit', function (e) {
+    e.preventDefault();
+
+    const year = parseInt(document.getElementById('birth-year').value);
+    const zodiacs = [
+        { name: "쥐", image: "rat.jpg" },
+        { name: "소", image: "ox.jpg" },
+        { name: "호랑이", image: "tiger.jpg" },
+        { name: "토끼", image: "rabbit.jpg" },
+        { name: "용", image: "dragon.jpg" },
+        { name: "뱀", image: "snake.jpg" },
+        { name: "말", image: "horse.jpg" },
+        { name: "양", image: "goat.jpg" },
+        { name: "원숭이", image: "monkey.jpg" },
+        { name: "닭", image: "rooster.jpg" },
+        { name: "개", image: "dog.jpg" },
+        { name: "돼지", image: "pig.jpg" }
+    ];
+
+    const zodiacIndex = (year - 4) % 12;
+    const zodiac = zodiacs[zodiacIndex];
+
+    document.getElementById('zodiac-image').src = zodiac.image;
+    document.getElementById('zodiac-image').alt = zodiac.name;
+    document.getElementById('result').textContent = `당신의 십이지간은 ${zodiac.name}입니다!`;
+});
diff --git a/styles.css b/styles.css
@@ -0,0 +1,175 @@
+/* 기본 스타일 초기화 */
+body {
+    margin: 0;
+    background: linear-gradient(to bottom, #d4c5e6, rgba(247, 224, 213, 0.7), rgba(247, 224, 213, 0));
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    min-height: 100vh;
+    padding: 0; }
+
+/* 헤더 CSS */
+/* 컨테이너 전체 스타일 */
+.container_header {
+    text-align: center;
+    padding: 30px 0;
+    width: 100%;
+}
+
+/* 2025년 신년운세 */
+.container_header h1 {
+    font-size: 2rem;
+    font-weight: bold;
+    color: #ffffff;
+    margin: 0;
+}
+
+/* 점술가 이미지 */
+.fortune-teller img {
+    width: 300px;
+    height: auto;
+    margin-top: 10px;
+}
+
+
+/* 본문 */
+/* 컨테이너 전체 스타일 */
+.container_body {
+    background: #ffffff;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    width: 100%;
+    max-width: 800px;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+}
+
+/* 이름, 음/양력, 생년월일 */
+label {
+    font-size: 1rem;
+    font-weight: bold;
+    margin-bottom: 16px;
+    color: #111827;
+}
+
+/* 이름 input 박스 CSS */
+input[type="text"] {
+    border: 1px solid #F3F4F6;
+    background-color: #F3F4F6;
+    border-radius: 5px;
+    padding: 10px;
+    font-size: 1rem;
+    margin-bottom: 60px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+/* 음/양력 선택을 3칸으로 나누기 */
+.calendar-selection {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 60px;
+}
+
+/* 음/양력 라디오 버튼 스타일 CSS */
+.calendar-selection input[type="radio"] {
+    display: none; /* 기본 라디오 버튼 숨김 */
+}
+
+.calendar-selection label {
+    display: block;
+    padding: 10px 20px;
+    background-color: #F3F4F6;
+    color: #111827;
+    border-radius: 5px;
+    font-size: 1rem;
+    text-align: center;
+    cursor: pointer;
+    transition: background 0.3s;
+    flex: 1;
+}
+
+.calendar-selection input[type="radio"]:checked + label {
+    background-color: #9177c5; /* 선택된 버튼 색상 */
+    color : white;
+}
+
+.calendar-selection input[type="radio"]:hover + label {
+    opacity: 0.9; /* 호버 시 버튼 효과 */
+}
+
+/* 생년월일 섹션 */
+.birth-date {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 60px;
+}
+
+.birth-date select {
+    flex: 1;
+    padding: 10px;
+    font-size: 1rem;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    background: #ffffff;
+}
+
+/* 제출 버튼 */
+button.submit {
+    background: #9177c5;
+    color: #ffffff;
+    border: none;
+    border-radius: 5px;
+    padding: 15px;
+    font-size: 1rem;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background 0.3s;
+}
+
+button.submit:hover {
+    background: #5e47a2;
+}
+
+/* result.html CSS */
+/* 공유 버튼 CSS */
+/* 링크 복사 버튼 스타일 */
+button {
+    background: #9177c5;          /* 기존 제출 버튼 색상 */
+    color: #ffffff;
+    border: none;
+    border-radius: 5px;
+    padding: 15px;
+    font-size: 1rem;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background 0.3s;
+    margin-top: 20px;             /* 버튼 사이의 간격 */
+    width : 100%;
+}
+
+/* 버튼 호버 효과 */
+button:hover {
+    background: #5e47a2;         /* 호버 시 색상 변화 */
+/* 반응형 디자인 */
+@media (max-width: 768px) {
+    .container h1 {
+        font-size: 1.5rem;
+    }
+
+    .fortune-teller img {
+        width: 120px;
+    }
+
+    .section {
+        padding: 15px;
+    }
+
+    button.submit {
+        font-size: 0.9rem;
+    }