progress on website

newVersion/css/homeStyle.css

@@ -35,10 +35,131 @@ body {
     transform: translateY(0);
 }
 
+.scroll-indicator {
+    position: fixed;
+    right: 5%;
+    z-index: 11;
+    width: 90%;
+    bottom: 5%;
+    display: none;
+}
+
+.scroll-wrapper {
+    color: rgb(221, 221, 221);
+    font-size: 80%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+
+.scroll-symbol {
+    font-size: 180%;
+    animation: scroll-animation infinite 4s ease-in-out;
+}
+
+@keyframes scroll-animation {
+    0% {
+        opacity: 0;
+        transform: translateY(0);
+    }
+    10% {
+        opacity: 1;
+    }
+    65% {
+        opacity: 0.8;
+    }
+    75% {
+        opacity: 0;
+        transform: translateY(25px);
+    }
+    100% {
+        opacity: 0;
+    }    
+}
+
+.progress {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 90%;
+    top: 5%;
+    right: 2%;
+    z-index: 5;
+    position: fixed;
+}
+
+.progress-wrapper {
+    display: flex;
+    color: white;
+    border-radius: 50px;
+    flex-direction: column;
+    max-width: min-content;
+}
+
+.progress-item {
+    cursor: pointer;
+}
+
+
+.background-images {
+    position: fixed;
+}
+
+.hidables, #img1 {
+    position: fixed;
+    height: 100vh;
+    width: auto;
+    top: 0%;
+    display: block;
+    right: 0%;
+    opacity: 0;
+    transition: all 2s;
+}
+
+.visible {
+    opacity: 1;
+}
+
 /* 
     Styles for individual steps
 */
+
 #step-1 {
+    position: fixed;
+    background: linear-gradient(to right, rgba( 0, 0, 0, 255 ) 30%, rgba( 0, 0, 0, 0 ));
+}
+
+#step-2 {
+    position: fixed;
+    background: linear-gradient(to right, rgba( 0, 0, 0, 255 ) 30%, rgba( 0, 0, 0, 0 )), url( '/assets/screenshotPage1.png');
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+#step-3 {
+    position: fixed;
+    background: linear-gradient(to right, rgba( 0, 0, 0, 255 ) 30%, rgba( 0, 0, 0, 0 )), url( '/assets/screenshotPage2.png');
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+#step-4 {
+    position: fixed;
+    background: linear-gradient(to right, rgba( 0, 0, 0, 255 ) 30%, rgba( 0, 0, 0, 0 )), url( '/assets/screenshotPage3.png');
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+#step-5 {
+    position: fixed;
+    background: linear-gradient(to right, rgba( 0, 0, 0, 255 ) 30%, rgba( 0, 0, 0, 0 )), url( '/assets/screenshotPage4.png');
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+#step-6 {
     position: fixed;
     background: linear-gradient(to right, rgba( 0, 0, 0, 255 ) 30%, rgba( 0, 0, 0, 0 )), url( 'https://static.janishutz.com/Logo.png');
-}
+}

newVersion/css/navstyle.css

@@ -72,7 +72,7 @@
 }
 
 .listtoggle:hover .line {
-    background-color: rgb(29, 69, 105);
+    background-color: rgb(58, 149, 224);
     transition: 0.4s;
 }
 
@@ -124,7 +124,7 @@
 .navitem {
     text-decoration: none;
     text-align: center;
-    color: rgb(29, 69, 105);
+    color: rgb(168, 212, 253);
     font-size: 1.4rem;
     width: fit-content;
     padding: 2%;
@@ -138,13 +138,13 @@
 
 .inactive:hover {
     font-size: 1.6rem;
-    color: rgb(29, 69, 105);
+    color: rgb(168, 212, 253);
     transition: 0.4s;
 }
 
 /* ~ --> all next & + --> next */
 .shaded {
-    color: rgb(29, 69, 105);
+    color: rgb(168, 212, 253);
     transition: 0.3s;
 }
 

newVersion/css/style.css

@@ -20,12 +20,21 @@ body {
     -webkit-text-fill-color: currentColor;
 }
 
+
+.material-symbols-outlined {
+    font-variation-settings:
+    'FILL' 0,
+    'wght' 400,
+    'GRAD' 0,
+    'opsz' 48
+}
+
 /*
     GRADIENTS
 */
 
 .gradient-purple {
-    background-image: repeating-linear-gradient(to right, rgb(85, 19, 116), rgb(131, 28, 151), rgb(119, 77, 128));
+    background-image: repeating-linear-gradient(to right, rgb(30, 36, 131), rgb(87, 66, 184), rgb(105, 115, 214));
     width: fit-content;
     -webkit-background-clip: text;
     background-clip: text;

newVersion/index.html

@@ -6,6 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         
         <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet'>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
         <link rel="stylesheet" href="/css/style.css">
         <link rel="stylesheet" href="/css/homeStyle.css">
 
@@ -18,6 +19,34 @@
     </head>
     <body>
         <div id="nav"></div>
+
+        <div class="scroll-indicator" id="scroll-hint">
+            <div class="scroll-wrapper">
+                Scroll to discover more
+                <span class="material-symbols-outlined scroll-symbol">keyboard_double_arrow_down</span>
+            </div>
+        </div>
+
+        <div class="progress" id="progress">
+            <div class="progress-wrapper">
+                <span class="material-symbols-outlined progress-item" id="step1">radio_button_checked</span>
+                <span class="material-symbols-outlined progress-item" id="step2">radio_button_unchecked</span>
+                <span class="material-symbols-outlined progress-item" id="step3">radio_button_unchecked</span>
+                <span class="material-symbols-outlined progress-item" id="step4">radio_button_unchecked</span>
+                <span class="material-symbols-outlined progress-item" id="step5">radio_button_unchecked</span>
+                <span class="material-symbols-outlined progress-item" id="step6">radio_button_unchecked</span>
+            </div>
+        </div>
+        
+        <div class="background-images" id="images">
+            <img src="/assets/screenshotPage1.png" id="img1" style="z-index: -6; opacity: 1;">
+            <img src="/assets/screenshotPage2.png" id="img2" class="hidables" style="z-index: -5;">
+            <img src="/assets/screenshotPage3.png" id="img3" class="hidables" style="z-index: -4;">
+            <img src="/assets/screenshotPage4.png" id="img4" class="hidables" style="z-index: -3;">
+            <img src="/assets/screenshotPage5.png" id="img5" class="hidables" style="z-index: -2;">
+            <img src="/assets/screenshotPage6.png" id="img6" class="hidables" style="z-index: -1;">
+        </div>
+
         <div class="step" id="step-1">
             <div class="step-content">
                 <h1 class="gradient-purple huge small-margin">Web&shy;sites</h1>
@@ -25,35 +54,36 @@
             </div>
         </div>
 
-        <div class="step reveal">
+
+        <div class="step reveal" id="step-2">
             <div class="step-content">
                 <h1 class="gradient-purple biggest small-margin">Beau&shy;ti&shy;ful</h1>
                 <p class="white half-width">Get a website of any style you want</p>
             </div>
         </div>
 
-        <div class="step reveal">
+        <div class="step reveal" id="step-3">
             <div class="step-content">
                 <h1 class="gradient-purple biggest small-margin">Cus&shy;tom</h1>
                 <p class="white half-width">Built with the technologies used by frameworks, but without the downsides that come with them</p>
             </div>
         </div>
 
-        <div class="step reveal">
+        <div class="step reveal" id="step-4">
             <div class="step-content">
                 <h1 class="gradient-purple biggest small-margin">Static</h1>
                 <p class="white half-width">Websites that display your content in a stylish, beautiful manner, like this page</p>
             </div>
         </div>
 
-        <div class="step reveal">
+        <div class="step reveal" id="step-5">
             <div class="step-content">
                 <h1 class="gradient-purple biggest small-margin">Dynamic</h1>
                 <p class="white half-width">Websites that include blogs, contact forms, registration forms and many more dynamic features, like the order page</p>
             </div>
         </div>
 
-        <div class="step reveal">
+        <div class="step reveal" id="step-6">
             <div class="step-content">
                 <h1 class="gradient-purple huge small-margin">In&shy;te&shy;res&shy;ted?</h1>
                 <h3 class="gradient-purple bigger">contact me for an offer</h3>
@@ -62,6 +92,7 @@
 
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
         <script defer src="/js/scrolling.js"></script>
+        <script defer src="/js/index.js"></script>
 
         <script>
             $( '#nav' ).load( '/nav.html' );

newVersion/js/index.js

@@ -0,0 +1,13 @@
+setInterval( backgroundSwitching, 10000 );
+
+let id = 2;
+
+function backgroundSwitching () {
+    $( `#img${id}` ).addClass( 'visible' );
+    if ( id > 6 ) {
+        id = 2;
+        $( `.hidables` ).removeClass( 'visible' );
+    } else {
+        id++;
+    }
+}

newVersion/js/scrolling.js

@@ -1,5 +1,7 @@
 $( document ).ready( function () {
 
+    sessionStorage.getItem( 'menuOpen' ) ? sessionStorage.setItem( 'menuOpen', sessionStorage.getItem( 'menuOpen' ) ) : sessionStorage.setItem( 'menuOpen', false );
+
     document.addEventListener( 'scroll', scrolled );
     document.addEventListener( 'resize', scrolled );
 
@@ -13,14 +15,63 @@ $( document ).ready( function () {
         }
     }
 
+    trackProgress();
+
+    let timeout = setTimeout( showScrollHint, 10000 );
+
+    if ( currentlyShowing >= revealables.length ) {
+        clearTimeout( timeout );
+    }
+
+    function showScrollHint () {
+        if ( !sessionStorage.getItem( 'menuOpen' ) ) {
+            $( '#scroll-hint' ).fadeIn( 300 );
+        } else {
+            timeout = setTimeout( showScrollHint, 10000 );
+        }
+    }
+
     function scrolled() {
         heights = $( document ).height() / ( revealables.length + 1 );
         let regPos = Math.round( window.scrollY / heights );
         if ( regPos < currentlyShowing && regPos < parseInt( revealables.length ) ) {
             revealables[ regPos ].classList.remove( 'active' );
+            clearTimeout( timeout );
+            $( '#scroll-hint' ).fadeOut( 300 );
+            if ( regPos < revealables.length ) {
+                timeout = setTimeout( showScrollHint, 10000 );
+            }
         } else if ( regPos > currentlyShowing && regPos < parseInt( revealables.length ) + 1 ) {
             revealables[ currentlyShowing ].classList.add( 'active' );
+            clearTimeout( timeout );
+            $( '#scroll-hint' ).fadeOut( 300 );
+            if ( regPos < revealables.length ) {
+                timeout = setTimeout( showScrollHint, 10000 );
+            }
         }
         currentlyShowing = regPos;
+        trackProgress();
     }
+
+    function trackProgress () {
+        $( '.progress-item' ).html( `radio_button_unchecked` );
+        document.getElementById( `step${currentlyShowing + 1}` ).innerHTML = `radio_button_checked`;
+    }
+
+    $( '.progress-item' ).click( function () {
+        let future = parseInt( $( this ).attr( 'id' ).substring( 4 ) ) - 1;
+        for ( let i = 0; i < future + 1; i++ ) {
+            $( `#step${i + 1}` ).html( `radio_button_checked` );
+            $( `#step-${i + 1}` ).addClass( 'active' );
+        }
+
+        for ( let i = future + 1; i < revealables.length + 1; i++ ) {
+            console.log( i + 1 );
+            $( `#step${i + 1}` ).html( `radio_button_unchecked` );
+            $( `#step-${i + 1}` ).removeClass( 'active' );
+        }
+        currentlyShowing = future;
+        trackProgress();
+        window.scrollTo( { top: ( parseInt( $( this ).attr( 'id' ).substring( 4 ) ) - 1 ) * heights, behavior: 'instant' } );
+    } );
 } );

newVersion/order/index.html

@@ -6,6 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         
         <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet'>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
         <link rel="stylesheet" href="/css/style.css">
         <link rel="stylesheet" href="/css/homeStyle.css">
 
@@ -23,7 +24,14 @@
             <h3 class="gradient-purple bigger">Ready for your new website?</h3>
         </div>
 
-        <div class="step reveal">
+        <div class="progress" id="progress">
+            <div class="progress-wrapper">
+                <span class="material-symbols-outlined progress-item" id="step1">radio_button_checked</span>
+                <span class="material-symbols-outlined progress-item" id="step2">radio_button_unchecked</span>
+            </div>
+        </div>
+
+        <div class="step reveal" id="step-2">
             <h1 class="gradient-purple biggest small-margin">Beau&shy;ti&shy;ful</h1>
             <p class="white">Get a website of any style you want</p>
         </div>