← back to Model Arena
data/artifacts/176d578251e3/hf-qwen-coder-32b.html
32 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radial Spring Menu</title>
<style>
body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; margin: 0; }
.menu { position: relative; width: 64px; height: 64px; cursor: pointer; }
.icon { position: absolute; bottom: 28px; left: 28px; transform-origin: center bottom; transition: transform 0.3s ease-out, background-color 0.15s; width: 32px; height: 32px; border-radius: 50%; background-color: #3498db; }
.icon:hover { background-color: #2980b9; }
.center { position: absolute; bottom: 0; left: 0; width: 64px; height: 64px; background-color: #e74c3c; border-radius: 50%; transition: transform 0.1s ease-out; }
.open .icon:nth-child(1) { transform: rotate(-60deg) translate(80px); }
.open .icon:nth-child(2) { transform: rotate(-30deg) translate(80px); }
.open .icon:nth-child(3) { transform: translate(95px); }
.open .icon:nth-child(4) { transform: rotate(30deg) translate(80px); }
.open .icon:nth-child(5) { transform: rotate(60deg) translate(80px); }
.open .center { transform: scale(1.2); }
</style>
</head>
<body>
<div class="menu" onclick="this.classList.toggle('open')">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="center"></div>
</div>
<script></script>
</body>
</html>