algonoderewards/index.html at main · cryptomalgo/algonoderewards · 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
143
144
145
146
147
148
149
<!doctype html>
<html lang="en" class="h-full bg-gray-100">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <meta name="apple-mobile-web-app-title" content="AlgoNodeRewards" />
    <link rel="manifest" href="/site.webmanifest" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="keywords"
      content="algorand node rewards, algorand staking rewards, algorand node tracker, algo rewards heatmap, algorand validator earnings, node performance dashboard, algorand staking analytics"
    />
    <title>AlgoNodeRewards • Cool stats for your Algorand node</title>
    <meta
      name="description"
      content="Track your Algorand node rewards with ease. See total rewards, per-day distribution, min/max values, and more."
    />

    <!-- Canonical URL -->
    <link rel="canonical" href="https://algonoderewards.com/" />

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://algonoderewards.com/" />
    <meta
      property="og:title"
      content="AlgoNodeRewards • Cool stats for your Algorand node"
    />
    <meta
      property="og:description"
      content="Track your Algorand node rewards with ease. See total rewards, per-day distribution, min/max values, and more."
    />
    <meta
      property="og:image"
      content="https://algonoderewards.com/preview.png"
    />

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:url" content="https://algonoderewards.com/" />
    <meta
      name="twitter:title"
      content="AlgoNodeRewards • Cool stats for your Algorand node"
    />
    <meta
      name="twitter:description"
      content="Track your Algorand node rewards with ease. See total rewards, per-day distribution, min/max values, and more."
    />
    <meta
      name="twitter:image"
      content="https://algonoderewards.com/preview.png"
    />
    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
    <style>
      /* Loading spinner styles */
      #app-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background-color: rgb(249 250 251);
      }
      #app-loading .spinner {
        width: 48px;
        height: 48px;
        border: 4px solid rgb(229 231 235);
        border-top-color: rgb(99 102 241);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
      }
      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }
      /* Hide SEO content visually but keep for crawlers */
      .seo-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
      }
      /* Dark mode support */
      @media (prefers-color-scheme: dark) {
        #app-loading {
          background-color: rgb(17 24 39);
        }
        #app-loading .spinner {
          border-color: rgb(55 65 81);
          border-top-color: rgb(129 140 248);
        }
      }
    </style>
  </head>
  <body class="flex min-h-screen flex-col" id="root">
    <!-- Loading spinner shown immediately -->
    <div id="app-loading">
      <div class="spinner"></div>
    </div>

    <!-- SEO content - hidden from users but visible to crawlers -->
    <div class="seo-only">
      <header
        class="mx-auto w-full max-w-7xl px-2 sm:px-4 lg:divide-y lg:divide-gray-200 lg:px-8"
      >
        <div class="relative mr-auto flex h-16 justify-between">
          <div class="relative z-10 flex px-2 lg:px-0">
            <div class="flex items-center">
              <a href="/" class="flex items-center gap-2">
                <img
                  alt="Algo Node Rewards logo"
                  height="32"
                  width="32"
                  src="/logo.png"
                  class="h-8 w-auto"
                />
                <span class="text-lg">Algo Node Rewards</span>
              </a>
            </div>
          </div>
        </div>
      </header>
      <main class="grow">
        <div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
          <div class="relative p-6 text-center">
            <h1
              class="text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-7xl"
            >
              Cool stats for your Algorand staking rewards
            </h1>
            <p>
              Get your total node rewards and identify peak performance periods
              with our detailed rewards heatmap
            </p>
          </div>
        </div>
      </main>
    </div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>