JavaScript/이상형 월드컵

JavaScript 이상형 월드컵 만들기(1) - 화면 구현

칠구의 스터디 2024. 1. 29. 20:09

저번에 피그마로 구상했던 화면 구현을 완료했다.

막상 구현하다보니 수정된 부분들이 조금 있다.

기능 부분은 아직 구현 전이다.

 

메인화면

 

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</head>
<body>
  
  <!--타이틀-->
  <div class="title-container">
    <h2><span>아이돌 이상형 월드컵</span></h2>
  </div>

  <br>
  <!--카드 컨테이너 -->
  <div class="card-container">
    
    <!-- 여자 아이돌 카드-->
      <div class="card">
        <div class="card text-center" >
          <div class="card-body">
            <h5 class="card-title" style="font-weight: bold;">👩여자 아이돌</h5><hr>
            <h6 class="card-subtitle mb-2 text-muted">
              <img src = "img/ww01.jpg"  style="width: 180px; height: 180px;">
            </h6>
            <div class="btn-group">
              <button class="btn" onclick="openPopup('popup02.html')">
              시작
            </button>
            <button class="btn" onclick="location.href='women/womrank.html';">
              랭킹
            </button>
            
          </div>
          </div>
        </div>
      </div>

    <!-- 남자 아이돌 카드-->
      <div class="card">
        <div class="card text-center">
          <div class="card-body">
            <h5 class="card-title" style="font-weight: bold;">👨남자 아이돌</h5><hr>
            <h6 class="card-subtitle mb-2 text-muted">
            <img src="img/m01.jpg" style="width: 180px; height: 180px;"></h6>
            <div class="btn-group">
              <button class="btn" onclick="openPopup('popup.html')" style="background-color: rgba(34, 147, 210, 0.15);">
              시작
            </button>
             
              <button class="btn" onclick="location.href='man/manrank.html';" style="background-color: rgba(34, 147, 210, 0.15);">
                랭킹
              </button>
              
            </button>
          </div>
        </div>
      </div>
    
  </div>
  </body>

<style>
.title-container{
    position: absolute;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    width: 1000px;
    height: 150px;
    background: skyblue;
    border-radius: 50px;
    box-shadow: 5px 10px 5px #ccc;
  }
  
  h2 {
      color:#ffff;
      opacity: 0;
      animation: fadeInLetters 2s forwards;
      display: inline-block;transform: translateX(-50%);
      left: 50%;
      font-size: 50px;
    }

    @keyframes fadeInLetters {
      from {
        opacity: 0;
        transform: translateX(-20px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    h2 span {
      display: inline-block;
      opacity: 0;
      animation: fadeInLetter 0.5s forwards;
    }

    @keyframes fadeInLetter {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .card-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    margin-top: 150px;
    width: 1000px;
    left: 50%;
    transform: translateX(-50%);
    gap: 20px;
}

.card {
    
    width: 470px;
    height: 380px;
    border: 1px solid #ccc;
    text-align: center;
}

.btn{
    width: 200px;
    height: 30px;
    transition: all 0.3s ease-in-out;
    background-color: rgba(125, 58, 210, 0.15);

  }
  .btn:hover {
            transform: scale(1.1);
        }
</style>

</html>

 

라운드 선택 (팝업창)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
   
</head>
<body onload="popup();">


    <div class="card">
        <div class="card text-center">
          <div class="card-body">
            <h8 class="card-title" style="background-color: rgba(34, 147, 210, 0.15); font-weight: bold;">👨남자 아이돌</h8><hr>
            <h6 class="card-subtitle mb-2 text-muted">
            <img src="img/aa.jpg" style="width: 180px; height: 180px;"></h6>
           라운드  <select class="dropdown" id="round">
                <option value="man/m16.html">16강</option>
                <option value="man/m08.html">8강</option>
                <option value="man/m04.html">4강</option>
                <option value="man/m02.html">결승</option>
            </select>
            <br><br>
              <button class="btn" onclick="checkround()" style="background-color: #0F9DF7; color: white;" >
              시작
            </button>
          </div>
      </div>
</body>

<style>
.card {

width: 470px;
height: 380px;
border: 1px solid #ccc;
text-align: center;
}

.btn{
width: 450px;
height: 30px;
transition: all 0.3s ease-in-out;
background-color: rgba(125, 58, 210, 0.15);
border-radius: 10px;

}
.btn:hover {
    transform: scale(1.1);
}

.dropdown{
    width: 380px;
    height: 30px;
    border-radius: 10px;
}
</style>
</html>

 

라운드 진행

 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>여자 아이돌 16강</title>
  <meta charset="utf-8">
  
</head>
<body>
  <div style="text-align: center;">
    <div class="title-container">
      <h1><span>여자 아이돌 16강</span></h1>
    <p id="round"></p>
    <p id="cal"></p>
  </div>
  <br>
    <!-- 이미지 클릭 시 효과음 재생 + 호버 효과-->
    <figure class="hover01">
    <img id="image1" onclick="change(0); play()">
    <img id="image2" onclick="change(1); play()">
    </figure>
   

    <!--우승자 보여줄 때-->
    <div class="winner-container" id="winnerContainer">
      <p class="winner-text">👑당신의 이상형👑</p>
      <img id="winnerImage">
    </div>

    </div>
</body>
<style>
.title-container {
    position: absolute;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    width: 1000px;
    height: 120px;
    background: skyblue;
    border-radius: 50px;
    box-shadow: 5px 10px 5px #ccc;
  }

  img {
    width: 500px;
    height: 500px;
    cursor: pointer;
    margin-top: 110px;
  }

  .winner-container {
    position: absolute;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 500px;
    top: 100px;
    display: none; /* 초기에는 숨겨둠 */
  }

  .winner-text {
    font-size: 24px;
    font-weight: bold;
    color: black;
    margin-top: 25px;
  }
  #winnerImage {
margin-top: 5px; 
}

/* 호버 효과
.hover01 img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

.hover01 img:hover {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}*/
</style>
</html>

 

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">

</head>
<body>
  
  <!--타이틀-->
  <div class="title-container">
    <h2><span>🏆여자 아이돌 랭킹🏆</span></h2>
  </div>

  <br>
  <!--카드 컨테이너 -->
  <div class="card-container">
    
    <!-- 여자 아이돌 카드-->
      <div class="card">
        <div class="card text-center" >
          <div class="card-body">
            <h5 class="card-title" style="font-weight: bold;">🥇1등🥇</h5><hr>
            <h6 class="card-subtitle mb-2 text-muted">
              <img src = "img/ww01.jpg"  style="width: 180px; height: 180px;">
            </h6>
           <h5 >여기에 이름</h5>
           <h5>여기에 픽</h5>
          </div>
          </div>
        </div>

        <div class="card">
            <div class="card text-center" >
              <div class="card-body">
                <h5 class="card-title" style="font-weight: bold;">🥈2등🥈</h5><hr>
                <h6 class="card-subtitle mb-2 text-muted">
                  <img src = "img/ww01.jpg"  style="width: 180px; height: 180px;">
                </h6>
               <h5>여기에 이름</h5>
               <h5>여기에 픽</h5>
              </div>
              </div>
            </div>

            <div class="card">
                <div class="card text-center" >
                  <div class="card-body">
                    <h5 class="card-title" style="font-weight: bold;">🥉3등🥉</h5><hr>
                    <h6 class="card-subtitle mb-2 text-muted">
                      <img src = "img/ww01.jpg"  style="width: 180px; height: 180px;">
                    </h6>
                   <h5>여기에 이름</h5>
                   <h5>여기에 픽</h5>
                  </div>
                  </div>
                </div>

                <div class="card">
                    <div class="card text-center" >
                      <div class="card-body">
                        <h5 class="card-title" style="font-weight: bold;">4등</h5><hr>
                        <h6 class="card-subtitle mb-2 text-muted">
                          <img src = "img/ww01.jpg"  style="width: 180px; height: 180px;">
                        </h6>
                       <h5>여기에 이름</h5>
                       <h5>여기에 픽</h5>
                      </div>
                      </div>
                    </div>

                    <div class="card">
                        <div class="card text-center" >
                          <div class="card-body">
                            <h5 class="card-title" style="font-weight: bold;">5등</h5><hr>
                            <h6 class="card-subtitle mb-2 text-muted">
                              <img src = "img/ww01.jpg"  style="width: 180px; height: 180px;">
                            </h6>
                           <h5>여기에 이름</h5>
                           <h5>여기에 픽</h5>
                          </div>
                          </div>
                        </div>
      </div>
</div>
  </body>
<style>
.title-container{
    position: absolute;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    width: 1000px;
    height: 150px;
    background: skyblue;
    border-radius: 50px;
    box-shadow: 5px 10px 5px #ccc;
  }
  
  h2 {
      color:#ffff;
      opacity: 0;
      animation: fadeInLetters 2s forwards;
      display: inline-block;transform: translateX(-50%);
      left: 50%;
      font-size: 50px;
    }

    @keyframes fadeInLetters {
      from {
        opacity: 0;
        transform: translateX(-20px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    h2 span {
      display: inline-block;
      opacity: 0;
      animation: fadeInLetter 0.5s forwards;
    }

    @keyframes fadeInLetter {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .card-container {
        display: flex;
        flex-wrap: wrap; 
        justify-content: center;
        align-items: center;
        position: absolute;
        margin-top: 150px;
        width: 1000px;
        left: 50%;
        transform: translateX(-50%);
        gap: 20px;
    }
    
    .card {
        width: 270px;
        height: 380px;
        border: 1px solid #ccc;
        text-align: center;
        margin-bottom: 20px; 
    }
    
</style>
</html>

 

'JavaScript > 이상형 월드컵' 카테고리의 다른 글

JavaScript 이상형 월드컵 만들기 (3) - 초간단한 로컬스토리지를 이용한 랭킹구현하기  (0) 2024.02.16
JavaScript 이상형 월드컵 만들기 (2) - 게임 진행  (1) 2024.01.31
JavaScript (0) - 피그마를 이용한 화면 구상 (이상형 월드컵 만들기)  (1) 2024.01.26

'JavaScript/이상형 월드컵'의 다른글

  • 현재글JavaScript 이상형 월드컵 만들기(1) - 화면 구현

관련글

티스토리툴바