Hugging Face's logo

Spaces:
Avillo65
/
trial-space
Running

App Files Community
trial-space / index.html
Avillo65's picture
Avillo65
Add 2 files
f54b41d verified
raw
history blame contribute delete
65 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ProDesign Studio | Professional Design Generator</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.design-canvas {
background-image: linear-gradient(45deg, #f5f5f5 25%, transparent 25%),
linear-gradient(-45deg, #f5f5f5 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #f5f5f5 75%),
linear-gradient(-45deg, transparent 75%, #f5f5f5 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
.template-card:hover .template-overlay {
opacity: 1;
}
.export-option:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.color-option {
transition: all 0.3s ease;
}
.color-option:hover {
transform: scale(1.1);
}
.color-option.active {
transform: scale(1.2);
box-shadow: 0 0 0 3px white, 0 0 0 5px currentColor;
}
.font-option {
transition: all 0.3s ease;
}
.font-option:hover {
transform: scale(1.05);
}
.font-option.active {
transform: scale(1.1);
box-shadow: 0 0 0 2px #667eea;
}
.template-card {
transition: all 0.3s ease;
}
.template-card:hover {
transform: translateY(-5px);
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
z-index: 1000;
justify-content: center;
align-items: center;
}
.modal-content {
background: white;
padding: 2rem;
border-radius: 0.5rem;
max-width: 500px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
}
.token-chip {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.5rem;
border-radius: 9999px;
font-size: 0.75rem;
margin-right: 0.25rem;
margin-bottom: 0.25rem;
}
.layer-item {
padding: 0.5rem;
border-left: 3px solid transparent;
transition: all 0.2s;
}
.layer-item:hover {
background-color: #f3f4f6;
border-left-color: #667eea;
}
.tab-button {
position: relative;
}
.tab-button.active:after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 2px;
background-color: #667eea;
}
.token-preview {
width: 100%;
height: 120px;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
transition: all 0.2s;
}
.token-preview:hover {
transform: scale(1.02);
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.animate-spin {
animation: spin 1s linear infinite;
}
</style>
</head>
<body class="bg-gray-50 font-sans">
<!-- Header -->
<header class="gradient-bg text-white shadow-lg">
<div class="container mx-auto px-4 py-6">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fas fa-palette text-3xl"></i>
<h1 class="text-2xl font-bold">ProDesign Studio</h1>
</div>
<nav class="hidden md:flex space-x-6">
<a href="#" class="hover:text-gray-200 font-medium">Templates</a>
<a href="#" class="hover:text-gray-200 font-medium">Features</a>
<a href="#" class="hover:text-gray-200 font-medium">Pricing</a>
<a href="#" class="hover:text-gray-200 font-medium">Resources</a>
</nav>
<div class="flex items-center space-x-4">
<button class="px-4 py-2 rounded-full bg-white text-purple-700 font-semibold hover:bg-gray-100 transition">Sign In</button>
<button class="md:hidden text-2xl" id="mobile-menu-button">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</div>
</header>
<!-- Mobile Menu -->
<div class="md:hidden hidden bg-gray-800 text-white py-4 px-4" id="mobile-menu">
<nav class="flex flex-col space-y-4">
<a href="#" class="hover:text-gray-200 font-medium">Templates</a>
<a href="#" class="hover:text-gray-200 font-medium">Features</a>
<a href="#" class="hover:text-gray-200 font-medium">Pricing</a>
<a href="#" class="hover:text-gray-200 font-medium">Resources</a>
</nav>
</div>
<!-- Main Content -->
<main class="container mx-auto px-4 py-8">
<!-- Hero Section -->
<section class="mb-16 text-center">
<h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Professional Design Generation</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
Create pixel-perfect designs with full interoperability across Figma, Sketch, Adobe XD, Photoshop and more.
</p>
<div class="flex justify-center space-x-4">
<button class="px-6 py-3 rounded-full gradient-bg text-white font-semibold hover:opacity-90 transition" id="start-designing">
Start Designing <i class="fas fa-arrow-right ml-2"></i>
</button>
<button class="px-6 py-3 rounded-full border-2 border-purple-600 text-purple-600 font-semibold hover:bg-purple-50 transition" id="watch-demo">
Watch Demo
</button>
</div>
</section>
<!-- Design Generator -->
<section class="mb-16 bg-white rounded-xl shadow-lg overflow-hidden">
<div class="grid md:grid-cols-3">
<!-- Controls Panel -->
<div class="p-6 border-r border-gray-200">
<div class="flex justify-between items-center mb-6">
<h3 class="text-xl font-bold text-gray-800">Design Configuration</h3>
<button class="text-sm text-purple-600 hover:text-purple-800" id="reset-design">
<i class="fas fa-redo mr-1"></i> Reset
</button>
</div>
<div class="mb-6">
<label class="block text-gray-700 font-medium mb-2">Design Brief</label>
<textarea class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 h-24" placeholder="Describe your design needs..." id="design-brief"></textarea>
</div>
<div class="mb-6">
<label class="block text-gray-700 font-medium mb-2">Target Platform</label>
<select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" id="platform-select">
<option value="web">Web</option>
<option value="mobile">Mobile</option>
<option value="print">Print</option>
<option value="social">Social Media</option>
<option value="presentation">Presentation</option>
</select>
</div>
<div class="mb-6">
<label class="block text-gray-700 font-medium mb-2">Template</label>
<select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" id="template-select">
<option value="social">Social Media Post</option>
<option value="card">Business Card</option>
<option value="flyer">Flyer</option>
<option value="presentation">Presentation Slide</option>
<option value="blog">Blog Header</option>
</select>
</div>
<div class="mb-6">
<label class="block text-gray-700 font-medium mb-2">Color Scheme</label>
<div class="flex flex-wrap gap-3">
<div class="color-option w-8 h-8 rounded-full bg-blue-500 cursor-pointer active" data-color="blue-500"></div>
<div class="color-option w-8 h-8 rounded-full bg-purple-500 cursor-pointer" data-color="purple-500"></div>
<div class="color-option w-8 h-8 rounded-full bg-red-500 cursor-pointer" data-color="red-500"></div>
<div class="color-option w-8 h-8 rounded-full bg-green-500 cursor-pointer" data-color="green-500"></div>
<div class="color-option w-8 h-8 rounded-full bg-yellow-500 cursor-pointer" data-color="yellow-500"></div>
<div class="color-option w-8 h-8 rounded-full bg-pink-500 cursor-pointer" data-color="pink-500"></div>
</div>
</div>
<div class="mb-6">
<label class="block text-gray-700 font-medium mb-2">Text Content</label>
<input type="text" placeholder="Main Heading" class="w-full p-3 mb-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" id="main-heading">
<input type="text" placeholder="Subheading" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" id="subheading">
</div>
<div class="mb-6">
<label class="block text-gray-700 font-medium mb-2">Font Style</label>
<div class="grid grid-cols-3 gap-2">
<div class="font-option p-2 border border-gray-200 rounded text-center cursor-pointer active" data-font="montserrat">
<div class="text-sm font-montserrat">Montserrat</div>
</div>
<div class="font-option p-2 border border-gray-200 rounded text-center cursor-pointer" data-font="roboto">
<div class="text-sm font-roboto">Roboto</div>
</div>
<div class="font-option p-2 border border-gray-200 rounded text-center cursor-pointer" data-font="playfair">
<div class="text-sm font-playfair">Playfair</div>
</div>
<div class="font-option p-2 border border-gray-200 rounded text-center cursor-pointer" data-font="opensans">
<div class="text-sm font-opensans">Open Sans</div>
</div>
<div class="font-option p-2 border border-gray-200 rounded text-center cursor-pointer" data-font="lato">
<div class="text-sm font-lato">Lato</div>
</div>
</div>
</div>
<div class="mb-6">
<label class="block text-gray-700 font-medium mb-2">Design Tokens</label>
<div class="flex flex-wrap gap-2 mb-2" id="token-chips">
<span class="token-chip bg-blue-100 text-blue-800"><i class="fas fa-palette mr-1"></i> Primary</span>
<span class="token-chip bg-purple-100 text-purple-800"><i class="fas fa-font mr-1"></i> Heading</span>
<span class="token-chip bg-green-100 text-green-800"><i class="fas fa-ruler-combined mr-1"></i> Spacing</span>
</div>
<button class="text-sm text-purple-600 hover:text-purple-800" id="edit-tokens">
<i class="fas fa-edit mr-1"></i> Edit Tokens
</button>
</div>
<button class="w-full py-3 gradient-bg text-white font-semibold rounded-lg hover:opacity-90 transition flex items-center justify-center" id="generate-design">
<span id="generate-text">Generate Design</span>
<span id="generate-spinner" class="hidden ml-2">
<i class="fas fa-circle-notch animate-spin"></i>
</span>
</button>
</div>
<!-- Canvas Preview -->
<div class="md:col-span-2 p-6">
<div class="flex justify-between items-center mb-6">
<h3 class="text-xl font-bold text-gray-800">Design Preview</h3>
<div class="flex space-x-2">
<button class="p-2 bg-gray-100 rounded-lg hover:bg-gray-200" id="undo-btn">
<i class="fas fa-undo text-gray-600"></i>
</button>
<button class="p-2 bg-gray-100 rounded-lg hover:bg-gray-200" id="redo-btn">
<i class="fas fa-redo text-gray-600"></i>
</button>
</div>
</div>
<div class="design-canvas w-full h-96 rounded-xl shadow-inner flex items-center justify-center relative overflow-hidden" id="design-canvas">
<div class="text-center p-8" id="canvas-content">
<h4 class="text-3xl font-bold text-blue-600 mb-4" id="canvas-heading">Your Design Title</h4>
<p class="text-gray-700 mb-6" id="canvas-subheading">This is where your subheading or supporting text will appear.</p>
<button class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition" id="canvas-button">
Call to Action
</button>
</div>
</div>
<div class="mt-6">
<div class="flex border-b border-gray-200" id="preview-tabs">
<button class="tab-button px-4 py-2 font-medium text-gray-600 hover:text-gray-800 active" data-tab="layers">
<i class="fas fa-layer-group mr-2"></i> Layers
</button>
<button class="tab-button px-4 py-2 font-medium text-gray-600 hover:text-gray-800" data-tab="tokens">
<i class="fas fa-palette mr-2"></i> Design Tokens
</button>
<button class="tab-button px-4 py-2 font-medium text-gray-600 hover:text-gray-800" data-tab="export">
<i class="fas fa-file-export mr-2"></i> Export
</button>
</div>
<div class="mt-4" id="tab-content">
<!-- Layers Tab -->
<div class="tab-pane active" id="layers-tab">
<div class="bg-gray-50 rounded-lg p-4">
<div class="flex items-center justify-between mb-3">
<h4 class="font-medium">Layer Structure</h4>
<button class="text-xs text-purple-600 hover:text-purple-800">
<i class="fas fa-expand mr-1"></i> Expand All
</button>
</div>
<div class="space-y-1" id="layer-list">
<div class="layer-item">
<div class="flex items-center">
<i class="fas fa-square text-blue-500 mr-2"></i>
<span class="text-sm">Main Container</span>
</div>
</div>
<div class="layer-item ml-4">
<div class="flex items-center">
<i class="fas fa-heading text-purple-500 mr-2"></i>
<span class="text-sm">Heading Text</span>
</div>
</div>
<div class="layer-item ml-4">
<div class="flex items-center">
<i class="fas fa-paragraph text-green-500 mr-2"></i>
<span class="text-sm">Subheading Text</span>
</div>
</div>
<div class="layer-item ml-4">
<div class="flex items-center">
<i class="fas fa-hand-pointer text-red-500 mr-2"></i>
<span class="text-sm">Button</span>
</div>
</div>
</div>
</div>
</div>
<!-- Tokens Tab -->
<div class="tab-pane hidden" id="tokens-tab">
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
<div class="token-preview bg-blue-500 text-white" data-token="primary">
Primary Color
</div>
<div class="token-preview bg-purple-500 text-white" data-token="secondary">
Secondary Color
</div>
<div class="token-preview bg-gray-800 text-white" data-token="text">
Text Color
</div>
<div class="token-preview bg-white border border-gray-300" data-token="background">
Background
</div>
<div class="token-preview bg-gray-100 border border-gray-300 flex flex-col justify-center items-center" data-token="spacing">
<div class="text-xs mb-1">Spacing</div>
<div class="w-8 h-8 bg-blue-500 rounded"></div>
</div>
<div class="token-preview bg-gray-100 border border-gray-300" data-token="font">
<div class="text-center font-montserrat">Heading Font</div>
</div>
</div>
</div>
<!-- Export Tab -->
<div class="tab-pane hidden" id="export-tab">
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="export-option bg-white p-4 rounded-lg shadow-sm text-center cursor-pointer" data-format="figma">
<div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="fab fa-figma text-purple-600 text-xl"></i>
</div>
<div class="text-sm font-medium">Figma</div>
</div>
<div class="export-option bg-white p-4 rounded-lg shadow-sm text-center cursor-pointer" data-format="sketch">
<div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="fas fa-vector-square text-orange-600 text-xl"></i>
</div>
<div class="text-sm font-medium">Sketch</div>
</div>
<div class="export-option bg-white p-4 rounded-lg shadow-sm text-center cursor-pointer" data-format="photoshop">
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="fab fa-adobe text-blue-600 text-xl"></i>
</div>
<div class="text-sm font-medium">Photoshop</div>
</div>
<div class="export-option bg-white p-4 rounded-lg shadow-sm text-center cursor-pointer" data-format="illustrator">
<div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="fas fa-pen-fancy text-yellow-600 text-xl"></i>
</div>
<div class="text-sm font-medium">Illustrator</div>
</div>
<div class="export-option bg-white p-4 rounded-lg shadow-sm text-center cursor-pointer" data-format="xd">
<div class="w-12 h-12 bg-pink-100 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="fab fa-adobe text-pink-600 text-xl"></i>
</div>
<div class="text-sm font-medium">Adobe XD</div>
</div>
<div class="export-option bg-white p-4 rounded-lg shadow-sm text-center cursor-pointer" data-format="svg">
<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="fas fa-code text-green-600 text-xl"></i>
</div>
<div class="text-sm font-medium">SVG</div>
</div>
<div class="export-option bg-white p-4 rounded-lg shadow-sm text-center cursor-pointer" data-format="pdf">
<div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="fas fa-file-pdf text-red-600 text-xl"></i>
</div>
<div class="text-sm font-medium">PDF</div>
</div>
<div class="export-option bg-white p-4 rounded-lg shadow-sm text-center cursor-pointer" data-format="json">
<div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="fas fa-file-code text-indigo-600 text-xl"></i>
</div>
<div class="text-sm font-medium">JSON</div>
</div>
</div>
</div>
</div>
</div>
<div class="mt-4 flex justify-between items-center">
<div class="text-sm text-gray-500" id="dimensions-display">
<span class="font-medium">Dimensions:</span> 1080px × 1080px
</div>
<div class="flex space-x-3">
<button class="px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200" id="fullscreen-btn">
<i class="fas fa-expand mr-2"></i> Fullscreen
</button>
<button class="px-4 py-2 gradient-bg text-white rounded-lg hover:opacity-90" id="export-btn">
<i class="fas fa-download mr-2"></i> Export
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Templates Section -->
<section class="mb-16">
<div class="flex justify-between items-center mb-8">
<h2 class="text-3xl font-bold text-gray-800">Professional Templates</h2>
<a href="#" class="text-purple-600 font-medium hover:underline">View all templates</a>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Template 1 -->
<div class="template-card bg-white rounded-xl shadow-md overflow-hidden relative" data-template="card">
<div class="h-48 bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center">
<i class="fas fa-briefcase text-white text-6xl"></i>
</div>
<div class="p-4">
<h3 class="font-bold text-lg text-gray-800 mb-1">Business Card</h3>
<p class="text-gray-600 text-sm">Professional networking</p>
</div>
<div class="template-overlay absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 transition-opacity">
<button class="px-4 py-2 bg-white text-purple-600 rounded-lg font-medium use-template-btn">
Use Template
</button>
</div>
</div>
<!-- Template 2 -->
<div class="template-card bg-white rounded-xl shadow-md overflow-hidden relative" data-template="social">
<div class="h-48 bg-gradient-to-r from-pink-500 to-red-500 flex items-center justify-center">
<i class="fas fa-image text-white text-6xl"></i>
</div>
<div class="p-4">
<h3 class="font-bold text-lg text-gray-800 mb-1">Social Media Post</h3>
<p class="text-gray-600 text-sm">Engage your audience</p>
</div>
<div class="template-overlay absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 transition-opacity">
<button class="px-4 py-2 bg-white text-purple-600 rounded-lg font-medium use-template-btn">
Use Template
</button>
</div>
</div>
<!-- Template 3 -->
<div class="template-card bg-white rounded-xl shadow-md overflow-hidden relative" data-template="blog">
<div class="h-48 bg-gradient-to-r from-green-400 to-blue-500 flex items-center justify-center">
<i class="fas fa-newspaper text-white text-6xl"></i>
</div>
<div class="p-4">
<h3 class="font-bold text-lg text-gray-800 mb-1">Blog Header</h3>
<p class="text-gray-600 text-sm">Attract readers</p>
</div>
<div class="template-overlay absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 transition-opacity">
<button class="px-4 py-2 bg-white text-purple-600 rounded-lg font-medium use-template-btn">
Use Template
</button>
</div>
</div>
<!-- Template 4 -->
<div class="template-card bg-white rounded-xl shadow-md overflow-hidden relative" data-template="flyer">
<div class="h-48 bg-gradient-to-r from-yellow-400 to-orange-500 flex items-center justify-center">
<i class="fas fa-calendar-alt text-white text-6xl"></i>
</div>
<div class="p-4">
<h3 class="font-bold text-lg text-gray-800 mb-1">Event Flyer</h3>
<p class="text-gray-600 text-sm">Promote your event</p>
</div>
<div class="template-overlay absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 transition-opacity">
<button class="px-4 py-2 bg-white text-purple-600 rounded-lg font-medium use-template-btn">
Use Template
</button>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="mb-16 bg-white rounded-xl shadow-lg overflow-hidden">
<div class="grid md:grid-cols-2">
<div class="p-8 md:p-12">
<h2 class="text-3xl font-bold text-gray-800 mb-6">Professional Interoperability</h2>
<ul class="space-y-4">
<li class="flex items-start">
<div class="bg-purple-100 p-2 rounded-full mr-4">
<i class="fas fa-layer-group text-purple-600"></i>
</div>
<div>
<h3 class="font-bold text-gray-800">Layer Support</h3>
<p class="text-gray-600">Export with editable layers for easy modification in other tools.</p>
</div>
</li>
<li class="flex items-start">
<div class="bg-blue-100 p-2 rounded-full mr-4">
<i class="fas fa-text-height text-blue-600"></i>
</div>
<div>
<h3 class="font-bold text-gray-800">Typography Controls</h3>
<p class="text-gray-600">Access to hundreds of fonts with complete styling options.</p>
</div>
</li>
<li class="flex items-start">
<div class="bg-green-100 p-2 rounded-full mr-4">
<i class="fas fa-palette text-green-600"></i>
</div>
<div>
<h3 class="font-bold text-gray-800">Design Tokens</h3>
<p class="text-gray-600">Export color, typography and spacing tokens for development.</p>
</div>
</li>
<li class="flex items-start">
<div class="bg-yellow-100 p-2 rounded-full mr-4">
<i class="fas fa-file-export text-yellow-600"></i>
</div>
<div>
<h3 class="font-bold text-gray-800">Multi-Format Export</h3>
<p class="text-gray-600">Generate files for Figma, Sketch, Adobe XD, Photoshop and more.</p>
</div>
</li>
</ul>
</div>
<div class="bg-gray-50 flex items-center justify-center p-8">
<div class="relative w-full max-w-md">
<div class="absolute -top-6 -left-6 w-32 h-32 bg-purple-200 rounded-full opacity-50"></div>
<div class="absolute -bottom-6 -right-6 w-32 h-32 bg-blue-200 rounded-full opacity-50"></div>
<div class="relative bg-white p-6 rounded-xl shadow-lg">
<div class="flex justify-between items-center mb-4">
<h3 class="font-bold text-gray-800">Supported Formats</h3>
<button class="text-purple-600 hover:text-purple-800">
<i class="fas fa-ellipsis-h"></i>
</button>
</div>
<div class="space-y-4">
<div class="flex items-center p-3 bg-purple-50 rounded-lg">
<div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3">
<i class="fab fa-figma text-purple-600"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">Figma</h4>
<p class="text-xs text-gray-500">Full layer support</p>
</div>
</div>
<div class="flex items-center p-3 hover:bg-gray-50 rounded-lg">
<div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
<i class="fab fa-adobe text-blue-600"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">Photoshop</h4>
<p class="text-xs text-gray-500">PSD with layers</p>
</div>
</div>
<div class="flex items-center p-3 hover:bg-gray-50 rounded-lg">
<div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center mr-3">
<i class="fas fa-vector-square text-orange-600"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">Sketch</h4>
<p class="text-xs text-gray-500">Symbols & artboards</p>
</div>
</div>
</div>
<button class="w-full mt-6 py-2 border-2 border-dashed border-gray-300 rounded-lg text-gray-500 hover:border-gray-400 hover:text-gray-700">
<i class="fas fa-plus mr-2"></i> View All Formats
</button>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-gray-900 text-white pt-12 pb-6">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
<div>
<div class="flex items-center space-x-2 mb-4">
<i class="fas fa-palette text-2xl text-purple-400"></i>
<h3 class="text-xl font-bold">ProDesign Studio</h3>
</div>
<p class="text-gray-400 mb-4">
Professional design generator for creatives and businesses.
</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-linkedin"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-dribbble"></i>
</a>
</div>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Product</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Features</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Templates</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Integrations</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Resources</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Tutorials</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Support</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Community</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Company</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Press</a></li>
</ul>
</div>
</div>
<div class="pt-6 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 text-sm mb-4 md:mb-0">
© 2023 ProDesign Studio. All rights reserved.
</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a>
<a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a>
<a href="#" class="text-gray-400 hover:text-white text-sm">Cookies</a>
</div>
</div>
</div>
</footer>
<!-- Export Modal -->
<div class="modal" id="export-modal">
<div class="modal-content">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold">Export Design</h3>
<button class="text-gray-500 hover:text-gray-700" id="close-export-modal">
<i class="fas fa-times"></i>
</button>
</div>
<div class="mb-6">
<label class="block text-gray-700 font-medium mb-2">Format</label>
<select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" id="export-format">
<option value="figma">Figma (.fig)</option>
<option value="sketch">Sketch (.sketch)</option>
<option value="photoshop">Photoshop (.psd)</option>
<option value="illustrator">Illustrator (.ai)</option>
<option value="xd">Adobe XD (.xd)</option>
<option value="svg">SVG (Vector)</option>
<option value="pdf">PDF (Print Ready)</option>
<option value="json">Design Tokens (JSON)</option>
</select>
</div>
<div class="mb-6">
<label class="block text-gray-700 font-medium mb-2">Quality</label>
<input type="range" min="1" max="100" value="90" class="w-full" id="quality-slider">
<div class="text-right text-sm text-gray-600" id="quality-value">90%</div>
</div>
<div class="mb-6">
<label class="block text-gray-700 font-medium mb-2">Dimensions</label>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm text-gray-600 mb-1">Width</label>
<input type="number" value="1080" class="w-full p-2 border border-gray-300 rounded" id="export-width">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">Height</label>
<input type="number" value="1080" class="w-full p-2 border border-gray-300 rounded" id="export-height">
</div>
</div>
</div>
<div class="mb-6">
<label class="flex items-center">
<input type="checkbox" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500" checked id="include-tokens">
<span class="ml-2 text-gray-700">Include design tokens</span>
</label>
</div>
<button class="w-full py-3 gradient-bg text-white font-semibold rounded-lg hover:opacity-90 transition" id="confirm-export">
Export Design
</button>
</div>
</div>
<!-- Tokens Modal -->
<div class="modal" id="tokens-modal">
<div class="modal-content">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold">Design Tokens</h3>
<button class="text-gray-500 hover:text-gray-700" id="close-tokens-modal">
<i class="fas fa-times"></i>
</button>
</div>
<div class="mb-6">
<label class="block text-gray-700 font-medium mb-2">Color Tokens</label>
<div class="space-y-4">
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-blue-500 mr-3" id="primary-color-preview"></div>
<input type="color" value="#3b82f6" class="border border-gray-300 rounded" id="primary-color">
<span class="ml-3 text-gray-700">Primary</span>
</div>
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-purple-500 mr-3" id="secondary-color-preview"></div>
<input type="color" value="#8b5cf6" class="border border-gray-300 rounded" id="secondary-color">
<span class="ml-3 text-gray-700">Secondary</span>
</div>
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-gray-800 mr-3" id="text-color-preview"></div>
<input type="color" value="#1f2937" class="border border-gray-300 rounded" id="text-color">
<span class="ml-3 text-gray-700">Text</span>
</div>
</div>
</div>
<div class="mb-6">
<label class="block text-gray-700 font-medium mb-2">Typography Tokens</label>
<div class="space-y-4">
<div>
<label class="block text-sm text-gray-600 mb-1">Heading Font</label>
<select class="w-full p-2 border border-gray-300 rounded" id="heading-font">
<option value="montserrat">Montserrat</option>
<option value="roboto">Roboto</option>
<option value="playfair">Playfair Display</option>
<option value="opensans">Open Sans</option>
<option value="lato">Lato</option>
</select>
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">Body Font</label>
<select class="w-full p-2 border border-gray-300 rounded" id="body-font">
<option value="roboto">Roboto</option>
<option value="opensans">Open Sans</option>
<option value="lato">Lato</option>
<option value="montserrat">Montserrat</option>
</select>
</div>
</div>
</div>
<div class="mb-6">
<label class="block text-gray-700 font-medium mb-2">Spacing Tokens</label>
<div class="grid grid-cols-3 gap-4">
<div>
<label class="block text-sm text-gray-600 mb-1">Small</label>
<input type="number" value="8" class="w-full p-2 border border-gray-300 rounded" id="spacing-sm">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">Medium</label>
<input type="number" value="16" class="w-full p-2 border border-gray-300 rounded" id="spacing-md">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">Large</label>
<input type="number" value="24" class="w-full p-2 border border-gray-300 rounded" id="spacing-lg">
</div>
</div>
</div>
<button class="w-full py-3 gradient-bg text-white font-semibold rounded-lg hover:opacity-90 transition" id="save-tokens">
Save Tokens
</button>
</div>
</div>
<!-- Demo Modal -->
<div class="modal" id="demo-modal">
<div class="modal-content">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold">Watch Demo</h3>
<button class="text-gray-500 hover:text-gray-700" id="close-demo-modal">
<i class="fas fa-times"></i>
</button>
</div>
<div class="aspect-w-16 aspect-h-9 bg-gray-200 rounded-lg mb-4 flex items-center justify-center">
<i class="fas fa-play-circle text-5xl text-purple-600"></i>
</div>
<p class="text-gray-600 mb-6">
Watch our quick 2-minute demo to see how ProDesign Studio can help you create professional designs in seconds.
</p>
<button class="w-full py-3 gradient-bg text-white font-semibold rounded-lg hover:opacity-90 transition">
Play Demo
</button>
</div>
</div>
<script>
// Mobile menu toggle
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
// Color picker functionality
document.querySelectorAll('.color-option').forEach(option => {
option.addEventListener('click', function() {
document.querySelectorAll('.color-option').forEach(opt => opt.classList.remove('active'));
this.classList.add('active');
const color = this.getAttribute('data-color');
const bgColor = `bg-${color}`;
const textColor = `text-${color}`;
// Update canvas elements
document.getElementById('canvas-heading').className = `text-3xl font-bold ${textColor} mb-4`;
document.getElementById('canvas-button').className = `px-6 py-2 ${bgColor} text-white rounded-lg hover:${bgColor.replace('500', '600')} transition`;
// Update primary color token
document.getElementById('primary-color').value = getComputedColorValue(color);
updateColorPreview('primary-color');
// Update canvas background based on template
updateCanvasBackground();
});
});
function getComputedColorValue(colorClass) {
const colorMap = {
'blue-500': '#3b82f6',
'purple-500': '#8b5cf6',
'red-500': '#ef4444',
'green-500': '#10b981',
'yellow-500': '#f59e0b',
'pink-500': '#ec4899'
};
return colorMap[colorClass] || '#3b82f6';
}
// Font picker functionality
document.querySelectorAll('.font-option').forEach(option => {
option.addEventListener('click', function() {
document.querySelectorAll('.font-option').forEach(opt => opt.classList.remove('active'));
this.classList.add('active');
const font = this.getAttribute('data-font');
document.getElementById('canvas-heading').style.fontFamily = getComputedFontFamily(font);
document.getElementById('canvas-subheading').style.fontFamily = getComputedFontFamily(font);
// Update heading font token
document.getElementById('heading-font').value = font;
});
});
function getComputedFontFamily(font) {
const fontMap = {
'montserrat': 'Montserrat, sans-serif',
'roboto': 'Roboto, sans-serif',
'playfair': '"Playfair Display", serif',
'opensans': '"Open Sans", sans-serif',
'lato': 'Lato, sans-serif'
};
return fontMap[font] || 'sans-serif';
}
// Template selection
document.getElementById('template-select').addEventListener('change', function() {
updateCanvasBackground();
});
function updateCanvasBackground() {
const template = document.getElementById('template-select').value;
const canvas = document.getElementById('design-canvas');
const activeColor = document.querySelector('.color-option.active').getAttribute('data-color');
// Reset all gradient classes
canvas.className = 'design-canvas w-full h-96 rounded-xl shadow-inner flex items-center justify-center relative overflow-hidden';
// Add specific gradient based on template
switch(template) {
case 'social':
canvas.classList.add('bg-gradient-to-r', 'from-pink-500', 'to-red-500');
document.getElementById('dimensions-display').innerHTML = '<span class="font-medium">Dimensions:</span> 1080px × 1080px';
break;
case 'card':
canvas.classList.add('bg-gradient-to-r', 'from-blue-400', 'to-purple-500');
document.getElementById('dimensions-display').innerHTML = '<span class="font-medium">Dimensions:</span> 3.5in × 2in';
break;
case 'flyer':
canvas.classList.add('bg-gradient-to-r', 'from-yellow-400', 'to-orange-500');
document.getElementById('dimensions-display').innerHTML = '<span class="font-medium">Dimensions:</span> 8.5in × 11in';
break;
case 'presentation':
canvas.classList.add('bg-gradient-to-r', 'from-indigo-500', 'to-blue-600');
document.getElementById('dimensions-display').innerHTML = '<span class="font-medium">Dimensions:</span> 16:9 (1920px × 1080px)';
break;
case 'blog':
canvas.classList.add('bg-gradient-to-r', 'from-green-400', 'to-blue-500');
document.getElementById('dimensions-display').innerHTML = '<span class="font-medium">Dimensions:</span> 1200px × 630px';
break;
}
// Apply the selected color to the gradient
if (activeColor) {
const colorOption = document.querySelector('.color-option.active');
colorOption.click(); // This will trigger the color update
}
}
// Text content updates
document.getElementById('main-heading').addEventListener('input', function() {
document.getElementById('canvas-heading').textContent = this.value || 'Your Design Title';
});
document.getElementById('subheading').addEventListener('input', function() {
document.getElementById('canvas-subheading').textContent = this.value || 'This is where your subheading or supporting text will appear.';
});
// Template cards
document.querySelectorAll('.use-template-btn').forEach(btn => {
btn.addEventListener('click', function(e) {
e.stopPropagation();
const templateCard = this.closest('.template-card');
const templateType = templateCard.getAttribute('data-template');
// Set the template select dropdown
document.getElementById('template-select').value = templateType;
// Update the canvas
updateCanvasBackground();
// Show a success message
const templateName = templateCard.querySelector('h3').textContent;
alert(`"${templateName}" template loaded! Customize it using the controls on the left.`);
});
});
// Export functionality
document.getElementById('export-btn').addEventListener('click', function() {
document.getElementById('export-modal').style.display = 'flex';
});
document.getElementById('close-export-modal').addEventListener('click', function() {
document.getElementById('export-modal').style.display = 'none';
});
document.getElementById('confirm-export').addEventListener('click', function() {
const format = document.getElementById('export-format').value;
const quality = document.getElementById('quality-slider').value;
const width = document.getElementById('export-width').value;
const height = document.getElementById('export-height').value;
const includeTokens = document.getElementById('include-tokens').checked;
alert(`Exporting design as ${format.toUpperCase()} (${quality}% quality) at ${width}×${height} pixels. ${includeTokens ? 'Design tokens included.' : ''} In a real app, this would download the file.`);
document.getElementById('export-modal').style.display = 'none';
});
// Quality slider
document.getElementById('quality-slider').addEventListener('input', function() {
document.getElementById('quality-value').textContent = `${this.value}%`;
});
// Tokens functionality
document.getElementById('edit-tokens').addEventListener('click', function() {
document.getElementById('tokens-modal').style.display = 'flex';
});
document.getElementById('close-tokens-modal').addEventListener('click', function() {
document.getElementById('tokens-modal').style.display = 'none';
});
// Color pickers in tokens modal
document.getElementById('primary-color').addEventListener('input', function() {
updateColorPreview('primary-color');
});
document.getElementById('secondary-color').addEventListener('input', function() {
updateColorPreview('secondary-color');
});
document.getElementById('text-color').addEventListener('input', function() {
updateColorPreview('text-color');
});
function updateColorPreview(colorId) {
const colorValue = document.getElementById(colorId).value;
document.getElementById(`${colorId}-preview`).style.backgroundColor = colorValue;
}
// Save tokens
document.getElementById('save-tokens').addEventListener('click', function() {
// In a real app, this would save the tokens to state/local storage
alert('Design tokens saved! These would be used for generating design system files.');
document.getElementById('tokens-modal').style.display = 'none';
});
// Demo modal
document.getElementById('watch-demo').addEventListener('click', function() {
document.getElementById('demo-modal').style.display = 'flex';
});
document.getElementById('close-demo-modal').addEventListener('click', function() {
document.getElementById('demo-modal').style.display = 'none';
});
// Start designing button
document.getElementById('start-designing').addEventListener('click', function() {
// Scroll to the design generator section
document.querySelector('.mb-16.bg-white.rounded-xl').scrollIntoView({
behavior: 'smooth'
});
});
// Fullscreen button
document.getElementById('fullscreen-btn').addEventListener('click', function() {
alert('Fullscreen mode activated! In a real app, this would expand the canvas to fullscreen.');
});
// Generate design button
document.getElementById('generate-design').addEventListener('click', function() {
const generateText = document.getElementById('generate-text');
const generateSpinner = document.getElementById('generate-spinner');
// Show loading state
generateText.textContent = 'Generating...';
generateSpinner.classList.remove('hidden');
// Simulate generation delay
setTimeout(() => {
const template = document.getElementById('template-select').value;
const heading = document.getElementById('main-heading').value || 'Your Design Title';
const subheading = document.getElementById('subheading').value || 'This is where your subheading or supporting text will appear.';
// Reset button state
generateText.textContent = 'Generate Design';
generateSpinner.classList.add('hidden');
// Show success message
alert(`Design generated!\n\nTemplate: ${template}\nHeading: ${heading}\nSubheading: ${subheading}\n\nYour design is ready to export!`);
}, 1500);
});
// Reset design
document.getElementById('reset-design').addEventListener('click', function() {
if (confirm('Are you sure you want to reset the design? All changes will be lost.')) {
// Reset form fields
document.getElementById('design-brief').value = '';
document.getElementById('main-heading').value = '';
document.getElementById('subheading').value = '';
// Reset to default template
document.getElementById('template-select').value = 'social';
// Reset to default color
document.querySelectorAll('.color-option').forEach(opt => opt.classList.remove('active'));
document.querySelector('.color-option[data-color="blue-500"]').classList.add('active');
// Reset to default font
document.querySelectorAll('.font-option').forEach(opt => opt.classList.remove('active'));
document.querySelector('.font-option[data-font="montserrat"]').classList.add('active');
// Update canvas
updateCanvasBackground();
alert('Design has been reset to default settings.');
}
});
// Undo/Redo buttons
document.getElementById('undo-btn').addEventListener('click', function() {
alert('Undo last action');
});
document.getElementById('redo-btn').addEventListener('click', function() {
alert('Redo last action');
});
// Tab functionality
document.querySelectorAll('.tab-button').forEach(tab => {
tab.addEventListener('click', function() {
const tabId = this.getAttribute('data-tab');
// Update active tab
document.querySelectorAll('.tab-button').forEach(t => t.classList.remove('active'));
this.classList.add('active');
// Show corresponding tab content
document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.add('hidden'));
document.getElementById(`${tabId}-tab`).classList.remove('hidden');
});
});
// Export options in export tab
document.querySelectorAll('.export-option').forEach(option => {
option.addEventListener('click', function() {
const format = this.getAttribute('data-format');
alert(`Preparing to export as ${format.toUpperCase()} format. In a real app, this would download the file.`);
});
});
// Initialize with default values
updateCanvasBackground();
updateColorPreview('primary-color');
updateColorPreview('secondary-color');
updateColorPreview('text-color');
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Avillo65/trial-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>