From 3fbdc40e54e86123073609c9518e1fda3045fd0f Mon Sep 17 00:00:00 2001 From: Tony Lea Date: Sun, 1 Sep 2024 20:37:17 -0400 Subject: [PATCH] Adding latest to drift --- README.md | 4 +- assets/js/main.js | 31 ++++++++++++- collections/themes.json | 24 ++++++++--- includes/logo.html | 7 ++- pages/themes.html | 96 +++++++++++++++++++++++------------------ 5 files changed, 110 insertions(+), 52 deletions(-) diff --git a/README.md b/README.md index b53d79a..0d3b662 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,3 @@ -# Static Website +# Wave Website -This is the repo for the Static website at https://static.devdojo.com [WIP] +This is the repo for the Wave website at https://devdojo.com/wave [WIP] diff --git a/assets/js/main.js b/assets/js/main.js index fad72ee..32244fd 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -426,4 +426,33 @@ window.FeatureScroller = function(){ } }); } -} \ No newline at end of file +} + + +// Initial setup +let scrollRotationAngle = 0; // Initial rotation angle based on scroll +let hoverRotationAngle = 0; // Initial additional rotation angle on hover + +// Scroll Event +document.addEventListener('scroll', function() { + const rotatingElement = document.getElementById('rotating-logo-icon'); + const rotatingElementMobile = document.getElementById('logo-icon-mobile'); + const scrollPosition = window.scrollY; + scrollRotationAngle = scrollPosition / 5; // Adjust the division factor to control speed + rotatingElement.style.transform = `rotate(${scrollRotationAngle + hoverRotationAngle}deg)`; + rotatingElementMobile.style.transform = `rotate(${scrollRotationAngle + hoverRotationAngle}deg)`; +}); + +// Hover Events +const rotatingElement = document.getElementById('rotating-logo-icon'); +const logoDesktop = document.getElementById('logo-desktop'); +logoDesktop.addEventListener('mouseenter', function() { + hoverRotationAngle += 45; // Increase the rotation by 45 degrees on hover + rotatingElement.style.transform = `rotate(${scrollRotationAngle + hoverRotationAngle}deg)`; +}); + +logoDesktop.addEventListener('mouseleave', function() { + // Optional: Reset hover rotation if you want it to rotate back to the scroll position + hoverRotationAngle -= 45; // Comment this line if you want the rotation to accumulate + rotatingElement.style.transform = `rotate(${scrollRotationAngle + hoverRotationAngle}deg)`; +}); \ No newline at end of file diff --git a/collections/themes.json b/collections/themes.json index ec10d3b..a875127 100644 --- a/collections/themes.json +++ b/collections/themes.json @@ -1,26 +1,38 @@ [ { "name" : "Anchor", - "cover" : "https://cdn.devdojo.com/images/august2024/theme-anchor.jpeg", + "cover" : "https://cdn.devdojo.com/images/august2024/wave-anchor-theme.jpeg", "download" : "https://github.com/thedevdojo/wave/tree/main/resources/themes/anchor", "slug" : "anchor", "description": "Anchor is the default theme available. This theme is clean with a sidebar app layout design.", - "repo" : "https://github.com/thedevdojo/wave" + "repo" : "https://github.com/thedevdojo/wave", + "access" : "free" }, { "name" : "Blank", - "cover" : "https://cdn.devdojo.com/images/august2024/theme-blank.jpeg", + "cover" : "https://cdn.devdojo.com/images/august2024/blank.jpeg", "download" : "https://github.com/thedevdojo/blank/archive/refs/heads/main.zip", "slug" : "blank", "description": "This is a minimal blank theme that can be used to easily modify. It also contains a sidebar app layout.", - "repo" : "https://github.com/thedevdojo/wave" + "repo" : "https://github.com/thedevdojo/wave", + "access" : "free" }, { "name" : "Cove", - "cover" : "https://cdn.devdojo.com/images/august2024/theme-cove.jpeg", + "cover" : "https://cdn.devdojo.com/images/august2024/cove-cover.jpeg", "download" : "https://github.com/thedevdojo/cove/archive/refs/heads/main.zip", "slug" : "cove", "description": "This blue colored theme is a good template for showcasing your SaaS. Top bar app layout", - "repo" : "https://github.com/thedevdojo/wave" + "repo" : "https://github.com/thedevdojo/wave", + "access" : "free" + }, + { + "name" : "Drift", + "cover" : "https://cdn.devdojo.com/images/september2024/drift-theme.jpeg", + "download" : "/wave/download/drift", + "slug" : "drift", + "description": "A clean and modern theme with a beautiful horizontal menu dashboard.", + "repo" : "https://github.com/thedevdojo/wave", + "access" : "pro" } ] \ No newline at end of file diff --git a/includes/logo.html b/includes/logo.html index 3293d3c..ab3e891 100644 --- a/includes/logo.html +++ b/includes/logo.html @@ -1,4 +1,7 @@ \ No newline at end of file diff --git a/pages/themes.html b/pages/themes.html index b2284d8..26f5c77 100644 --- a/pages/themes.html +++ b/pages/themes.html @@ -1,57 +1,71 @@ - +

Themes

-

Each theme is designed to be easily customizable, allowing you to tailor your application's appearance to your brand's unique style.

+

Each theme is designed to be easily customizable, allowing you to tailor your application's appearance to your brand's unique style.

-
- - -
-
-
- - -
-
-