Skip to content

Revisi : Memperbaiki Landing Page #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Davin-adesta wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Revisi : Memperbaiki Landing Page #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e817064
Revisi : Memperbaiki Landing Page
Aug 13, 2025
b9b7da7
Revisi2
Aug 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added foto/icons8-apple-inc-50.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added foto/icons8-linux-50.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added foto/icons8-windows-50.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added foto/photo_6114138241281147881_y.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
121 changes: 51 additions & 70 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,16 @@
<body>
<header class="header">
<nav class="nav-container">
<a href="#" class="logo">
<a href="index.html" class="logo">
<img src="foto/logo (1).png" alt="Tabular Logo">
<span class="logo-text">Tabular</span>
</a>
<ul class="nav-menu" id="navMenu">
<li><a href="#fitur" class="nav-link">Fitur</a></li>
<li><a href="#database" class="nav-link">Support</a></li>
<li><a href="#demo" class="nav-link">Demo</a></li>
<li><a href="#kontak" class="nav-link">Kontak</a></li>
<li><a href="#docs" class="nav-link">Docs</a></li>
<li><a href="#download" class="nav-link">Download</a></li>
<li><a href="#about" class="nav-link">About</a></li>
</ul>
<div class="menu-toggle" id="menuToggle">
<span></span>
Expand All @@ -36,11 +38,13 @@
</header>
<section class="hero">
<div class="hero-content">
<h1 id="heroTitle">Database Management Made Easy</h1>
<h1 id="heroTitle">Tabular Make Easy For Analytics Database</h1>
<p id="heroDesc">Modern, native, and friendly GUI tool for relational databases: MySQL, PostgreSQL, SQLite & more.</p>
<div class="cta-buttons">
<button class="cta-button primary" id="ctaButtonMac">Download for Mac</button>
<button class="cta-button secondary" id="ctaButtonOther">Other Platforms</button>
<button class="cta-button primary" id="ctaButtonMac" onclick="window.location.href='https://github.com/tabular-id/tabular/releases/download/v0.2.3/Tabular-0.2.3.dmg'">Download for Mac</button>
<a href="#download">
<button class="cta-button secondary" id="ctaButtonOther">Other Platforms</button>
</a>
</div>
</div>
<div class="hero-image">
Expand Down Expand Up @@ -115,12 +119,6 @@ <h4>MySQL</h4>
</div>
<h4>PostgreSQL</h4>
</div>
<div class="db-card" data-db="MongoDB">
<div class="db-icon">
<img src="foto/mongodb.png" alt="">
</div>
<h4>MongoDB</h4>
</div>
<div class="db-card" data-db="SQLite">
<div class="db-icon">
<img src="foto/sqlite.png" alt="SQLite">
Expand All @@ -133,63 +131,21 @@ <h4>SQLite</h4>
</div>
<h4>Redis</h4>
</div>
<div class="db-card" data-db="Oracle">
<div class="db-icon">
<img src="foto/oracle.png" alt="Oracle">
</div>
<h4>Oracle</h4>
</div>
<div class="db-card" data-db="microsoftsqlserver">
<div class="db-icon">
<img src="foto/microsoftsqlserver.png" alt="microsoftsqlserver">
</div>
<h4>SQL Server</h4>
</div>
<div class="db-card" data-db="mariadb">
<div class="db-icon">
<img src="foto/mariadb.png" alt="mariadb">
</div>
<h4>Maria DB</h4>
</div>
<div class="db-card" data-db="Amazon">
<div class="db-card" data-db="MongoDB">
<div class="db-icon">
<img src="foto/amazonredshift.png" alt="Amazon">
</div>
<h4>Amazon Red Shift</h4>
</div>
<div class="db-card" data-db="Cockroach">
<div class="db-icon">
<img src="foto/cockroachdb.png" alt="Cockroach">
</div>
<h4>Cockroach DB</h4>
</div>
<div class="db-card" data-db="Cassandra">
<div class="db-icon">
<img src="foto/cassandra.png" alt="Cassandra">
</div>
<h4>Cassandra</h4>
</div>
<div class="db-card" data-db="bigquery">
<div class="db-icon">
<img src="foto/bigquery.png" alt="bigquery">
</div>
<h4>Big Query</h4>
</div>
<div class="db-card" data-db="clickhouse">
<div class="db-icon">
<img src="foto/clickhouse.png" alt="clickhouse">
</div>
<h4>Click House</h4>
</div>
<div class="db-card" data-db="Turso">
<div class="db-icon">
<img src="foto/tursodb.png" alt="Turso">
<img src="foto/mongodb.png" alt="">
</div>
<h4>Turso DB</h4>
<h4>MongoDB Coming Soon</h4>
</div>
</div>
</section>
<section class="screenshots-section" id="demo">
<section class="screenshots-section" id="docs">
<h2 class="section-title">See Tabular in Action</h2>
<div class="screenshots-grid">
<div class="screenshot-card">
Expand All @@ -208,7 +164,7 @@ <h3>Query Management Made Simple</h3>
<p>This view shows a list of SQL query files neatly organized into folders such as ADMIN, DATA, and VOLT. Each file contains ready-to-execute SQL commands for various database needs.</p>
</div>
<div class="screenshot-card">
<img src="foto/photo_6102487347921797599_y.jpg" alt="Quick Actions for Your Data" onclick="openLightbox(this.src)">
<img src="foto/photo_6114138241281147881_y.jpg" alt="Quick Actions for Your Data" onclick="openLightbox(this.src)">
<h3>Quick Actions for Your Data</h3>
<p>This view shows the right-click feature on table data, which allows users to copy cells, copy rows as CSV, or directly export to a CSV/XLSX file.</p>
</div>
Expand All @@ -217,19 +173,44 @@ <h3>Quick Actions for Your Data</h3>
<img src="" alt="Preview">
</div>
</section>
<footer class="footer" id="kontak">
<div class="footer-content">
<div class="social-links">
<a href="#" class="social-link">📱</a>
<a href="#" class="social-link">💬</a>
<a href="#" class="social-link">📧</a>
<a href="#" class="social-link">🐙</a>
<section id="download">
<h2>Download for Your Platform</h2>
<div class="platforms">
<div class="platform">
<img src="foto/icons8-windows-50.png" alt="Windows">
<h3>Windows</h3>
<button class="platform-button primary" onclick="window.location.href='https://github.com/tabular-id/tabular/releases/download/v0.2.2/Tabular-0.2.2.exe'">Download</button>
</div>
<div class="platform">
<img src="foto/icons8-apple-inc-50.png" alt="macOS">
<h3>macOS</h3>
<button class="platform-button primary" onclick="window.location.href='https://github.com/tabular-id/tabular/releases/download/v0.2.3/Tabular-0.2.3.dmg'">Download</button>
</div>
<p>&copy; 2025 Tabular. Dibuat dengan ❤️ untuk generasi digital natives.</p>
<p style="margin-top: 0.5rem; opacity: 0.8;">Open source • Community driven • Privacy focused</p>
<div class="platform">
<img src="foto/icons8-linux-50.png" alt="Linux">
<h3>Linux</h3>
<button class="platform-button primary" onclick="window.location.href=''">Download</button>
</div>
</div>
</section>

<section class="about-tabular" id="kontak">
<div class="logo">
<img src="foto/logo (1).png" alt="Tabular Logo">
</div>
<h2>About Tabular</h2>
<p>Your SQL Editor, Forged with Rust: Fast, Safe, Efficient.</p>
<div class="version-info">
Version 0.2.2<br>
Built with ❤️ using Rust
</div>
</footer>
<script src="main.js"></script> <script>function openLightbox(src) {
<a href="https://github.com/tabular-id/tabular" class="github-link">https://github.com/tabular-id/tabular</a>
<p class="credit">Credit: Jayuda</p>
<p class="copyright">© 2025 PT. Vneu Teknologi Indonesia</p>
</section>
<script src="main.js"></script>

<script>function openLightbox(src) {
const lightbox = document.getElementById("lightbox");
lightbox.querySelector("img").src = src;
lightbox.classList.add("active");
Expand Down
107 changes: 87 additions & 20 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,9 @@ document.addEventListener("DOMContentLoaded", function () {
ease: "back.out(1.5)",
});

gsap.utils.toArray('.section-title').forEach(title => {
gsap.fromTo(title,
gsap.utils.toArray(".section-title").forEach((title) => {
gsap.fromTo(
title,
{ opacity: 0, y: 30 },
{
opacity: 1,
Expand All @@ -33,14 +34,15 @@ document.addEventListener("DOMContentLoaded", function () {
scrollTrigger: {
trigger: title,
start: "top 80%",
toggleActions: "play none none reverse"
}
toggleActions: "play none none reverse",
},
}
);
});

gsap.utils.toArray('.feature-card').forEach((card, i) => {
gsap.fromTo(card,
gsap.utils.toArray(".feature-card").forEach((card, i) => {
gsap.fromTo(
card,
{ opacity: 0, y: 30 },
{
opacity: 1,
Expand All @@ -50,14 +52,15 @@ document.addEventListener("DOMContentLoaded", function () {
scrollTrigger: {
trigger: card,
start: "top 85%",
toggleActions: "play none none reverse"
}
toggleActions: "play none none reverse",
},
}
);
});

gsap.utils.toArray('.screenshot-card').forEach((card, i) => {
gsap.fromTo(card,
gsap.utils.toArray(".screenshot-card").forEach((card, i) => {
gsap.fromTo(
card,
{ opacity: 0, y: 40 },
{
opacity: 1,
Expand All @@ -68,14 +71,15 @@ document.addEventListener("DOMContentLoaded", function () {
scrollTrigger: {
trigger: card,
start: "top 85%",
toggleActions: "play none none reverse"
}
toggleActions: "play none none reverse",
},
}
);
});

gsap.utils.toArray('.db-card').forEach((card, i) => {
gsap.fromTo(card,
gsap.utils.toArray(".db-card").forEach((card, i) => {
gsap.fromTo(
card,
{ opacity: 0, scale: 0.9 },
{
opacity: 1,
Expand All @@ -86,8 +90,71 @@ document.addEventListener("DOMContentLoaded", function () {
scrollTrigger: {
trigger: card,
start: "top 85%",
toggleActions: "play none none reverse"
}
toggleActions: "play none none reverse",
},
}
);
});

gsap.utils.toArray(".platform").forEach((platform, i) => {
gsap.fromTo(
platform,
{ opacity: 0, y: 30 },
{
opacity: 1,
y: 0,
duration: 0.8,
delay: i * 0.15,
ease: "power2.out",
scrollTrigger: {
trigger: platform,
start: "top 85%",
toggleActions: "play none none reverse",
},
}
);
});

const aboutSection = document.querySelector(".about-tabular");
const aboutElements = [
aboutSection.querySelector(".logo"),
aboutSection.querySelector("h2"),
aboutSection.querySelector("p"),
aboutSection.querySelector(".version-info"),
aboutSection.querySelector(".github-link"),
aboutSection.querySelector(".credit"),
aboutSection.querySelector(".copyright"),
];

gsap.fromTo(
aboutSection,
{ opacity: 0 },
{
opacity: 1,
duration: 1,
scrollTrigger: {
trigger: aboutSection,
start: "top 80%",
toggleActions: "play none none reverse",
},
}
);

aboutElements.forEach((element, i) => {
gsap.fromTo(
element,
{ opacity: 0, y: 20 },
{
opacity: 1,
y: 0,
duration: 0.6,
delay: i * 0.1,
ease: "power2.out",
scrollTrigger: {
trigger: aboutSection,
start: "top 80%",
toggleActions: "play none none reverse",
},
}
);
});
Expand All @@ -110,16 +177,16 @@ document.addEventListener("DOMContentLoaded", function () {
}
});

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
anchor.addEventListener("click", function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute("href"));
if (target) {
window.scrollTo({
top: target.offsetTop - 90,
behavior: "smooth"
behavior: "smooth",
});

navMenu.classList.remove("active");
const spans = menuToggle.querySelectorAll("span");
spans[0].style.transform = "none";
Expand All @@ -128,4 +195,4 @@ document.addEventListener("DOMContentLoaded", function () {
}
});
});
});
});
Loading