Skip to content

Commit

Permalink
fix: match making page 디자인 수정
Browse files Browse the repository at this point in the history
  • Loading branch information
@seonjo1
seonjo1 committed Aug 26, 2024
1 parent e2bea47 commit f76060d
Show file tree
Hide file tree
Showing 2 changed files with 157 additions and 80 deletions.
43 changes: 16 additions & 27 deletions frontend/src/components/Match-Wait.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,34 +9,23 @@ export class WaitForMatch extends Component {
<div id="match-title">Finding Your Match...</div>
<img src="/img/back.png" id="goBack"></img>
<div id="matchingRotate">
<svg id="blackParticle" xmlns="http://www.w3.org/2000/svg" width="100" height="110" viewBox="0 0 140 150" fill="none">
<rect x="109.231" width="15.3846" height="13.1004" fill="#31363F"/>
<rect y="83.8428" width="15.3846" height="13.1004" fill="#31363F"/>
<rect x="57.6921" y="58.952" width="15.3846" height="13.1004" fill="#31363F"/>
<rect x="73.0769" y="19.6506" width="15.3846" height="13.1004" fill="#31363F"/>
<rect x="93.8462" y="70.7424" width="15.3846" height="13.1004" fill="#31363F"/>
<rect x="25.3848" y="136.9" width="15.3846" height="13.1004" fill="#31363F"/>
<rect x="25.3848" y="13.1004" width="15.3846" height="13.1004" fill="#31363F"/>
<rect x="124.615" y="41.9214" width="15.3846" height="13.1004" fill="#31363F"/>
</svg>
<svg id="blackBall" xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" fill="none">
<circle cx="50" cy="50" r="50" fill="#31363F"/>
</svg>
<svg id="whiteParticle" xmlns="http://www.w3.org/2000/svg" width="100" height="110" viewBox="0 0 140 150" fill="none">
<rect x="30.7693" y="150" width="15.3846" height="13.1004" transform="rotate(180 30.7693 150)" fill="#F5F6FA"/>
<rect x="140" y="66.1572" width="15.3846" height="13.1004" transform="rotate(180 140 66.1572)" fill="#F5F6FA"/>
<rect x="82.3076" y="91.048" width="15.3846" height="13.1004" transform="rotate(180 82.3076 91.048)" fill="#F5F6FA"/>
<rect x="66.9231" y="130.349" width="15.3846" height="13.1004" transform="rotate(180 66.9231 130.349)" fill="#F5F6FA"/>
<rect x="46.1538" y="79.2576" width="15.3846" height="13.1004" transform="rotate(180 46.1538 79.2576)" fill="#F5F6FA"/>
<rect x="114.615" y="13.1004" width="15.3846" height="13.1004" transform="rotate(180 114.615 13.1004)" fill="#F5F6FA"/>
<rect x="114.615" y="136.9" width="15.3846" height="13.1004" transform="rotate(180 114.615 136.9)" fill="#F5F6FA"/>
<rect x="15.3848" y="108.079" width="15.3846" height="13.1004" transform="rotate(180 15.3848 108.079)" fill="#F5F6FA"/>
</svg>
<svg id="whiteBall" xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" fill="none">
<circle cx="50" cy="50" r="50" fill="#F5F6FA"/>
</svg>
<div id="red-box">
<div id="redBall"></div>
<div id="redParticle1"></div>
<div id="redParticle2"></div>
<div id="redParticle3"></div>
<div id="redParticle4"></div>
<div id="redParticle5"></div>
<div id="redParticle6"></div>
<div id="redParticle7"></div>
<div id="redParticle8"></div>
</div>
<div id="yellow-box">
<div id="yellowBall"></div>
<div id="yellowParticle"></div>
</div>
</div>
<div id="matchingText">michang</div>
<div id="matchingText"></div>
</div>
`;
}
Expand Down
194 changes: 141 additions & 53 deletions frontend/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1411,14 +1411,32 @@ div#match-title {

div#matchingRotate {
border-radius: 50%;
background-color: #5b5775;
width: 670px;
height: 670px;
background-color: rgb(19, 10, 61);
width: 700px;
height: 700px;
position: absolute;
top: calc(50% - 285px);
left: calc(50% - 335px);
top: calc(50% - 280px);
left: calc(50% - 350px);
border-radius: 50%;
animation: rotate 2s linear infinite;
animation: rotate 4s linear infinite, dayNightCycle 10s infinite alternate;
border-radius: 50%;
box-shadow:
0 0 0 10px #f2f558,
0 0 0 20px rgba(242, 245, 88, 0.7),
0 0 0 30px rgba(242, 245, 88, 0.4),
0 0 0 40px rgba(242, 245, 88, 0.1);
}

@keyframes dayNightCycle {
0% {
background-color: rgb(161, 228, 255); /* 낮 */
}
50% {
background-color: rgb(19, 10, 61); /* 밤 */
}
100% {
background-color: rgb(161, 228, 255); /* 낮 */
}
}

@keyframes rotate {
Expand All @@ -1430,73 +1448,143 @@ div#matchingRotate {
}
}

svg#blackParticle {
div#red-box {
position: relative;
top: 50px;
left: 300px;
height: 100px;
width: 100px;
animation: rotate 4s linear infinite;
}

div#redBall {
position: absolute;
width: 80px;
height: 80px;
top: 10px;
left: 10px;
background-color: #FF4C4C;
border-radius: 50%;
}

div#redParticle1 {
position: absolute;
top: 70px;
left: 150px;
animation: translate1 2s linear infinite;
top: -20px;
left: 40px;
height: 20px;
width: 20px;
background-color: #FF4C4C;
border-radius: 50%;
}

svg#whiteParticle {
div#redParticle2 {
position: absolute;
bottom: 70px;
right: 150px;
animation: translate2 2s linear infinite;
bottom: -20px;
left: 40px;
height: 20px;
width: 20px;
background-color: #FF4C4C;
border-radius: 50%;
}

svg#blackBall {
div#redParticle3 {
position: absolute;
top: 70px;
left: 270px;
animation: translate1 2s linear infinite;
top: 40px;
left: -20px;
height: 20px;
width: 20px;
background-color: #FF4C4C;
border-radius: 50%;
}

svg#whiteBall {
div#redParticle4 {
position: absolute;
bottom: 70px;
right: 280px;
animation: translate2 2s linear infinite;
top: 40px;
right: -20px;
height: 20px;
width: 20px;
background-color: #FF4C4C;
border-radius: 50%;
}

@keyframes translate1 {
0% {
transform: translate(0px, -10px);
}
50% {
transform: translate(0px, 40px);
}
100% {
transform: translate(0px, -10px);
}
div#redParticle5 {
position: absolute;
top: 0px;
right: 0px;
height: 20px;
width: 20px;
background-color: #FF4C4C;
border-radius: 50%;
}

@keyframes translate2 {
0% {
transform: translate(0px, 10px);
}
50% {
transform: translate(0px, -40px);
}
100% {
transform: translate(0px, 10px);
}
div#redParticle6 {
position: absolute;
top: 0px;
left: 0px;
height: 20px;
width: 20px;
background-color: #FF4C4C;
border-radius: 50%;
}

div#redParticle7 {
position: absolute;
bottom: 0px;
right: 0px;
height: 20px;
width: 20px;
background-color: #FF4C4C;
border-radius: 50%;
}

div#redParticle8 {
position: absolute;
bottom: 0px;
left: 0px;
height: 20px;
width: 20px;
background-color: #FF4C4C;
border-radius: 50%;
}

div#yellow-box {
position: absolute;
bottom: 50px;
left: 300px;
height: 100px;
width: 100px;
}

div#yellowBall {
position: absolute;
width: 100px;
height: 100px;
bottom: 0px;
left: 0px;
border-radius: 50%;
background-color: #FFF078;
}

div#yellowParticle {
position: absolute;
bottom: 0px;
left: 0px;
height: 60px;
width: 60px;
background-color: rgb(19, 10, 61);
border-radius: 50%;
animation: dayNightCycle 10s infinite alternate;
}

div#matchingText {
border-radius: 50%;
width: 275px;
height: 275px;
width: 100px;
height: 100px;
position: absolute;
top: calc(50% - 85px);
left: calc(50% - 135px);
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
font-weight: 500;
color: white;
top: calc(50% + 20px);
left: calc(50% - 50px);
background-color: #31363F;
border: 2px solid white;
border: 1px solid white;
}

div#tournament-box {
Expand Down

0 comments on commit f76060d

Please sign in to comment.