<body>
<div class="options">
<div class="head">
<span style="color: #ad4234;font-size: 18px;font-family: title;width: 50px;">SnowHouse</span>
<span style="color: #777;font-size: 12px;">More</span>
</div>
<div class="area">
<div class="option">
<img src="https://i.mcmod.cn/user/avatar/38/387989/387989_1741606149_lAky.png" />
<div><span>Part-1</span><span class="detail">Example text!</span></div>
</div>
<div class="option">
<img src="https://i.mcmod.cn/author/avatar/github/1760385617_VRBpGIvI.png" />
<div><span>Part-2</span><span class="detail">Example text!</span></div>
</div>
<div class="option">
<img src="https://i.mcmod.cn/user/avatar/90/903946/903946_1725612525_vmuG.png" />
<div><span>Part-3</span><span class="detail">Example text!</span></div>
</div>
<div class="option">
<img src="https://i.mcmod.cn/user/avatar/58/580486/580486_1744556447_nzpw.png" />
<div><span>Part-4</span><span class="detail">Example text!</span></div>
</div>
</div>
<div class="footer que">
<span>INPUT: </span><input type="text" />
</div>
<div class="footer">
<img id="selected" src="https://cdn.modrinth.com/data/cached_images/9513051c399c427a47a6a4fd3600f0e157ba8a42.png" />
<div class="btn">CONFIRM</div>
</div>
<div class="notice close">
<div>
<span>SUCCESS</span>
</div>
</div>
</div>
</body>
<style src="test.css"></style>
<style>
body>div {
display: flex;
position: relative;
left: 0;
}
.notice {
position: absolute;
width: 90px;
height: 55px;
border-radius: 4px;
background-color: #e97171;
box-shadow: 0 0 4px #44000000;
top: 80px;
transition: opacity 0.15s, transform 0.15s;
transform: scale(1);
z-index: -1;
}
.notice.close {
opacity: 0;
transform: scale(0.6);
}
.notice.open {
animation: notice-enter 0.3s;
}
.notice>div {
width: 80px;
height: 45px;
background-color: #fff;
box-shadow: 0 0 2px #28000000;
align-items: center;
justify-content: center;
font-family: lxgw;
position: relative;
background-image: url("2233.png");
background-size: cover;
border-image-source: url("border-diamonds.png");
border-image-slice: 30;
border-image-width: 4px;
}
.notice img {
width: 28px;
height: 16px;
position: absolute;
left: 5px;
bottom: -13px;
}
.footer {
flex-direction: row;
margin: 10px;
}
.que {
font-family: lxgw;
font-size: 16px;
color: #ad4234;
margin-bottom: 0px;
align-items: center;
}
input {
color: #ad4234;
border: unset;
border-bottom: 1px solid #ad4234;
background-color: unset;
width: 50px;
overflow: hidden;
height: unset;
font-size: 16px;
padding: 2px;
}
.options {
position: relative;
background-color: #e9e9e9;
width: 140px;
align-items: center;
padding-top: 3px;
color: #ad4234;
border: 1px solid #ad4234;
box-shadow: 0 0 4px #44000000;
animation: hue 3s infinite;
}
@keyframes hue {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
.area {
width: 140px;
align-items: center;
height: 97px;
overflow: hidden;
animation: blur 2s infinite;
}
@keyframes blur {
0% {
filter: blur(0px);
}
50% {
filter: blur(16px);
}
100% {
filter: blur(0px);
}
}
.head {
width: 110px;
border-bottom: 1px solid #ad4234;
padding: 1px;
margin: 3px;
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
}
.option {
width: 110px;
border-right: 2px solid #e97171;
border-radius: 4px;
background-color: #fff;
box-shadow: 0 0 2px #22000000;
margin: 2px;
flex-direction: row;
align-items: center;
overflow: hidden;
font-family: normal;
transition: opacity 0.2s;
font-size: 14px;
}
.option:hover {
border-right: 2px solid #ad4234;
}
.option>img {
width: 25px;
height: 25px;
border-radius: 0px;
transition: border-radius 0.2s;
}
.option>div {
height: 25px;
justify-content: space-evenly;
padding: 3px;
}
.detail {
font-size: 10px;
color: #777;
font-family: remark;
}
.btn {
color: #fff;
background-color: #e97171;
height: 15px;
padding: 2px;
align-items: center;
justify-content: center;
margin: 8px;
border-radius: 4px 0px 8px 2px;
border: 1px solid #e97171;
transition: color 0.2s, background-color 0.2s, transform 0.1s, height 0.2s;
transform: scale(1);
}
.btn:hover {
color: #e97171;
background-color: #fff;
box-shadow: 0 0 2px #22000000;
}
.btn:active {
transform: scale(0.85);
}
#selected {
width: 32px;
height: 32px;
border-radius: 16px;
border: 1px solid #ad4234;
box-shadow: 0 0 3px #22000000;
transform: rotate(0);
animation: rotate 4s infinite;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@keyframes notice-enter {
0% {
transform: scale(0.5);
}
70% {
transform: scale(1.2);
}
80% {
transform: scale(1.2);
}
100% {
transform: scale(1.0);
}
}
</style>
<script>
for (let element of document.querySelectorAll(".option")) {
element.addEventListener("mousedown", function (event) {
let img = event.currentTarget.querySelector("img").getAttribute("src");
document.querySelector("#selected").setAttribute("src", img);
});
}
document.querySelector(".btn").addEventListener("mousedown", e => {
window.setTimeout(_ => {
document.querySelector(".notice").setAttribute("class", "notice open");
}, 200);
});
document.body.addEventListener("mousedown", e => {
document.querySelector(".notice").setAttribute("class", "notice close");
});
</script>