diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..c5db71e --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,109 @@ + +/* General Body Styles */ +body { + background-color: #F5F5F7; + color: #1D1D1F; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica Neue, Arial, sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* Typography */ +h1, h2, h3, h4, h5, h6 { + font-family: 'Georgia', serif; + font-weight: 700; +} + +.display-4 { + font-size: 3.5rem; + line-height: 1.2; +} + +/* Buttons */ +.btn-primary { + background-image: linear-gradient(45deg, #5E5DF0, #8E8DFF); + border: none; + color: white; + padding: 1rem 2rem; + border-radius: 0.75rem; + font-weight: 600; + transition: transform 0.2s ease, box-shadow 0.2s ease; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(94, 93, 240, 0.4); + color: white; +} + +.btn-secondary { + background-color: #e9ecef; + border-color: #e9ecef; + color: #1D1D1F; +} + +/* Forms */ +.form-control-lg { + border-radius: 0.75rem; + padding: 1rem 1.5rem; + border: 1px solid #E5E5E7; +} +.form-control-lg:focus { + border-color: #5E5DF0; + box-shadow: 0 0 0 4px rgba(94, 93, 240, 0.1); +} + +/* Hero Section */ +.hero { + padding: 6rem 0; + background-color: #FFFFFF; + border-bottom: 1px solid #E5E5E7; +} + +/* Features Section */ +.features { + padding: 5rem 0; +} +.feature-card { + background-color: #FFFFFF; + border-radius: 0.75rem; + padding: 2rem; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); + transition: transform 0.2s ease, box-shadow 0.2s ease; + border: 1px solid #E5E5E7; + height: 100%; +} +.feature-card:hover { + transform: translateY(-5px); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); +} +.feature-card img { + border-radius: 0.5rem; +} + +/* Result Display */ +#result { + background-color: #FFFFFF; + border-radius: 0.75rem; + padding: 1.5rem; + margin-top: 2rem; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07); + border: 1px solid #E5E5E7; + display: none; /* Hidden by default */ +} +#result p { + margin-bottom: 0.5rem; +} +#short-url { + font-weight: 600; + color: #5E5DF0; + word-break: break-all; +} + +/* Footer */ +footer { + padding: 3rem 0; + font-size: 0.9rem; + color: #6E6E73; +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..d51ca65 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,50 @@ + +document.addEventListener('DOMContentLoaded', function () { + const shortenForm = document.getElementById('shortenForm'); + const urlInput = document.getElementById('urlInput'); + const resultDiv = document.getElementById('result'); + const shortUrlSpan = document.getElementById('short-url'); + const copyBtn = document.getElementById('copyBtn'); + + shortenForm.addEventListener('submit', function (e) { + e.preventDefault(); + const longUrl = urlInput.value.trim(); + + // Simple URL validation + if (!isValidHttpUrl(longUrl)) { + alert('Please enter a valid URL (e.g., https://example.com)'); + urlInput.focus(); + return; + } + + // --- Dummy Shortener Logic --- + // In a real app, this would be an API call. + const randomString = Math.random().toString(36).substring(2, 8); + const shortUrl = `yourdomain.com/${randomString}`; + // --- End Dummy Logic --- + + shortUrlSpan.textContent = shortUrl; + resultDiv.style.display = 'block'; + }); + + copyBtn.addEventListener('click', function() { + navigator.clipboard.writeText(shortUrlSpan.textContent).then(() => { + copyBtn.textContent = 'Copied!'; + setTimeout(() => { + copyBtn.textContent = 'Copy'; + }, 2000); + }).catch(err => { + console.error('Failed to copy: ', err); + }); + }); + + function isValidHttpUrl(string) { + let url; + try { + url = new URL(string); + } catch (_) { + return false; + } + return url.protocol === "http:" || url.protocol === "https:"; + } +}); diff --git a/index.php b/index.php index 7205f3d..e9cb0d4 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,155 @@ - - + - - - New Style - - - - - - - - - - - - - - - - - - - + + + + + Create a URL Shortener SaaS + + + + + + + + + + + + + + + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

-
-
- + +
+
+ + LinkHub + + +
+
+ +
+
+
+
+

One Link to Rule Them All

+

Create short links, beautiful bio pages, and scannable QR codes. All in one platform designed to grow your brand.

+
+
+
+ + +
+
+ +
+
+
+

Your short link is ready!

+
+ + +
+
+
+
+
+
+ +
+
+

A Powerful Suite of Tools

+
+
+
+ Illustration of a mobile phone displaying a personal bio link profile. +

Bio Link Pages

+

Create a stunning "link in bio" page that directs your audience to all your important content with a single URL.

+
+
+
+
+ Stylized QR code with a logo in the center. +

Custom QR Codes

+

Generate unique QR codes with custom colors, shapes, and your own logo to bridge the physical and digital worlds.

+
+
+
+
+ Dashboard showing charts and graphs for analytics. +

Trackable Analytics

+

Monitor clicks, scans, and traffic with a powerful analytics dashboard to understand your audience better.

+
+
+
+
+
+
+ + + + + + - + \ No newline at end of file