Merge pull request #3 from kw-ic-web/stage1

stage1 commit

Author: yugyeong60

assets/images/stage1/a.jpg

@@ -0,0 +1,99 @@
+body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Nanum Brush Script', sans-serif;
+    background: url('/assets/images/stage1/hanok-background.jpg') no-repeat center center fixed;
+    background-size: cover;
+    color: #3c3c3c; /* 어두운 회색으로 텍스트 색상 변경 */
+    display: flex;
+    flex-direction: column; /* 세로 방향으로 배치 */
+    justify-content: space-between; /* 요소 간 간격 유지 */
+    height: 100vh; /* 화면 높이 100% */
+}
+
+header {
+    text-align: center; /* 텍스트 중앙 정렬 */
+    margin-top: 20px; /* 위쪽 여백 */
+}
+
+h1 {
+    font-size: 3em;
+    color: #473a24; 
+    margin-top: 2px;
+    margin-bottom: 2px;
+}
+
+p {
+    font-size: 1.2em;
+    color: #473a24; 
+    margin-top: 1px;
+    margin-bottom: 2px;
+}
+
+.game-board {
+    width: 90%; /* 중앙 왼쪽에 배치 */
+    height: 450px;
+    background-color: rgba(230, 225, 217, 0.85); /* 밝은 초록 색상 */
+    border: 5px solid #bdb7a8;
+    border-radius: 15px;
+    position: relative;
+    margin-left: 5%; /* 왼쪽 여백 */
+}
+
+.card {
+    width: 80px; /* 카드 너비 */
+    height: 120px; /* 카드 높이 */
+    background-size: cover; /* 배경 이미지 크기 조절 */
+    background-position: center; /* 배경 이미지 위치 조정 */
+    border: 2px solid #bdb7a8; /* 카드 테두리 */
+    border-radius: 10px; /* 카드 모서리 둥글게 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute; /* 위치 설정 */
+    cursor: grab; /* 커서 모양 */
+    transition: transform 0.2s; /* 부드러운 전환 효과 */
+}
+
+.card:active {
+    transform: scale(1.1);
+}
+
+.controls {
+    text-align: center; /* 중앙 정렬 */
+    margin-bottom: 20px; /* 아래쪽 여백 */
+}
+
+input[type="text"] {
+    padding: 10px;
+    font-size: 1.2em;
+    width: 50%;
+    border: 2px solid #c0c0c0; /* 연한 회색으로 변경 */
+    border-radius: 10px;
+    background-color: #f9f9f9; /* 밝은 베이지 */
+    color: #3c3c3c; /* 어두운 회색으로 변경 */
+}
+
+button {
+    padding: 10px 20px;
+    font-size: 1.2em;
+    margin: 10px;
+    background-color: #b3c0c0; /* 연한 회색 */
+    color: #3c3c3c; /* 어두운 회색으로 변경 */
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s, transform 0.2s;
+}
+
+button:hover {
+    background-color: #9cb1b1; /* 더 어두운 연한 회색 */
+    transform: scale(1.05);
+}
+
+#feedback {
+    margin-top: 20px;
+    font-size: 1.5em;
+    font-weight: bold;
+    color: #d2b79e; /* 밝은 베이지 */
+}