<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG & CSS Generator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<header>
<div class="container">
<h1>SVG & CSS Generator</h1>
<p class="subtitle">Create beautiful SVG graphics and CSS with real-time preview</p>
</div>
</header>
<div class="container">
<div class="tabs">
<button class="tab active" data-tab="svg">SVG Generator</button>
<button class="tab" data-tab="box-shadow">Box Shadow</button>
<button class="tab" data-tab="text-shadow">Text Shadow</button>
<button class="tab" data-tab="gradient">Gradient</button>
<button class="tab" data-tab="filter">CSS Filter</button>
<button class="tab" data-tab="animation">Animation</button>
<button class="tab" data-tab="border-radius">Border Radius</button>
<button class="tab" data-tab="flexbox">Flexbox</button>
<button class="tab" data-tab="grid">CSS Grid</button>
</div>
<!-- SVG Generator Tab -->
<div class="tab-content active" id="svg">
<div class="generator-container">
<div class="controls-panel">
<h2 class="panel-title">SVG Controls</h2>
<div class="control-group">
<label class="control-label">Shape Type</label>
<div class="shape-selector">
<div class="shape-option selected" data-shape="circle">Circle</div>
<div class="shape-option" data-shape="rect">Rectangle</div>
<div class="shape-option" data-shape="polygon">Polygon</div>
<div class="shape-option" data-shape="star">Star</div>
<div class="shape-option" data-shape="ellipse">Ellipse</div>
<div class="shape-option" data-shape="path">Path</div>
</div>
</div>
<div class="control-group" id="circle-controls">
<label class="control-label">Radius</label>
<div class="control-row">
<input type="range" id="circle-radius" min="10" max="150" value="80">
<input type="number" id="circle-radius-value" min="10" max="150" value="80">
</div>
</div>
<div class="control-group" id="rect-controls" style="display: none;">
<label class="control-label">Width</label>
<div class="control-row">
<input type="range" id="rect-width" min="20" max="300" value="160">
<input type="number" id="rect-width-value" min="20" max="300" value="160">
</div>
<label class="control-label" style="margin-top: 1rem;">Height</label>
<div class="control-row">
<input type="range" id="rect-height" min="20" max="300" value="100">
<input type="number" id="rect-height-value" min="20" max="300" value="100">
</div>
<label class="control-label" style="margin-top: 1rem;">Border Radius</label>
<div class="control-row">
<input type="range" id="rect-radius" min="0" max="50" value="10">
<input type="number" id="rect-radius-value" min="0" max="50" value="10">
</div>
</div>
<div class="control-group" id="polygon-controls" style="display: none;">
<label class="control-label">Number of Sides</label>
<div class="control-row">
<input type="range" id="polygon-sides" min="3" max="12" value="6">
<input type="number" id="polygon-sides-value" min="3" max="12" value="6">
</div>
<label class="control-label" style="margin-top: 1rem;">Size</label>
<div class="control-row">
<input type="range" id="polygon-size" min="30" max="150" value="80">
<input type="number" id="polygon-size-value" min="30" max="150" value="80">
</div>
</div>
<div class="control-group" id="star-controls" style="display: none;">
<label class="control-label">Points</label>
<div class="control-row">
<input type="range" id="star-points" min="3" max="12" value="5">
<input type="number" id="star-points-value" min="3" max="12" value="5">
</div>
<label class="control-label" style="margin-top: 1rem;">Outer Radius</label>
<div class="control-row">
<input type="range" id="star-outer" min="30" max="150" value="80">
<input type="number" id="star-outer-value" min="30" max="150" value="80">
</div>
<label class="control-label" style="margin-top: 1rem;">Inner Radius</label>
<div class="control-row">
<input type="range" id="star-inner" min="10" max="100" value="40">
<input type="number" id="star-inner-value" min="10" max="100" value="40">
</div>
</div>
<div class="control-group" id="ellipse-controls" style="display: none;">
<label class="control-label">X Radius</label>
<div class="control-row">
<input type="range" id="ellipse-rx" min="20" max="150" value="100">
<input type="number" id="ellipse-rx-value" min="20" max="150" value="100">
</div>
<label class="control-label" style="margin-top: 1rem;">Y Radius</label>
<div class="control-row">
<input type="range" id="ellipse-ry" min="20" max="150" value="60">
<input type="number" id="ellipse-ry-value" min="20" max="150" value="60">
</div>
</div>
<div class="control-group">
<label class="control-label">Fill Color</label>
<div class="control-row">
<input type="color" id="fill-color" value="#6366f1">
<input type="text" id="fill-color-text" value="#6366f1">
</div>
</div>
<div class="control-group">
<label class="control-label">Stroke Color</label>
<div class="control-row">
<input type="color" id="stroke-color" value="#4f46e5">
<input type="text" id="stroke-color-text" value="#4f46e5">
</div>
</div>
<div class="control-group">
<label class="control-label">Stroke Width</label>
<div class="control-row">
<input type="range" id="stroke-width" min="0" max="10" value="2">
<input type="number" id="stroke-width-value" min="0" max="10" value="2">
</div>
</div>
<div class="control-group">
<label class="control-label">Rotation</label>
<div class="control-row">
<input type="range" id="rotation" min="0" max="360" value="0">
<input type="number" id="rotation-value" min="0" max="360" value="0">
</div>
</div>
</div>
<div class="preview-panel">
<h2 class="panel-title">Preview</h2>
<div class="preview-area" id="svg-preview">
<svg width="300" height="300" viewBox="0 0 300 300">
<circle cx="150" cy="150" r="80" fill="#6366f1" stroke="#4f46e5" stroke-width="2" />
</svg>
</div>
<div class="code-panel">
<div class="code-header">
<span class="code-title">SVG Code</span>
<button class="copy-btn" data-target="svg-code">Copy Code</button>
</div>
<pre id="svg-code"><span class="tag"><svg</span> <span class="attr">width</span>=<span class="value">"300"</span> <span class="attr">height</span>=<span class="value">"300"</span> <span class="attr">viewBox</span>=<span class="value">"0 0 300 300"</span><span class="tag">></span>
<span class="tag"><circle</span> <span class="attr">cx</span>=<span class="value">"150"</span> <span class="attr">cy</span>=<span class="value">"150"</span> <span class="attr">r</span>=<span class="value">"80"</span> <span class="attr">fill</span>=<span class="value">"#6366f1"</span> <span class="attr">stroke</span>=<span class="value">"#4f46e5"</span> <span class="attr">stroke-width</span>=<span class="value">"2"</span><span class="tag">/></span>
<span class="tag"></svg></span>
</pre>
</div>
</div>
</div>
</div>
<!-- Box Shadow Tab -->
<div class="tab-content" id="box-shadow">
<div class="generator-container">
<div class="controls-panel">
<h2 class="panel-title">Box Shadow Controls</h2>
<div class="control-group">
<label class="control-label">Horizontal Offset</label>
<div class="control-row">
<input type="range" id="box-h-offset" min="-50" max="50" value="5">
<input type="number" id="box-h-offset-value" min="-50" max="50" value="5">
</div>
</div>
<div class="control-group">
<label class="control-label">Vertical Offset</label>
<div class="control-row">
<input type="range" id="box-v-offset" min="-50" max="50" value="5">
<input type="number" id="box-v-offset-value" min="-50" max="50" value="5">
</div>
</div>
<div class="control-group">
<label class="control-label">Blur</label>
<div class="control-row">
<input type="range" id="box-blur" min="0" max="50" value="15">
<input type="number" id="box-blur-value" min="0" max="50" value="15">
</div>
</div>
<div class="control-group">
<label class="control-label">Spread</label>
<div class="control-row">
<input type="range" id="box-spread" min="-20" max="50" value="0">
<input type="number" id="box-spread-value" min="-20" max="50" value="0">
</div>
</div>
<div class="control-group">
<label class="control-label">Color</label>
<div class="control-row">
<input type="color" id="box-color" value="#000000">
<input type="text" id="box-color-text" value="#000000">
</div>
</div>
<div class="control-group">
<label class="control-label">Opacity</label>
<div class="control-row">
<input type="range" id="box-opacity" min="0" max="100" value="30">
<input type="number" id="box-opacity-value" min="0" max="100" value="30">
</div>
</div>
<div class="control-group">
<label class="control-label">Inset</label>
<div class="control-row">
<input type="checkbox" id="box-inset">
<label for="box-inset">Apply inset shadow</label>
</div>
</div>
</div>
<div class="preview-panel">
<h2 class="panel-title">Preview</h2>
<div class="preview-area" id="box-preview">
<div style="width: 200px; height: 200px; background: white; border-radius: 8px;"></div>
</div>
<div class="code-panel">
<div class="code-header">
<span class="code-title">CSS Code</span>
<button class="copy-btn" data-target="box-code">Copy Code</button>
</div>
<pre id="box-code"><span class="selector">.box-shadow</span> {
<span class="property">box-shadow</span>: <span class="value">5px 5px 15px 0px rgba(0, 0, 0, 0.3)</span>;
}
</pre>
</div>
</div>
</div>
</div>
<!-- Text Shadow Tab -->
<div class="tab-content" id="text-shadow">
<div class="generator-container">
<div class="controls-panel">
<h2 class="panel-title">Text Shadow Controls</h2>
<div class="control-group">
<label class="control-label">Text Content</label>
<input type="text" id="text-content" value="Shadow Text" style="width: 100%;">
</div>
<div class="control-group">
<label class="control-label">Font Size</label>
<div class="control-row">
<input type="range" id="text-size" min="20" max="80" value="48">
<input type="number" id="text-size-value" min="20" max="80" value="48">
</div>
</div>
<div class="control-group">
<label class="control-label">Font Weight</label>
<select id="text-weight" style="width: 100%;">
<option value="300">Light</option>
<option value="400">Normal</option>
<option value="500">Medium</option>
<option value="600">Semi Bold</option>
<option value="700" selected>Bold</option>
<option value="900">Black</option>
</select>
</div>
<div class="control-group">
<label class="control-label">Text Color</label>
<div class="control-row">
<input type="color" id="text-color" value="#1f2937">
<input type="text" id="text-color-text" value="#1f2937">
</div>
</div>
<div class="control-group">
<label class="control-label">Horizontal Offset</label>
<div class="control-row">
<input type="range" id="text-h-offset" min="-20" max="20" value="2">
<input type="number" id="text-h-offset-value" min="-20" max="20" value="2">
</div>
</div>
<div class="control-group">
<label class="control-label">Vertical Offset</label>
<div class="control-row">
<input type="range" id="text-v-offset" min="-20" max="20" value="2">
<input type="number" id="text-v-offset-value" min="-20" max="20" value="2">
</div>
</div>
<div class="control-group">
<label class="control-label">Blur</label>
<div class="control-row">
<input type="range" id="text-blur" min="0" max="30" value="4">
<input type="number" id="text-blur-value" min="0" max="30" value="4">
</div>
</div>
<div class="control-group">
<label class="control-label">Shadow Color</label>
<div class="control-row">
<input type="color" id="text-shadow-color" value="#6366f1">
<input type="text" id="text-shadow-color-text" value="#6366f1">
</div>
</div>
<div class="control-group">
<label class="control-label">Shadow Opacity</label>
<div class="control-row">
<input type="range" id="text-opacity" min="0" max="100" value="50">
<input type="number" id="text-opacity-value" min="0" max="100" value="50">
</div>
</div>
</div>
<div class="preview-panel">
<h2 class="panel-title">Preview</h2>
<div class="preview-area" id="text-preview" style="background: white;">
<div class="text-preview" style="color: #1f2937; font-size: 48px; font-weight: 700;">Shadow Text</div>
</div>
<div class="code-panel">
<div class="code-header">
<span class="code-title">CSS Code</span>
<button class="copy-btn" data-target="text-code">Copy Code</button>
</div>
<pre id="text-code"><span class="selector">.text-shadow</span> {
<span class="property">color</span>: <span class="value">#1f2937</span>;
<span class="property">font-size</span>: <span class="value">48px</span>;
<span class="property">font-weight</span>: <span class="value">700</span>;
<span class="property">text-shadow</span>: <span class="value">2px 2px 4px rgba(99, 102, 241, 0.5)</span>;
}
</pre>
</div>
</div>
</div>
</div>
<!-- Gradient Tab -->
<div class="tab-content" id="gradient">
<div class="generator-container">
<div class="controls-panel">
<h2 class="panel-title">Gradient Controls</h2>
<div class="control-group">
<label class="control-label">Gradient Type</label>
<select id="gradient-type" style="width: 100%;">
<option value="linear">Linear</option>
<option value="radial">Radial</option>
</select>
</div>
<div class="control-group" id="gradient-angle-group">
<label class="control-label">Angle</label>
<div class="control-row">
<input type="range" id="gradient-angle" min="0" max="360" value="90">
<input type="number" id="gradient-angle-value" min="0" max="360" value="90">
</div>
</div>
<div class="control-group">
<label class="control-label">Color Stops</label>
<div class="color-stops" id="color-stops">
<div class="color-stop">
<input type="color" class="stop-color" value="#6366f1">
<input type="number" class="stop-position" min="0" max="100" value="0" style="width: 80px;">
<span>%</span>
<button class="remove-stop">Remove</button>
</div>
<div class="color-stop">
<input type="color" class="stop-color" value="#8b5cf6">
<input type="number" class="stop-position" min="0" max="100" value="100" style="width: 80px;">
<span>%</span>
<button class="remove-stop">Remove</button>
</div>
</div>
<button class="add-stop">Add Color Stop</button>
</div>
</div>
<div class="preview-panel">
<h2 class="panel-title">Preview</h2>
<div class="preview-area" id="gradient-preview" style="height: 300px;">
<div style="width: 100%; height: 100%; background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);"></div>
</div>
<div class="code-panel">
<div class="code-header">
<span class="code-title">CSS Code</span>
<button class="copy-btn" data-target="gradient-code">Copy Code</button>
</div>
<pre id="gradient-code"><span class="selector">.gradient</span> {
<span class="property">background</span>: <span class="value">linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%)</span>;
}
</pre>
</div>
</div>
</div>
</div>
<!-- CSS Filter Tab -->
<div class="tab-content" id="filter">
<div class="generator-container">
<div class="controls-panel">
<h2 class="panel-title">CSS Filter Controls</h2>
<div class="control-group">
<label class="control-label">Blur</label>
<div class="control-row">
<input type="range" id="filter-blur" min="0" max="20" value="0" step="0.1">
<input type="number" id="filter-blur-value" min="0" max="20" value="0" step="0.1">
<span>px</span>
</div>
</div>
<div class="control-group">
<label class="control-label">Brightness</label>
<div class="control-row">
<input type="range" id="filter-brightness" min="0" max="200" value="100">
<input type="number" id="filter-brightness-value" min="0" max="200" value="100">
<span>%</span>
</div>
</div>
<div class="control-group">
<label class="control-label">Contrast</label>
<div class="control-row">
<input type="range" id="filter-contrast" min="0" max="200" value="100">
<input type="number" id="filter-contrast-value" min="0" max="200" value="100">
<span>%</span>
</div>
</div>
<div class="control-group">
<label class="control-label">Grayscale</label>
<div class="control-row">
<input type="range" id="filter-grayscale" min="0" max="100" value="0">
<input type="number" id="filter-grayscale-value" min="0" max="100" value="0">
<span>%</span>
</div>
</div>
<div class="control-group">
<label class="control-label">Hue Rotate</label>
<div class="control-row">
<input type="range" id="filter-hue" min="0" max="360" value="0">
<input type="number" id="filter-hue-value" min="0" max="360" value="0">
<span>deg</span>
</div>
</div>
<div class="control-group">
<label class="control-label">Invert</label>
<div class="control-row">
<input type="range" id="filter-invert" min="0" max="100" value="0">
<input type="number" id="filter-invert-value" min="0" max="100" value="0">
<span>%</span>
</div>
</div>
<div class="control-group">
<label class="control-label">Opacity</label>
<div class="control-row">
<input type="range" id="filter-opacity" min="0" max="100" value="100">
<input type="number" id="filter-opacity-value" min="0" max="100" value="100">
<span>%</span>
</div>
</div>
<div class="control-group">
<label class="control-label">Saturate</label>
<div class="control-row">
<input type="range" id="filter-saturate" min="0" max="200" value="100">
<input type="number" id="filter-saturate-value" min="0" max="200" value="100">
<span>%</span>
</div>
</div>
<div class="control-group">
<label class="control-label">Sepia</label>
<div class="control-row">
<input type="range" id="filter-sepia" min="0" max="100" value="0">
<input type="number" id="filter-sepia-value" min="0" max="100" value="0">
<span>%</span>
</div>
</div>
<button class="reset-btn" id="filter-reset">Reset All Filters</button>
</div>
<div class="preview-panel">
<h2 class="panel-title">Preview</h2>
<div class="preview-area" id="filter-preview">
<div class="filter-demo-box">
<div class="filter-demo-gradient"></div>
<span>Filter Preview</span>
</div>
</div>
<div class="code-panel">
<div class="code-header">
<span class="code-title">CSS Code</span>
<button class="copy-btn" data-target="filter-code">Copy Code</button>
</div>
<pre id="filter-code"><span class="selector">.filtered</span> {
<span class="property">filter</span>: <span class="value">none</span>;
}
</pre>
</div>
</div>
</div>
</div>
<!-- Animation Tab -->
<div class="tab-content" id="animation">
<div class="generator-container">
<div class="controls-panel">
<h2 class="panel-title">Animation Controls</h2>
<div class="control-group">
<label class="control-label">Animation Type</label>
<div class="animation-selector">
<div class="animation-option selected" data-animation="fade">Fade</div>
<div class="animation-option" data-animation="slideIn">Slide In</div>
<div class="animation-option" data-animation="bounce">Bounce</div>
<div class="animation-option" data-animation="pulse">Pulse</div>
<div class="animation-option" data-animation="shake">Shake</div>
<div class="animation-option" data-animation="rotate">Rotate</div>
<div class="animation-option" data-animation="scale">Scale</div>
<div class="animation-option" data-animation="flip">Flip</div>
</div>
</div>
<div class="control-group">
<label class="control-label">Duration</label>
<div class="control-row">
<input type="range" id="anim-duration" min="0.1" max="5" value="1" step="0.1">
<input type="number" id="anim-duration-value" min="0.1" max="5" value="1" step="0.1">
<span>s</span>
</div>
</div>
<div class="control-group">
<label class="control-label">Timing Function</label>
<select id="anim-timing" style="width: 100%;">
<option value="ease">Ease</option>
<option value="linear">Linear</option>
<option value="ease-in">Ease In</option>
<option value="ease-out">Ease Out</option>
<option value="ease-in-out">Ease In Out</option>
<option value="cubic-bezier(0.68, -0.55, 0.265, 1.55)">Elastic</option>
</select>
</div>
<div class="control-group">
<label class="control-label">Delay</label>
<div class="control-row">
<input type="range" id="anim-delay" min="0" max="3" value="0" step="0.1">
<input type="number" id="anim-delay-value" min="0" max="3" value="0" step="0.1">
<span>s</span>
</div>
</div>
<div class="control-group">
<label class="control-label">Iteration Count</label>
<div class="control-row">
<input type="range" id="anim-iteration" min="1" max="10" value="1">
<input type="number" id="anim-iteration-value" min="1" max="10" value="1">
<label style="display: flex; align-items: center; gap: 0.5rem; margin-left: 1rem;">
<input type="checkbox" id="anim-infinite">
Infinite
</label>
</div>
</div>
<div class="control-group">
<label class="control-label">Direction</label>
<select id="anim-direction" style="width: 100%;">
<option value="normal">Normal</option>
<option value="reverse">Reverse</option>
<option value="alternate">Alternate</option>
<option value="alternate-reverse">Alternate Reverse</option>
</select>
</div>
<div class="control-group">
<label class="control-label">Fill Mode</label>
<select id="anim-fill" style="width: 100%;">
<option value="none">None</option>
<option value="forwards" selected>Forwards</option>
<option value="backwards">Backwards</option>
<option value="both">Both</option>
</select>
</div>
<button class="play-btn" id="anim-play">▶ Play Animation</button>
</div>
<div class="preview-panel">
<h2 class="panel-title">Preview</h2>
<div class="preview-area" id="animation-preview">
<div class="animation-demo-box" id="animation-box">
<span>Animate Me</span>
</div>
</div>
<div class="code-panel">
<div class="code-header">
<span class="code-title">CSS Code</span>
<button class="copy-btn" data-target="animation-code">Copy Code</button>
</div>
<pre id="animation-code"><span class="comment">/* Keyframes */</span>
<span class="selector">@keyframes fade</span> {
<span class="property">from</span> { <span class="value">opacity: 0;</span> }
<span class="property">to</span> { <span class="value">opacity: 1;</span> }
}
<span class="comment">/* Animation */</span>
<span class="selector">.animated</span> {
<span class="property">animation</span>: <span class="value">fade 1s ease 0s 1 normal forwards</span>;
}
</pre>
</div>
</div>
</div>
</div>
<!-- Border Radius Tab -->
<div class="tab-content" id="border-radius">
<div class="generator-container">
<div class="controls-panel">
<h2 class="panel-title">Border Radius Controls</h2>
<div class="control-group">
<label class="control-label">
<input type="checkbox" id="radius-linked" checked>
Link All Corners
</label>
</div>
<div class="control-group">
<label class="control-label">All Corners</label>
<div class="control-row" id="radius-all-group">
<input type="range" id="radius-all" min="0" max="150" value="20">
<input type="number" id="radius-all-value" min="0" max="150" value="20">
<span>px</span>
</div>
</div>
<div id="radius-individual" style="display: none;">
<div class="control-group">
<label class="control-label">Top Left</label>
<div class="control-row">
<input type="range" id="radius-tl" min="0" max="150" value="20">
<input type="number" id="radius-tl-value" min="0" max="150" value="20">
<span>px</span>
</div>
</div>
<div class="control-group">
<label class="control-label">Top Right</label>
<div class="control-row">
<input type="range" id="radius-tr" min="0" max="150" value="20">
<input type="number" id="radius-tr-value" min="0" max="150" value="20">
<span>px</span>
</div>
</div>
<div class="control-group">
<label class="control-label">Bottom Right</label>
<div class="control-row">
<input type="range" id="radius-br" min="0" max="150" value="20">
<input type="number" id="radius-br-value" min="0" max="150" value="20">
<span>px</span>
</div>
</div>
<div class="control-group">
<label class="control-label">Bottom Left</label>
<div class="control-row">
<input type="range" id="radius-bl" min="0" max="150" value="20">
<input type="number" id="radius-bl-value" min="0" max="150" value="20">
<span>px</span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">Box Size</label>
<div class="control-row">
<input type="range" id="radius-size" min="100" max="250" value="200">
<input type="number" id="radius-size-value" min="100" max="250" value="200">
<span>px</span>
</div>
</div>
<div class="control-group">
<label class="control-label">Background Color</label>
<div class="control-row">
<input type="color" id="radius-bg-color" value="#6366f1">
<input type="text" id="radius-bg-color-text" value="#6366f1">
</div>
</div>
<div class="control-group">
<label class="control-label">Presets</label>
<div class="radius-presets">
<button class="preset-btn" data-preset="none">None</button>
<button class="preset-btn" data-preset="rounded">Rounded</button>
<button class="preset-btn" data-preset="pill">Pill</button>
<button class="preset-btn" data-preset="circle">Circle</button>
<button class="preset-btn" data-preset="blob">Blob</button>
<button class="preset-btn" data-preset="leaf">Leaf</button>
</div>
</div>
</div>
<div class="preview-panel">
<h2 class="panel-title">Preview</h2>
<div class="preview-area" id="radius-preview">
<div class="radius-demo-box" id="radius-box">
<div class="corner-indicator tl">TL</div>
<div class="corner-indicator tr">TR</div>
<div class="corner-indicator br">BR</div>
<div class="corner-indicator bl">BL</div>
</div>
</div>
<div class="code-panel">
<div class="code-header">
<span class="code-title">CSS Code</span>
<button class="copy-btn" data-target="radius-code">Copy Code</button>
</div>
<pre id="radius-code"><span class="selector">.rounded-box</span> {
<span class="property">border-radius</span>: <span class="value">20px</span>;
}
</pre>
</div>
</div>
</div>
</div>
<!-- Flexbox Tab -->
<div class="tab-content" id="flexbox">
<div class="generator-container">
<div class="controls-panel">
<h2 class="panel-title">Flexbox Controls</h2>
<div class="control-group">
<label class="control-label">Flex Direction</label>
<select id="flex-direction" style="width: 100%;">
<option value="row">Row</option>
<option value="row-reverse">Row Reverse</option>
<option value="column">Column</option>
<option value="column-reverse">Column Reverse</option>
</select>
</div>
<div class="control-group">
<label class="control-label">Justify Content</label>
<select id="flex-justify" style="width: 100%;">
<option value="flex-start">Flex Start</option>
<option value="flex-end">Flex End</option>
<option value="center">Center</option>
<option value="space-between">Space Between</option>
<option value="space-around">Space Around</option>
<option value="space-evenly">Space Evenly</option>
</select>
</div>
<div class="control-group">
<label class="control-label">Align Items</label>
<select id="flex-align" style="width: 100%;">
<option value="stretch">Stretch</option>
<option value="flex-start">Flex Start</option>
<option value="flex-end">Flex End</option>
<option value="center">Center</option>
<option value="baseline">Baseline</option>
</select>
</div>
<div class="control-group">
<label class="control-label">Flex Wrap</label>
<select id="flex-wrap" style="width: 100%;">
<option value="nowrap">No Wrap</option>
<option value="wrap">Wrap</option>
<option value="wrap-reverse">Wrap Reverse</option>
</select>
</div>
<div class="control-group">
<label class="control-label">Gap</label>
<div class="control-row">
<input type="range" id="flex-gap" min="0" max="50" value="10">
<input type="number" id="flex-gap-value" min="0" max="50" value="10">
<span>px</span>
</div>
</div>
<div class="control-group">
<label class="control-label">Number of Items</label>
<div class="control-row">
<input type="range" id="flex-items" min="2" max="8" value="4">
<input type="number" id="flex-items-value" min="2" max="8" value="4">
</div>
</div>
</div>
<div class="preview-panel">
<h2 class="panel-title">Preview</h2>
<div class="preview-area" id="flexbox-preview" style="align-items: stretch;">
<div class="flex-container" id="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
</div>
<div class="code-panel">
<div class="code-header">
<span class="code-title">CSS Code</span>
<button class="copy-btn" data-target="flexbox-code">Copy Code</button>
</div>
<pre id="flexbox-code"><span class="selector">.flex-container</span> {
<span class="property">display</span>: <span class="value">flex</span>;
<span class="property">flex-direction</span>: <span class="value">row</span>;
<span class="property">justify-content</span>: <span class="value">flex-start</span>;
<span class="property">align-items</span>: <span class="value">stretch</span>;
<span class="property">flex-wrap</span>: <span class="value">nowrap</span>;
<span class="property">gap</span>: <span class="value">10px</span>;
}
</pre>
</div>
</div>
</div>
</div>
<!-- CSS Grid Tab -->
<div class="tab-content" id="grid">
<div class="generator-container">
<div class="controls-panel">
<h2 class="panel-title">CSS Grid Controls</h2>
<div class="control-group">
<label class="control-label">Columns</label>
<div class="control-row">
<input type="range" id="grid-cols" min="1" max="6" value="3">
<input type="number" id="grid-cols-value" min="1" max="6" value="3">
</div>
</div>
<div class="control-group">
<label class="control-label">Rows</label>
<div class="control-row">
<input type="range" id="grid-rows" min="1" max="6" value="2">
<input type="number" id="grid-rows-value" min="1" max="6" value="2">
</div>
</div>
<div class="control-group">
<label class="control-label">Column Gap</label>
<div class="control-row">
<input type="range" id="grid-col-gap" min="0" max="40" value="10">
<input type="number" id="grid-col-gap-value" min="0" max="40" value="10">
<span>px</span>
</div>
</div>
<div class="control-group">
<label class="control-label">Row Gap</label>
<div class="control-row">
<input type="range" id="grid-row-gap" min="0" max="40" value="10">
<input type="number" id="grid-row-gap-value" min="0" max="40" value="10">
<span>px</span>
</div>
</div>
<div class="control-group">
<label class="control-label">Justify Items</label>
<select id="grid-justify-items" style="width: 100%;">
<option value="stretch">Stretch</option>
<option value="start">Start</option>
<option value="end">End</option>
<option value="center">Center</option>
</select>
</div>
<div class="control-group">
<label class="control-label">Align Items</label>
<select id="grid-align-items" style="width: 100%;">
<option value="stretch">Stretch</option>
<option value="start">Start</option>
<option value="end">End</option>
<option value="center">Center</option>
</select>
</div>
<div class="control-group">
<label class="control-label">Column Size</label>
<select id="grid-col-size" style="width: 100%;">
<option value="1fr">Equal (1fr)</option>
<option value="auto">Auto</option>
<option value="100px">Fixed (100px)</option>
<option value="minmax(100px, 1fr)">Minmax (100px, 1fr)</option>
</select>
</div>
</div>
<div class="preview-panel">
<h2 class="panel-title">Preview</h2>
<div class="preview-area" id="grid-preview" style="align-items: stretch;">
<div class="grid-container" id="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</div>
<div class="code-panel">
<div class="code-header">
<span class="code-title">CSS Code</span>
<button class="copy-btn" data-target="grid-code">Copy Code</button>
</div>
<pre id="grid-code"><span class="selector">.grid-container</span> {
<span class="property">display</span>: <span class="value">grid</span>;
<span class="property">grid-template-columns</span>: <span class="value">repeat(3, 1fr)</span>;
<span class="property">grid-template-rows</span>: <span class="value">repeat(2, 1fr)</span>;
<span class="property">column-gap</span>: <span class="value">10px</span>;
<span class="property">row-gap</span>: <span class="value">10px</span>;
<span class="property">justify-items</span>: <span class="value">stretch</span>;
<span class="property">align-items</span>: <span class="value">stretch</span>;
}
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<p>© 2025 SVG & CSS Effects Generator. All rights reserved. Designed by Goragod Wiriya</p>
</div>
</footer>
<div class="notification" id="notification">Code copied to clipboard!</div>
<script src="app.js"></script>
</body>
</html>