Skip to content

Add minimal static website for Zplit #6

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

Closed
sachingwala wants to merge 1 commit into from
Closed

Add minimal static website for Zplit #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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 assets/HOW-1.webp
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 assets/HOW-2.webp
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 assets/htw-1.webp
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 assets/htw-2.webp
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 assets/htw-3.webp
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 assets/htw-4.webp
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 assets/img-2.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 assets/img-3.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.
14 changes: 14 additions & 0 deletions zplit-website/.well-known/assetlinks.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
[
{
"relation": [
"delegate_permission/common.handle_all_urls"
],
"target": {
"namespace": "android_app",
"package_name": "com.zplit.app",
"sha256_cert_fingerprints": [
"..."
]
Comment on lines +9 to +11
Copy link

@coderabbitai coderabbitai bot Dec 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

# First, let's check if the file exists and read its full content
cat -n zplit-website/.well-known/assetlinks.json

Repository: StabilityNexus/Zplit

Length of output: 460

🏁 Script executed:

# Check the overall structure and context of the project
ls -la zplit-website/.well-known/

Repository: StabilityNexus/Zplit

Length of output: 236

🏁 Script executed:

# Search for any related documentation or comments about the certificate fingerprint
rg -i "fingerprint|keytool|assetlinks" zplit-website/ --type json --type md --type txt

Repository: StabilityNexus/Zplit

Length of output: 46

Replace placeholder SHA-256 certificate fingerprint before merging.

The assetlinks.json file contains a placeholder "..." for the SHA-256 cert fingerprint. This must be replaced with the actual certificate fingerprint from your app's keystore before Android can verify the asset links.

To obtain the correct fingerprint:

keytool -list -v -keystore your-keystore.jks -alias your-key-alias

Update the file with the actual 40-character SHA-256 hash (without colons).

🤖 Prompt for AI Agents 
In zplit-website/.well-known/assetlinks.json around lines 9 to 11, the
sha256_cert_fingerprints array contains a placeholder "..." that must be
replaced with your app signing certificate's actual 40-character SHA-256
fingerprint (no colons) before merging; run keytool -list -v -keystore
your-keystore.jks -alias your-key-alias to get the SHA-256 value, copy the
fingerprint (strip any colons), replace the "..." entry with that exact hash
string, and ensure the JSON remains valid (quotes and commas intact).

}
}
]
167 changes: 167 additions & 0 deletions zplit-website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Zplit – Split Bills Instantly</title>

<!-- Tailwind CDN -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- Tailwind Config -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1DB954',
darkgreen: '#0F3D2E',
softgray: '#F5F7F6',
mint: '#DFF5EA'
}
}
}
}
</script>
</head>
<body class="bg-white text-gray-800 font-sans">

<!-- NAVBAR -->
<header class="fixed top-0 w-full bg-white/80 backdrop-blur border-b border-gray-100 z-50">
<div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
<div class="text-xl font-semibold text-darkgreen">Zplit</div>
<nav class="hidden md:flex gap-8 text-sm text-gray-600">
<a href="#features" class="hover:text-primary">Features</a>
<a href="#how" class="hover:text-primary">How it Works</a>
<a href="#security" class="hover:text-primary">Security</a>
<a href="#download" class="hover:text-primary">Download</a>
</nav>
</div>
</header>

<!-- HERO -->
<section class="pt-32 pb-24 bg-gradient-to-br from-white to-mint">
<div class="max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-12 items-center">
<div>
<h1 class="text-4xl md:text-5xl font-semibold text-darkgreen leading-tight">
Split bills instantly.<br />Settle fairly.
</h1>
<p class="mt-6 text-gray-600 max-w-md">
Zplit helps you split expenses with friends seamlessly, transparently, and without confusion.
</p>
<div class="mt-8 flex gap-4">
<a href="#download" class="bg-primary text-white px-6 py-3 rounded-lg text-sm font-medium hover:opacity-90">
Get the App
</a>
<a href="#features" class="text-primary font-medium px-6 py-3">
Learn More
</a>
</div>
</div>

<!-- App Mockup Placeholder -->
<div class="flex justify-center">
<div class="w-74 h-[450px] bg-white rounded-3xl shadow-xl flex items-center justify-center text-gray-400">
Copy link

@coderabbitai coderabbitai bot Dec 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Fix invalid Tailwind width class.

Line 64 uses w-74, which is not a valid Tailwind class. Tailwind's default width scale uses multiples of 0.25rem (4px): w-64, w-72, w-80, etc.

Replace w-74 with a valid class like w-72 or w-64:

-        <div class="w-74 h-[450px] bg-white rounded-3xl shadow-xl flex items-center justify-center text-gray-400">
+        <div class="w-72 h-[450px] bg-white rounded-3xl shadow-xl flex items-center justify-center text-gray-400">
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div class="w-74 h-[450px] bg-white rounded-3xl shadow-xl flex items-center justify-center text-gray-400">
<div class="w-72 h-[450px] bg-white rounded-3xl shadow-xl flex items-center justify-center text-gray-400">
🤖 Prompt for AI Agents 
In zplit-website/index.html around line 64, the element uses an invalid Tailwind
class `w-74`; replace it with a valid width class such as `w-72` or `w-64`
(choose the width that matches the intended layout) so the Tailwind utility is
recognized and the component renders correctly.

<img src="../assets/img-3.png" alt="app screenshot" />
</div>
</div>
</div>
</section>

<!-- FEATURES -->
<section id="features" class="py-24 bg-white">
<div class="max-w-7xl mx-auto px-6">
<h2 class="text-3xl font-medium text-darkgreen text-center">Why Zplit?</h2>

<div class="mt-16 grid md:grid-cols-4 gap-8">
<div class="p-6 bg-softgray rounded-xl">
<h3 class="font-medium text-darkgreen">Instant Splits</h3>
<p class="mt-2 text-sm text-gray-600">Split expenses in seconds with no math hassle.</p>
<img src="../assets/HOW-1.webp" alt="" class=" ">
Copy link

@coderabbitai coderabbitai bot Dec 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Add descriptive alt text to images for accessibility and SEO.

Images at lines 80, 85, 90, and 95 have empty alt attributes, which breaks accessibility for screen reader users and misses SEO opportunities. Each image should have a brief, descriptive alt text that conveys the content or purpose.

Apply this diff to add meaningful alt text:

-          <img src="../assets/HOW-1.webp" alt="" class=" ">
+          <img src="../assets/HOW-1.webp" alt="Instant split calculation illustration" class="">
-          <img src="../assets/htw-4.webp" alt="">
+          <img src="../assets/htw-4.webp" alt="Transparent expense tracking illustration">
-          <img src="../assets/htw-3.webp" alt="">
+          <img src="../assets/htw-3.webp" alt="Group expense splitting illustration">
-          <img src="../assets/htw-1.webp" alt="">
+          <img src="../assets/htw-1.webp" alt="Security and privacy protection illustration">

Also applies to: 85-85, 90-90, 95-95

🤖 Prompt for AI Agents 
In zplit-website/index.html around lines 80, 85, 90 and 95, several <img> tags
have empty alt attributes; update each img to include concise, descriptive alt
text that accurately describes the image content or purpose (e.g., "Diagram of
HOW process", "HOW step 2 illustration", "HOW step 3 illustration", "HOW step 4
illustration" or specific descriptions based on the actual images). Ensure the
alt text is short (a few words) and meaningful for screen readers and SEO, and
avoid redundant phrases like "image of" or decorative text if the image is
purely decorative use alt="" explicitly only if it conveys no information.

</div>
<div class="p-6 bg-softgray rounded-xl">
<h3 class="font-medium text-darkgreen">Transparent</h3>
<p class="mt-2 text-sm text-gray-600">Everyone sees exactly what they owe.</p>
<img src="../assets/htw-4.webp" alt="">
</div>
<div class="p-6 bg-softgray rounded-xl">
<h3 class="font-medium text-darkgreen">Group Friendly</h3>
<p class="mt-2 text-sm text-gray-600">Perfect for trips, rooms, and teams.</p>
<img src="../assets/htw-3.webp" alt="">
</div>
<div class="p-6 bg-softgray rounded-xl">
<h3 class="font-medium text-darkgreen">Secure</h3>
<p class="mt-2 text-sm text-gray-600">Built with security and privacy in mind.</p>
<img src="../assets/htw-1.webp" alt="">
</div>
</div>
</div>
</section>

<!-- HOW IT WORKS -->
<section id="how" class="py-24 bg-softgray">
<div class="max-w-5xl mx-auto px-6">
<h2 class="text-3xl font-medium text-darkgreen text-center">How It Works</h2>

<div class="mt-16 grid md:grid-cols-3 gap-10 text-center">
<div>
<div class="text-primary text-4xl font-semibold">1</div>
<p class="mt-4 text-gray-700">Add friends & expenses</p>

</div>
<div>
<div class="text-primary text-4xl font-semibold">2</div>
<p class="mt-4 text-gray-700">Zplit calculates shares</p>
</div>
<div>
<div class="text-primary text-4xl font-semibold">3</div>
<p class="mt-4 text-gray-700">Settle with clarity</p>
</div>
</div>
</div>
</section>

<!-- SECURITY -->
<section id="security" class="py-24 bg-white">
<div class="max-w-5xl mx-auto px-6 text-center">
<h2 class="text-3xl font-medium text-darkgreen">Security & Trust</h2>

<div class="mt-12 space-y-4 text-gray-600">
<p>✓ Your data stays yours</p>
<p>✓ No hidden calculations</p>
<p>✓ Built with transparency in mind</p>
</div>
</div>
</section>

<!-- CTA -->
<section id="download" class="py-24 bg-gradient-to-br from-mint to-white">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl font-medium text-darkgreen">Ready to split smarter?</h2>
<div class="mt-8 flex justify-center gap-4">
<button class="bg-primary text-white px-8 py-3 rounded-lg text-sm font-medium">
<a href="#" class="block">
Download for Android
</a>
</button>
<button class="border border-primary text-primary px-8 py-3 rounded-lg text-sm font-medium">
iOS Coming Soon
</button>
Comment on lines +142 to +149
Copy link

@coderabbitai coderabbitai bot Dec 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Fix incorrect semantic HTML nesting and non-functional button.

Two issues:

  1. Lines 142–146: A <button> element should not wrap an <a> tag. This creates invalid nested interactive elements and confuses assistive technologies. Either use a <button> with click handler or use an <a> styled as a button.
  2. Line 148: The "iOS Coming Soon" button has no href or onclick, so it appears interactive but has no action. This may confuse users.

Apply this diff to fix semantic HTML and clarify button intent:

-        <button class="bg-primary text-white px-8 py-3 rounded-lg text-sm font-medium">
-        <a href="#" class="block">
+        <a href="#" class="bg-primary text-white px-8 py-3 rounded-lg text-sm font-medium inline-block">
           Download for Android
-          </a>
-        </button>
-        <button class="border border-primary text-primary px-8 py-3 rounded-lg text-sm font-medium">
+        </a>
+        <span class="border border-primary text-primary px-8 py-3 rounded-lg text-sm font-medium inline-block cursor-not-allowed opacity-60">
           iOS Coming Soon
-        </button>
+        </span>

Alternatively, if you prefer <button> elements, add onclick handlers or use an <a> styled as a button.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<button class="bg-primary text-white px-8 py-3 rounded-lg text-sm font-medium">
<a href="#" class="block">
Download for Android
</a>
</button>
<button class="border border-primary text-primary px-8 py-3 rounded-lg text-sm font-medium">
iOS Coming Soon
</button>
<a href="#" class="bg-primary text-white px-8 py-3 rounded-lg text-sm font-medium inline-block">
Download for Android
</a>
<span class="border border-primary text-primary px-8 py-3 rounded-lg text-sm font-medium inline-block cursor-not-allowed opacity-60">
iOS Coming Soon
</span>
🤖 Prompt for AI Agents 
In zplit-website/index.html around lines 142 to 149, the markup nests an <a>
inside a <button> and leaves the "iOS Coming Soon" control non-functional;
replace the button that wraps the anchor with an <a> element styled like the
primary button and give it the download URL (or proper href) so it functions as
a link, and for the "iOS Coming Soon" control either convert it to a
non-interactive element (e.g., a <span> or <button disabled>) with clear
aria-label/text indicating it’s unavailable or add a no-op onclick that opens a
tooltip/modal—ensuring interactive elements are not nested and all apparent
controls have appropriate behavior and accessibility attributes.

</div>
</div>
</section>

<!-- FOOTER -->
<footer class="bg-darkgreen text-white py-10">
<div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-4">
<p class="text-sm">© 2025 Zplit</p>
<div class="flex gap-6 text-sm">
<a href="#" class="hover:underline">Privacy</a>
<a href="#" class="hover:underline">Terms</a>
<a href="#" class="hover:underline">Contact</a>
</div>
</div>
</footer>

</body>
</html>