아래 이미지 를 비슨하게라도 구현할수 있는 제이커리좀 추천 부탁드려요
본문
답변 1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mining Dashboard</title>
<style>
body{margin:0;padding:0;background:linear-gradient(135deg,#1a0033,#2d1b69,#0f0f23);font-family:Arial,sans-serif;color:#fff;min-height:100vh;overflow:hidden}
.dashboard{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;position:relative}
.dashboard::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="circuit" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 0 10 L 20 10 M 10 0 L 10 20" stroke="%23ffffff" stroke-width="0.1" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23circuit)"/></svg>') repeat;pointer-events:none}
.header{text-align:center;margin-bottom:50px;z-index:10}
.title{font-size:2.5em;font-weight:300;margin-bottom:10px;text-shadow:0 0 20px rgba(138,43,226,.8)}
.subtitle{font-size:1.2em;color:#a0a0ff;font-weight:300}
.gauge-container{position:relative;z-index:10;margin-bottom:50px}
.gauge-wrapper{position:relative;width:300px;height:300px;background:radial-gradient(circle,rgba(75,0,130,.3),rgba(25,0,50,.8));border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 50px rgba(138,43,226,.5),inset 0 0 50px rgba(75,0,130,.3)}
.gauge-wrapper::before{content:'';position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(45deg,#ff006e,#8338ec,#3a86ff,#06ffa5);border-radius:50%;z-index:-1;animation:rotate 3s linear infinite}
@keyframes rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.gauge{width:250px;height:250px}
.stats{display:flex;justify-content:center;z-index:10}
.stat-item{text-align:center;padding:20px 30px;background:rgba(138,43,226,.1);border-radius:15px;border:1px solid rgba(138,43,226,.3);backdrop-filter:blur(10px)}
.stat-label{font-size:.9em;color:#a0a0ff;margin-bottom:10px}
.stat-value{font-size:1.8em;font-weight:bold;color:#00ff88;text-shadow:0 0 10px rgba(0,255,136,.5)}
.bitcoin-icon{width:20px;height:20px;background:linear-gradient(45deg,#f7931e,#ffb347);border-radius:50%;display:inline-block;margin-right:8px;vertical-align:middle}
.floating-particles{position:absolute;width:100%;height:100%;overflow:hidden;pointer-events:none}
.particle{position:absolute;width:2px;height:2px;background:rgba(138,43,226,.6);border-radius:50%;animation:float 6s infinite linear}
@keyframes float{0%{transform:translateY(100vh) rotate(0deg);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-10px) rotate(360deg);opacity:0}}
</style>
</head>
<body>
<div class="floating-particles">
<!-- 파티클들이 동적으로 생성됩니다 -->
</div>
<div class="dashboard">
<div class="header">
<h1 class="title">Dashboard</h1>
<p class="subtitle">Personal Profit Analysis</p>
</div>
<div class="gauge-container">
<div class="gauge-wrapper">
<div id="hashrate-gauge" class="gauge"></div>
</div>
</div>
<div class="stats">
<div class="stat-item">
<div class="stat-label">Total BTC Mined</div>
<div class="stat-value">
<span class="bitcoin-icon"></span>
<span id="btc-mined">0.00490862</span>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/justgage/1.4.0/justgage.min.js"></script>
<script>
$(document).ready(function() {
// 게이지 초기화
var gauge = new JustGage({
id: "hashrate-gauge",
value: 72,
min: 0,
max: 100,
title: "HASH RATE",
label: "TH/S",
titleFontColor: "#ffffff",
titleFontFamily: "Arial",
titlePosition: "below",
valueFontColor: "#00ff88",
valueFontFamily: "Arial",
valueFontSize: 40,
labelFontColor: "#a0a0ff",
labelFontFamily: "Arial",
gaugeWidthScale: 0.6,
counter: true,
relativeGaugeSize: true,
formatNumber: true,
gaugeColor: "rgba(255,255,255,0.1)",
levelColors: ["#ff006e", "#8338ec", "#00ff88"],
startAnimationTime: 2000,
startAnimationType: ">",
refreshAnimationTime: 1000,
refreshAnimationType: "bounce",
donut: true,
donutStartAngle: 270,
reverse: false,
hideInnerShadow: true,
shadowOpacity: 0.2,
shadowSize: 5,
shadowVerticalOffset: 3,
showMinMax: true,
humanFriendly: false,
humanFriendlyDecimal: 0,
minTxt: "0",
maxTxt: "100"
});
});
</script>
</body>
</html>
답변을 작성하시기 전에 로그인 해주세요.
