Skip to content

Commit 2af420d

Browse files
gildesmaraisgildesmarais
committed
style and ux
1 parent e51265a commit 2af420d

File tree

10 files changed

+1154
-832
lines changed

10 files changed

+1154
-832
lines changed

‎Gemfile.lock‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
GIT
22
remote: https://github.com/html2rss/html2rss
3-
revision: 252289759287d5f0d7251a958d12a72ceebc27d6
3+
revision: 29660a74c2ac9330f60a99a1670241dde32a7222
44
branch: master
55
specs:
66
html2rss (0.17.0)
@@ -89,7 +89,7 @@ GEM
8989
faraday-net_http (3.4.1)
9090
net-http (>= 0.5.0)
9191
hashdiff (1.2.0)
92-
json (2.13.2)
92+
json (2.14.1)
9393
kramdown (2.5.1)
9494
rexml (>= 3.3.9)
9595
language_server-protocol (3.17.0.5)
@@ -98,25 +98,25 @@ GEM
9898
mime-types (3.7.0)
9999
logger
100100
mime-types-data (~> 3.2025, >= 3.2025.0507)
101-
mime-types-data (3.2025.0902)
101+
mime-types-data (3.2025.0916)
102102
net-http (0.6.0)
103103
uri
104104
nio4r (2.7.4)
105-
nokogiri (1.18.9-aarch64-linux-gnu)
105+
nokogiri (1.18.10-aarch64-linux-gnu)
106106
racc (~> 1.4)
107-
nokogiri (1.18.9-aarch64-linux-musl)
107+
nokogiri (1.18.10-aarch64-linux-musl)
108108
racc (~> 1.4)
109-
nokogiri (1.18.9-arm-linux-gnu)
109+
nokogiri (1.18.10-arm-linux-gnu)
110110
racc (~> 1.4)
111-
nokogiri (1.18.9-arm-linux-musl)
111+
nokogiri (1.18.10-arm-linux-musl)
112112
racc (~> 1.4)
113-
nokogiri (1.18.9-arm64-darwin)
113+
nokogiri (1.18.10-arm64-darwin)
114114
racc (~> 1.4)
115-
nokogiri (1.18.9-x86_64-darwin)
115+
nokogiri (1.18.10-x86_64-darwin)
116116
racc (~> 1.4)
117-
nokogiri (1.18.9-x86_64-linux-gnu)
117+
nokogiri (1.18.10-x86_64-linux-gnu)
118118
racc (~> 1.4)
119-
nokogiri (1.18.9-x86_64-linux-musl)
119+
nokogiri (1.18.10-x86_64-linux-musl)
120120
racc (~> 1.4)
121121
parallel (1.27.0)
122122
parser (3.3.8.0)
@@ -140,10 +140,10 @@ GEM
140140
rack-unreloader (2.1.0)
141141
rainbow (3.1.1)
142142
rake (13.2.1)
143-
regexp_parser (2.11.2)
143+
regexp_parser (2.11.3)
144144
reverse_markdown (3.0.0)
145145
nokogiri
146-
rexml (3.4.3)
146+
rexml (3.4.4)
147147
roda (3.95.0)
148148
rack
149149
rspec (3.13.1)
@@ -287,23 +287,23 @@ CHECKSUMS
287287
hashdiff (1.2.0) sha256=c984f13e115bfc9953332e8e83bd9d769cfde9944e2d54e07eb9df7b76e140b5
288288
html2rss (0.17.0)
289289
html2rss-configs (0.2.0)
290-
json (2.13.2) sha256=02e1f118d434c6b230a64ffa5c8dee07e3ec96244335c392eaed39e1199dbb68
290+
json (2.14.1) sha256=b08994d751e9f0697cc089243a3cfabf998da1d25e81e7dd0d0f84136ff74642
291291
kramdown (2.5.1) sha256=87bbb6abd9d3cebe4fc1f33e367c392b4500e6f8fa19dd61c0972cf4afe7368c
292292
language_server-protocol (3.17.0.5) sha256=fd1e39a51a28bf3eec959379985a72e296e9f9acfce46f6a79d31ca8760803cc
293293
lint_roller (1.1.0) sha256=2c0c845b632a7d172cb849cc90c1bce937a28c5c8ccccb50dfd46a485003cc87
294294
logger (1.7.0) sha256=196edec7cc44b66cfb40f9755ce11b392f21f7967696af15d274dde7edff0203
295295
mime-types (3.7.0) sha256=dcebf61c246f08e15a4de34e386ebe8233791e868564a470c3fe77c00eed5e56
296-
mime-types-data (3.2025.0902) sha256=5d8397fb76c075b483bed1d5ec64426d80aa6cd2133f3c0dc1dbb93aa85b1e1a
296+
mime-types-data (3.2025.0916) sha256=0b0e783644ac4801c4f2c3efe6a985b337cf9954dcdba79f7d9314a05bec061c
297297
net-http (0.6.0) sha256=9621b20c137898af9d890556848c93603716cab516dc2c89b01a38b894e259fb
298298
nio4r (2.7.4) sha256=d95dee68e0bb251b8ff90ac3423a511e3b784124e5db7ff5f4813a220ae73ca9
299-
nokogiri (1.18.9-aarch64-linux-gnu) sha256=5bcfdf7aa8d1056a7ad5e52e1adffc64ef53d12d0724fbc6f458a3af1a4b9e32
300-
nokogiri (1.18.9-aarch64-linux-musl) sha256=55e9e6ca46c4ad1715e313f407d8481d15be1e3b65d9f8e52ba1c124d01676a7
301-
nokogiri (1.18.9-arm-linux-gnu) sha256=fe611ae65880e445a9c0f650d52327db239f3488626df4173c05beafd161d46e
302-
nokogiri (1.18.9-arm-linux-musl) sha256=935605e14c0ba17da18d203922440bf6c0676c602659278d855d4622d756a324
303-
nokogiri (1.18.9-arm64-darwin) sha256=eea3f1f06463ff6309d3ff5b88033c4948d0da1ab3cc0a3a24f63c4d4a763979
304-
nokogiri (1.18.9-x86_64-darwin) sha256=e0d2deb03d3d7af8016e8c9df5ff4a7d692159cefb135cbb6a4109f265652348
305-
nokogiri (1.18.9-x86_64-linux-gnu) sha256=b52f5defedc53d14f71eeaaf990da66b077e1918a2e13088b6a96d0230f44360
306-
nokogiri (1.18.9-x86_64-linux-musl) sha256=e69359d6240c17e64cc9f43970d54f13bfc7b8cc516b819228f687e953425e69
299+
nokogiri (1.18.10-aarch64-linux-gnu) sha256=7fb87235d729c74a2be635376d82b1d459230cc17c50300f8e4fcaabc6195344
300+
nokogiri (1.18.10-aarch64-linux-musl) sha256=7e74e58314297cc8a8f1b533f7212d1999dbe2639a9ee6d97b483ea2acc18944
301+
nokogiri (1.18.10-arm-linux-gnu) sha256=51f4f25ab5d5ba1012d6b16aad96b840a10b067b93f35af6a55a2c104a7ee322
302+
nokogiri (1.18.10-arm-linux-musl) sha256=1c6ea754e51cecc85c30ee8ab1e6aa4ce6b6e134d01717e9290e79374a9e00aa
303+
nokogiri (1.18.10-arm64-darwin) sha256=c2b0de30770f50b92c9323fa34a4e1cf5a0af322afcacd239cd66ee1c1b22c85
304+
nokogiri (1.18.10-x86_64-darwin) sha256=536e74bed6db2b5076769cab5e5f5af0cd1dccbbd75f1b3e1fa69d1f5c2d79e2
305+
nokogiri (1.18.10-x86_64-linux-gnu) sha256=ff5ba26ba2dbce5c04b9ea200777fd225061d7a3930548806f31db907e500f72
306+
nokogiri (1.18.10-x86_64-linux-musl) sha256=0651fccf8c2ebbc2475c8b1dfd7ccac3a0a6d09f8a41b72db8c21808cb483385
307307
parallel (1.27.0) sha256=4ac151e1806b755fb4e2dc2332cbf0e54f2e24ba821ff2d3dcf86bf6dc4ae130
308308
parser (3.3.8.0) sha256=2476364142b307fa5a1b1ece44f260728be23858a9c71078e956131a75453c45
309309
prism (1.4.0) sha256=dc0e3e00e93160213dc2a65519d9002a4a1e7b962db57d444cf1a71565bb703e
@@ -318,9 +318,9 @@ CHECKSUMS
318318
rack-unreloader (2.1.0) sha256=18879cf2ced8ca21a01836bca706f65cce6ebe3f7d9d8a5157ce68ca62c7263a
319319
rainbow (3.1.1) sha256=039491aa3a89f42efa1d6dec2fc4e62ede96eb6acd95e52f1ad581182b79bc6a
320320
rake (13.2.1) sha256=46cb38dae65d7d74b6020a4ac9d48afed8eb8149c040eccf0523bec91907059d
321-
regexp_parser (2.11.2) sha256=5e5e9c1485ffd8de53ab1d2807affd81f617f72967dfc64fc75a69e2cbf0ff98
321+
regexp_parser (2.11.3) sha256=ca13f381a173b7a93450e53459075c9b76a10433caadcb2f1180f2c741fc55a4
322322
reverse_markdown (3.0.0) sha256=ab228386765a0259835873cd07054b62939c40f620c77c247eafaaa3b23faca4
323-
rexml (3.4.3) sha256=0e2a4602dd7f02979e29a0c6bc0f57a76ca99fc093eee17cf9a1cd32fa95a115
323+
rexml (3.4.4) sha256=19e0a2c3425dfbf2d4fc1189747bdb2f849b6c5e74180401b15734bc97b5d142
324324
roda (3.95.0) sha256=61fbc5f00f234f1b92c3eae7f4195c1310e1c70cb61dcebfe559201b554140d8
325325
rspec (3.13.1) sha256=b9f9a58fa915b8d94a1d6b3195fe6dd28c4c34836a6097015142c4a9ace72140
326326
rspec-core (3.13.4) sha256=f9da156b7b775c82610a7b580624df51a55102f8c8e4a103b98f5d7a9fa23958

‎frontend/src/components/Hero.astro‎

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
---
2+
// Hero.astro - Hero section component
3+
---
4+
5+
<div class="hero-section">
6+
<div class="hero-content">
7+
<h1 class="hero-title">
8+
<span class="hero-icon">📡</span>
9+
Turn Any Website Into an RSS Feed
10+
</h1>
11+
<p class="hero-subtitle">
12+
Instantly convert any website into a clean, reliable RSS feed. No coding required, works without
13+
JavaScript.
14+
</p>
15+
<div class="hero-features">
16+
<div class="feature-item">
17+
<span class="feature-icon">⚡</span>
18+
<span>Instant conversion</span>
19+
</div>
20+
<div class="feature-item">
21+
<span class="feature-icon">🔒</span>
22+
<span>Secure & private</span>
23+
</div>
24+
<div class="feature-item">
25+
<span class="feature-icon">📱</span>
26+
<span>Works everywhere</span>
27+
</div>
28+
</div>
29+
</div>
30+
</div>
31+
32+
<style>
33+
:root {
34+
/* Hero section variables */
35+
--hero-bg: linear-gradient(135deg, var(--sl-color-accent-low) 0%, var(--sl-color-bg) 100%);
36+
--hero-text: var(--sl-color-text);
37+
--hero-accent: var(--sl-color-accent);
38+
--hero-muted: var(--sl-color-text-accent);
39+
}
40+
41+
/* Hero Section - Specific to hero only */
42+
.hero-section {
43+
background: var(--hero-bg);
44+
border-radius: 16px;
45+
padding: 3rem 2rem;
46+
margin-bottom: 2rem;
47+
text-align: center;
48+
position: relative;
49+
overflow: hidden;
50+
animation: fadeInUp 0.8s ease-out;
51+
box-sizing: border-box;
52+
}
53+
54+
@keyframes fadeInUp {
55+
from {
56+
opacity: 0;
57+
transform: translateY(30px);
58+
}
59+
to {
60+
opacity: 1;
61+
transform: translateY(0);
62+
}
63+
}
64+
65+
.hero-section::before {
66+
content: "";
67+
position: absolute;
68+
top: 0;
69+
left: 0;
70+
right: 0;
71+
bottom: 0;
72+
background:
73+
radial-gradient(circle at 20% 80%, var(--sl-color-accent-low) 0%, transparent 50%),
74+
radial-gradient(circle at 80% 20%, var(--sl-color-accent-low) 0%, transparent 50%);
75+
opacity: 0.3;
76+
pointer-events: none;
77+
}
78+
79+
.hero-content {
80+
position: relative;
81+
z-index: 1;
82+
max-width: 800px;
83+
margin: 0 auto;
84+
}
85+
86+
.hero-title {
87+
font-size: 2.5rem;
88+
font-weight: 700;
89+
color: var(--hero-text);
90+
margin: 0 0 1rem 0;
91+
line-height: 1.2;
92+
display: flex;
93+
align-items: center;
94+
justify-content: center;
95+
gap: 1rem;
96+
flex-wrap: wrap;
97+
}
98+
99+
.hero-icon {
100+
font-size: 2.5rem;
101+
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
102+
}
103+
104+
.hero-subtitle {
105+
font-size: 1.25rem;
106+
color: var(--hero-muted);
107+
margin: 0 0 2rem 0;
108+
line-height: 1.5;
109+
max-width: 600px;
110+
margin-left: auto;
111+
margin-right: auto;
112+
}
113+
114+
.hero-features {
115+
display: flex;
116+
justify-content: center;
117+
gap: 2rem;
118+
flex-wrap: wrap;
119+
margin-top: 2rem;
120+
}
121+
122+
.feature-item {
123+
display: flex;
124+
align-items: center;
125+
gap: 0.5rem;
126+
padding: 0.75rem 1.5rem;
127+
background: var(--sl-color-bg);
128+
border: 1px solid var(--sl-color-hairline);
129+
border-radius: 50px;
130+
font-weight: 500;
131+
color: var(--hero-text);
132+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
133+
transition:
134+
transform 0.2s,
135+
box-shadow 0.2s;
136+
}
137+
138+
.feature-item:hover {
139+
transform: translateY(-2px);
140+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
141+
}
142+
143+
.feature-icon {
144+
font-size: 1.25rem;
145+
}
146+
147+
/* Responsive design for hero */
148+
@media (max-width: 768px) {
149+
.hero-title {
150+
font-size: 2rem;
151+
flex-direction: column;
152+
gap: 0.5rem;
153+
}
154+
155+
.hero-subtitle {
156+
font-size: 1.1rem;
157+
}
158+
159+
.hero-features {
160+
gap: 1rem;
161+
}
162+
163+
.feature-item {
164+
padding: 0.5rem 1rem;
165+
font-size: 0.9rem;
166+
}
167+
168+
.hero-section {
169+
padding: 2rem 1rem;
170+
}
171+
}
172+
173+
@media (min-width: 768px) {
174+
.hero-title {
175+
font-size: 3rem;
176+
}
177+
178+
.hero-subtitle {
179+
font-size: 1.375rem;
180+
}
181+
}
182+
183+
@media (min-width: 1024px) {
184+
.hero-section {
185+
padding: 4rem 3rem;
186+
}
187+
188+
.hero-title {
189+
font-size: 3.5rem;
190+
}
191+
192+
.hero-features {
193+
gap: 3rem;
194+
}
195+
196+
.feature-item {
197+
padding: 1rem 2rem;
198+
font-size: 1rem;
199+
}
200+
}
201+
</style>

‎frontend/src/components/XmlDisplay.astro‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,25 @@ import "../styles/forms.css";
1111
<!-- XML Feed Display -->
1212
<div class="xml-feed-display" id="xml-feed-display" style="display: none;">
1313
<div class="xml-feed-header">
14-
<h4>📄 Raw XML Feed</h4>
15-
<button type="button" class="xml-toggle" id="xml-toggle">Show XML</button>
14+
<h4>📄 RSS Feed Preview</h4>
15+
<div class="xml-feed-actions">
16+
<a href="#" id="open-feed-link" target="_blank" rel="noopener" class="open-feed-button"
17+
>🔗 Open in New Tab</a
18+
>
19+
<button type="button" class="xml-toggle" id="xml-toggle">Show Raw XML</button>
20+
</div>
1621
</div>
1722
<div class="xml-feed-content" id="xml-feed-content" style="display: none;">
23+
<iframe
24+
id="rss-iframe"
25+
src=""
26+
width="100%"
27+
height="800"
28+
frameborder="0"
29+
style="border: 1px solid var(--form-border); border-radius: var(--form-radius); min-height: 600px;"
30+
></iframe>
31+
</div>
32+
<div class="xml-raw-content" id="xml-raw-content" style="display: none;">
1833
<pre><code id="rss-content" /></pre>
1934
</div>
2035
</div>

0 commit comments

Comments
 (0)