diff --git a/cmd/lotus-fountain/site/index.html b/cmd/lotus-fountain/site/index.html index ff63c2cba15..8bb06cd55e1 100644 --- a/cmd/lotus-fountain/site/index.html +++ b/cmd/lotus-fountain/site/index.html @@ -5,28 +5,44 @@ + -
-
-
- LOTUS DEVNET FAUCET +
+
+

Filecoin Lotus Calibration Faucet

+

Welcome to the official Filecoin Lotus Calibration testnet faucet. This service provides both testnet FIL and DataCap for developers and testers working within the Filecoin ecosystem.

+
+ +
+
+
+

FILECOIN CALIBRATION FAUCET

+

Request testnet FIL tokens to experiment with storage deals, smart contracts, and blockchain interactions. These tokens have no real-world value, making them perfect for risk-free development and testing.

+

Learn more about Filecoin basics and Calibration testnet.

+
+
+ Send funds +
-
- Send Funds + +
+
+

FILECOIN CALIBRATION FAUCET GRANT DATACAP

+

Test Filecoin Plus (Fil+) workflows with DataCap allocations. Understand verified deals, practice client onboarding, and simulate storage provider interactions in a safe environment.

+

Explore more about Filecoin Plus and storage deals.

+
+
+ Grant DataCap +
-
- LOTUS DEVNET GRANT DATACAP -
-
- Grant DataCap -
-
-
-
- Not dispensing real Filecoin tokens -
-
+
+ +
+ +
diff --git a/cmd/lotus-fountain/site/main.css b/cmd/lotus-fountain/site/main.css index a1d3070c204..1edb4c47aa2 100644 --- a/cmd/lotus-fountain/site/main.css +++ b/cmd/lotus-fountain/site/main.css @@ -1,82 +1,152 @@ +:root { + --color-primary: #3f51b5; + --color-primary-dark: #283593; + --color-primary-darker: #1a237e; + --color-text: #64748b; + --color-background: #f8fafc; + --color-border: #e2e8f0; + --color-white: white; +} + +/* Base styles */ body { - font-family: 'Helvetica Neue', sans-serif; - background-color: #f0f0f0; + font-family: 'Inter', system-ui, -apple-system, sans-serif; + background-color: var(--color-background); padding: 0; margin: 0; + line-height: 1.6; } -.Index { - width: 100vw; - height: 100vh; - background-color: #f0f0f0; - color: #333; - font-family: 'Helvetica Neue', sans-serif; +*, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} - display: grid; - grid-template-columns: auto 40vw auto; - grid-template-rows: auto auto auto 3em; - grid-template-areas: - ". . . ." - ". main main ." - ". . . ." - "footer footer footer footer"; +p { + color: var(--color-text); } -.Index-footer { - background-color: #333; - grid-area: footer; +a { + color: var(--color-primary); + text-decoration: none; + transition: color 0.2s; } -.Index-footer > div { - padding-left: 0.7em; - padding-top: 0.7em; +a:hover { + color: var(--color-primary-dark); } -.Index-nodes { - grid-area: main; +/* Layout */ +.page-wrapper { + container-type: inline-size; + max-width: 900px; + margin: 0 auto; + padding: 40px 20px; + display: flex; + flex-direction: column; + gap: 4rem; } -.Index-node { - margin: 5px; - padding: 15px; - background-color: #fff; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); +/* Header */ +header { + text-align: center; + display: flex; + flex-direction: column; + gap: 1.5rem; } -span { - display: block; - margin-bottom: 5px; +header h1 { + color: var(--color-primary-darker); + font-size: 2.5rem; } -input[type="text"] { - width: 100%; - padding: 10px; - border-radius: 5px; - border: 1px solid #ccc; - margin-bottom: 10px; +header p { + max-width: 600px; + margin: 0 auto; } -button { - background-color: #4c9aff; - color: #fff; - border: none; - border-radius: 5px; - padding: 10px 20px; - font-size: 1.2em; +/* Cards */ +.cards { + display: flex; + flex-direction: column; + gap: 24px; } -button:hover { - background-color: #4c7eff; +.card { + background-color: var(--color-white); + border-radius: 16px; + padding: 40px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);; + display: grid; + grid-template-columns: 2fr 1fr; + gap: 32px; + align-items: center; } -a:link { - color: #333; +.card-content { + order: 1; + display: flex; + flex-direction: column; + gap: 1.5rem; } -a:visited { - color: #333; +.card h2 { + color: var(--color-primary-darker); + font-size: 1.75rem; + text-align: left; } -a:hover { - color: #555; + +/* Buttons */ +.button-container { + order: 2; + text-align: center; + display: flex; + justify-content: center; +} + +.button { + background-color: var(--color-primary); + color: var(--color-white); + text-decoration: none; + padding: 16px 32px; + border-radius: 12px; + font-weight: 600; + transition: all 0.2s ease; + max-width: 200px; + width: 80%; + flex-grow: 1; } + +.button:hover { + background-color: var(--color-primary-dark); + color: var(--color-white); +} + +.divider { + height: 1px; + background-color: var(--color-border); +} + +/* Footer */ +footer { + text-align: center; +} + +/* Responsive styles */ +@container (max-width: 700px) { + .card { + grid-template-columns: 1fr; + } + + .card h2 { + font-size: 1.5rem; + text-align: center; + } + + .button { + width: 100%; + } +} +