Skip to content

Commit ba50f9d

Browse files
ddraykoddrayko
committed
feat: add rough-notation highlight on features, swap sections order
- Add highlight annotation on 'free hosting' in Features section - Swap Supported Technologies and Free Hosting Features sections - Clean up duplicate tech-grid markup
1 parent 2e53bdd commit ba50f9d

2 files changed

Lines changed: 93 additions & 81 deletions

File tree

‎site/index.html‎

Lines changed: 70 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -313,76 +313,6 @@ <h1 class="hero-title">
313313

314314
<div class="section-divider"></div>
315315

316-
<!-- ===== FEATURES ===== -->
317-
<section class="section features" id="features">
318-
<div class="container">
319-
<div class="section-header">
320-
<span class="section-tag">Free Hosting Features</span>
321-
<h2 class="section-title">Everything you need for<br /><span class="gradient-text">free hosting</span></h2>
322-
<p class="section-subtitle">A robust free hosting platform powered by Hydrodactyl to host your projects without limits.</p>
323-
</div>
324-
325-
<div class="features-grid">
326-
<div class="feature-card feature-card--large" id="feat-free">
327-
<div class="feature-icon">
328-
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
329-
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/>
330-
<path d="M9 11l3 3 5-5"/>
331-
</svg>
332-
</div>
333-
<h3 class="feature-title">Completely Free Hosting</h3>
334-
<p class="feature-desc">One single plan, $0 forever. No limited trials, no surprises. Create your free server and deploy instantly.</p>
335-
<div class="feature-tag">Single Plan</div>
336-
</div>
337-
338-
<div class="feature-card" id="feat-instant">
339-
<div class="feature-icon">
340-
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
341-
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
342-
</svg>
343-
</div>
344-
<h3 class="feature-title">Instant Free Server Deployment</h3>
345-
<p class="feature-desc">Your free hosting server is ready in seconds. Upload your files and start immediately.</p>
346-
</div>
347-
348-
<div class="feature-card" id="feat-bandwidth">
349-
<div class="feature-icon">
350-
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
351-
<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
352-
</svg>
353-
</div>
354-
<h3 class="feature-title">400+ Mbit/s Bandwidth</h3>
355-
<p class="feature-desc">Enjoy blazing fast connectivity with over 400 Mbit/s of available bandwidth on every free hosting server.</p>
356-
<div class="feature-tag">High Speed</div>
357-
</div>
358-
359-
<div class="feature-card" id="feat-console">
360-
<div class="feature-icon">
361-
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
362-
<rect x="2" y="2" width="20" height="20" rx="3"/>
363-
<path d="M7 8l4 4-4 4M13 16h4"/>
364-
</svg>
365-
</div>
366-
<h3 class="feature-title">Free Real-time Console</h3>
367-
<p class="feature-desc">Access your free server's console, manage processes, and monitor resources live via Hydrodactyl.</p>
368-
</div>
369-
370-
<div class="feature-card" id="feat-uptime">
371-
<div class="feature-icon">
372-
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
373-
<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
374-
</svg>
375-
</div>
376-
<h3 class="feature-title">Free Uptime Monitoring</h3>
377-
<p class="feature-desc">Native support for Uptime Kuma to monitor the availability of your free hosted services 24/7.</p>
378-
</div>
379-
380-
</div>
381-
</div>
382-
</section>
383-
384-
<div class="section-divider"></div>
385-
386316
<!-- ===== SUPPORTED TECH ===== -->
387317
<section class="section supported" id="supported">
388318
<div class="container">
@@ -508,6 +438,76 @@ <h4 class="tech-name">MongoDB</h4>
508438

509439
<div class="section-divider"></div>
510440

441+
<!-- ===== FEATURES ===== -->
442+
<section class="section features" id="features">
443+
<div class="container">
444+
<div class="section-header">
445+
<span class="section-tag">Free Hosting Features</span>
446+
<h2 class="section-title">Everything you need for<br /><span class="gradient-text" id="features-highlight">free hosting</span></h2>
447+
<p class="section-subtitle">A robust free hosting platform powered by Hydrodactyl to host your projects without limits.</p>
448+
</div>
449+
450+
<div class="features-grid">
451+
<div class="feature-card feature-card--large" id="feat-free">
452+
<div class="feature-icon">
453+
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
454+
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/>
455+
<path d="M9 11l3 3 5-5"/>
456+
</svg>
457+
</div>
458+
<h3 class="feature-title">Completely Free Hosting</h3>
459+
<p class="feature-desc">One single plan, $0 forever. No limited trials, no surprises. Create your free server and deploy instantly.</p>
460+
<div class="feature-tag">Single Plan</div>
461+
</div>
462+
463+
<div class="feature-card" id="feat-instant">
464+
<div class="feature-icon">
465+
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
466+
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
467+
</svg>
468+
</div>
469+
<h3 class="feature-title">Instant Free Server Deployment</h3>
470+
<p class="feature-desc">Your free hosting server is ready in seconds. Upload your files and start immediately.</p>
471+
</div>
472+
473+
<div class="feature-card" id="feat-bandwidth">
474+
<div class="feature-icon">
475+
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
476+
<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
477+
</svg>
478+
</div>
479+
<h3 class="feature-title">400+ Mbit/s Bandwidth</h3>
480+
<p class="feature-desc">Enjoy blazing fast connectivity with over 400 Mbit/s of available bandwidth on every free hosting server.</p>
481+
<div class="feature-tag">High Speed</div>
482+
</div>
483+
484+
<div class="feature-card" id="feat-console">
485+
<div class="feature-icon">
486+
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
487+
<rect x="2" y="2" width="20" height="20" rx="3"/>
488+
<path d="M7 8l4 4-4 4M13 16h4"/>
489+
</svg>
490+
</div>
491+
<h3 class="feature-title">Free Real-time Console</h3>
492+
<p class="feature-desc">Access your free server's console, manage processes, and monitor resources live via Hydrodactyl.</p>
493+
</div>
494+
495+
<div class="feature-card" id="feat-uptime">
496+
<div class="feature-icon">
497+
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
498+
<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
499+
</svg>
500+
</div>
501+
<h3 class="feature-title">Free Uptime Monitoring</h3>
502+
<p class="feature-desc">Native support for Uptime Kuma to monitor the availability of your free hosted services 24/7.</p>
503+
</div>
504+
505+
</div>
506+
</div>
507+
</section>
508+
509+
<div class="section-divider"></div>
510+
511511
<!-- ===== TERMINAL DEMO ===== -->
512512
<section class="section terminal-section">
513513
<div class="container">

‎site/script.js‎

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -354,17 +354,29 @@ document.querySelectorAll('a[href^="#"]').forEach(a => {
354354
/* ---------- ROUGH NOTATION UNDERLINE ---------- */
355355
(function () {
356356
const heroHighlight = document.getElementById('hero-highlight');
357-
if (!heroHighlight || typeof RoughNotation === 'undefined') return;
358-
359-
const annotation = RoughNotation.annotate(heroHighlight, {
360-
type: 'underline',
361-
color: '#ee8132',
362-
strokeWidth: 2.5,
363-
padding: 4,
364-
iterations: 2,
365-
animationDuration: 800
366-
});
367-
annotation.show();
357+
if (heroHighlight && typeof RoughNotation !== 'undefined') {
358+
const annotation = RoughNotation.annotate(heroHighlight, {
359+
type: 'underline',
360+
color: '#ee8132',
361+
strokeWidth: 2.5,
362+
padding: 4,
363+
iterations: 2,
364+
animationDuration: 800
365+
});
366+
annotation.show();
367+
}
368+
369+
const featuresHighlight = document.getElementById('features-highlight');
370+
if (featuresHighlight && typeof RoughNotation !== 'undefined') {
371+
const highlight = RoughNotation.annotate(featuresHighlight, {
372+
type: 'highlight',
373+
color: 'rgba(238, 129, 50, 0.2)',
374+
strokeWidth: 12,
375+
padding: 2,
376+
animationDuration: 600
377+
});
378+
highlight.show();
379+
}
368380
})();
369381

370382

0 commit comments

Comments
 (0)