validator_queue_monitoring/index.html at main · MikeSylphDapps/validator_queue_monitoring · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <title>Ethereum Validator Queue Status</title>
    <style>
        html {
            background-color: #f9f9f9;
        }
        body {
            font-family: system-ui, Helvetica, Arial, sans;
            margin: 0;
            padding: 0px;
            text-align: center;
            color: #6b68a6;
            padding: 20px;
            overflow-x: hidden;
        }
        a {
            color: #6b68a6;
        }
        h1 {
            text-align: center;
            margin: 10px 0 20px 0;
            padding: 0;
        }
        h2 {
            font-size: 20px;
            margin: 0 0 20px 0;
            padding: 0;
        }
        .container {
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
        }
        .boxes {
            display: flex;
            justify-content: center;
            gap: 10px;
        }
        .box {
            background-color: #e1d2fb;
            border: 2px solid #b5b2de;
            color: #6b68a6;
            padding: 20px;
            text-align: center;
            flex-shrink: 0;
            z-index: 2;
        }
        .count {
            font-size: 30px;
            text-align: center;
        }
        .count-label {
            margin-bottom: 1em;
        }
        .time {
            font-size: 18px;
        }
        svg {
            width: 500px;
            height: 180px;
            position: relative;
            top: 0px;
            z-index: 1;
            margin-bottom: 20px;
        }
        @media screen and (max-width: 850px) {
            .boxes {
                flex-direction: column;
                align-items: center;
            }
            .box {
                width: 270px;
                color: #8e89f1;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Ethereum Validator Queue Status</h1>
        <div class="boxes">
            <div class="box">
                <h2>Pending Activations</h2>
                <div class="count">75,611</div>
                <div class="count-label">validators</div>
                <div class="time-label">Estimated wait time:</div>
                <div class="time">37 days, 8 hours, and 7 minutes</div>
            </div>
            <div class="box">
                <h2>Active validators</h2>
                <div class="count">594,503</div>
                <div class="count-label">validators</div>
            </div>
            <div class="box">
                <h2>Pending Withdrawals</h2>
                <div class="count">0</div>
                <div class="count-label">validators</div>
                <div class="time-label">Estimated wait time:</div>
                <div class="time">0 minutes</div>
            </div>
        </div>
        <svg>
            <linearGradient id="g1" x1="100%" y1="100%" x2="100%" y2="0%">
                <stop stop-color="#E1D2FB" stop-opacity="1" offset="0"/>
                <stop stop-color="#E1D2FB" stop-opacity="0" offset="0.75"/>
            </linearGradient>
            <linearGradient id="g2" x1="0%" y1="50%" x2="100%" y2="50%">
                <stop stop-color="#a7bfbd" offset="0"/>
                <stop stop-color="#4c7471" offset="0.5"/>
                <stop stop-color="#a7bfbd" offset="1"/>
            </linearGradient>
            <linearGradient id="g3" x1="100%" y1="100%" x2="100%" y2="0%">
                <stop stop-color="#ae92db" offset="0"/>
                <stop stop-color="#E1D2FB" offset="1"/>
            </linearGradient>
            <rect x="160" y="120" width="180" height="10" stroke="#4c7471" fill="url(#g2)" />
            <rect x="210" y="130" width="10" height="40" fill="#a7bfbd" />
            <rect x="280" y="130" width="10" height="40" fill="#a7bfbd" />
            <rect x="200" y="165" width="100" height="10" stroke="#4c7471" fill="#a7bfbd" />
            <rect x="220" y="170" width="60" height="8" stroke="#444" fill="#666" />
            <rect x="223" y="172" width="6" height="4" fill="#a3f5f9" />
            <path d="m -6 16 L -51 -18 a 100 100 0 0 1 101 0 l -44 34 z" fill="url(#g1)" transform="translate(250 100) scale(4)" />
            <polygon points="0 -40, 30 0, 0 40, -30 0" fill="url(#g3)" stroke="#9391b6" stroke-width="2" transform="translate(230 110) scale(0.25)"/>
            <polygon points="0 -60, 30 0, 0 90, -30 0" fill="url(#g3)" stroke="#9391b6" stroke-width="2" transform="translate(250 115) scale(0.35)"/>
            <polygon points="0 -40, 30 0, 0 40, -30 0" fill="url(#g3)" stroke="#9391b6" stroke-width="2" transform="translate(275 120) scale(0.25)"/>
            <polygon points="0 -40, 30 0, 0 40, -30 0" fill="url(#g3)" stroke="#9391b6" stroke-width="2" transform="translate(235 130) scale(0.2)"/>
            <polygon points="0 -40, 30 0, 0 40, -30 0" fill="url(#g3)" stroke="#9391b6" stroke-width="2" transform="translate(265 105) scale(0.2)"/>
        </svg>
        <footer>
            <p>Made with &#128156; for waiting in line (so long as I'm in it with you) by <a href="https://twitter.com/MikeSylphDapps" target="_blank" rel="noreferrer">mike.sylphdapps.eth</a>.</p>
            <p>Forked from gonlad-x's <a href="https://validator-queue-monitoring.vercel.app/" target="_blank" rel="noreferrer">validator-queue-monitoring</a>.</p>
            <p>You can see my other work at <a href="https://sylphdapps.com/" target="_blank" rel="noreferrer">Sylph Dapps</a>.</p>
        </footer>
    </div>
</body>
</html>