CSS FILE (style.css) * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; width: 100%; } body { font-family: 'Poppins', 'Noto Sans Devanagari', sans-serif; background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 50%, #e6f0ff 100%); min-height: 100vh; color: #222; overflow-x: hidden; } .container { max-width: 1400px; margin: 0 auto; padding: 20px; } .header { text-align: center; padding: 30px 20px; background: rgba(255, 255, 255, 0.05); border-radius: 20px; margin-bottom: 30px; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); } .header h1 { font-size: 2.5rem; background: linear-gradient(90deg, #FFD700, #FFA500, #FF6B6B); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 10px; font-weight: 700; } .header p { color: #a0a0a0; font-size: 1.1rem; } .main-content { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px; } .control-panel { background: rgba(255, 255, 255, 0.05); border-radius: 20px; padding: 25px; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); max-height: 85vh; overflow-y: auto; } .control-panel::-webkit-scrollbar { width: 8px; } .control-panel::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 10px; } .control-panel::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #FFD700, #FFA500); border-radius: 10px; } .control-panel::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #FFA500, #FF6B6B); } .section { margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .section h2 { font-size: 1.1rem; margin-bottom: 15px; color: #FFD700; font-weight: 600; } .upload-area { border: 2px dashed rgba(255, 215, 0, 0.5); border-radius: 15px; padding: 40px 20px; text-align: center; cursor: pointer; transition: all 0.3s ease; background: rgba(255, 215, 0, 0.05); } .upload-area:hover { border-color: #FFD700; background: rgba(255, 215, 0, 0.1); transform: translateY(-2px); } .upload-area.dragover { border-color: #4ECDC4; background: rgba(78, 205, 196, 0.1); box-shadow: 0 0 20px rgba(78, 205, 196, 0.3); } .upload-content .upload-icon { font-size: 3rem; display: block; margin-bottom: 10px; } .upload-content p { font-size: 1rem; margin-bottom: 5px; font-weight: 500; } .upload-content .file-info { font-size: 0.8rem; color: #888; display: block; } .frame-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .frame-btn { padding: 12px 15px; border: 2px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.05); color: #fff; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; font-size: 0.9rem; font-weight: 500; font-family: inherit; } .frame-btn:hover { border-color: #FFD700; background: rgba(255, 215, 0, 0.1); } .frame-btn.active { border-color: #FFD700; background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.2)); box-shadow: 0 0 15px rgba(255, 215, 0, 0.3); } .color-options { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; } .color-options input[type="color"] { width: 60px; height: 50px; border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 10px; cursor: pointer; transition: all 0.3s ease; } .color-options input[type="color"]:hover { border-color: #FFD700; } .preset-colors { display: flex; gap: 8px; flex-wrap: wrap; } .color-preset { width: 35px; height: 35px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: all 0.3s ease; } .color-preset:hover { transform: scale(1.1); border-color: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.3); } .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 8px; font-size: 0.9rem; color: #ddd; font-weight: 500; } .form-group input[type="text"], .form-group input[type="tel"], .form-group input[type="url"], .form-group input[type="email"], .form-group textarea, .form-group select { width: 100%; padding: 12px 15px; border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 10px; background: rgba(255, 255, 255, 0.05); color: #fff; font-size: 0.95rem; transition: all 0.3s ease; font-family: inherit; } .form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255, 255, 255, 0.4); } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: #FFD700; background: rgba(255, 215, 0, 0.05); box-shadow: 0 0 10px rgba(255, 215, 0, 0.2); } .form-group textarea { min-height: 80px; resize: vertical; } .form-group input[type="range"] { width: 100%; height: 6px; border-radius: 5px; background: linear-gradient(90deg, rgba(255, 215, 0, 0.3), rgba(255, 215, 0, 0.6)); outline: none; -webkit-appearance: none; appearance: none; } .form-group input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #FFD700; cursor: pointer; box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); } .form-group input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #FFD700; cursor: pointer; border: none; box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); } #fontSizeValue { color: #FFD700; font-weight: 600; } .form-group input[type="color"] { width: 100%; height: 45px; border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 10px; cursor: pointer; transition: all 0.3s ease; } .form-group input[type="color"]:hover { border-color: #FFD700; } .logo-upload-area { border: 2px dashed rgba(255, 215, 0, 0.5); border-radius: 12px; padding: 15px; text-align: center; cursor: pointer; transition: all 0.3s ease; background: rgba(255, 215, 0, 0.05); } .logo-upload-area:hover { border-color: #FFD700; background: rgba(255, 215, 0, 0.1); } .btn-small { padding: 8px 15px; border: none; border-radius: 8px; background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; font-size: 0.85rem; font-family: inherit; transition: all 0.3s ease; width: 100%; } .btn-small:hover { background: rgba(231, 76, 60, 0.3); } .action-buttons { display: flex; flex-direction: column; gap: 12px; } .btn { padding: 15px 25px; border: none; border-radius: 12px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-family: inherit; } .btn-preview { background: linear-gradient(135deg, #3498DB, #2980B9); color: #fff; } .btn-preview:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(52, 152, 219, 0.4); } .btn-download { background: linear-gradient(135deg, #2ECC71, #27AE60); color: #fff; } .btn-download:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(46, 204, 113, 0.4); } .btn-reset { background: linear-gradient(135deg, #E74C3C, #C0392B); color: #fff; } .btn-reset:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(231, 76, 60, 0.4); } .preview-panel { background: rgba(255, 255, 255, 0.05); border-radius: 20px; padding: 25px; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); position: sticky; top: 20px; } .preview-panel h2 { font-size: 1.3rem; margin-bottom: 20px; color: #FFD700; text-align: center; font-weight: 600; } .preview-container { display: flex; justify-content: center; align-items: center; min-height: 400px; background: rgba(0, 0, 0, 0.2); border-radius: 15px; padding: 20px; position: relative; } .preview-frame { display: none; max-width: 100%; position: relative; } .preview-frame.visible { display: block; } .frame-inner { position: relative; display: inline-block; border-radius: 10px; overflow: visible; } #previewImage { max-width: 100%; max-height: 500px; display: block; border-radius: 5px; } .preview-frame.classic .frame-inner { padding: 15px; background: linear-gradient(135deg, #FFD700, #FFA500); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } .preview-frame.modern .frame-inner { padding: 8px; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 15px; box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4); } .preview-frame.gradient .frame-inner { padding: 12px; background: linear-gradient(45deg, #f093fb, #f5576c, #4facfe, #00f2fe); background-size: 400% 400%; animation: gradientMove 3s ease infinite; border-radius: 12px; } .preview-frame.floral .frame-inner { padding: 20px; background: linear-gradient(135deg, #ffecd2, #fcb69f); border-radius: 10px; border: 4px double #d4a373; box-shadow: 0 10px 30px rgba(212, 163, 115, 0.3); } .preview-frame.minimal .frame-inner { padding: 5px; background: #fff; border-radius: 3px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); } .preview-frame.gold .frame-inner { padding: 18px; background: linear-gradient(135deg, #f7971e, #ffd200); border-radius: 8px; border: 3px solid #c9a227; box-shadow: 0 0 20px rgba(201, 162, 39, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.3); } @keyframes gradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .details-container { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; } .logo-element { position: absolute; top: 10px; left: 10px; width: 60px; height: 60px; background: rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 5px; z-index: 5; border: 2px solid rgba(255, 215, 0, 0.3); pointer-events: all; cursor: move; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; } .logo-element:hover { border-color: #FFD700; box-shadow: 0 0 15px rgba(255, 215, 0, 0.3); } .logo-element.selected { border-color: #4ECDC4; box-shadow: 0 0 25px rgba(78, 205, 196, 0.6); } .logo-element img { width: 100%; height: 100%; object-fit: contain; } .logo-resize-handle { position: absolute; bottom: -8px; right: -8px; width: 20px; height: 20px; background: #FFD700; border-radius: 50%; cursor: se-resize; display: none; z-index: 20; border: 2px solid rgba(0, 0, 0, 0.5); } .logo-element.selected .logo-resize-handle { display: block; } .draggable-text-box { position: absolute; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(5px); padding: 12px 15px; border-radius: 8px; border: 2px solid rgba(255, 215, 0, 0.4); cursor: grab; user-select: none; transition: all 0.2s ease; pointer-events: all; display: flex; align-items: flex-start; gap: 8px; flex-wrap: nowrap; word-break: break-word; white-space: normal; min-width: 100px; width: 250px; } .draggable-text-box:hover { border-color: #FFD700; box-shadow: 0 0 15px rgba(255, 215, 0, 0.3); } .draggable-text-box.dragging { cursor: grabbing; opacity: 0.9; box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); border-color: #FFD700; } .draggable-text-box.selected { border-color: #4ECDC4; box-shadow: 0 0 25px rgba(78, 205, 196, 0.6); } .text-box-content { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; word-break: break-word; } .text-box-icon { flex-shrink: 0; font-size: 1.1em; } .text-box-text { word-break: break-word; } .resize-handle { position: absolute; bottom: -5px; right: -5px; width: 15px; height: 15px; background: #FFD700; border-radius: 50%; cursor: nwse-resize; display: none; z-index: 20; } .draggable-text-box.selected .resize-handle { display: block; } .no-image { text-align: center; color: #888; } .no-image span { font-size: 5rem; display: block; margin-bottom: 15px; opacity: 0.5; } .no-image p { font-size: 1.1rem; } .no-image.hidden { display: none; } .footer { text-align: center; padding: 25px; background: rgba(255, 255, 255, 0.05); border-radius: 15px; color: #888; border: 1px solid rgba(255, 255, 255, 0.1); } .toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px); background: linear-gradient(135deg, #2ECC71, #27AE60); color: #fff; padding: 15px 30px; border-radius: 50px; display: flex; align-items: center; gap: 10px; box-shadow: 0 10px 30px rgba(46, 204, 113, 0.4); opacity: 0; transition: all 0.3s ease; z-index: 1000; font-weight: 600; } .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } .toast.error { background: linear-gradient(135deg, #E74C3C, #C0392B); box-shadow: 0 10px 30px rgba(231, 76, 60, 0.4); } .toast-icon { font-size: 1.2rem; font-weight: 700; } @media (max-width: 1200px) { .main-content { grid-template-columns: 1fr; } .preview-panel { position: static; } .control-panel { max-height: none; } } @media (max-width: 768px) { .header h1 { font-size: 1.8rem; } .header p { font-size: 0.95rem; } .frame-options { grid-template-columns: repeat(2, 1fr); } .container { padding: 10px; } .control-panel { padding: 15px; } .preview-panel { padding: 15px; } } @media (max-width: 480px) { .header h1 { font-size: 1.3rem; } .frame-options { grid-template-columns: 1fr; } .preset-colors { justify-content: center; } .upload-area { padding: 25px 15px; } .btn { padding: 12px 20px; font-size: 0.9rem; } }