Skip to content

Commit 7f1f776

Browse files
barbarapericrjan90
barbaraperic
and
rjan90
authored
style(fountain): new content and layout for the landing page (#13056)
* New content and layout for the landing page * Fix copy --------- Co-authored-by: Phi-rjan <orjan.roren@gmail.com>
1 parent e37d45f commit 7f1f776

File tree

2 files changed

+157
-71
lines changed

2 files changed

+157
-71
lines changed

‎cmd/lotus-fountain/site/index.html‎

Lines changed: 34 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,44 @@
55
<meta name="description" content="Get free tFIL and DataCap in the Lotus Fountain Faucet. Quickly request test tokens to your wallet, and start building or experimenting on the Filecoin testnet with ease.">
66
<meta charset="UTF-8">
77
<link rel="stylesheet" type="text/css" href="main.css">
8+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
89
</head>
910
<body>
10-
<div class="Index">
11-
<div class="Index-nodes">
12-
<div class="Index-node">
13-
LOTUS DEVNET FAUCET
11+
<div class="page-wrapper">
12+
<header>
13+
<h1>Filecoin Lotus Calibration Faucet</h1>
14+
<p>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.</p>
15+
</header>
16+
17+
<main class="cards">
18+
<div class="card">
19+
<div class="card-content">
20+
<h2>FILECOIN CALIBRATION FAUCET</h2>
21+
<p>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.</p>
22+
<p class="learn-more">Learn more about <a href="https://docs.filecoin.io/basics/what-is-filecoin" target="_blank">Filecoin basics</a> and <a href="https://docs.filecoin.io/networks/calibration" target="_blank">Calibration testnet</a>.</p>
23+
</div>
24+
<div class="button-container">
25+
<a href="funds.html" class="button">Send funds</a>
26+
</div>
1427
</div>
15-
<div class="Index-node">
16-
<a href="funds.html">Send Funds</a>
28+
29+
<div class="card">
30+
<div class="card-content">
31+
<h2>FILECOIN CALIBRATION FAUCET GRANT DATACAP</h2>
32+
<p>Test Filecoin Plus (Fil+) workflows with DataCap allocations. Understand verified deals, practice client onboarding, and simulate storage provider interactions in a safe environment.</p>
33+
<p>Explore more about <a href="https://docs.filecoin.io/basics/filecoin-plus" target="_blank">Filecoin Plus</a> and <a href="https://docs.filecoin.io/storage-provider/filecoin-deals" target="_blank">storage deals</a>.</p>
34+
</div>
35+
<div class="button-container">
36+
<a href="datacap.html" class="button">Grant DataCap</a>
37+
</div>
1738
</div>
18-
<div class="Index-node">
19-
LOTUS DEVNET GRANT DATACAP
20-
</div>
21-
<div class="Index-node">
22-
<a href="datacap.html">Grant DataCap</a>
23-
</div>
24-
</div>
25-
<div class="Index-footer">
26-
<div>
27-
<span style="float: right">Not dispensing real Filecoin tokens</span>
28-
</div>
29-
</div>
39+
</main>
40+
41+
<div class="divider"></div>
42+
43+
<footer>
44+
<p>Need help? Visit the <a href="https://filecoin.io/slack" target="_blank">Filecoin Slack</a> or <a href="https://docs.filecoin.io" target="_blank">documentation</a>.</p>
45+
</footer>
3046
</div>
3147
</body>
3248
</html>

‎cmd/lotus-fountain/site/main.css‎

Lines changed: 123 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,152 @@
1+
:root {
2+
--color-primary: #3f51b5;
3+
--color-primary-dark: #283593;
4+
--color-primary-darker: #1a237e;
5+
--color-text: #64748b;
6+
--color-background: #f8fafc;
7+
--color-border: #e2e8f0;
8+
--color-white: white;
9+
}
10+
11+
/* Base styles */
112
body {
2-
font-family: 'Helvetica Neue', sans-serif;
3-
background-color: #f0f0f0;
13+
font-family: 'Inter', system-ui, -apple-system, sans-serif;
14+
background-color: var(--color-background);
415
padding: 0;
516
margin: 0;
17+
line-height: 1.6;
618
}
719

8-
.Index {
9-
width: 100vw;
10-
height: 100vh;
11-
background-color: #f0f0f0;
12-
color: #333;
13-
font-family: 'Helvetica Neue', sans-serif;
20+
*, *::before, *::after {
21+
box-sizing: border-box;
22+
margin: 0;
23+
padding: 0;
24+
}
1425

15-
display: grid;
16-
grid-template-columns: auto 40vw auto;
17-
grid-template-rows: auto auto auto 3em;
18-
grid-template-areas:
19-
". . . ."
20-
". main main ."
21-
". . . ."
22-
"footer footer footer footer";
26+
p {
27+
color: var(--color-text);
2328
}
2429

25-
.Index-footer {
26-
background-color: #333;
27-
grid-area: footer;
30+
a {
31+
color: var(--color-primary);
32+
text-decoration: none;
33+
transition: color 0.2s;
2834
}
2935

30-
.Index-footer > div {
31-
padding-left: 0.7em;
32-
padding-top: 0.7em;
36+
a:hover {
37+
color: var(--color-primary-dark);
3338
}
3439

35-
.Index-nodes {
36-
grid-area: main;
40+
/* Layout */
41+
.page-wrapper {
42+
container-type: inline-size;
43+
max-width: 900px;
44+
margin: 0 auto;
45+
padding: 40px 20px;
46+
display: flex;
47+
flex-direction: column;
48+
gap: 4rem;
3749
}
3850

39-
.Index-node {
40-
margin: 5px;
41-
padding: 15px;
42-
background-color: #fff;
43-
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
51+
/* Header */
52+
header {
53+
text-align: center;
54+
display: flex;
55+
flex-direction: column;
56+
gap: 1.5rem;
4457
}
4558

46-
span {
47-
display: block;
48-
margin-bottom: 5px;
59+
header h1 {
60+
color: var(--color-primary-darker);
61+
font-size: 2.5rem;
4962
}
5063

51-
input[type="text"] {
52-
width: 100%;
53-
padding: 10px;
54-
border-radius: 5px;
55-
border: 1px solid #ccc;
56-
margin-bottom: 10px;
64+
header p {
65+
max-width: 600px;
66+
margin: 0 auto;
5767
}
5868

59-
button {
60-
background-color: #4c9aff;
61-
color: #fff;
62-
border: none;
63-
border-radius: 5px;
64-
padding: 10px 20px;
65-
font-size: 1.2em;
69+
/* Cards */
70+
.cards {
71+
display: flex;
72+
flex-direction: column;
73+
gap: 24px;
6674
}
6775

68-
button:hover {
69-
background-color: #4c7eff;
76+
.card {
77+
background-color: var(--color-white);
78+
border-radius: 16px;
79+
padding: 40px;
80+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);;
81+
display: grid;
82+
grid-template-columns: 2fr 1fr;
83+
gap: 32px;
84+
align-items: center;
7085
}
7186

72-
a:link {
73-
color: #333;
87+
.card-content {
88+
order: 1;
89+
display: flex;
90+
flex-direction: column;
91+
gap: 1.5rem;
7492
}
7593

76-
a:visited {
77-
color: #333;
94+
.card h2 {
95+
color: var(--color-primary-darker);
96+
font-size: 1.75rem;
97+
text-align: left;
7898
}
7999

80-
a:hover {
81-
color: #555;
100+
101+
/* Buttons */
102+
.button-container {
103+
order: 2;
104+
text-align: center;
105+
display: flex;
106+
justify-content: center;
107+
}
108+
109+
.button {
110+
background-color: var(--color-primary);
111+
color: var(--color-white);
112+
text-decoration: none;
113+
padding: 16px 32px;
114+
border-radius: 12px;
115+
font-weight: 600;
116+
transition: all 0.2s ease;
117+
max-width: 200px;
118+
width: 80%;
119+
flex-grow: 1;
82120
}
121+
122+
.button:hover {
123+
background-color: var(--color-primary-dark);
124+
color: var(--color-white);
125+
}
126+
127+
.divider {
128+
height: 1px;
129+
background-color: var(--color-border);
130+
}
131+
132+
/* Footer */
133+
footer {
134+
text-align: center;
135+
}
136+
137+
/* Responsive styles */
138+
@container (max-width: 700px) {
139+
.card {
140+
grid-template-columns: 1fr;
141+
}
142+
143+
.card h2 {
144+
font-size: 1.5rem;
145+
text-align: center;
146+
}
147+
148+
.button {
149+
width: 100%;
150+
}
151+
}
152+

0 commit comments

Comments
 (0)