<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>動画撮影UI</title>
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-papcCJ1+Gm1NtlV0frhR5V/RxjYRFm3lkgqojJ+hK6j0lVHKgO6O6+Tqlf5sMgPu3LvXWkI/jFtkqP3Mrl8/jQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
body {
margin: 0;
padding: 0;
font-family: Roboto, sans-serif;
background: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
width: 393px;
height: 852px;
position: relative;
background: linear-gradient(37deg, #9FE7FF 0%, #6072F8 100%);
overflow: hidden;
border-radius: 20px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.top-bar {
width: 100%;
height: 78px;
position: absolute;
top: 0;
left: 0;
background: black;
}
.small-white-rect {
width: 26px;
height: 46px;
position: absolute;
left: 39px;
top: 16px;
background: white;
border-radius: 4px;
}
.gray-block {
width: 100%;
height: 193px;
position: absolute;
left: 0;
background: #686868;
}
.gray-block.top {
top: 78px;
}
.gray-block.bottom {
top: 659px;
width: 391px;
}
.blue-block {
width: 100%;
height: 388px;
position: absolute;
top: 271px;
left: 0;
background: #9FF5FF;
}
.title {
width: 322px;
height: 80px;
position: absolute;
top: 145px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: white;
font-size: 32px;
font-weight: 500;
text-transform: uppercase;
word-wrap: break-word;
}
.circle-button {
width: 110px;
height: 110px;
position: absolute;
top: 701px;
left: 50%;
transform: translateX(-50%);
background: white;
border-radius: 50%;
border: 3px solid black;
display: flex;
justify-content: center;
align-items: center;
font-size: 36px;
cursor: pointer;
}
.icon-left, .icon-right {
width: 65px;
height: 65px;
position: absolute;
top: 710px;
display: flex;
justify-content: center;
align-items: center;
font-size: 32px;
color: black;
cursor: pointer;
}
.icon-left {
left: 42px;
}
.icon-right {
right: 42px;
}
</style>
</head>
<body>
<div class="container">
<div class="top-bar"></div>
<div class="small-white-rect"></div>
<div class="gray-block top"></div>
<div class="blue-block"></div>
<div class="gray-block bottom"></div>
<div class="title">動画を撮影</div>
<!-- 真ん中の録画ボタン -->
<div class="circle-button">
<i class="fas fa-circle" style="color:red;"></i>
</div>
<!-- 左右のアイコン -->
<div class="icon-left"><i class="fas fa-photo-video"></i></div>
<div class="icon-right"><i class="fas fa-cog"></i></div>
</div>
</body>
</html>
