bismillahcss
Version:
The next-gen utility-first CSS framework for modern, futuristic web development.
466 lines (425 loc) • 13.3 kB
text/typescript
/**
* BismillahCSS-UI /FUTURISTIC/
* Design Intelligence Primitives
*/
/**
* Tracks mouse position on an element for spotlight/glow effects.
* Usage: bSpotlight(element)
*/
export function bSpotlight(el: HTMLElement) {
el.addEventListener('mousemove', (e: MouseEvent) => {
const { left, top } = el.getBoundingClientRect();
const x = e.clientX - left;
const y = e.clientY - top;
el.style.setProperty('--mouse-x', `${x}px`);
el.style.setProperty('--mouse-y', `${y}px`);
});
}
/**
* Handle floating navbar shrink/move on scroll.
*/
export function bFloatingNav(el: HTMLElement, threshold = 50) {
window.addEventListener('scroll', () => {
if (window.scrollY > threshold) {
el.classList.add('scrolled');
} else {
el.classList.remove('scrolled');
}
});
}
/**
* Progressive text reveal trigger.
*/
export function bTextReveal(el: HTMLElement) {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
el.classList.add('active');
}
});
}, { threshold: 0.2 });
observer.observe(el);
}
/**
* Magnetic element effect.
*/
export function bMagnetic(el: HTMLElement, strength = 0.5) {
el.addEventListener('mousemove', (e: MouseEvent) => {
const { left, top, width, height } = el.getBoundingClientRect();
const centerX = left + width / 2;
const centerY = top + height / 2;
const deltaX = (e.clientX - centerX) * strength;
const deltaY = (e.clientY - centerY) * strength;
el.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
});
el.addEventListener('mouseleave', () => {
el.style.transform = `translate(0px, 0px)`;
});
}
/**
* Tracks mouse position for glare reflection.
*/
export function bGlare(el: HTMLElement) {
el.addEventListener('mousemove', (e: MouseEvent) => {
const { left, top, width, height } = el.getBoundingClientRect();
const x = ((e.clientX - left) / width) * 100;
const y = ((e.clientY - top) / height) * 100;
el.style.setProperty('--glare-x', `${x}%`);
el.style.setProperty('--glare-y', `${y}%`);
});
}
/**
* Tracks mouse for circular text reveal effects.
*/
export function bReveal(el: HTMLElement) {
el.addEventListener('mousemove', (e: MouseEvent) => {
const { left, top, width, height } = el.getBoundingClientRect();
const x = ((e.clientX - left) / width) * 100;
const y = ((e.clientY - top) / height) * 100;
el.style.setProperty('--reveal-x', `${x}%`);
el.style.setProperty('--reveal-y', `${y}%`);
});
}
/**
* Autocomplete functionality.
*/
export function bAutocomplete(el: HTMLElement) {
el.classList.add('b-autocomplete-futu');
const input = el.querySelector('input');
if (input) {
input.style.width = '100%';
input.style.background = 'rgba(255,255,255,0.02)';
input.style.border = '1px solid rgba(255,255,255,0.1)';
input.style.padding = '12px';
input.style.borderRadius = '8px';
input.style.color = '#fff';
}
}
/**
* Button functionality.
*/
export function bButton(el: HTMLElement) {
el.classList.add('b-btn-futu');
el.style.padding = '12px 24px';
el.style.borderRadius = '8px';
el.style.cursor = 'pointer';
el.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
el.style.border = '1px solid rgba(255,255,255,0.1)';
el.style.background = 'rgba(255,255,255,0.05)';
el.style.color = '#fff';
el.style.fontWeight = '600';
el.addEventListener('mouseenter', () => {
el.style.background = 'rgba(255,255,255,0.1)';
el.style.borderColor = '#00f2ff';
el.style.boxShadow = '0 0 15px rgba(0,242,255,0.2)';
});
el.addEventListener('mouseleave', () => {
el.style.background = 'rgba(255,255,255,0.05)';
el.style.borderColor = 'rgba(255,255,255,0.1)';
el.style.boxShadow = 'none';
});
}
/**
* Button Group functionality.
*/
export function bButtonGroup(el: HTMLElement) {
el.style.display = 'inline-flex';
el.style.gap = '1px';
el.style.borderRadius = '8px';
el.style.overflow = 'hidden';
el.style.border = '1px solid rgba(255,255,255,0.1)';
}
/**
* Checkbox functionality.
*/
export function bCheckbox(el: HTMLElement) {
el.classList.add('b-checkbox-futu');
el.style.width = '20px';
el.style.height = '20px';
el.style.border = '2px solid rgba(255,255,255,0.2)';
el.style.borderRadius = '4px';
el.style.cursor = 'pointer';
el.style.transition = '0.3s';
}
/**
* Floating Action Button functionality.
*/
export function bFloatingActionButton(el: HTMLElement) {
el.classList.add('b-fab-futu');
el.style.width = '56px';
el.style.height = '56px';
el.style.borderRadius = '50%';
el.style.background = '#00f2ff';
el.style.boxShadow = '0 10px 30px rgba(0,242,255,0.3)';
el.style.display = 'flex';
el.style.alignItems = 'center';
el.style.justifyContent = 'center';
el.style.position = 'fixed';
el.style.bottom = '32px';
el.style.right = '32px';
}
/**
* Text Field functionality.
*/
export function bTextField(el: HTMLElement) {
el.classList.add('b-input-futu');
el.style.width = '100%';
el.style.padding = '14px 20px';
el.style.background = 'rgba(15, 15, 26, 0.5)';
el.style.border = '1px solid rgba(255,255,255,0.1)';
el.style.borderRadius = '12px';
el.style.color = 'white';
el.style.outline = 'none';
el.style.transition = 'all 0.3s ease';
el.addEventListener('focus', () => {
el.style.borderColor = '#00f2ff';
el.style.boxShadow = '0 0 20px rgba(0, 242, 255, 0.2)';
el.style.background = 'rgba(15, 15, 26, 0.8)';
});
el.addEventListener('blur', () => {
el.style.borderColor = 'rgba(255,255,255,0.1)';
el.style.boxShadow = 'none';
el.style.background = 'rgba(15, 15, 26, 0.5)';
});
}
/**
* Card functionality.
*/
export function bCard(el: HTMLElement) {
el.classList.add('b-card-futu');
el.style.background = 'rgba(20, 20, 25, 0.7)';
el.style.backdropFilter = 'blur(16px)';
(el.style as any).webkitBackdropFilter = 'blur(16px)';
el.style.border = '1px solid rgba(255,255,255,0.1)';
el.style.borderRadius = '24px';
el.style.padding = '32px';
el.style.transition = 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)';
el.addEventListener('mouseenter', () => {
el.style.transform = 'translateY(-10px)';
el.style.borderColor = 'rgba(0, 242, 255, 0.3)';
el.style.boxShadow = '0 20px 40px rgba(0, 0, 0, 0.4)';
});
el.addEventListener('mouseleave', () => {
el.style.transform = 'translateY(0)';
el.style.borderColor = 'rgba(255,255,255,0.1)';
el.style.boxShadow = 'none';
});
}
/**
* Alert functionality.
*/
export function bAlert(el: HTMLElement) {
el.classList.add('b-alert-futu');
el.style.padding = '16px';
el.style.borderRadius = '12px';
el.style.background = 'rgba(0, 242, 255, 0.05)';
el.style.borderLeft = '4px solid #00f2ff';
el.style.color = '#fff';
el.style.display = 'flex';
el.style.alignItems = 'center';
el.style.gap = '12px';
}
/**
* Dialog functionality.
*/
export function bDialog(el: HTMLElement) {
el.classList.add('b-dialog-futu');
el.style.position = 'fixed';
el.style.top = '50%';
el.style.left = '50%';
el.style.transform = 'translate(-50%, -50%)';
el.style.background = 'rgba(10,10,15,0.9)';
el.style.backdropFilter = 'blur(20px)';
el.style.border = '1px solid rgba(255,255,255,0.1)';
el.style.padding = '40px';
el.style.borderRadius = '24px';
el.style.zIndex = '2000';
el.style.boxShadow = '0 30px 60px rgba(0,0,0,0.5)';
}
/**
* CircularProgress functionality.
*/
export function bCircularProgress(el: HTMLElement) {
el.classList.add('b-circular-progress');
el.style.width = '40px';
el.style.height = '40px';
el.style.borderRadius = '50%';
el.style.border = '3px solid rgba(0, 242, 255, 0.1)';
el.style.borderTopColor = '#00f2ff';
el.style.animation = 'b-spin 1s linear infinite';
if (!document.getElementById('b-spin-style')) {
const style = document.createElement('style');
style.id = 'b-spin-style';
style.innerHTML = '@keyframes b-spin { to { transform: rotate(360deg); } }';
document.head.appendChild(style);
}
}
/**
* Stepper functionality.
*/
export function bStepper(el: HTMLElement) {
el.style.display = 'flex';
el.style.justifyContent = 'space-between';
el.style.padding = '20px';
el.style.background = 'rgba(255,255,255,0.02)';
el.style.borderBottom = '1px solid rgba(255,255,255,0.05)';
}
/**
* Tabs functionality.
*/
export function bTabs(el: HTMLElement) {
el.style.display = 'flex';
el.style.gap = '20px';
el.style.borderBottom = '1px solid rgba(255,255,255,0.1)';
el.style.padding = '0 10px';
}
/**
* Tooltip functionality.
*/
export function bTooltip(el: HTMLElement) {
el.style.cursor = 'help';
el.addEventListener('mouseenter', () => {
// Implementation for Tooltip logic
});
}
/**
* AccordionActions functionality.
*/
export function bAccordionActions(el: HTMLElement) {
el.classList.add('b-accordion-actions');
el.style.display = 'flex';
el.style.alignItems = 'center';
el.style.justifyContent = 'flex-end';
el.style.padding = '8px';
}
/**
* AlertTitle functionality.
*/
export function bAlertTitle(el: HTMLElement) {
el.classList.add('b-alert-title');
el.style.fontWeight = '700';
el.style.marginBottom = '4px';
el.style.fontSize = '1.1rem';
}
/**
* Table functionality.
*/
export function bTable(el: HTMLElement) {
el.classList.add('b-table-futu');
el.style.width = '100%';
el.style.borderCollapse = 'separate';
el.style.borderSpacing = '0 8px';
}
/**
* Box functionality.
*/
export function bBox(el: HTMLElement) {
el.style.display = 'block';
}
/**
* Container functionality.
*/
export function bContainer(el: HTMLElement) {
el.style.maxWidth = '1200px';
el.style.margin = '0 auto';
el.style.padding = '0 20px';
}
/**
* Grid functionality.
*/
export function bGrid(el: HTMLElement) {
el.style.display = 'grid';
el.style.gap = '16px';
}
/**
* Stack functionality.
*/
export function bStack(el: HTMLElement) {
el.style.display = 'flex';
el.style.flexDirection = 'column';
el.style.gap = '16px';
}
/**
* CSS Baseline functionality.
*/
export function bCSSBaseline(el: HTMLElement) {
document.body.style.margin = '0';
document.body.style.background = '#0a0a0c';
document.body.style.color = '#fff';
document.body.style.fontFamily = 'Inter, sans-serif';
}
/**
* Avatar functionality.
*/
export function bAvatar(el: HTMLElement) {
el.style.width = '40px';
el.style.height = '40px';
el.style.borderRadius = '50%';
el.style.overflow = 'hidden';
el.style.background = '#222';
}
/**
* Badge functionality.
*/
export function bBadge(el: HTMLElement) {
el.style.display = 'inline-flex';
el.style.padding = '2px 6px';
el.style.borderRadius = '20px';
el.style.fontSize = '11px';
el.style.background = '#00f2ff';
el.style.color = '#000';
}
/**
* Chip functionality.
*/
export function bChip(el: HTMLElement) {
el.style.display = 'inline-flex';
el.style.padding = '6px 12px';
el.style.borderRadius = '50px';
el.style.background = 'rgba(255,255,255,0.05)';
el.style.border = '1px solid rgba(255,255,255,0.1)';
el.style.fontSize = '0.9rem';
}
/**
* Divider functionality.
*/
export function bDivider(el: HTMLElement) {
el.style.height = '1px';
el.style.background = 'rgba(255,255,255,0.05)';
el.style.width = '100%';
el.style.margin = '16px 0';
}
/**
* Breadcrumbs functionality.
*/
export function bBreadcrumbs(el: HTMLElement) {
el.style.display = 'flex';
el.style.gap = '8px';
el.style.color = 'rgba(255,255,255,0.5)';
}
/**
* App Bar functionality.
*/
export function bAppBar(el: HTMLElement) {
el.style.height = '64px';
el.style.background = 'rgba(15,15,26,0.8)';
el.style.backdropFilter = 'blur(10px)';
el.style.display = 'flex';
el.style.alignItems = 'center';
el.style.padding = '0 24px';
}
/**
* Pagination functionality.
*/
export function bPagination(el: HTMLElement) {
el.style.display = 'flex';
el.style.gap = '4px';
}
/**
* Stepper logic bridge.
*/
export function bTimeline(el: HTMLElement) {
el.style.display = 'flex';
el.style.flexDirection = 'column';
el.style.gap = '20px';
}