TPsoft.org/WebWizard
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implemented step 10 by Gemini

Browse Source 
- added 4. step of wizard for style and images
This commit is contained in:
Igor Miňo
2026-06-14 08:07:23 +02:00
parent 991ff9de00
commit c11f7e4d75
5 changed files with 440 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
public/css/wizard.css
View File

@ -313,6 +313,136 @@ textarea:focus, input[type="text"]:focus, input[type="email"]:focus {
margin-bottom: 1.5rem;
}
/* Palette Grid */
.palette-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.palette-card {
border: 2px solid var(--border-color);
border-radius: 0.5rem;
padding: 1rem;
cursor: pointer;
transition: all 0.2s;
display: flex;
flex-direction: column;
gap: 0.75rem;
background-color: white;
}
.palette-card:hover {
border-color: var(--primary-color);
}
.palette-card.selected {
border-color: var(--primary-color);
box-shadow: 0 0 0 1px var(--primary-color);
}
.palette-colors {
display: flex;
height: 1.5rem;
border-radius: 0.25rem;
overflow: hidden;
}
.palette-colors span {
flex: 1;
}
/* Upload UI */
.upload-box {
border: 2px dashed var(--border-color);
border-radius: 0.5rem;
padding: 2rem;
text-align: center;
cursor: pointer;
transition: all 0.2s;
background-color: #f8fafc;
position: relative;
min-height: 120px;
display: flex;
align-items: center;
justify-content: center;
}
.upload-box:hover {
border-color: var(--primary-color);
background-color: #eff6ff;
}
.upload-box.mini {
padding: 1rem;
min-height: 80px;
width: 80px;
font-size: 1.5rem;
color: var(--text-muted);
}
.image-preview {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
padding: 0.5rem;
}
.image-preview img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 0.25rem;
}
.gallery-upload-grid {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.gallery-previews {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.gallery-item {
width: 80px;
height: 80px;
border-radius: 0.5rem;
border: 1px solid var(--border-color);
overflow: hidden;
position: relative;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.btn-remove-asset {
position: absolute;
top: -5px;
right: -5px;
background: #ef4444;
color: white;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
cursor: pointer;
border: none;
padding: 0;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;