:root {
--brand-dark: #283044;
--brand-mid: #78A1BB;
--brand-light: #d0e3ef;
--brand-bg: #eef5f9;
--brand-hover: rgba(120,161,187,.12);
}
.dsb-wrap {
width: 100%;
font-family: inherit;
}
.dsb-label {
font-size: 12px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--brand-mid);
margin-bottom: .5rem;
}
.dsb-dz {
position: relative;
width: 100%;
border: 2px dashed var(--brand-mid);
border-radius: 14px;
padding: 2.5rem 2rem;
text-align: center;
cursor: pointer;
background: var(--brand-bg);
transition: border-color .2s, background .2s, transform .15s;
box-sizing: border-box;
}
.dsb-dz:hover,
.dsb-dz.dsb-on {
border: 2px solid var(--brand-dark);
background: var(--brand-hover);
transform: scale(1.005);
}
/* Drag-Overlay */
.dsb-overlay {
position: absolute;
inset: 0;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
opacity: 0;
transition: opacity .15s;
background: rgba(40,48,68,.06);
}
.dsb-dz.dsb-on .dsb-overlay { opacity: 1; }
.dsb-overlay-txt {
font-size: 15px;
font-weight: 700;
color: var(--brand-dark);
}
/* Icon-Kreis */
.dsb-icon {
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--brand-dark);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
transition: transform .3s;
}
.dsb-dz:hover .dsb-icon,
.dsb-dz.dsb-on .dsb-icon {
transform: translateY(-5px) scale(1.1);
}
.dsb-icon svg {
width: 22px;
height: 22px;
color: var(--brand-mid);
}
/* Texte */
.dsb-headline {
font-size: 15px;
font-weight: 700;
color: var(--brand-dark);
margin-bottom: .3rem;
}
.dsb-sub {
font-size: 13px;
color: var(--brand-mid);
}
.dsb-sub span {
color: var(--brand-dark);
font-weight: 600;
cursor: pointer;
border-bottom: 1px solid var(--brand-mid);
}
.dsb-sub span:hover { border-color: var(--brand-dark); }
/* Dateiformat-Chips */
.dsb-chips {
display: flex;
gap: 6px;
justify-content: center;
margin-top: .9rem;
flex-wrap: wrap;
}
.dsb-chips span {
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
padding: 3px 10px;
border-radius: 20px;
background: var(--brand-dark);
color: var(--brand-light);
border: 1px solid var(--brand-dark);
}
/* Verstecktes File-Input */
.dsb-dz input[type="file"] { display: none; }
/* Datei-Liste */
.dsb-file-list {
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 8px;
}
/* Einzelne Datei-Zeile */
.dsb-file-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: #fff;
border: 1px solid var(--brand-light);
border-radius: 10px;
animation: dsbSlide .22s ease;
text-align: left;
}
@keyframes dsbSlide {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: none; }
}
.dsb-file-icon {
width: 34px;
height: 34px;
border-radius: 8px;
background: var(--brand-dark);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.dsb-file-icon svg {
width: 15px;
height: 15px;
color: var(--brand-mid);
}
.dsb-file-meta { flex: 1; min-width: 0; }
.dsb-file-name {
font-size: 13px;
font-weight: 600;
color: var(--brand-dark);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dsb-file-size {
font-size: 11px;
color: var(--brand-mid);
margin-top: 1px;
}
/* Fortschrittsbalken */
.dsb-prog-bar {
height: 3px;
background: var(--brand-light);
border-radius: 2px;
margin-top: 5px;
overflow: hidden;
}
.dsb-prog-fill {
height: 100%;
background: var(--brand-dark);
border-radius: 2px;
transition: width .4s ease;
}
/* Entfernen-Button */
.dsb-remove {
background: none;
border: none;
cursor: pointer;
padding: 4px;
color: var(--brand-mid);
border-radius: 6px;
display: flex;
line-height: 1;
flex-shrink: 0;
}
.dsb-remove:hover {
color: var(--brand-dark);
background: var(--brand-light);
}
Attach files
Drop to upload ↓
Drag files here
or choose files
PDF
JPG
PNG
AI
EPS
max. 10 MB
(function () {
var dz = document.getElementById('dsbDropZone');
var fi = document.getElementById('dsbFileInput');
var fl = document.getElementById('dsbFileList');
var btn = document.getElementById('dsbBrowse');
/* Dateigröße formatieren */
function fmtSize(bytes) {
if (bytes < 1024) return bytes + ' B';
if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
return (bytes / 1048576).toFixed(1) + ' MB';
}
/* Datei-Zeile einfügen + Fortschrittsbalken animieren */
function addFile(file) {
var id = 'dsb_' + Date.now() + '_' + Math.random().toString(36).slice(2);
var row = document.createElement('div');
row.className = 'dsb-file-item';
row.id = id;
row.innerHTML =
'
'
+ ''
+ ''
+ ''
+ ''
+ '
'
+ '
'
+ '
'
+ ''
+ ''
+ ''
+ ''
+ ' ';
fl.appendChild(row);
/* Fortschrittsbalken-Animation (simuliert Upload-Fortschritt) */
var progress = 0;
var bar = document.getElementById('bar_' + id);
var timer = setInterval(function () {
progress += Math.random() * 22;
if (progress >= 100) { progress = 100; clearInterval(timer); }
bar.style.width = Math.min(100, progress).toFixed(0) + '%';
}, 80);
}
/* Klick auf "choose files" → öffnet Datei-Dialog */
btn.addEventListener('click', function () { fi.click(); });
/* Datei-Dialog: Auswahl bestätigt */
fi.addEventListener('change', function () {
Array.from(fi.files).forEach(addFile);
fi.value = '';
});
/* Drag & Drop Events */
dz.addEventListener('dragover', function (e) {
e.preventDefault();
dz.classList.add('dsb-on');
});
dz.addEventListener('dragleave', function (e) {
if (!dz.contains(e.relatedTarget)) {
dz.classList.remove('dsb-on');
}
});
dz.addEventListener('drop', function (e) {
e.preventDefault();
dz.classList.remove('dsb-on');
Array.from(e.dataTransfer.files).forEach(addFile);
});
})();
