<iframe width="854" height="480" src="https://www.youtube.com/embed/영상코드" frameborder="0" allowfullscreen></iframe>
<!DOCTYPE html>
<html>
<!-- Author information
* html, php, css, javascript
* written by hepheir@gmail.com
*
* site designed by
* dfc7936@naver.com & hepheir@gmail.com
*
-->
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./style.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>MMC</title>
</head>
<body>
<div id="bodyWrap">
<form class="" action="result.php" method="post">
<nav id="dataInputWrap">
<div class="seatCoord">
<strong>어서 네 자리를 골라 멍청아</strong>
</div>
<div id="consoleWrap">
<input id="part_1" class="hidden" type="radio" name="part" value="1"/><label class="console_1" for="part_1"><strong>1부</strong></label>
<input id="part_2" class="hidden" type="radio" name="part" value="2"/><label class="console_1" for="part_2"><strong>2부</strong></label>
<br/>
<label class="console_2" for="done"><strong>예매하기</strong></label>
<input id="done" name="part" class="hidden" type="submit"/>
</div>
</nav>
<div id="stageWrap">
<h1>stage</h1>
<div id="stageTable">
<table>
<script>
// 가로 : 행
// 세로 : 열
var cols=12; //행
var rows=8; //열
var i=0;
var j=1;
var c=String.fromCharCode(i+65);
while(i < rows){
document.write('<tr>');
while (j <= cols) {
document.write('<td class="cell"><input type="radio" id="seat_'+c+j+'" class="hidden" name="seat" value="'+c+':'+j+'"/><label for="seat_'+c+j+'" class="cell">'+c+j+'</label></td>');
j++;
}
document.write('</tr>');
j=1;
i++;
c=String.fromCharCode(i+65);
}
</script>
</table>
</div>
</div>
</form>
</div>
</body>
</html>
@charset "UTF-8";
input[type=radio]:checked+label.cell{
/* 좌석표 선택시 색상 */
background-color: #666666;
color: #ffffff;
/* ================= */
}
input[type=radio]:checked+label.console_1{
/* 1부, 2부 선택시 색상 */
background-color: #bbbbbb;
color: #333333;
/* ================= */
display: inline-block;
margin: 8px 0 8px 0;
padding: 12px 12px 12px 12px;
-webkit-border-radius: 4px;
cursor: pointer;
}
html{
width: 100%;
height: 100%;
font-family: arial;
}
body{
width: 100%;
height: 100%;
margin: 0;
}
a{
text-decoration: none;
color:inherit;
}
p{
margin:0;
padding: 0;
line-height: 1.2em;
}
.hidden{
display: none;
}
.inline_b{
display: inline-block;
}
#bodyWrap{
width: 100%;
margin: 0;
padding: 42px 0 0 0;
color: #ffffff;
background-color: #ffffff;
text-transform: uppercase;
font-size: 20px
}
#stageWrap{
/* 100% - padding-left, right */
width: calc(100% - 32px - 32px);
background-color: #444444;
-webkit-border-radius: 24px 24px 0 0;
padding: 92px 32px 92px 32px;
margin: 0;
text-align: center;
}
/* 콘솔 영역 */
#dataInputWrap{
color: #111111;
position: absolute;;
top: calc(42px + 24px);
left: 42px;
line-height: 1em;
}
div.seatCoord{
margin: 0;
padding: 12px 16px 12px 24px;
background-color: #ffffff;
-webkit-border-radius: 10px;
}
input[type=radio]+label.console_1{
display: inline-block;
margin: 8px 0 8px 0;
padding: 12px 12px 12px 12px;
background-color: #ffffff;
-webkit-border-radius: 4px;
cursor: pointer;
}
label.console_2{
display: inline-block;
margin: 0;
padding: 12px 18px 12px 18px;
border: 0;
background-color: #ffffff;
-webkit-border-radius: 4px;
cursor: pointer;
}
/* 스테이지 영역 */
h1{
color: #888888;
letter-spacing: 8px;
text-decoration: underline;
}
#stageTable{
display: inline-block;
}
table{
border-spacing: 8px;
}
td.cell{
/* label.cell의 width + padding * 2 */
width: 52px;
height: 52px;
background-color: #888888;
}
label.cell{
display: block;
width: 100%;
height: 100%;
line-height: 2.5em;
margin: 0;
padding: 0;
color: #ffffff;
}
input[type=radio]+label.cell{
background-color: #888888;
}
