diff --git a/Documentation/ZephyrJS.md b/Documentation/ZephyrJS.md
new file mode 100644
index 0000000..e69de29
diff --git a/Documentation/templates/LayeredCard.md b/Documentation/templates/LayeredCard.md
new file mode 100644
index 0000000..08fca21
--- /dev/null
+++ b/Documentation/templates/LayeredCard.md
@@ -0,0 +1,36 @@
+# LayeredCard Component
+
+## Purpose and Use Case
+
+The LayeredCard component is designed to enhance user experience by providing contextual information in an innovative and non-intrusive manner. It reimagines how additional content can be presented alongside primary information, breathing new life into traditional UX design patterns.
+
+### Key Features:
+
+1. **Contextual Information Display**: The component allows for the presentation of supplementary information that directly relates to the main content of the card. This contextual element moves with the user's cursor, providing relevant details based on the area of focus.
+
+2. **Enhanced User Engagement**: By revealing additional information dynamically, the LayeredCard encourages users to explore content more deeply, increasing engagement and information retention.
+
+3. **Space Efficiency**: Instead of cluttering the main view with all available information, the LayeredCard keeps the primary content clean and unobstructed while making supplementary details easily accessible.
+
+4. **Intuitive Interaction**: The popover follows the user's mouse movement, creating a natural and intuitive way to access additional information without the need for clicks or navigation.
+
+5. **Flexible Content Presentation**: Both the main content and the contextual popover can contain rich HTML, allowing for diverse and complex information structures.
+
+### Ideal Use Cases:
+
+- **Product Catalogs**: Displaying additional product details or specifications without cluttering the main product card.
+- **Educational Materials**: Providing definitions, explanations, or additional context for complex topics.
+- **Data Visualization**: Offering detailed information about specific data points in charts or graphs.
+- **Interactive Stories**: Enhancing storytelling by revealing background information or character details.
+- **User Interfaces**: Explaining UI elements or providing quick tips without resorting to lengthy tooltips.
+
+### Design Considerations:
+
+While the LayeredCard component offers exciting possibilities for UX enhancement, it's important to use it judiciously:
+
+1. **Avoid Overuse**: The component should be employed selectively to prevent overwhelming the user with too much dynamic content.
+2. **Ensure Relevance**: The contextual information should always be directly relevant to the main content to maintain a coherent user experience.
+3. **Accessibility**: Consider users who may not be able to use a mouse; ensure that critical information is also accessible through other means.
+4. **Performance**: Be mindful of the content loaded into the popover to maintain smooth performance, especially on mobile devices.
+
+By leveraging the LayeredCard component thoughtfully, designers and developers can create more engaging, informative, and interactive user interfaces that provide a fresh take on content presentation and user interaction.
\ No newline at end of file
diff --git a/README.md b/README.md
index 5d5b67c..7fe04bc 100644
--- a/README.md
+++ b/README.md
@@ -311,6 +311,358 @@ From there, you will be able to make full usage of ZephyrJS.
```
+ZephyrJS also boasts a CSS Framework which houses utility classes and animations.
+
+### Available Utilities
+#### Available Color Categories
+
+#### Basic Colors: Standard colors like blue, red, green, etc.
+
+- --blue,
+- --red,
+- --green
+
+
+#### Extended Colors: Additional named colors for more variety.
+
+- --lime,
+- --gold,
+- --navy
+
+#### Light Shades: Lighter versions of basic colors.
+
+- --blue-light,
+- --red-light,
+- --green-light
+
+
+#### Dark Shades: Darker versions of basic colors.
+
+- --blue-dark,
+- --red-dark,
+- --green-dark
+
+
+#### Pastel Shades: Soft, muted colors.
+
+- --pastel-blue,
+- --pastel-green,
+- --pastel-pink
+
+
+#### Additional Shades: Extra light variations of colors.
+
+- --light-blue,
+- --light-coral,
+- --light-sea-green
+
+
+#### Custom Shades: Specific color variations for your project.
+
+- --custom-blue,
+- --custom-green,
+- --custom-red
+
+
+#### Semantic Colors: Colors with specific meanings or uses.
+
+- --info-color,
+- --success-color,
+- --danger-color
+
+
+#### Gradient Colors: Predefined gradient backgrounds.
+
+- --gradient-primary,
+- --gradient-secondary
+
+
+#### Shadows: Predefined shadow styles.
+
+- --shadow-light,
+- --shadow-dark
+
+### Layout
+#### Container and Grid System
+
+- .container: Main container class
+- .row: Flex row
+- .col: Flex column
+
+### Display
+
+- .d-none,
+- .d-inline,
+- .d-inline-block,
+- .d-block,
+- .d-table,
+- .d-table-row,
+- .d-table-cell,
+- .d-flex,
+- .d-inline-flex
+- Responsive variants: .d-{breakpoint}-{value} (e.g., .d-md-none)
+
+### Flexbox
+
+- Flex container: .d-flex, .d-inline-flex
+- Justify content: .justify-content-start, .justify-content-end, .justify-content-center, .justify-content-between, .justify-content-around
+- Align items: .align-items-start, .align-items-end, .align-items-center, .align-items-baseline, .align-items-stretch
+
+### Positioning
+
+- .position-static,
+- .position-relative,
+- .position-absolute,
+- .position-fixed,
+- .position-sticky
+- .top-0,
+- .right-0,
+- .bottom-0,
+- .left-0,
+- .top-50,
+- .right-50,
+- .bottom-50,
+- .left-50,
+- .top-100,
+- .right-100,
+- .bottom-100,
+- .left-100
+- .translate-middle,
+- .translate-middle-x,
+- .translate-middle-y
+
+### Spacing
+#### Margin
+
+- .m-0 to .m-5,
+- .mt-0 to .mt-5,
+- .mr-0 to .mr-5,
+- .mb-0 to .mb-5,
+- .ml-0 to .ml-5
+- .mx-0 to .mx-5,
+- .my-0 to .my-5
+- .m-auto,
+- .mx-auto,
+- .my-auto
+
+### Padding
+
+- .p-0 to .p-5,
+- .pt-0 to .pt-5,
+- .pr-0 to .pr-5,
+- .pb-0 to .pb-5,
+- .pl-0 to .pl-5
+- .px-0 to .px-5,
+- .py-0 to .py-5
+
+### Typography
+#### Font Size
+
+- .text-xs,
+- .text-sm,
+- .text-base,
+- .text-lg,
+- .text-xl,
+- .text-2xl,
+- .text-3xl,
+- .text-4xl
+
+### Font Weight
+
+- .font-light,
+- .font-normal,
+- .font-medium,
+- .font-semibold,
+- .font-bold
+
+### Text Alignment
+
+- .text-left,
+- .text-center,
+- .text-right,
+- .text-justify
+
+### Text Decoration
+
+- .underline,
+- .line-through,
+- .no-underline
+
+### Text Transform
+
+- .uppercase,
+- .lowercase,
+- .capitalize,
+- .normal-case
+
+### Line Height
+
+- .leading-none,
+- .leading-tight,
+- .leading-normal,
+- .leading-loose
+
+### Letter Spacing
+
+- .tracking-tight,
+- .tracking-normal,
+- .tracking-wide
+
+### Colors
+#### Background Colors
+
+- .bg-primary,
+- .bg-secondary,
+- .bg-success,
+- .bg-danger,
+- .bg-warning,
+- .bg-info,
+- .bg-light,
+- .bg-dark
+
+### Text Colors
+
+- .text-primary,
+- .text-secondary,
+- .text-success,
+- .text-danger,
+- .text-warning,
+- .text-info,
+- .text-light,
+- .text-dark
+
+### Borders
+
+- .border,
+- .border-top,
+- .border-right,
+- .border-bottom,
+- .border-left,
+- .border-0
+- .rounded,
+- .rounded-top,
+- .rounded-right,
+- .rounded-bottom,
+- .rounded-left,
+- .rounded-circle,
+- .rounded-0
+
+### Shadows
+
+- .shadow-sm,
+- .shadow,
+- .shadow-lg,
+- .shadow-none
+
+### Sizing
+#### Width
+
+- .w-25,
+- .w-50,
+- .w-75,
+- .w-100,
+- .w-auto
+- .max-w-25,
+- .max-w-50,
+- .max-w-75,
+- .max-w-100,
+- .max-w-none
+
+### Height
+
+- .h-25,
+- .h-50,
+- .h-75,
+- .h-100,
+- .h-auto
+- .max-h-25,
+- .max-h-50,
+- .max-h-75,
+- .max-h-100,
+- .max-h-none
+
+### Interactions
+
+- .pointer-events-none,
+- .pointer-events-auto
+- .user-select-none,
+- .user-select-auto
+
+### Overflow
+
+- .overflow-auto,
+- .overflow-hidden,
+- .overflow-visible,
+- .overflow-scroll
+- .overflow-x-auto,
+- .overflow-x-hidden,
+- .overflow-x-visible,
+- .overflow-x-scroll
+- .overflow-y-auto,
+- .overflow-y-hidden,
+- .overflow-y-visible,
+- .overflow-y-scroll
+
+### Accessibility
+
+- .focus-visible: Provides a visible outline for keyboard focus
+- .skip-to-main: Allows keyboard users to skip to the main content
+- .high-contrast-border: Adds a border in high contrast mode
+- .reduce-motion: Removes animations and transitions for users who prefer reduced motion
+
+### Logical Properties
+
+- Margin: .m-inline-start-1, .m-inline-end-1, .m-block-start-1, .m-block-end-1
+- Padding: .p-inline-start-1, .p-inline-end-1, .p-block-start-1, .p-block-end-1
+- Border: .border-inline-start, .border-inline-end, .border-block-start, .border-block-end
+- Text alignment: .text-start, .text-end
+- Position: .inset-inline-start-0, .inset-inline-end-0, .inset-block-start-0, .inset-block-end-0
+
+### Responsive Classes
+#### Many utilities include responsive variants that apply at different breakpoints:
+
+- sm: Small screens (≥576px)
+- md: Medium screens (≥768px)
+- lg: Large screens (≥992px)
+- xl: Extra large screens (≥1200px)
+
+### Reset
+- visible - sets item visible
+- invisible - sets item invisible
+
+### Available Animations
+
+- fade-in: Fades in the element
+- swing: Swings the element back and forth
+- slide-in-left: Slides in the element from different directions
+- slide-in-right: Slides in the element from different directions
+- slide-in-up: Slides in the element from different directions
+- slide-in-down: Slides in the element from different directions
+- slide-in-bottom: Slides in the element from different directions
+- slide-out-top: Slides out the element to the top
+- bounce: Makes the element bounce
+- rotate: Rotates the element 360 degrees
+- zoom-in, zoom-out: Zooms the element in or out
+- flip: Flips the element horizontally
+- pulse: Makes the element pulse
+- shake: Shakes the element
+- wobble: Makes the element wobble
+- text-hide: Hides text by moving it up
+- text-reveal: Reveals text by moving it up
+- typewriter: Creates a typewriter effect
+- floating: Makes the element float up and down
+- blur-in, blur-out: Blurs the element in or out
+- hinge: Creates a hinge effect
+- glitch: Creates a glitch effect
+- ripple: Creates a ripple effect
+- spotlight: Creates a spotlight effect
+- text-shadow-pop: Makes text pop out with a shadow
+- elastic-scale: Scales the element with an elastic effect
+- roll-in, roll-out: Rolls the element in or out
+- flash: Makes the element flash
+- swing-in, swing-out: Swings the element in or out
+
+
### License
ZephyrJS is MIT licensed.
diff --git a/zephyrcore/zephyr.js b/zephyrcore/zephyr.js
index 7e1c828..2301b81 100644
--- a/zephyrcore/zephyr.js
+++ b/zephyrcore/zephyr.js
@@ -3,7 +3,7 @@
* and data binding capabilities.
*/
export default class ZephyrJS extends HTMLElement {
- static baseUrl = 'https://cdn.jsdelivr.net/gh/RPDevJesco/ZephyrJS@0.09';
+ static baseUrl = '';
static setBaseUrl(url) {
ZephyrJS.baseUrl = url.endsWith('/') ? url : url + '/';
diff --git a/zephyrcss/animations.css b/zephyrcss/animations.css
index 99be305..0f93a46 100644
--- a/zephyrcss/animations.css
+++ b/zephyrcss/animations.css
@@ -1,49 +1,15 @@
-.card, .button, .navbar {
- transition: transform 0.3s ease-in-out;
- transform-style: preserve-3d;
-}
-
-.card:hover, .button:hover, .navbar:hover {
- transform: perspective(1000px) rotateY(15deg) rotateX(15deg);
-}
-
+/* Swing */
@keyframes swing {
0% { transform: rotate(0deg); }
50% { transform: rotate(15deg); }
100% { transform: rotate(0deg); }
}
-
-.swing {
- display: inline-block;
- animation: swing 1s ease-in-out infinite;
-}
-
/* Fade In */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
-.fade-in {
- animation: fadeIn 1s ease-in-out;
-}
-
/* Slide In */
-@keyframes slideInLeft {
- from { transform: translateX(-100%); opacity: 0; }
- to { transform: translateX(0); opacity: 1; }
-}
-@keyframes slideInRight {
- from { transform: translateX(100%); opacity: 0; }
- to { transform: translateX(0); opacity: 1; }
-}
-@keyframes slideInUp {
- from { transform: translateY(100%); opacity: 0; }
- to { transform: translateY(0); opacity: 1; }
-}
-@keyframes slideInDown {
- from { transform: translateY(-100%); opacity: 0; }
- to { transform: translateY(0); opacity: 1; }
-}
.slide-in-left {
animation: slideInLeft 1s ease-in-out;
}
@@ -56,7 +22,12 @@
.slide-in-down {
animation: slideInDown 1s ease-in-out;
}
-
+.slide-in-bottom {
+ animation: slideInBottom 1s ease-in-out;
+}
+.slide-out-top {
+ animation: slideOutTop 1s ease-in-out;
+}
/* Bounce */
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
@@ -69,19 +40,12 @@
transform: translateY(-15px);
}
}
-.bounce {
- animation: bounce 2s infinite;
-}
-
/* Rotate */
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
-.rotate {
- animation: rotate 2s linear infinite;
-}
-
+/* Zoom */
@keyframes zoomIn {
from { transform: scale(0.5); opacity: 0; }
to { transform: scale(1); opacity: 1; }
@@ -90,39 +54,24 @@
from { transform: scale(1); opacity: 1; }
to { transform: scale(0.5); opacity: 0; }
}
-.zoom-in {
- animation: zoomIn 1s ease-in-out;
-}
-.zoom-out {
- animation: zoomOut 1s ease-in-out;
-}
-
+/* Flip */
@keyframes flip {
from { transform: rotateY(0); }
to { transform: rotateY(180deg); }
}
-.flip {
- animation: flip 1s ease-in-out;
-}
-
+/* Pulse */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
-.pulse {
- animation: pulse 1s infinite;
-}
-
+/* Shake */
@keyframes shake {
0%, 100% { transform: translateX(0); }
25%, 75% { transform: translateX(-10px); }
50% { transform: translateX(10px); }
}
-.shake {
- animation: shake 0.5s ease-in-out;
-}
-
+/* Wobble */
@keyframes wobble {
0%, 100% { transform: translateX(0); }
15% { transform: translateX(-25%) rotate(-5deg); }
@@ -131,51 +80,331 @@
60% { transform: translateX(10%) rotate(2deg); }
75% { transform: translateX(-5%) rotate(-1deg); }
}
-.wobble {
- animation: wobble 1s ease-in-out;
+/* Text Hide to Top */
+@keyframes textHide {
+ from {
+ transform: translateY(0);
+ opacity: 1;
+ }
+ to {
+ transform: translateY(-100%);
+ opacity: 0;
+ }
}
-
-/* Level Up Animation */
-@keyframes levelUpScale {
+/* Text Reveal from Bottom */
+@keyframes textReveal {
+ from {
+ transform: translateY(100%);
+ opacity: 0;
+ }
+ to {
+ transform: translateY(0);
+ opacity: 1;
+ }
+}
+/* The typing effect */
+@keyframes typing {
+ from { width: 0 }
+ to { width: 100% }
+}
+/* The typewriter cursor effect */
+@keyframes blink-caret {
+ from, to { border-color: transparent }
+ 50% { border-color: var(--light-text); }
+}
+/* Expand */
+@keyframes expand {
+ from { transform: scale(0); opacity: 0; }
+ to { transform: scale(1); opacity: 1; }
+}
+/* Collapse */
+@keyframes collapse {
+ from { transform: scale(1); opacity: 1; }
+ to { transform: scale(0); opacity: 0; }
+}
+/* Jello */
+@keyframes jello {
+ 0%, 11.1%, 100% { transform: none; }
+ 22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
+ 33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
+ 44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
+ 55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
+ 66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
+ 77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); }
+ 88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
+}
+/* Heartbeat */
+@keyframes heartbeat {
0% { transform: scale(1); }
- 50% { transform: scale(1.2); }
- 100% { transform: scale(1); }
+ 14% { transform: scale(1.3); }
+ 28% { transform: scale(1); }
+ 42% { transform: scale(1.3); }
+ 70% { transform: scale(1); }
+}
+/* Floating */
+@keyframes floating {
+ 0% { transform: translateY(0px); }
+ 50% { transform: translateY(-20px); }
+ 100% { transform: translateY(0px); }
+}
+/* Blur In */
+@keyframes blurIn {
+ from { filter: blur(20px); opacity: 0; }
+ to { filter: blur(0); opacity: 1; }
+}
+/* Blur Out */
+@keyframes blurOut {
+ from { filter: blur(0); opacity: 1; }
+ to { filter: blur(20px); opacity: 0; }
+}
+/* Hinge */
+@keyframes hinge {
+ 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }
+ 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }
+ 40%, 80% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; opacity: 1; }
+ 100% { transform: translate3d(0, 700px, 0); opacity: 0; }
+}
+/* Glitch Effect */
+@keyframes glitch {
+ 0% {
+ transform: translate(0)
+ }
+ 20% {
+ transform: translate(-5px, 5px)
+ }
+ 40% {
+ transform: translate(-5px, -5px)
+ }
+ 60% {
+ transform: translate(5px, 5px)
+ }
+ 80% {
+ transform: translate(5px, -5px)
+ }
+ to {
+ transform: translate(0)
+ }
}
-
-@keyframes levelUpGlow {
- 0% { box-shadow: 0 0 10px rgba(255, 215, 0, 0); }
- 50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.7); }
- 100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0); }
+/* Ripple Effect */
+@keyframes ripple {
+ 0% {
+ box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1), 0 0 0 20px rgba(0, 0, 0, 0.1), 0 0 0 40px rgba(0, 0, 0, 0.1), 0 0 0 60px rgba(0, 0, 0, 0.1);
+ }
+ 100% {
+ box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.1), 0 0 0 40px rgba(0, 0, 0, 0.1), 0 0 0 60px rgba(0, 0, 0, 0.1), 0 0 0 80px rgba(0, 0, 0, 0);
+ }
+}
+/* Spotlight Effect */
+@keyframes spotlight {
+ 0%, 100% {
+ background-position: 0% 0%;
+ }
+ 50% {
+ background-position: 100% 100%;
+ }
+}
+/* Text Shadow Pop */
+@keyframes textShadowPop {
+ 0% {
+ text-shadow: 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555;
+ transform: translateY(0);
+ }
+ 100% {
+ text-shadow: 1px 1px #555555, 2px 2px #555555, 3px 3px #555555, 4px 4px #555555, 5px 5px #555555, 6px 6px #555555, 7px 7px #555555, 8px 8px #555555;
+ transform: translateY(-8px);
+ }
+}
+/* Elastic Scale */
+@keyframes elasticScale {
+ 0% {
+ transform: scale(1);
+ }
+ 25% {
+ transform: scale(0.95);
+ }
+ 50% {
+ transform: scale(1.1);
+ }
+ 75% {
+ transform: scale(0.95);
+ }
+ 100% {
+ transform: scale(1);
+ }
+}
+/* Roll */
+@keyframes rollIn {
+ from {
+ opacity: 0;
+ transform: translateX(-100%) rotate(-120deg);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0) rotate(0deg);
+ }
+}
+@keyframes rollOut {
+ from {
+ opacity: 1;
+ transform: translateX(0) rotate(0deg);
+ }
+ to {
+ opacity: 0;
+ transform: translateX(100%) rotate(120deg);
+ }
+}
+/* Flash */
+@keyframes flash {
+ 0%, 50%, 100% { opacity: 1; }
+ 25%, 75% { opacity: 0; }
+}
+/* Swing */
+@keyframes swingIn {
+ from { transform: rotateX(-100deg); opacity: 0; }
+ 50% { transform: rotateX(-10deg); opacity: 1; }
+ to { transform: rotateX(0deg); }
+}
+@keyframes swingOut {
+ from { transform: rotateX(0deg); }
+ 50% { transform: rotateX(10deg); opacity: 1; }
+ to { transform: rotateX(100deg); opacity: 0; }
+}
+/* Scrolling */
+@keyframes scrolling {
+ 0% { transform: translateX(0); }
+ 100% { transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements))); }
}
-@keyframes particleBurst {
- 0% { opacity: 1; transform: translate(0, 0); }
- 100% { opacity: 0; transform: translate(50px, -50px); }
+.fade-in {
+ animation: fadeIn 1s ease-in-out;
+}
+.swing {
+ display: inline-block;
+ animation: swing 1s ease-in-out infinite;
+}
+.bounce {
+ animation: bounce 2s infinite;
+}
+.rotate {
+ animation: rotate 2s linear infinite;
+}
+.zoom-in {
+ animation: zoomIn 1s ease-in-out;
+}
+.zoom-out {
+ animation: zoomOut 1s ease-in-out;
+}
+.flip {
+ animation: flip 1s ease-in-out;
+}
+.pulse {
+ animation: pulse 1s infinite;
+}
+.shake {
+ animation: shake 0.5s ease-in-out;
+}
+.wobble {
+ animation: wobble 1s ease-in-out;
}
+.text-hide {
+ animation: textHide 1s ease-in-out;
+}
+.text-reveal {
+ overflow: hidden;
+ display: inline-block; /* Ensures animation doesn't affect surrounding content */
+ animation: textReveal 1s ease-in-out;
+}
+.typewriter {
+ overflow: hidden;
+ border-right: .15em solid var(--button-hover-bg);
+ white-space: nowrap;
+ margin: 0 auto;
+ letter-spacing: .15em;
+ animation:
+ typing 3.5s steps(40, end) forwards,
+ blink-caret .75s step-end infinite
+}
+.floating { animation: floating 3s ease-in-out infinite; }
+.blur-in { animation: blurIn 0.5s ease-out; }
+.blur-out { animation: blurOut 0.5s ease-in; }
+.hinge { animation: hinge 2s ease-in-out; }
+.swing-in {
+ animation: swingIn 1s ease-in-out;
+}
+.flash {
+ animation: flash 1s infinite;
+}
+.swing-out {
+ animation: swingOut 1s ease-in-out;
+}
+.roll-in {
+ animation: rollIn 1s ease-in-out;
+}
+.roll-out {
+ animation: rollOut 1s ease-in-out;
+}
+.glitch {
+ animation: glitch 0.8s infinite;
+}
+.ripple {
+ animation: ripple 1.5s linear infinite;
+}
+.spotlight {
+ background: linear-gradient(45deg, #ff00002b, #00ff002b, #0000ff2b);
+ background-size: 200% 200%;
+ animation: spotlight 5s ease infinite;
+}
+.text-shadow-pop {
+ animation: textShadowPop 0.6s both;
+}
+.elastic-scale {
+ animation: elasticScale 0.5s ease-in-out;
+}
+.marquee-container {
+ --marquee-elements: 4; /* Number of elements in your marquee */
+ --marquee-elements-displayed: 3; /* Number of elements you want displayed at a time */
+ --marquee-element-width: calc(100% / var(--marquee-elements-displayed));
+ --marquee-animation-duration: calc(var(--marquee-elements) * 5s);
-.level-up {
+ width: 100%;
+ overflow: hidden;
+ background: var(--background-color);
+ padding: 20px 0;
position: relative;
- animation: levelUpScale 1s ease-in-out, levelUpGlow 1s ease-in-out;
}
-
-.level-up::before, .level-up::after {
- content: '';
+.marquee-content {
+ display: flex;
+ width: calc(var(--marquee-element-width) * var(--marquee-elements));
+ animation: scrolling var(--marquee-animation-duration) linear infinite;
+}
+.marquee-content:hover {
+ animation-play-state: paused;
+}
+.marquee-content li {
+ flex: 0 0 var(--marquee-element-width);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ max-height: 100%;
+ font-size: calc(15px + (20 - 15) * ((100vw - 300px) / (1600 - 300))); /* Responsive font size */
+ white-space: nowrap;
+}
+.marquee-content:hover .marquee-item {
+ animation-play-state: paused;
+}
+.marquee-content::before,
+.marquee-content::after {
+ content: "";
+ height: 100%;
position: absolute;
- width: 10px;
- height: 10px;
- background: gold;
- border-radius: 50%;
- animation: particleBurst 0.5s ease-out forwards;
+ width: 10%;
+ z-index: 1;
}
-
-.level-up::before {
- top: 0;
+.marquee-content::before {
left: 0;
- animation-delay: 0s;
+ background: linear-gradient(to right, var(--background-color) 0%, transparent 100%);
}
-
-.level-up::after {
- bottom: 0;
+.marquee-content::after {
right: 0;
- animation-delay: 0.2s;
+ background: linear-gradient(to left, var(--background-color) 0%, transparent 100%);
}
\ No newline at end of file
diff --git a/zephyrcss/buttons.css b/zephyrcss/buttons.css
index ed53f37..608b084 100644
--- a/zephyrcss/buttons.css
+++ b/zephyrcss/buttons.css
@@ -23,6 +23,4 @@
color: #fff;
background-color: darken(var(--primary-color), 10%);
border-color: darken(var(--primary-color), 10%);
-}
-
-/* Additional button styles for secondary, success, danger, warning, info, light, and dark */
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/zephyrcss/themes/cool-winter-theme.css b/zephyrcss/themes/cool-winter-theme.css
index a96dedf..e494baf 100644
--- a/zephyrcss/themes/cool-winter-theme.css
+++ b/zephyrcss/themes/cool-winter-theme.css
@@ -1,115 +1,82 @@
[data-theme="cool-winter"] {
- /* Main palette colors */
- --primary-color: #2E3A59; /* Dark navy */
- --secondary-color: #5D8297; /* Cool blue */
- --accent-color: #A8C4E5; /* Light icy blue */
- --background-color: #E8F0F9; /* Soft icy blue */
- --neutral-color: #BCC7D3; /* Light gray-blue */
- --secondary-color-light: #DCE5F0; /* Light gray-blue */
-
- /* Semantic colors */
- --info-color: #1E90FF; /* Dodger blue */
- --info-background: #F0F8FF; /* Alice blue */
- --success-color: #32CD32; /* Lime green */
- --success-background: #F0FFF0; /* Honeydew */
- --danger-color: #FF6347; /* Tomato */
- --danger-background: #FFE4E1; /* Misty rose */
- --warning-color: #FFD700; /* Gold */
- --warning-background: #FFF8DC; /* Cornsilk */
-
- /* Text colors */
- --light-text: #F0F4FA; /* Very light blue */
- --dark-text: #1C2C42; /* Very dark navy */
-
- /* Component-specific colors */
- --button-hover-bg: #4682B4; /* Steel blue */
- --input-focus-border: #5D8297; /* Adjusted to match the secondary color */
- --button-click-bg: #1E90FF; /* Dodger blue */
-
- /* Typography */
- --font-family-sans-serif: "Montserrat", "Helvetica Neue", Arial, sans-serif;
- --font-family-serif: "Merriweather", Georgia, serif;
- --font-family-monospace: "Fira Code", "Courier New", monospace;
-
- /* Body styles */
+ /* Main Palette Colors */
+ --primary-color: var(--blue-dark); /* Dark navy */
+ --secondary-color: var(--blue-light); /* Cool blue */
+ --accent-color: var(--cyan-light); /* Light icy blue */
+ --background-color: var(--light-blue); /* Soft icy blue */
+ --neutral-color: var(--gray-light); /* Light gray-blue */
+ --secondary-color-light: var(--gray-light); /* Light gray-blue */
+
+ /* Semantic Colors */
+ --info-color: var(--info-color); /* Dodger blue */
+ --info-background: var(--info-background);/* Alice blue */
+ --success-color: var(--success-color); /* Lime green */
+ --success-background: var(--success-background); /* Honeydew */
+ --danger-color: var(--danger-color); /* Tomato */
+ --danger-background: var(--danger-background); /* Misty rose */
+ --warning-color: var(--warning-color); /* Gold */
+ --warning-background: var(--warning-background); /* Cornsilk */
+
+ /* Text Colors */
+ --light-text: var(--gray-light); /* Very light blue */
+ --dark-text: var(--gray-dark); /* Very dark navy */
+
+ /* Component-Specific Colors */
+ --button-hover-bg: var(--teal-dark); /* Steel blue */
+ --input-focus-border: var(--blue-light); /* Adjusted to match the secondary color */
+ --button-click-bg: var(--info-color); /* Dodger blue */
+
+ /* Body Styles */
--body-bg: var(--background-color);
- --body-color: #1C2C42; /* Very dark navy for main text */
+ --body-color: var(--dark-text); /* Very dark navy for main text */
- /* Link styles */
+ /* Link Styles */
--link-color: var(--accent-color);
--link-decoration: none;
- --link-hover-color: #4682B4; /* Steel blue */
+ --link-hover-color: var(--teal-dark); /* Steel blue */
- /* Additional theme-specific variables */
+ /* Additional Theme-Specific Variables */
--header-bg: var(--primary-color);
--header-color: var(--neutral-color);
--footer-bg: var(--secondary-color);
--footer-color: var(--primary-color);
--button-primary-bg: var(--accent-color);
- --button-primary-color: white;
- --card-bg: white;
+ --button-primary-color: var(--white);
+ --card-bg: var(--white);
--card-border: var(--neutral-color);
- /* Button specific variables */
- --button-padding: 10px 20px;
- --button-border-radius: 5px;
- --button-font-size: 1em;
- --button-primary-bg-color: var(--accent-color);
+ /* Button Specific Variables */
--button-disabled-background: var(--neutral-color);
- /* Card specific variables */
+ /* Card Specific Variables */
--card-box-shadow: var(--shadow-light);
- --card-padding: 16px;
- --card-border-radius: 8px;
- --card-header-font-size: 1.5em;
- --card-header-margin-bottom: 12px;
- --card-content-margin-top: 8px;
/* CardGroup Component Variables */
- --card-group-gap: 1rem;
- --card-min-width: 250px;
- --card-border-color: #BCC7D3;
- --card-header-color: #1C2C42;
- --card-content-color: #2E3A59;
- --card-content-font-size: 1rem;
+ --card-border-color: var(--neutral-color);
+ --card-header-color: var(--dark-text);
+ --card-content-color: var(--primary-color);
- /* Input specific variables */
- --input-margin: 10px 0;
- --input-padding: 10px;
+ /* Input Specific Variables */
--input-border: 1px solid var(--neutral-color);
- --input-border-radius: 4px;
- --input-font-size: 1rem;
--input-focus-border-color: var(--secondary-color);
- /* Dropdown specific variables */
- --dropdown-padding: 10px;
+ /* Dropdown Specific Variables */
--dropdown-border: 1px solid var(--neutral-color);
- --dropdown-border-radius: 4px;
- --dropdown-font-size: 1rem;
--dropdown-background: var(--background-color);
--dropdown-arrow: url('data:image/svg+xml;utf8,
+
+ ${this.originalContent}
+
+
+
+
+ ${this.originalContent}
+
+
+ `;
+ console.log('DynamicFocusZone rendered');
+ }
+}
+
+defineCustomElement('zephyr-focus-zone', DynamicFocusZone);
\ No newline at end of file
diff --git a/zephyrtemplates/LayeredCard.js b/zephyrtemplates/LayeredCard.js
new file mode 100644
index 0000000..a4ff257
--- /dev/null
+++ b/zephyrtemplates/LayeredCard.js
@@ -0,0 +1,149 @@
+import { ZephyrJS, defineCustomElement } from "../zephyrcore/zephyr.js";
+
+export default class LayeredCard extends ZephyrJS {
+ static get isCoreTemplate() {
+ return true;
+ }
+
+ static get observedAttributes() {
+ return ['card-width', 'card-height', 'mask-opacity'];
+ }
+
+ attributeChangedCallback(name, oldValue, newValue) {
+ if (name === 'card-width') this.style.width = newValue;
+ if (name === 'card-height') this.style.height = newValue;
+ if (name === 'mask-opacity') this.setState({ maskOpacity: parseFloat(newValue) });
+ }
+
+ constructor() {
+ super();
+ this.state = {
+ maskOpacity: 0.1,
+ popoverVisible: false,
+ mousePosition: { x: 0, y: 0 },
+ };
+ }
+
+ async connectedCallback() {
+ await super.connectedCallback();
+ await this.render();
+ this.setupEventListeners();
+ }
+
+ setupEventListeners() {
+ this.addEventListener('mousemove', this.handleMouseMove.bind(this));
+ this.addEventListener('mouseleave', this.handleMouseLeave.bind(this));
+ this.addEventListener('touchmove', this.handleTouchMove.bind(this));
+ this.addEventListener('touchend', this.handleMouseLeave.bind(this));
+ }
+
+ handleMouseMove(event) {
+ const rect = this.getBoundingClientRect();
+ const x = event.clientX - rect.left;
+ const y = event.clientY - rect.top;
+
+ this.updateMousePosition(x, y);
+ this.showPopover();
+ }
+
+ handleTouchMove(event) {
+ event.preventDefault();
+ const touch = event.touches[0];
+ this.handleMouseMove(touch);
+ }
+
+ handleMouseLeave() {
+ this.setState({ popoverVisible: false });
+ }
+
+ updateMousePosition(x, y) {
+ this.setState({ mousePosition: { x, y } });
+ }
+
+ showPopover() {
+ this.setState({ popoverVisible: true });
+ this.dispatchEvent(new CustomEvent('popover-shown', {
+ detail: { x: this.state.mousePosition.x, y: this.state.mousePosition.y }
+ }));
+ }
+
+ async setState(newState) {
+ await super.setState(newState);
+ await this.updatePopover();
+ }
+
+ async updatePopover() {
+ if (!this.shadowRoot) return;
+
+ const popover = this.shadowRoot.querySelector('.popover-layer');
+ if (popover) {
+ const { popoverVisible, mousePosition } = this.state;
+ popover.style.display = popoverVisible ? 'block' : 'none';
+ popover.style.top = `${mousePosition.y}px`;
+ popover.style.left = `${mousePosition.x}px`;
+ popover.style.opacity = popoverVisible ? '1' : '0';
+ }
+ }
+
+ render() {
+ if (!this.shadowRoot) return;
+
+ const { maskOpacity, mousePosition } = this.state;
+
+ this.shadowRoot.innerHTML = `
+
+
+
+
+
+
+ `;
+ }
+}
+
+defineCustomElement('zephyr-layered-card', LayeredCard);
\ No newline at end of file
diff --git a/zephyrtemplates/ZephyrCore.js b/zephyrtemplates/ZephyrCore.js
index edcc3a5..2992984 100644
--- a/zephyrtemplates/ZephyrCore.js
+++ b/zephyrtemplates/ZephyrCore.js
@@ -1,5 +1,6 @@
export const Themes = Object.freeze({
DEFAULT: Symbol('default'),
+ SHELBY: Symbol('shelby'),
COOL_WINTER: Symbol('cool-winter'),
DARK: Symbol('dark'),
ELEGANT: Symbol('elegant'),
@@ -30,6 +31,7 @@ window.Themes = Themes;
window.setTheme = setTheme;
import BasicCard from "../zephyrtemplates/BasicCard.js";
+import LayeredCard from "../zephyrtemplates/LayeredCard.js";
import ModalDialog from "../zephyrtemplates/ModalDialog.js";
import Notification from "../zephyrtemplates/Notification.js";
import Button from "../zephyrtemplates/Button.js";
@@ -56,4 +58,5 @@ import MarkdownShowcase from "../zephyrtemplates/MarkdownShowcase.js";
import TimelineView from "../zephyrtemplates/TimelineView.js";
import TimelineItem from "../zephyrtemplates/TimelineItem.js";
import Modal from "../zephyrtemplates/Modal.js";
-import Blog from "../zephyrtemplates/Blog.js";
\ No newline at end of file
+import Blog from "../zephyrtemplates/Blog.js";
+import DynamicFocusZone from "../zephyrtemplates/DynamicFocusZone.js";
\ No newline at end of file
diff --git a/zephyrtemplates/templates/dynamicfocuszone.html b/zephyrtemplates/templates/dynamicfocuszone.html
new file mode 100644
index 0000000..0e64433
--- /dev/null
+++ b/zephyrtemplates/templates/dynamicfocuszone.html
@@ -0,0 +1,43 @@
+
+
+
+
\ No newline at end of file
diff --git a/zephyrtemplates/templates/layeredcard.html b/zephyrtemplates/templates/layeredcard.html
new file mode 100644
index 0000000..1a30bd3
--- /dev/null
+++ b/zephyrtemplates/templates/layeredcard.html
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+
+
\ No newline at end of file