-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathbj_rps_screen.html
140 lines (130 loc) · 5.13 KB
/
bj_rps_screen.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./bootstrap5.0.2/css/bootstrap.min.css">
<title>randomgame</title>
</head>
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@500&display=swap');
body {
background-color: #a357e1;
color: white;
font-family: 'IBM Plex Sans KR', sans-serif;
padding: 10px;
}
header, main, footer {
margin-top: 10px;
}
.header-img img{
width: 200px;
margin: 10px;
}
.gamecard {
background-color: #D9D9D9;
width: 100px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
cursor: pointer;
}
.gamecard img {
width: 75px;
height: 100px;
}
.gamecard img:hover {
transform: translateY(-20px);
}
.cardselected[data-card="scissors"] {
background-color: #FFF08E;
}
.cardselected[data-card="rock"] {
background-color: #A7E8CE;
}
.cardselected[data-card="paper"] {
background-color: #9FB4FF;
}
#idarea {
height: 200px;
width: 300px;
background-color: #F6EDF8;
}
.step_title {
color: #FFBD59;
}
</style>
<body>
<header class="text-center">
<!-- 1.초기 화면 -->
<div class="default">
<div class="d-flex align-items-start" >
<img id="gohomebtn" src="./img/go-home.png" style="margin-left: auto; cursor: pointer" alt="홈으로 가기">
</div>
<div class="header-img"><img src="./img/rps/rspgameheader.png"></div>
<p>< 카드를 선택해주세요 ></p>
</div>
<!-- 2.기다리는 화면 -->
<div class="wait" style="display: none;">
<h1 class="step_title">유저가<br>가위바위보 고르는 중</h1>
<p>< 5초 뒤 결과확인 ></p>
<div class="spinner-grow spinner-grow-sm text-light" role="status"><span class="visually-hidden">Loading...</span></div>
<div class="spinner-grow spinner-grow-sm text-light" role="status"><span class="visually-hidden">Loading...</span></div>
<div class="spinner-grow spinner-grow-sm text-light" role="status"><span class="visually-hidden">Loading...</span></div>
</div>
<!-- 3.결과 화면 -->
<div class="complete" style="display: none;">
<div class="d-flex align-items-start" >
<img id="backbtn" src="./img/go-prev-arrow.png" style="cursor: pointer;" alt="게임 다시하기">
<img id="homebtn" src="./img/go-home.png" style="margin-left: auto; cursor: pointer" alt="홈으로 가기">
</div>
<h2 class="step_title">BJ의 선택!</h2>
</div>
</header>
<main>
<!-- 선택 시 class=cardselected 추가 -->
<div class="d-flex justify-content-center">
<div class="gamecard rounded" data-card="scissors">
<img src="./img/rps/scissors.png" alt="가위">
</div>
<div class="gamecard rounded" data-card="rock">
<img src="./img/rps/rock.png" alt="바위">
</div>
<div class="gamecard rounded" data-card="paper">
<img src="./img/rps/paper.png" alt="보">
</div>
</div>
</main>
<footer class="text-center">
<!-- 1.초기 화면 -->
<div class="default">
<p>선택하기를 누르면 5초 뒤 유저가 선택하게됩니다.</p>
<button type="button" id="selectbtn" class="btn btn-outline-light col-3">선택하기</button>
</div>
<!-- 3.결과 화면 -->
<div class="complete" style="display: none;">
<h4 id="resultmsg"></h4>
<div class="d-flex justify-content-center">
<div class="form-floating">
<textarea class="form-control text-black text-center" id="idarea" style="display: none;" wrap="off" disabled></textarea>
</div>
</div>
</div>
<div class="toast-container position-fixed bottom-0 start-50 translate-middle-x">
<div class="toast align-items-center text-dark" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body"></div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
</footer>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" charset="UTF-8" src="https://static.afreecatv.com/asset/app/extension-helper/afreecatv-extension-sdk.js"></script>
<script type="text/javascript" charset="UTF-8" src="./bootstrap5.0.2/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="./bj_rps_screen.js"></script>
</body>
</html>