Spaces:

GMA2
/

goodopub3

Running

App Files Files Community

GMA2 commited on May 18

Commit

9250d53

verified ·

1 Parent(s): 6de34f8

Add 2 files

Browse files

Files changed (2) hide show

index.html +87 -5
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -18,10 +18,48 @@
             color: white;
             font-family: 'Inter', sans-serif;
             overflow-x: hidden;
             background-image: url('https://media.canva.com/v2/image-resize/format:PNG/height:431/quality:100/uri:ifs%3A%2F%2FM%2F69aac2cc-6f25-443f-b834-461a1bbad761/watermark:F/width:800?csig=AAAAAAAAAAAAAAAAAAAAACZ0cuCRT5uUGcfvkWrefIyGtlrolS2HkMszR59yc4KZ&exp=1747608849&osig=AAAAAAAAAAAAAAAAAAAAANO7p0TwCpI6ZEyGfhMeGd4ETquJHuM3qcatBwkHBdWl&signer=media-rpc&x-canva-quality=screen');
-            background-attachment: fixed;
             background-size: cover;
             background-position: center;
         }
         .glass {
@@ -136,10 +174,22 @@
                 backdrop-filter: blur(8px);
                 -webkit-backdrop-filter: blur(8px);
             }
         }
     </style>
 </head>
 <body class="relative">
     <!-- Floating Particles -->
     <div class="fixed inset-0 overflow-hidden pointer-events-none z-0">
         <div class="absolute top-1/4 left-1/4 w-3 h-3 bg-white rounded-full opacity-20 floating" style="animation-delay: 0s;"></div>
@@ -590,13 +640,45 @@
                 });
             });
-            // Parallax background effect on scroll
             window.addEventListener('scroll', function() {
-                const scrollPosition = window.pageYOffset;
-                const backgroundPosition = scrollPosition * 0.3;
-                document.body.style.backgroundPositionY = `${backgroundPosition}px`;
             });
             // Smooth scrolling for anchor links
             document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                 anchor.addEventListener('click', function (e) {

             color: white;
             font-family: 'Inter', sans-serif;
             overflow-x: hidden;
+            position: relative;
+        }
+        /* Background image container */
+        .bg-image-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            overflow: hidden;
+            opacity: 0.5;
+            transition: opacity 0.5s ease;
+        }
+        .bg-image {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
             background-image: url('https://media.canva.com/v2/image-resize/format:PNG/height:431/quality:100/uri:ifs%3A%2F%2FM%2F69aac2cc-6f25-443f-b834-461a1bbad761/watermark:F/width:800?csig=AAAAAAAAAAAAAAAAAAAAACZ0cuCRT5uUGcfvkWrefIyGtlrolS2HkMszR59yc4KZ&exp=1747608849&osig=AAAAAAAAAAAAAAAAAAAAANO7p0TwCpI6ZEyGfhMeGd4ETquJHuM3qcatBwkHBdWl&signer=media-rpc&x-canva-quality=screen');
             background-size: cover;
             background-position: center;
+            will-change: transform;
+        }
+        /* Grid lines overlay */
+        .grid-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            pointer-events: none;
+            background-image:
+                linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+            background-size: 40px 40px;
+            opacity: 0.5;
         }
         .glass {
                 backdrop-filter: blur(8px);
                 -webkit-backdrop-filter: blur(8px);
             }
+            .grid-overlay {
+                background-size: 20px 20px;
+            }
         }
     </style>
 </head>
 <body class="relative">
+    <!-- Background Image Container -->
+    <div class="bg-image-container">
+        <div class="bg-image"></div>
+    </div>
+    <!-- Grid Lines Overlay -->
+    <div class="grid-overlay"></div>
     <!-- Floating Particles -->
     <div class="fixed inset-0 overflow-hidden pointer-events-none z-0">
         <div class="absolute top-1/4 left-1/4 w-3 h-3 bg-white rounded-full opacity-20 floating" style="animation-delay: 0s;"></div>
                 });
             });
+            // Background image parallax and fade effects
+            const bgImageContainer = document.querySelector('.bg-image-container');
+            const bgImage = document.querySelector('.bg-image');
+            let lastScrollPosition = 0;
+            let ticking = false;
             window.addEventListener('scroll', function() {
+                lastScrollPosition = window.scrollY;
+                if (!ticking) {
+                    window.requestAnimationFrame(function() {
+                        updateBackground(lastScrollPosition);
+                        ticking = false;
+                    });
+                    ticking = true;
+                }
             });
+            function updateBackground(scrollPos) {
+                // Parallax effect - move background at different rate than scroll
+                const parallaxOffset = scrollPos * 0.3;
+                bgImage.style.transform = `translateY(${parallaxOffset}px)`;
+                // Calculate fade effect based on scroll position
+                const windowHeight = window.innerHeight;
+                const scrollPercentage = scrollPos / (document.body.scrollHeight - windowHeight);
+                // Adjust opacity based on scroll position (fade in/out)
+                let opacity = 0.5;
+                // Fade out slightly when scrolling down
+                if (scrollPos > 0) {
+                    opacity = Math.max(0.2, 0.5 - (scrollPos * 0.0005));
+                }
+                bgImageContainer.style.opacity = opacity;
+            }
             // Smooth scrolling for anchor links
             document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                 anchor.addEventListener('click', function (e) {

prompts.txt CHANGED Viewed

	@@ -1 +1,2 @@
1	- Create an all black, use this as background that moves on scroll https://media.canva.com/v2/image-resize/format:PNG/height:431/quality:100/uri:ifs%3A%2F%2FM%2F69aac2cc-6f25-443f-b834-461a1bbad761/watermark:F/width:800?csig=AAAAAAAAAAAAAAAAAAAAACZ0cuCRT5uUGcfvkWrefIyGtlrolS2HkMszR59yc4KZ&exp=1747608849&osig=AAAAAAAAAAAAAAAAAAAAANO7p0TwCpI6ZEyGfhMeGd4ETquJHuM3qcatBwkHBdWl&signer=media-rpc&x-canva-quality=screen mobile responsive digital services site with 3D tilt and glassmorphism 5 sections on mobile bottom navigation site needs to be responsive on all devices, no testimonials, no contact page put icon on header for contact, add a calendar to schedule appointments connect to https://calendar.google.com/calendar/embed?src=ododidakt%40gmail.com&ctz=America%2FChicago contact email not shown connect it to [email protected]


1	+ Create an all black, use this as background that moves on scroll https://media.canva.com/v2/image-resize/format:PNG/height:431/quality:100/uri:ifs%3A%2F%2FM%2F69aac2cc-6f25-443f-b834-461a1bbad761/watermark:F/width:800?csig=AAAAAAAAAAAAAAAAAAAAACZ0cuCRT5uUGcfvkWrefIyGtlrolS2HkMszR59yc4KZ&exp=1747608849&osig=AAAAAAAAAAAAAAAAAAAAANO7p0TwCpI6ZEyGfhMeGd4ETquJHuM3qcatBwkHBdWl&signer=media-rpc&x-canva-quality=screen mobile responsive digital services site with 3D tilt and glassmorphism 5 sections on mobile bottom navigation site needs to be responsive on all devices, no testimonials, no contact page put icon on header for contact, add a calendar to schedule appointments connect to https://calendar.google.com/calendar/embed?src=ododidakt%40gmail.com&ctz=America%2FChicago contact email not shown connect it to [email protected]
2	+ add grid lines in the design like the image has and have the image not repeat on scroll it follows the scroll and fades in and out