아래 이미지 를 비슨하게라도 구현할수 있는 제이커리좀 추천 부탁드려요 채택완료

Mining Dashboard



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,') 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}}







        

                

        

        

                

                        Dashboard

                        Personal Profit Analysis

                

                

                        

                                

                        

                

                

                        

                                Total BTC Mined

                                

                                        

                                        0.00490862

                                

                        

                

        

        

        

        

        

                $(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"

                        });

                });