bismillahcss
Version:
The next-gen utility-first CSS framework for modern, futuristic web development.
226 lines • 19.9 kB
JavaScript
#!/usr/bin/env node
import{a as n}from"./chunk-YBRKC3QV.mjs";import"./chunk-XIJ2ZQRX.mjs";import{Command as z}from"commander";import{Command as u}from"commander";import y from"prompts";import x from"path";import f from"fs-extra";import v from"ora";import{z as e}from"zod";var d=e.object({style:e.string().default("./src/index.css"),darkMode:e.boolean().default(!0),theme:e.enum(["default","futuristic","neon"]).default("futuristic"),componentsDir:e.string().default("./components")});var c=new u().name("init").description("Initialize your bismillahcss project").action(async()=>{let i=await y([{type:"text",name:"stylePath",message:"Where is your global CSS file?",initial:"./src/index.css"},{type:"toggle",name:"darkMode",message:"Enable dark mode?",initial:!0,active:"yes",inactive:"no"}]),t=v("Initializing bismillahcss...").start(),a={style:i.stylePath,darkMode:i.darkMode,theme:"futuristic"},r=d.parse(a);await f.writeJSON(x.join(process.cwd(),"bismillah.config.json"),r,{spaces:2}),t.succeed("bismillahcss initialized successfully!")});import{Command as w}from"commander";import S from"prompts";import p from"path";import b from"fs-extra";import k from"ora";var m=["hero-ultra","navbar-ultra","feature-cards-ultra","sidebar-ultra","glow-buttons-ultra","dashboard-ultra","pricing-ultra","table-ultra","btn-glass-ultra","badge-neon-ultra","input-cyber-ultra","card-gradient-ultra","aurora-bg-elite","tooltip-cyber-elite","input-elite-ultra","card-float-elite","card-royal-elite","btn-royal-elite","card-prism-elite","progress-vapor-elite","card-vapor-elite","b-glass","b-neumorphic","b-skeuo","b-brutalist","b-cyber-neon","b-clay","b-aurora"],C={"hero-ultra":`<!-- BismillahCSS Hero Ultra -->
<section class="b-hero-ultra" style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at center, #1a1a2e 0%, #0f0f1a 100%); color: white; position: relative; overflow: hidden;">
<div class="b-container" style="text-align: center; z-index: 10;">
<h1 style="font-size: 5rem; letter-spacing: -2px; margin-bottom: 20px; font-weight: 800; background: linear-gradient(90deg, #00f2fe 0%, #4facfe 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Beyond The Future</h1>
<p style="font-size: 1.25rem; opacity: 0.8; max-width: 600px; margin: 0 auto 40px;">Experience the world's most advanced design intelligence layer. Fast, accessible, and breathtakingly beautiful.</p>
<button class="b-btn b-magnetic" style="padding: 15px 40px; border-radius: 50px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; cursor: pointer; backdrop-filter: blur(10px); transition: all 0.3s ease;">Get Started</button>
</div>
<!-- Ambient Glare -->
<div class="b-glare" style="position: absolute; width: 600px; height: 600px; background: radial-gradient(circle, rgba(0,242,254,0.1) 0%, rgba(0,0,0,0) 70%); top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;"></div>
</section>`,"navbar-ultra":`<!-- BismillahCSS Navbar Ultra -->
<nav class="b-navbar-ultra" style="position: fixed; top: 0; left: 0; right: 0; padding: 20px 0; z-index: 1000; background: rgba(15, 15, 26, 0.8); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.05);">
<div class="b-container" style="display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 20px;">
<div class="b-brand" style="font-weight: 800; font-size: 1.5rem; color: white; letter-spacing: -1px;">Bismillah<span style="color: #00f2fe;">CSS</span></div>
<ul style="display: flex; gap: 30px; list-style: none; margin: 0; padding: 0;">
<li><a href="#" style="color: rgba(255,255,255,0.8); text-decoration: none; font-size: 0.9rem; transition: color 0.2s;">Features</a></li>
<li><a href="#" style="color: rgba(255,255,255,0.8); text-decoration: none; font-size: 0.9rem; transition: color 0.2s;">Components</a></li>
<li><a href="#" style="color: rgba(255,255,255,0.8); text-decoration: none; font-size: 0.9rem; transition: color 0.2s;">Docs</a></li>
</ul>
<button class="b-btn" style="padding: 10px 24px; border-radius: 8px; background: linear-gradient(90deg, #00f2fe 0%, #4facfe 100%); color: white; border: none; cursor: pointer; font-weight: 600;">Download</button>
</div>
</nav>`,"feature-cards-ultra":`<!-- BismillahCSS Feature Cards Ultra -->
<section class="b-feature-cards" style="padding: 100px 20px; background: #0f0f1a;">
<div class="b-container" style="max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;">
<div class="b-card b-spotlight" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); padding: 40px; border-radius: 20px; transition: transform 0.3s ease;">
<h3 style="color: white; font-size: 1.5rem; margin-top: 0;">Spatial Logic</h3>
<p style="color: rgba(255,255,255,0.6); line-height: 1.6;">Build interfaces that understand the environment natively.</p>
</div>
<div class="b-card b-spotlight" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); padding: 40px; border-radius: 20px; transition: transform 0.3s ease;">
<h3 style="color: white; font-size: 1.5rem; margin-top: 0;">Zero Runtime</h3>
<p style="color: rgba(255,255,255,0.6); line-height: 1.6;">Performance built-in from the ground up, no bloat.</p>
</div>
<div class="b-card b-spotlight" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); padding: 40px; border-radius: 20px; transition: transform 0.3s ease;">
<h3 style="color: white; font-size: 1.5rem; margin-top: 0;">Intent-Based</h3>
<p style="color: rgba(255,255,255,0.6); line-height: 1.6;">Declarative state management tied directly to visuals.</p>
</div>
</div>
</section>`,"sidebar-ultra":`<!-- BismillahCSS Sidebar Ultra -->
<aside class="b-sidebar-ultra" style="width: 280px; height: 100vh; background: #151522; border-right: 1px solid rgba(255,255,255,0.05); padding: 30px;">
<div class="b-brand" style="color: white; font-weight: bold; font-size: 1.2rem; margin-bottom: 40px;">Bismillah System</div>
<ul style="list-style: none; padding: 0; display: flex; flex-direction: column; gap: 15px;">
<li><a href="#" style="color: white; text-decoration: none; display: flex; align-items: center; padding: 10px 15px; border-radius: 8px; background: rgba(0,242,254,0.1);">Overview</a></li>
<li><a href="#" style="color: rgba(255,255,255,0.5); text-decoration: none; display: flex; align-items: center; padding: 10px 15px; border-radius: 8px; transition: background 0.2s;">Analytics</a></li>
<li><a href="#" style="color: rgba(255,255,255,0.5); text-decoration: none; display: flex; align-items: center; padding: 10px 15px; border-radius: 8px; transition: background 0.2s;">Settings</a></li>
</ul>
</aside>`,"glow-buttons-ultra":`<!-- BismillahCSS Glow Buttons Ultra -->
<div class="b-glow-buttons" style="padding: 50px; display: flex; gap: 20px; justify-content: center; background: #0f0f1a;">
<button class="b-btn b-glow" style="position: relative; padding: 15px 40px; font-size: 1rem; font-weight: bold; color: white; background: #111; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; cursor: pointer; overflow: hidden; box-shadow: 0 0 20px rgba(0,242,254,0.2);">
Initialize Core
</button>
<button class="b-btn b-glow-secondary" style="position: relative; padding: 15px 40px; font-size: 1rem; font-weight: bold; color: white; background: transparent; border: 1px solid #00f2fe; border-radius: 8px; cursor: pointer; overflow: hidden; box-shadow: inset 0 0 20px rgba(0,242,254,0.1);">
Secondary Protocol
</button>
</div>`,"dashboard-ultra":`<!-- BismillahCSS Dashboard Ultra -->
<div class="b-dashboard-ultra" style="display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; background: #0f0f1a; color: white;">
<aside style="border-right: 1px solid rgba(255,255,255,0.05); padding: 20px;">
<!-- Inject Sidebar Here -->
<h3 style="margin-top: 0; font-size: 1rem; opacity: 0.5; text-transform: uppercase;">Menu</h3>
</aside>
<main style="padding: 40px;">
<header style="margin-bottom: 40px; display: flex; justify-content: space-between; align-items: center;">
<h1 style="margin: 0;">Command Center</h1>
<div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #00f2fe, #4facfe);"></div>
</header>
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px;">
<div style="background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); padding: 30px; border-radius: 15px;">
<p style="margin: 0 0 10px; opacity: 0.6;">Total Volume</p>
<h2 style="margin: 0; font-size: 2.5rem;">$1.2M</h2>
</div>
</div>
</main>
</div>`,"pricing-ultra":`<!-- BismillahCSS Pricing Ultra -->
<section class="b-pricing-ultra" style="padding: 100px 20px; background: #050507; color: white;">
<div class="b-container" style="max-width: 1200px; margin: 0 auto;">
<div style="text-align: center; margin-bottom: 60px;">
<h2 style="font-size: 3rem; margin: 0; background: linear-gradient(90deg, #00f2fe, #4facfe); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Premium Tiers</h2>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;">
<div class="bismillah-pricing-ultra">
<h3>Pro Tier</h3>
<div class="price">$49<span style="font-size: 1rem; color: rgba(255,255,255,0.5);">/mo</span></div>
<ul style="list-style: none; padding: 0; text-align: left; margin: 30px 0;">
<li style="margin-bottom: 10px; color: rgba(255,255,255,0.8);">\u2713 Advanced Analytics</li>
<li style="margin-bottom: 10px; color: rgba(255,255,255,0.8);">\u2713 Premium Support</li>
</ul>
<button class="bismillah-btn-neon" style="width: 100%;">Select Plan</button>
</div>
<!-- More tiers... -->
</div>
</div>
</section>`,"table-ultra":`<!-- BismillahCSS Table Ultra -->
<div class="b-table-container" style="padding: 40px; background: #0a0a0c;">
<table class="bismillah-table-ultra">
<thead>
<tr>
<th>System</th>
<th>Status</th>
<th>Latency</th>
</tr>
</thead>
<tbody>
<tr>
<td>Core Engine</td>
<td><span style="color: #00f2ff;">Online</span></td>
<td>12ms</td>
</tr>
<tr>
<td>Data Layer</td>
<td><span style="color: #00f2ff;">Online</span></td>
<td>8ms</td>
</tr>
</tbody>
</table>
</div>`,"btn-glass-ultra":`<!-- BismillahCSS Glass Button -->
<button class="bismillah-btn-glass">
Elevate Experience
</button>`,"badge-neon-ultra":`<!-- BismillahCSS Neon Badges -->
<div style="display: flex; gap: 10px; padding: 20px;">
<span class="bismillah-badge-neon">Active</span>
<span class="bismillah-badge-neon success">Deployed</span>
<span class="bismillah-badge-neon warning">Pending</span>
</div>`,"input-cyber-ultra":`<!-- BismillahCSS Cyber Input -->
<div style="padding: 20px; max-width: 400px;">
<label style="color: rgba(255,255,255,0.5); display: block; margin-bottom: 8px; font-size: 0.8rem;">Access Token</label>
<input type="text" class="bismillah-input-cyber" placeholder="Enter secure key...">
</div>`,"card-gradient-ultra":`<!-- BismillahCSS Gradient Card -->
<div class="b-container" style="padding: 40px; max-width: 500px;">
<div class="bismillah-card-gradient">
<div class="bismillah-card-gradient-inner">
<h3 style="color: white; margin-top: 0;">Neural Interface</h3>
<p style="color: rgba(255,255,255,0.6);">Connect your consciousness to the global grid with zero latency.</p>
<button class="bismillah-btn-glass" style="width: 100%; margin-top: 20px;">Initiate Link</button>
</div>
</div>
</div>`,"aurora-bg-elite":`<!-- BismillahCSS Aurora Elite Background -->
<div class="bismillah-aurora-bg" style="min-height: 500px; display: flex; align-items: center; justify-content: center; color: white; text-align: center; padding: 40px;">
<div style="z-index: 1;">
<h1 style="font-size: 3.5rem; margin-bottom: 20px;">Aurora Architecture</h1>
<p style="opacity: 0.7; max-width: 500px;">Adaptive ambient lighting that evolves with your interface state.</p>
</div>
</div>`,"tooltip-cyber-elite":`<!-- BismillahCSS Cyber Tooltip -->
<div style="padding: 100px; display: flex; justify-content: center; background: #050507;">
<span class="bismillah-tooltip-cyber" data-tooltip="Quantum Decryption Protocol Active" style="color: white; border-bottom: 1px dashed #00f2ff; padding: 4px;">
Hover for System Status
</span>
</div>`,"input-elite-ultra":`<!-- BismillahCSS Elite Input -->
<div style="padding: 40px; max-width: 400px; background: #050507; border-radius: 20px;">
<div class="bismillah-input-container-elite">
<input type="text" class="bismillah-input-elite" placeholder="Command identity...">
<div class="bismillah-input-elite-border"></div>
</div>
</div>`,"card-float-elite":`<!-- BismillahCSS Floating Glass Card -->
<div style="padding: 60px; background: #050507; display: flex; justify-content: center;">
<div class="bismillah-card-float" style="max-width: 350px;">
<div style="width: 80px; height: 80px; background: rgba(0,242,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; border: 1px solid rgba(0,242,255,0.3);">
<span style="color: #00f2ff; font-size: 2rem;">\u26A1</span>
</div>
<h3 style="color: white; margin-top: 0;">Levitational Design</h3>
<p style="color: rgba(255,255,255,0.5); line-height: 1.6;">Interfaces that defy standard gravity physics.</p>
</div>
</div>`,"card-royal-elite":`<!-- BismillahCSS Royal Card -->
<div style="padding: 60px; background: #050507; display: flex; justify-content: center;">
<div class="bismillah-card-royal" style="max-width: 400px;">
<div class="bismillah-header-royal">
<h2 class="bismillah-text-silk" style="font-size: 2rem;">Imperial</h2>
</div>
<p style="color: rgba(255,255,255,0.7); line-height: 1.8; font-size: 1.1rem;">A design language curated for the elite. Silk gradients meet golden ambient light.</p>
<button class="bismillah-btn-royal" style="margin-top: 30px;">Enter Sanctuary</button>
</div>
</div>`,"btn-royal-elite":`<!-- BismillahCSS Royal Silk Button -->
<div style="padding: 40px; background: #050507; display: flex; justify-content: center;">
<button class="bismillah-btn-royal">Imperial Action</button>
</div>`,"card-prism-elite":`<!-- BismillahCSS Prism Geometric Card -->
<div style="padding: 60px; background: #0a0a0c; display: flex; justify-content: center;">
<div class="bismillah-card-prism" style="max-width: 350px;">
<span class="bismillah-label-prism">Core v3.0</span>
<h3 style="color: white; margin-top: 20px;">Prism Architecture</h3>
<p style="color: rgba(255,255,255,0.6); line-height: 1.6;">Crystalline geometric design patterns for high-fidelity data interfaces.</p>
<button class="bismillah-btn-prism" style="margin-top: 20px;">Access Node</button>
</div>
</div>`,"progress-vapor-elite":`<!-- BismillahCSS Vapor Progress -->
<div style="padding: 40px; background: #0a0a0c;">
<div class="bismillah-progress-vapor">
<div class="bismillah-progress-vapor-bar"></div>
</div>
</div>`,"card-vapor-elite":`<!-- BismillahCSS Vapor Card -->
<div style="padding: 60px; background: #0a0a0c; display: flex; justify-content: center;">
<div class="bismillah-card-vapor" style="max-width: 350px;">
<h3 style="color: white; margin-top: 0;">Ethereal Logic</h3>
<p style="color: rgba(255,255,255,0.4); line-height: 1.8;">Lightweight design language with blurred radial ambient lighting.</p>
<button class="bismillah-btn-vapor">Initiate Phase</button>
</div>
</div>`,"b-glass":`<!-- BismillahCSS Glassmorphism Primitive -->
<div class="b-glass p-12 text-center rounded-3xl border border-white/20">
<h2 class="text-3xl font-bold text-white">Glass Surface</h2>
<p class="text-white/70">Frosted glass effect with deep backdrop blur.</p>
</div>`,"b-neumorphic":`<!-- BismillahCSS Neumorphism Primitive -->
<div class="b-neumorphic p-12 text-center rounded-3xl">
<h2 class="text-3xl font-bold text-slate-700">Soft UI</h2>
<button class="b-neumorphic-inset px-6 py-2 mt-4 font-bold text-slate-600">PRESSED STATE</button>
</div>`,"b-skeuo":`<!-- BismillahCSS Skeuomorphism Primitive -->
<div class="b-skeuo p-12 text-center rounded-3xl">
<h2 class="text-3xl font-bold italic text-slate-800">Physical Realism</h2>
<div class="h-10 w-10 bg-slate-200 rounded-full border border-slate-400 shadow-xl mx-auto mt-4"></div>
</div>`,"b-brutalist":`<!-- BismillahCSS Brutalism Primitive -->
<div class="b-brutalist p-12 bg-yellow-400 border-4 border-black">
<h2 class="text-3xl font-black uppercase text-black">Raw Core</h2>
<p class="font-bold border-2 border-black inline-block px-2 mt-2">VERSION 3.0</p>
</div>`,"b-cyber-neon":`<!-- BismillahCSS Cyber Neon Primitive -->
<div class="b-cyber-neon p-12 bg-black border-2 border-cyan-400 rounded-lg">
<h2 class="text-3xl font-mono text-cyan-400 uppercase tracking-tighter">Cyber Link Active</h2>
<div class="grid grid-cols-3 gap-2 mt-4">
<div class="h-1 bg-cyan-400/30 animate-pulse"></div>
<div class="h-1 bg-cyan-400"></div>
<div class="h-1 bg-cyan-400/30"></div>
</div>
</div>`,"b-clay":`<!-- BismillahCSS Claymorphism Primitive -->
<div class="b-clay p-12 text-center bg-blue-400 rounded-[40px] text-white">
<h2 class="text-3xl font-bold">Clay Softness</h2>
<p class="mt-2 opacity-80">Smooth inner shadows for high-tactile depth.</p>
</div>`,"b-aurora":`<!-- BismillahCSS Aurora Wave Primitive -->
<div class="b-aurora p-12 rounded-3xl text-white text-center min-h-[200px] flex flex-col justify-center">
<h2 class="text-3xl font-black italic">Northern Lights</h2>
<p class="mt-2 opacity-90">Dynamic animated mesh gradients.</p>
</div>`},g=new w().name("add").description("Add a futuristic component to your project").argument("[component]","the component to add").action(async i=>{let t=i;if(t||(t=(await S({type:"select",name:"component",message:"Which component do you want to add?",choices:m.map(o=>({title:o,value:o}))})).component),!t||!m.includes(t)){console.error(n.red(`Error: Component ${t} not found.`));return}let a=k(`Adding ${t}...`).start(),r=p.join(process.cwd(),"components",`${t}.html`);await b.ensureDir(p.dirname(r));try{let s=C[t]||`<!-- ${t} Placeholder -->`;await b.writeFile(r,s,"utf-8"),a.succeed(`${t} added successfully to ./components/${t}.html`)}catch(s){a.fail(`Failed to add ${t}. Make sure you are in the framework directory or have installed the package correctly.`),console.error(s)}});var h="3.1.2";var l=new z;l.name("bismillahcss").description("Futuristic CSS framework for modern web development").version(h);l.addCommand(c);l.addCommand(g);l.parse();
//# sourceMappingURL=cli.mjs.map