diff --git a/assets/css/custom.css b/assets/css/custom.css index 0e83995..65a1626 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -1,115 +1,346 @@ -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap'); - :root { - --sidebar-width: 240px; - --sidebar-bg: #ffffff; - --main-bg: #f8f9fa; - --border-color: #dee2e6; - --text-main: #212529; - --accent: #0d6efd; + --color-bg: #ffffff; + --color-text: #1a1a1a; + --color-primary: #2563EB; /* Vibrant Blue */ + --color-secondary: #000000; + --color-accent: #A3E635; /* Lime Green */ + --color-surface: #f8f9fa; + --font-heading: 'Space Grotesk', sans-serif; + --font-body: 'Inter', sans-serif; + --border-width: 2px; + --shadow-hard: 5px 5px 0px #000; + --shadow-hover: 8px 8px 0px #000; + --radius-pill: 50rem; + --radius-card: 1rem; } body { - font-family: 'Inter', system-ui, -apple-system, sans-serif; - background-color: var(--main-bg); - color: var(--text-main); + font-family: var(--font-body); + background-color: var(--color-bg); + color: var(--color-text); overflow-x: hidden; } -/* Layout */ -#wrapper { - display: flex; - width: 100%; - align-items: stretch; -} - -#sidebar { - min-width: var(--sidebar-width); - max-width: var(--sidebar-width); - background: var(--sidebar-bg); - border-right: 1px solid var(--border-color); - transition: all 0.3s; - height: 100vh; - position: sticky; - top: 0; -} - -#content { - width: 100%; - padding: 20px; - min-height: 100vh; -} - -/* Sidebar Styling */ -.sidebar-header { - padding: 20px; - border-bottom: 1px solid var(--border-color); - font-weight: 600; - font-size: 1.1rem; -} - -.sidebar-menu { - padding: 10px 0; -} - -.sidebar-menu a { - padding: 10px 20px; - display: block; - color: var(--text-main); - text-decoration: none; - font-size: 0.9rem; - transition: background 0.2s; -} - -.sidebar-menu a:hover, .sidebar-menu a.active { - background: #f0f2f5; - color: var(--accent); -} - -.sidebar-menu a i { - margin-right: 10px; - width: 20px; - text-align: center; -} - -/* Dashboard Cards */ -.card { - border: 1px solid var(--border-color); - border-radius: 4px; - box-shadow: none; - margin-bottom: 20px; -} - -.card-header { - background: #ffffff; - border-bottom: 1px solid var(--border-color); - font-weight: 500; - padding: 12px 15px; +h1, h2, h3, h4, h5, h6, .navbar-brand { + font-family: var(--font-heading); + letter-spacing: -0.03em; } /* Utilities */ -.btn { - border-radius: 4px; +.text-primary { color: var(--color-primary) !important; } +.bg-black { background-color: #000 !important; } +.text-white { color: #fff !important; } +.shadow-hard { box-shadow: var(--shadow-hard); } +.border-2-black { border: var(--border-width) solid #000; } +.py-section { padding-top: 5rem; padding-bottom: 5rem; } + +/* Navbar */ +.navbar { + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(10px); + border-bottom: var(--border-width) solid transparent; + transition: all 0.3s; + padding-top: 1rem; + padding-bottom: 1rem; +} + +.navbar.scrolled { + border-bottom-color: #000; + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.brand-text { + font-size: 1.5rem; + font-weight: 800; +} + +.nav-link { font-weight: 500; - font-size: 0.875rem; - padding: 8px 16px; + color: var(--color-text); + margin-left: 1rem; + position: relative; +} + +.nav-link:hover, .nav-link.active { + color: var(--color-primary); +} + +/* Buttons */ +.btn { + font-weight: 700; + font-family: var(--font-heading); + padding: 0.8rem 2rem; + border-radius: var(--radius-pill); + border: var(--border-width) solid #000; + transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1); + box-shadow: var(--shadow-hard); +} + +.btn:hover { + transform: translate(-2px, -2px); + box-shadow: var(--shadow-hover); +} + +.btn:active { + transform: translate(2px, 2px); + box-shadow: 0 0 0 #000; } .btn-primary { - background-color: var(--text-main); - border-color: var(--text-main); + background-color: var(--color-primary); + border-color: #000; + color: #fff; } .btn-primary:hover { - background-color: #000; + background-color: #1d4ed8; border-color: #000; + color: #fff; } -@media (max-width: 768px) { - #sidebar { - margin-left: calc(-1 * var(--sidebar-width)); +.btn-outline-dark { + background-color: #fff; + color: #000; +} + +.btn-cta { + background-color: var(--color-accent); + color: #000; +} + +.btn-cta:hover { + background-color: #8cc629; + color: #000; +} + +/* Hero Section */ +.hero-section { + min-height: 100vh; + padding-top: 80px; +} + +.background-blob { + position: absolute; + border-radius: 50%; + filter: blur(80px); + opacity: 0.6; + z-index: 1; +} + +.blob-1 { + top: -10%; + right: -10%; + width: 600px; + height: 600px; + background: radial-gradient(circle, var(--color-accent), transparent); +} + +.blob-2 { + bottom: 10%; + left: -10%; + width: 500px; + height: 500px; + background: radial-gradient(circle, var(--color-primary), transparent); +} + +.highlight-text { + background: linear-gradient(120deg, transparent 0%, transparent 40%, var(--color-accent) 40%, var(--color-accent) 100%); + background-repeat: no-repeat; + background-size: 100% 40%; + background-position: 0 88%; + padding: 0 5px; +} + +.dot { color: var(--color-primary); } + +.badge-pill { + display: inline-block; + padding: 0.5rem 1rem; + border: 2px solid #000; + border-radius: 50px; + font-weight: 700; + background: #fff; + box-shadow: 4px 4px 0 #000; + font-family: var(--font-heading); + font-size: 0.9rem; +} + +/* Marquee */ +.marquee-container { + overflow: hidden; + white-space: nowrap; + border-top: 2px solid #000; + border-bottom: 2px solid #000; +} + +.rotate-divider { + transform: rotate(-2deg) scale(1.05); + z-index: 10; + position: relative; + margin-top: -50px; + margin-bottom: 30px; +} + +.marquee-content { + display: inline-block; + animation: marquee 20s linear infinite; + font-family: var(--font-heading); + font-weight: 700; + font-size: 1.5rem; + letter-spacing: 2px; +} + +@keyframes marquee { + 0% { transform: translateX(0); } + 100% { transform: translateX(-50%); } +} + +/* Portfolio Cards */ +.project-card { + border: 2px solid #000; + border-radius: var(--radius-card); + overflow: hidden; + background: #fff; + transition: transform 0.3s ease; + box-shadow: var(--shadow-hard); + height: 100%; + display: flex; + flex-direction: column; +} + +.project-card:hover { + transform: translateY(-10px); + box-shadow: 8px 8px 0 #000; +} + +.card-img-holder { + height: 250px; + display: flex; + align-items: center; + justify-content: center; + border-bottom: 2px solid #000; + position: relative; + font-size: 4rem; +} + +.placeholder-art { + transition: transform 0.3s ease; +} + +.project-card:hover .placeholder-art { + transform: scale(1.2) rotate(10deg); +} + +.bg-soft-blue { background-color: #e0f2fe; } +.bg-soft-green { background-color: #dcfce7; } +.bg-soft-purple { background-color: #f3e8ff; } +.bg-soft-yellow { background-color: #fef9c3; } + +.category-tag { + position: absolute; + top: 15px; + right: 15px; + background: #000; + color: #fff; + padding: 5px 12px; + border-radius: 20px; + font-size: 0.75rem; + font-weight: 700; +} + +.card-body { padding: 1.5rem; } + +.link-arrow { + text-decoration: none; + color: #000; + font-weight: 700; + display: inline-flex; + align-items: center; + margin-top: auto; +} + +.link-arrow i { transition: transform 0.2s; margin-left: 5px; } +.link-arrow:hover i { transform: translateX(5px); } + +/* About */ +.about-image-stack { + position: relative; + height: 400px; + width: 100%; +} + +.stack-card { + position: absolute; + width: 80%; + height: 100%; + border-radius: var(--radius-card); + border: 2px solid #000; + box-shadow: var(--shadow-hard); + left: 10%; + transform: rotate(-3deg); + background-size: cover; +} + +/* Forms */ +.form-control { + border: 2px solid #000; + border-radius: 0.5rem; + padding: 1rem; + font-weight: 500; + background: #f8f9fa; +} + +.form-control:focus { + box-shadow: 4px 4px 0 var(--color-primary); + border-color: #000; + background: #fff; +} + +/* Animations */ +.animate-up { + opacity: 0; + transform: translateY(30px); + animation: fadeUp 0.8s ease forwards; +} + +.delay-100 { animation-delay: 0.1s; } +.delay-200 { animation-delay: 0.2s; } + +@keyframes fadeUp { + to { + opacity: 1; + transform: translateY(0); } - #sidebar.active { - margin-left: 0; +} + +/* Social */ +.social-links a { + transition: transform 0.2s; + display: inline-block; +} +.social-links a:hover { + transform: scale(1.2) rotate(10deg); + color: var(--color-accent) !important; +} + +/* Responsive */ +@media (max-width: 991px) { + .rotate-divider { + transform: rotate(0); + margin-top: 0; + margin-bottom: 2rem; } -} \ No newline at end of file + + .hero-section { + padding-top: 120px; + text-align: center; + min-height: auto; + padding-bottom: 100px; + } + + .display-1 { font-size: 3.5rem; } + + .blob-1 { width: 300px; height: 300px; right: -20%; } + .blob-2 { width: 300px; height: 300px; left: -20%; } +} diff --git a/assets/js/main.js b/assets/js/main.js index 60b8181..fdf2cfd 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,26 +1,73 @@ -function showToast(message) { - const toast = document.createElement('div'); - toast.className = 'position-fixed bottom-0 end-0 p-3'; - toast.style.zIndex = '1100'; - toast.innerHTML = ` - - `; - document.body.appendChild(toast); - setTimeout(() => { - toast.remove(); - }, 3000); -} +document.addEventListener('DOMContentLoaded', () => { + + // Smooth scrolling for navigation links + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + const targetId = this.getAttribute('href'); + if (targetId === '#') return; + + const targetElement = document.querySelector(targetId); + if (targetElement) { + // Close mobile menu if open + const navbarToggler = document.querySelector('.navbar-toggler'); + const navbarCollapse = document.querySelector('.navbar-collapse'); + if (navbarCollapse.classList.contains('show')) { + navbarToggler.click(); + } -document.addEventListener('DOMContentLoaded', function() { - const sidebarCollapse = document.getElementById('sidebarCollapse'); - if (sidebarCollapse) { - sidebarCollapse.addEventListener('click', function() { - document.getElementById('sidebar').classList.toggle('active'); + // Scroll with offset + const offset = 80; + const elementPosition = targetElement.getBoundingClientRect().top; + const offsetPosition = elementPosition + window.pageYOffset - offset; + + window.scrollTo({ + top: offsetPosition, + behavior: "smooth" + }); + } }); - } -}); + }); + + // Navbar scroll effect + const navbar = document.querySelector('.navbar'); + window.addEventListener('scroll', () => { + if (window.scrollY > 50) { + navbar.classList.add('scrolled', 'shadow-sm', 'bg-white'); + navbar.classList.remove('bg-transparent'); + } else { + navbar.classList.remove('scrolled', 'shadow-sm', 'bg-white'); + navbar.classList.add('bg-transparent'); + } + }); + + // Intersection Observer for fade-up animations + const observerOptions = { + threshold: 0.1, + rootMargin: "0px 0px -50px 0px" + }; + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('animate-up'); + entry.target.style.opacity = "1"; + observer.unobserve(entry.target); // Only animate once + } + }); + }, observerOptions); + + // Select elements to animate (add a class 'reveal' to them in HTML if not already handled by CSS animation) + // For now, let's just make sure the hero animations run. + // If we want scroll animations, we'd add opacity: 0 to elements in CSS and reveal them here. + // Given the request, the CSS animation I added runs on load for Hero. + // Let's make the project cards animate in. + + const projectCards = document.querySelectorAll('.project-card'); + projectCards.forEach((card, index) => { + card.style.opacity = "0"; + card.style.animationDelay = `${index * 0.1}s`; + observer.observe(card); + }); + +}); \ No newline at end of file diff --git a/index.php b/index.php index f04151f..7205f3d 100644 --- a/index.php +++ b/index.php @@ -1,112 +1,150 @@ prepare("INSERT INTO view_logs (page_name) VALUES (?)"); - $stmt->execute(['Dashboard Home']); -} catch (Exception $e) { - // Silent error for dev environment -} - -$pageTitle = "Dashboard - " . ($_SERVER['PROJECT_NAME'] ?? 'Internal App'); +$phpVersion = PHP_VERSION; +$now = date('Y-m-d H:i:s'); ?> - + - - - <?php echo $pageTitle; ?> - - - - + + + New Style + + + + + + + + + + + + + + + + + + + - -
- - - - -
- - -
-
-
-

Welcome, Developer

-

Quickly iterate on views and validate layouts below.

-
-
- -
-
-
-
Recent View Logs
-
-
    - query("SELECT * FROM view_logs ORDER BY visited_at DESC LIMIT 5"); - while ($row = $stmt->fetch()) { - echo "
  • "; - echo htmlspecialchars($row['page_name']); - echo "" . date('H:i:s', strtotime($row['visited_at'])) . ""; - echo "
    • "; - } - ?> -
-
-
-
-
-
-
Quick Actions
-
-
-
- - Create New View - -
-
- -
-
-
-
-
-
-
+
+
+

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

-
- - - + + - \ No newline at end of file + diff --git a/new-view.php b/new-view.php deleted file mode 100644 index 7a06c76..0000000 --- a/new-view.php +++ /dev/null @@ -1,137 +0,0 @@ -prepare("INSERT INTO view_logs (page_name) VALUES (?)"); - $stmt->execute(['New View Page']); -} catch (Exception $e) {} - -$pageTitle = "New View Test - " . ($_SERVER['PROJECT_NAME'] ?? 'Internal App'); -?> - - - - - - <?php echo $pageTitle; ?> - - - - - - -
- - - - -
- - -
-
-
-

Component Playground

-

Use this space to test new layout components and UI elements.

-
-
- -
-
-
-
- Sample Form Layout - Functional -
-
-
-
- - -
-
- - -
-
-
- - -
-
- -
-
- - -
-
- - -
-
-
-
- - -
-
-
-
- -
-
-
UI Guidelines
-
-
    -
  • Use Inter font stack.
    • -
  • Prefer compact spacing.
    • -
  • Avoid gradients.
    • -
  • Keep borders subtle (#dee2e6).
    • -
-
-
- -
-
Testing Tip
-

You can trigger global notifications using the showToast(msg) JS function.

- -
-
-
-
-
-
- - - - -