From 9c47501712fba7a9db6ca06e2d46632a81615afd Mon Sep 17 00:00:00 2001 From: Git Manager GUI Date: Mon, 13 Apr 2026 18:52:44 +0200 Subject: [PATCH] Upload folder via GUI - assets --- assets/css/admin.css | 198 ++++++++++++++++++++++++++++++ assets/css/frontend.css | 134 +++++++++++++++++++++ assets/js/admin.js | 215 +++++++++++++++++++++++++++++++++ assets/js/frontend.js | 259 ++++++++++++++++++++++++++++++++++++++++ 4 files changed, 806 insertions(+) create mode 100644 assets/css/admin.css create mode 100644 assets/css/frontend.css create mode 100644 assets/js/admin.js create mode 100644 assets/js/frontend.js diff --git a/assets/css/admin.css b/assets/css/admin.css new file mode 100644 index 0000000..c3f1206 --- /dev/null +++ b/assets/css/admin.css @@ -0,0 +1,198 @@ +/* WP Multi Formular – Admin CSS v2.0 */ +:root{--wmf-primary:#2271b1;--wmf-primary-h:#135e96;--wmf-error:#d63638;--wmf-border:#dcdcde;--wmf-radius:4px;--wmf-shadow:0 1px 4px rgba(0,0,0,.1);} +.wmf-admin-wrap{max-width:1400px;} +.wmf-page-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;} +.wmf-badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px;background:#e8f0fb;color:var(--wmf-primary);vertical-align:middle;} +.wmf-sc-copy,.wmf-sc-badge{font-size:12px;font-family:monospace;background:#f6f7f7;border:1px solid var(--wmf-border);border-radius:3px;padding:3px 8px;cursor:pointer;display:inline-block;transition:background .15s;} +.wmf-sc-copy:hover,.wmf-sc-badge:hover{background:#e0e0e0;} +.wmf-row-actions .button{margin-right:4px;} +.wmf-btn-delete{color:var(--wmf-error)!important;border-color:var(--wmf-error)!important;} +.wmf-btn-delete:hover{background:#fef2f2!important;} +.wmf-empty-state{text-align:center;padding:60px 20px;background:#fff;border:1px solid var(--wmf-border);border-radius:var(--wmf-radius);margin-top:20px;} +.wmf-empty-icon{font-size:56px;color:#c3c4c7;display:block;margin-bottom:12px;} +/* Builder */ +.wmf-form-title-row{display:flex;gap:10px;align-items:center;margin:14px 0;} +.wmf-title-input{flex:1;font-size:21px;font-weight:600;padding:8px 12px;border:2px solid var(--wmf-border);border-radius:var(--wmf-radius);box-sizing:border-box;max-width:600px;} +.wmf-title-input:focus{border-color:var(--wmf-primary);outline:none;} +.wmf-builder-layout{display:grid;grid-template-columns:210px 1fr 275px;gap:14px;align-items:start;} +.wmf-palette{background:#fff;border:1px solid var(--wmf-border);border-radius:var(--wmf-radius);padding:12px;position:sticky;top:32px;max-height:calc(100vh - 100px);overflow-y:auto;} +.wmf-palette-search{width:100%;box-sizing:border-box;padding:6px 8px;border:1px solid #c3c4c7;border-radius:3px;font-size:13px;margin-bottom:10px;} +.wmf-palette-cat-title{font-size:11px;text-transform:uppercase;color:#a7aaad;margin:10px 0 5px;display:flex;align-items:center;gap:5px;} +.wmf-palette-cat-title .dashicons{font-size:14px;width:14px;height:14px;} +.wmf-palette-item{display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:3px;background:#f6f7f7;border:1px solid #e0e0e0;cursor:grab;font-size:13px;user-select:none;transition:background .1s,border-color .1s;margin-bottom:4px;} +.wmf-palette-item:hover{background:#e8f0fb;border-color:var(--wmf-primary);color:var(--wmf-primary);} +.wmf-palette-item .dashicons{font-size:15px;width:15px;height:15px;flex-shrink:0;} +.wmf-palette-item.wmf-hidden{display:none;} +.wmf-canvas-col{display:flex;flex-direction:column;gap:10px;} +.wmf-canvas{min-height:420px;background:#fff;border:2px dashed #c3c4c7;border-radius:var(--wmf-radius);padding:14px;transition:border-color .2s;} +.wmf-canvas.drag-over{border-color:var(--wmf-primary);background:#f0f6fc;} +.wmf-canvas-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;color:#a7aaad;text-align:center;} +.wmf-canvas-empty.wmf-hidden{display:none;} +.wmf-field-list{display:flex;flex-direction:column;gap:6px;} +.wmf-canvas-field{display:flex;align-items:center;gap:8px;background:#f6f7f7;border:1.5px solid var(--wmf-border);border-radius:var(--wmf-radius);padding:9px 11px;cursor:pointer;transition:border-color .15s,background .15s;} +.wmf-canvas-field:hover{border-color:var(--wmf-primary);background:#f0f6fc;} +.wmf-canvas-field.wmf-active{border-color:var(--wmf-primary);background:#e8f0fb;box-shadow:0 0 0 2px rgba(34,113,177,.2);} +.wmf-drag-handle{cursor:grab;color:#a7aaad;font-size:18px;flex-shrink:0;} +.wmf-drag-handle:hover{color:var(--wmf-primary);} +.wmf-field-type-icon{color:#646970;flex-shrink:0;} +.wmf-field-label{flex:1;font-size:13px;font-weight:500;} +.wmf-field-type-badge{font-size:10px;color:#a7aaad;} +.wmf-field-req-mark{color:var(--wmf-error);font-size:13px;} +.wmf-step-badge{font-size:10px;background:#e8f0fb;color:var(--wmf-primary);padding:1px 6px;border-radius:8px;} +.wmf-step-select{font-size:11px;border:1px solid #c3c4c7;border-radius:3px;padding:1px 4px;background:#fff;color:#646970;cursor:pointer;flex-shrink:0;} +.wmf-field-del{background:none;border:none;cursor:pointer;color:#a7aaad;padding:2px 4px;border-radius:3px;font-size:15px;transition:color .1s,background .1s;} +.wmf-field-del:hover{color:var(--wmf-error);background:#fef2f2;} +.wmf-canvas-field.ui-sortable-helper{box-shadow:var(--wmf-shadow);opacity:.9;} +.wmf-canvas-field.ui-sortable-placeholder{background:#e8f0fb;border:2px dashed var(--wmf-primary);visibility:visible!important;} +.wmf-canvas-footer{display:flex;gap:8px;padding:12px 14px;background:#fff;border:1px solid var(--wmf-border);border-radius:var(--wmf-radius);position:sticky;bottom:12px;box-shadow:var(--wmf-shadow);} +.wmf-settings-col{position:sticky;top:32px;max-height:calc(100vh - 100px);overflow-y:auto;} +.wmf-panel{background:#fff;border:1px solid var(--wmf-border);border-radius:var(--wmf-radius);margin-bottom:10px;overflow:hidden;} +.wmf-panel-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#f6f7f7;border-bottom:1px solid var(--wmf-border);font-size:13px;font-weight:600;} +.wmf-panel-close{background:none;border:none;cursor:pointer;color:#a7aaad;font-size:16px;padding:0;} +.wmf-panel-close:hover{color:var(--wmf-error);} +.wmf-panel-body{padding:14px;} +.wmf-panel-foot{padding:10px 14px;border-top:1px solid var(--wmf-border);} +.wmf-loading-msg{color:#a7aaad;font-style:italic;font-size:13px;} +.wmf-tabs{display:flex;border-bottom:1px solid var(--wmf-border);background:#f6f7f7;} +.wmf-tab{background:none;border:none;padding:9px 13px;font-size:12px;cursor:pointer;border-bottom:2px solid transparent;color:#646970;margin-bottom:-1px;font-weight:500;} +.wmf-tab:hover{color:var(--wmf-primary);} +.wmf-tab.active{color:var(--wmf-primary);border-bottom-color:var(--wmf-primary);font-weight:600;background:#fff;} +.wmf-tab-pane{display:none;padding:14px;} +.wmf-tab-pane.active{display:block;} +.wmf-sg{margin-bottom:12px;} +.wmf-sg label{display:block;font-size:12px;font-weight:600;color:#1d2327;margin-bottom:4px;} +.wmf-sg-head{font-size:11px;text-transform:uppercase;color:#a7aaad;font-weight:600;margin-bottom:8px!important;} +.wmf-sg input[type=text],.wmf-sg input[type=email],.wmf-sg input[type=url],.wmf-sg input[type=number],.wmf-sg textarea,.wmf-sg select{width:100%;box-sizing:border-box;} +.wmf-field-setting{margin-bottom:10px;} +.wmf-field-setting label{display:block;font-size:12px;font-weight:600;margin-bottom:3px;color:#1d2327;} +.wmf-field-setting input[type=text],.wmf-field-setting input[type=number],.wmf-field-setting textarea,.wmf-field-setting select{width:100%;box-sizing:border-box;} +.wmf-field-inline label{display:flex!important;align-items:center;gap:6px;font-weight:normal!important;font-size:13px;cursor:pointer;} +.wmf-settings-sep{border:none;border-top:1px solid var(--wmf-border);margin:12px 0;} +.wmf-hint{font-size:10px;color:#a7aaad;font-weight:normal;} +.wmf-rule-row{display:flex;gap:5px;margin-bottom:6px;align-items:center;} +.wmf-rule-row select,.wmf-rule-row input{flex:1;font-size:12px;} +.wmf-rule-remove{background:none;border:none;color:var(--wmf-error);cursor:pointer;font-size:15px;flex-shrink:0;padding:0 4px;} +.wmf-add-rule{font-size:12px;margin-top:4px;} +.wmf-conditional-rules{margin-top:10px;padding:10px;background:#f9f9f9;border-radius:3px;border:1px solid var(--wmf-border);} +.wmf-opts-list{margin-bottom:8px;} +.wmf-opt-row{display:flex;gap:5px;align-items:center;margin-bottom:5px;} +.wmf-opt-row input{flex:1;font-size:12px;} +.wmf-opt-del{background:none;border:none;color:var(--wmf-error);cursor:pointer;font-size:15px;flex-shrink:0;} +.wmf-add-opt{font-size:12px;} +.wmf-submissions-wrap{margin-top:14px;} +.wmf-submissions-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;} +.wmf-status{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;} +.wmf-status-neu{background:#e8f0fb;color:var(--wmf-primary);} +.wmf-status-gelesen{background:#f0fdf4;color:#166534;} +.wmf-status-archiviert{background:#f6f7f7;color:#646970;} +#wmf-preview-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:99999;overflow-y:auto;padding:20px;} +.wmf-preview-inner{max-width:700px;margin:20px auto;background:#fff;border-radius:8px;padding:32px;position:relative;} +/* Integrations */ +.wmf-integrations-widget .mode-group{margin:0 0 1em;} +.wmf-buttongroup{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;} +.wmf-buttongroup input[type=radio]{position:absolute;opacity:0;width:0;height:0;} +.wmf-buttongroup label span{display:inline-block;padding:4px 12px;border:1px solid #8c8f94;border-radius:3px;cursor:pointer;background:#f6f7f7;font-size:13px;line-height:2;} +.wmf-buttongroup input[type=radio]:checked+span{background:var(--wmf-primary);border-color:var(--wmf-primary);color:#fff;} +.wmf-service-integration{display:none;} +.wmf-stripe-block,.wmf-paypal-block{display:none;} +#wmf-service-stripe[data-active-mode=live] .wmf-stripe-block-live,#wmf-service-stripe[data-active-mode=test] .wmf-stripe-block-test,#wmf-service-paypal[data-active-mode=live] .wmf-paypal-block-live,#wmf-service-paypal[data-active-mode=sandbox] .wmf-paypal-block-sandbox{display:block;} +#wmf-int-widget-recaptcha .has-service-selection[data-active-service=recaptcha] #wmf-service-recaptcha,#wmf-int-widget-recaptcha .has-service-selection[data-active-service=recaptchav3] #wmf-service-recaptchav3{display:block;} +#wmf-integration-toolbar{margin-bottom:15px;} +#wmf-integration-toolbar .media-toolbar-secondary{float:left;margin-top:11px;} +#wmf-no-integrations-found{color:#646970;font-size:16px;text-align:center;padding:60px 0;display:none;} +#wmf-integrations-results-wrap.no-results #wmf-no-integrations-found{display:block;} +#wmf-integrations-results{display:none;} +#wmf-integrations-results .postbox-container{width:25%;padding:0 8px;box-sizing:border-box;float:left;} +.wmf-integrations-widget{box-sizing:border-box;} +.wmf-integrations-widget .handle-actions{display:none;} +.wmf-integrations-widget.closed .inside,.wmf-integrations-widget.closed br.clear{display:block;} +@media(max-width:1200px){.wmf-builder-layout{grid-template-columns:190px 1fr 250px;}} +@media(max-width:960px){.wmf-builder-layout{grid-template-columns:1fr;}.wmf-palette,.wmf-settings-col{position:static;max-height:none;}} +@media(max-width:799px){#wmf-integrations-results .postbox-container{width:100%;}} + + +/* ============================================================ + EINREICHUNGEN – LISTE + ============================================================ */ +.wmf-submissions-wrap { margin-top:16px; } +.wmf-subs-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } +.wmf-subs-title { margin:0; font-size:18px; display:flex; align-items:center; gap:10px; } +.wmf-subs-count { display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; background:#2271b1; color:#fff; border-radius:12px; font-size:12px; font-weight:700; padding:0 7px; } +.wmf-subs-filter-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:12px; border-bottom:1px solid #dcdcde; padding-bottom:12px; } +.wmf-status-tabs { display:flex; gap:0; } +.wmf-status-tab { padding:6px 14px; text-decoration:none; color:#646970; border:1px solid transparent; border-bottom:none; font-size:13px; } +.wmf-status-tab:hover { color:#2271b1; } +.wmf-status-tab.current { color:#1d2327; background:#fff; border-color:#dcdcde; border-bottom-color:#fff; font-weight:600; margin-bottom:-1px; z-index:1; position:relative; } +.wmf-status-tab .count { color:#a7aaad; font-size:11px; } +.wmf-subs-search { display:flex; gap:6px; align-items:center; } +.wmf-search-input { padding:6px 10px; border:1px solid #c3c4c7; border-radius:3px; font-size:13px; width:220px; } +.wmf-table-wrap { overflow-x:auto; } +.wmf-submissions-table { min-width:600px; } +.wmf-submissions-table .wmf-col-id { width:55px; } +.wmf-submissions-table .wmf-col-date { width:130px; white-space:nowrap; } +.wmf-submissions-table .wmf-col-status { width:130px; } +.wmf-submissions-table .wmf-col-actions{ width:160px; white-space:nowrap; } +.wmf-sub-row a { text-decoration:none; color:inherit; } +.wmf-sub-row a:hover { color:#2271b1; } +.wmf-sub-new td { font-weight:600; } +.wmf-sub-id-link { font-weight:700; color:#2271b1!important; } +.wmf-time { display:block; font-size:11px; color:#a7aaad; } +.wmf-status-select { border:none; background:transparent; font-size:12px; font-weight:600; cursor:pointer; padding:3px 6px; border-radius:10px; } +.wmf-status-select.wmf-status-neu { background:#e8f0fb; color:#2271b1; } +.wmf-status-select.wmf-status-gelesen { background:#f0fdf4; color:#166534; } +.wmf-status-select.wmf-status-archiviert { background:#f6f7f7; color:#646970; } +.wmf-status-form { display:inline; } +.wmf-col-actions .button { margin-right:3px; font-size:11px; } +.wmf-pagination { display:flex; align-items:center; gap:10px; margin-top:16px; } +.wmf-page-info { font-size:13px; color:#646970; } +.wmf-empty-submissions { text-align:center; padding:60px 20px; color:#646970; } + +/* ============================================================ + EINREICHUNGEN – DETAILANSICHT + ============================================================ */ +.wmf-submission-detail { max-width:900px; } +.wmf-detail-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; } +.wmf-detail-nav-arrows { display:flex; gap:6px; } + +.wmf-detail-meta-card { + display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:1px; + background:#dcdcde; border:1px solid #dcdcde; border-radius:4px; overflow:hidden; margin-bottom:24px; +} +.wmf-detail-meta-item { background:#fff; padding:14px 16px; } +.wmf-detail-meta-label { font-size:11px; text-transform:uppercase; color:#a7aaad; font-weight:600; display:block; margin-bottom:4px; } +.wmf-detail-meta-value { font-size:14px; font-weight:600; color:#1d2327; } +.wmf-detail-meta-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; grid-column: span 2; } + +.wmf-detail-fields { background:#fff; border:1px solid #dcdcde; border-radius:4px; overflow:hidden; margin-bottom:20px; } +.wmf-detail-section-title { margin:0; padding:14px 20px; font-size:14px; background:#f6f7f7; border-bottom:1px solid #dcdcde; } +.wmf-detail-fields-grid { padding:8px 0; } + +.wmf-detail-field { display:grid; grid-template-columns:220px 1fr; border-bottom:1px solid #f0f0f1; min-height:48px; } +.wmf-detail-field:last-child { border-bottom:none; } +.wmf-detail-field-label { padding:14px 20px; background:#f6f7f7; font-weight:600; font-size:13px; color:#1d2327; display:flex; flex-direction:column; gap:3px; border-right:1px solid #dcdcde; } +.wmf-detail-field-type { font-size:10px; text-transform:uppercase; color:#a7aaad; font-weight:normal; } +.wmf-detail-field-value { padding:14px 20px; font-size:14px; color:#1d2327; word-break:break-word; } + +.wmf-val-text { white-space:pre-wrap; } +.wmf-val-textarea{ white-space:pre-wrap; line-height:1.6; } +.wmf-val-list { margin:0; padding-left:18px; } +.wmf-val-list li { margin-bottom:3px; } +.wmf-val-stars { display:flex; align-items:center; gap:4px; } +.wmf-val-files { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; } +.wmf-val-file-img img { border-radius:4px; border:1px solid #dcdcde; } +.wmf-val-file-link { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; background:#f6f7f7; border:1px solid #dcdcde; border-radius:3px; text-decoration:none; font-size:13px; } +.wmf-val-file-link:hover { background:#e8f0fb; border-color:#2271b1; } +.wmf-empty-value { color:#a7aaad; font-style:italic; font-size:13px; } + +.wmf-detail-technical { margin-top:8px; background:#fff; border:1px solid #dcdcde; border-radius:4px; } +.wmf-detail-technical summary { padding:12px 16px; cursor:pointer; font-size:13px; color:#646970; user-select:none; } +.wmf-detail-technical summary:hover { color:#2271b1; } +.wmf-detail-technical table { margin:0 16px 16px; width:calc(100% - 32px); } +.wmf-detail-technical th { width:160px; font-weight:600; background:#f6f7f7; padding:8px 12px; font-size:12px; } +.wmf-detail-technical td { padding:8px 12px; font-size:13px; word-break:break-all; } + +@media(max-width:700px) { + .wmf-detail-field { grid-template-columns:1fr; } + .wmf-detail-field-label { border-right:none; border-bottom:1px solid #dcdcde; padding-bottom:8px; } + .wmf-detail-meta-card { grid-template-columns:1fr 1fr; } +} diff --git a/assets/css/frontend.css b/assets/css/frontend.css new file mode 100644 index 0000000..cd639a6 --- /dev/null +++ b/assets/css/frontend.css @@ -0,0 +1,134 @@ +/* WP Multi Formular - Frontend CSS v2.1 */ +:root{ + --wmf-primary:#2271b1;--wmf-primary-h:#135e96; + --wmf-error:#d63638;--wmf-success:#46b450; + --wmf-border:#c3c4c7;--wmf-bg:#fff;--wmf-text:#1d2327;--wmf-muted:#646970; + --wmf-radius:5px;--wmf-transition:.18s ease; +} + +/* ========================================================================== + THEME-OVERRIDE mit hoher Spezifitaet + Deckt dunkle Themes ab (z.B. Viper Network Theme) + Labels = weiss, Inputs = weiss mit dunklem Text + ========================================================================== */ +html body .wmf-form-wrap label, +html body .wmf-form-wrap .wmf-label{color:#fff!important;} +html body .wmf-form-wrap .wmf-description, +html body .wmf-form-wrap p.wmf-description{color:rgba(255,255,255,.65)!important;} +html body .wmf-form-wrap .wmf-checkbox-label, +html body .wmf-form-wrap .wmf-radio-label{color:#fff!important;} +html body .wmf-form-wrap .wmf-gdpr-text{color:#fff!important;} +html body .wmf-form-wrap .wmf-section-title{color:#fff!important;border-bottom-color:var(--wmf-primary)!important;} +html body .wmf-form-wrap .wmf-char-count{color:rgba(255,255,255,.55)!important;} +html body .wmf-form-wrap .wmf-input, +html body .wmf-form-wrap textarea.wmf-input, +html body .wmf-form-wrap select.wmf-input{color:#1d2327!important;background:#fff!important;} +html body .wmf-form-wrap .wmf-field-error-msg, +html body .wmf-form-wrap .wmf-field-error{color:#ff6b6b!important;} + +/* Progress */ +.wmf-form-wrap{max-width:720px;margin:0 auto;font-family:inherit;} +.wmf-progress-bar{display:flex;margin-bottom:28px;position:relative;} +.wmf-step-indicator{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;padding-top:36px;font-size:11px;color:rgba(255,255,255,.6);} +.wmf-step-indicator::before{content:'';position:absolute;top:11px;left:0;right:0;height:4px;background:var(--wmf-border);margin:0 4px;} +.wmf-step-indicator.active::before,.wmf-step-indicator.done::before{background:var(--wmf-primary);} +.wmf-step-num{position:absolute;top:0;width:26px;height:26px;border-radius:50%;background:var(--wmf-border);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;transition:background var(--wmf-transition);} +.wmf-step-indicator.active .wmf-step-num,.wmf-step-indicator.done .wmf-step-num{background:var(--wmf-primary);} +.wmf-step-lbl{font-size:11px;text-align:center;} + +/* Fields */ +.wmf-fields{display:flex;flex-wrap:wrap;gap:16px;} +.wmf-field-wrap{width:100%;} +.wmf-field{width:100%;box-sizing:border-box;} +.wmf-field-width-half{width:calc(50% - 8px);} +.wmf-field-width-third{width:calc(33.333% - 11px);} +.wmf-cond-hidden{display:none!important;} +.wmf-hp-field{position:absolute;left:-9999px;opacity:0;pointer-events:none;} + +/* Labels */ +.wmf-label{display:block;margin-bottom:6px;font-weight:600;font-size:14px;} +.wmf-required-mark{color:var(--wmf-error);margin-left:2px;} +.wmf-description{font-size:12px;margin:5px 0 0;} + +/* Inputs */ +.wmf-input{display:block;width:100%;box-sizing:border-box;padding:10px 13px;font-size:15px;line-height:1.5;border:1.5px solid var(--wmf-border);border-radius:var(--wmf-radius);background:#fff;color:#1d2327;transition:border-color var(--wmf-transition),box-shadow var(--wmf-transition);appearance:none;} +.wmf-input:focus{outline:none;border-color:var(--wmf-primary);box-shadow:0 0 0 3px rgba(34,113,177,.15);} +.wmf-input::placeholder{color:#aaa;} +.wmf-textarea{resize:vertical;min-height:120px;} +.wmf-has-error .wmf-input{border-color:var(--wmf-error);} +.wmf-has-error .wmf-input:focus{box-shadow:0 0 0 3px rgba(214,54,56,.15);} +.wmf-field-error-msg{display:none;font-size:12px;margin-top:4px;} +.wmf-has-error .wmf-field-error-msg{display:block;} +.wmf-field-wrap .wmf-field-error{font-size:12px;margin-top:4px;} + +/* Select */ +.wmf-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%23646970'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;cursor:pointer;} + +/* Checkbox/Radio */ +.wmf-checkbox-group,.wmf-radio-group{display:flex;flex-direction:column;gap:10px;margin-top:4px;} +.wmf-layout-horizontal.wmf-checkbox-group,.wmf-layout-horizontal.wmf-radio-group{flex-direction:row;flex-wrap:wrap;gap:14px;} +.wmf-checkbox-label,.wmf-radio-label{display:flex;align-items:flex-start;gap:10px;font-size:14px;cursor:pointer;line-height:1.4;} +.wmf-checkbox-label input,.wmf-radio-label input{width:18px;height:18px;flex-shrink:0;margin-top:1px;accent-color:var(--wmf-primary);cursor:pointer;} + +/* GDPR */ +.wmf-gdpr-label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;} +.wmf-gdpr-checkbox{width:18px;height:18px;flex-shrink:0;margin-top:2px;accent-color:var(--wmf-primary);} +.wmf-gdpr-text{font-size:13px;line-height:1.5;} +.wmf-gdpr-text a{color:var(--wmf-primary);} + +/* Rating */ +.wmf-rating{display:flex;gap:4px;} +.wmf-star{background:none;border:none;cursor:pointer;padding:0;color:#555;font-size:30px;line-height:1;transition:color var(--wmf-transition),transform .1s;} +.wmf-star:hover,.wmf-star.hover{color:#f0b429;transform:scale(1.15);} +.wmf-star.active{color:#f0b429;} + +/* Range */ +.wmf-range-wrap{display:flex;align-items:center;gap:12px;} +.wmf-range-input{flex:1;accent-color:var(--wmf-primary);cursor:pointer;} +.wmf-range-value{font-weight:700;min-width:36px;text-align:center;color:var(--wmf-primary);} + +/* Char count */ +.wmf-char-count{font-size:11px;text-align:right;margin-top:3px;} +.wmf-char-count.wmf-over-limit{color:var(--wmf-error)!important;} + +/* Signature */ +.wmf-signature-wrap{border:1.5px solid var(--wmf-border);border-radius:var(--wmf-radius);overflow:hidden;} +.wmf-signature-canvas{display:block;width:100%;max-width:500px;height:150px;cursor:crosshair;background:#fafafa;touch-action:none;} +.wmf-signature-controls{display:flex;justify-content:flex-end;padding:6px 8px;background:#f6f7f7;border-top:1px solid var(--wmf-border);} + +/* File */ +.wmf-file-input{padding:8px;cursor:pointer;} +.wmf-file-input::file-selector-button{background:var(--wmf-primary);color:#fff;border:none;padding:6px 14px;border-radius:3px;cursor:pointer;font-size:13px;margin-right:10px;} + +/* Section */ +.wmf-section-title{font-size:16px;font-weight:700;margin:0 0 4px;padding-bottom:8px;border-bottom:2px solid var(--wmf-primary);} +.wmf-divider{border:none;border-top:1px solid rgba(255,255,255,.2);margin:4px 0;} + +/* Notices */ +.wmf-notice{padding:14px 18px;border-radius:var(--wmf-radius);margin-bottom:20px;font-size:15px;border-left:4px solid;} +.wmf-notice-success{background:rgba(70,180,80,.15);border-color:var(--wmf-success);color:#a6f0ae;} +.wmf-notice-error{background:rgba(214,54,56,.15);border-color:var(--wmf-error);color:#ffaaaa;} + +/* Submit */ +.wmf-submit-wrap{margin-top:24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;} +.wmf-submit-button{display:inline-flex;align-items:center;justify-content:center;padding:12px 30px;background:var(--wmf-primary);color:#fff;border:none;border-radius:var(--wmf-radius);font-size:16px;font-weight:600;cursor:pointer;transition:background var(--wmf-transition);min-width:140px;} +.wmf-submit-button:hover{background:var(--wmf-primary-h);} +.wmf-submit-button:disabled{opacity:.6;cursor:not-allowed;} + +/* Spinner */ +.wmf-spinner{display:none;width:22px;height:22px;border:3px solid rgba(255,255,255,.3);border-top-color:var(--wmf-primary);border-radius:50%;animation:wmf-spin .7s linear infinite;} +.wmf-loading .wmf-spinner{display:inline-block;} +.wmf-loading .wmf-submit-button{opacity:.7;pointer-events:none;} +@keyframes wmf-spin{to{transform:rotate(360deg);}} + +/* Step nav */ +.wmf-step-nav{margin-top:20px;display:flex;gap:10px;align-items:center;} + +/* Toast */ +.wmf-toast{position:fixed;bottom:24px;right:24px;z-index:99999;background:#1d2327;color:#fff;padding:10px 20px;border-radius:5px;font-size:14px;opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s;pointer-events:none;} +.wmf-toast.show{opacity:1;transform:translateY(0);} + +@media(max-width:640px){ + .wmf-field-width-half,.wmf-field-width-third{width:100%!important;} + .wmf-step-lbl{display:none;} +} diff --git a/assets/js/admin.js b/assets/js/admin.js new file mode 100644 index 0000000..f3a0453 --- /dev/null +++ b/assets/js/admin.js @@ -0,0 +1,215 @@ +/* WP Multi Formular - Admin JS v2.0 */ +(function($){ +'use strict'; +var fields=[],activeIndex=null,multiStep=false,stepCount=1; + +$(document).ready(function(){ + var $cv=$('#wmf-canvas'); if(!$cv.length) return; + var raw=$cv.data('fields'); if(raw&&Array.isArray(raw)&&raw.length) fields=raw; + multiStep=$('#wmf-multistep-toggle').is(':checked'); + stepCount=calcSteps(); + renderCanvas(); initSortable(); initPalette(); initTabs(); + initFormSubmit(); initPreview(); initShortcodeCopy(); + initPaletteSearch(); initSettingsClose(); initMultiStepToggle(); +}); + +function renderCanvas(){ + var $l=$('#wmf-field-list'),$e=$('#wmf-canvas-empty'); + $l.empty(); + if(!fields.length){ $e.removeClass('wmf-hidden'); } + else { $e.addClass('wmf-hidden'); $.each(fields,function(i,f){ $l.append(buildRow(f,i)); }); } + updateHighlight(); updateStepLabels(); +} +function buildRow(field,index){ + var def=getDef(field.type)||{icon:'dashicons-edit'}; + var lbl=field.label||WMF.i18n.no_label; + var req=(field.required==='1')?'*':''; + var cond=(field.conditional_logic==='1')?'⚡':''; + var step=multiStep?'':''; + return $('
').addClass('wmf-canvas-field').attr('data-index',index).html( + ''+ + ''+ + ''+esc(lbl)+req+''+ + cond+step+ + ''+esc(field.type)+''+ + '' + ).on('click',function(e){ + if($(e.target).is('.wmf-field-del,.wmf-step-select')) return; + selectField(index); + }); +} +function stepOpts(cur){ var h=''; for(var i=0;iS'+(i+1)+''; return h; } +function calcSteps(){ var m=0; $.each(fields,function(i,f){ if((f.step||0)>m) m=f.step||0; }); return m+1; } +function selectField(index){ + activeIndex=index; updateHighlight(); + loadSettings(index); + $('#wmf-form-settings-panel').hide(); $('#wmf-field-settings-panel').show(); +} +function updateHighlight(){ + $('.wmf-canvas-field').removeClass('wmf-active'); + if(activeIndex!==null) $('.wmf-canvas-field[data-index="'+activeIndex+'"]').addClass('wmf-active'); +} +function deselectField(){ + activeIndex=null; $('.wmf-canvas-field').removeClass('wmf-active'); + $('#wmf-field-settings-panel').hide(); $('#wmf-form-settings-panel').show(); +} +function loadSettings(index){ + var field=fields[index]; + $('#wmf-field-settings-title').text((field.label||field.type)+' Einstellungen'); + $('#wmf-field-settings-body').html('

'+WMF.i18n.loading+'

'); + $.post(WMF.ajax_url,{action:'wmf_get_field_settings',nonce:WMF.nonce,field_type:field.type,field_data:JSON.stringify(field)},function(res){ + if(!res.success){ $('#wmf-field-settings-body').html('

Fehler beim Laden.

'); return; } + $('#wmf-field-settings-body').html(res.data.html); + bindSettings(index); initOptsEditor(index); initCondUI(index); + }).fail(function(){ $('#wmf-field-settings-body').html('

AJAX-Fehler.

'); }); +} +function bindSettings(index){ + $('#wmf-field-settings-body').find('[data-setting]').off('input change').on('input change',function(){ + var k=$(this).data('setting'),v=$(this).is(':checkbox')?($(this).is(':checked')?'1':'0'):$(this).val(); + fields[index][k]=v; + $('.wmf-canvas-field[data-index="'+index+'"]').replaceWith(buildRow(fields[index],index)); + updateHighlight(); + }); + $(document).off('change.ct').on('change.ct','[data-setting="conditional_logic"]',function(){ + $(this).closest('.wmf-field-setting').nextAll('.wmf-conditional-rules').first().toggle($(this).val()==='1'); + }); +} +function initOptsEditor(index){ + var field=fields[index]; + if(['select','checkbox','radio'].indexOf(field.type)===-1) return; + var $body=$('#wmf-field-settings-body'); + var $w=$('
'); + $body.append($w); + function render(){ + var $l=$w.find('.wmf-opts-list').empty(); + $.each(field.options||[],function(i,opt){ + var $r=$('
'); + $r.find('.ol').on('input',function(){ field.options[i].label=$(this).val(); fields[index]=field; }); + $r.find('.ov').on('input',function(){ field.options[i].value=$(this).val(); fields[index]=field; }); + $r.find('.wmf-opt-del').on('click',function(){ field.options.splice(i,1); fields[index]=field; render(); }); + $l.append($r); + }); + } + render(); + $w.find('.wmf-add-opt').on('click',function(){ + if(!field.options) field.options=[]; + var n=field.options.length+1; field.options.push({label:'Option '+n,value:'option_'+n}); + fields[index]=field; render(); + }); +} +function initCondUI(index){ + var $rl=$('.wmf-conditional-rule-list'); if(!$rl.length) return; + var opts=''; + $.each(fields,function(i,f){ if(i!==index) opts+=''; }); + $rl.find('.wmf-rule-field').each(function(){ var v=$(this).val(); $(this).html(opts); if(v) $(this).val(v); }); + function sync(){ + var r=[]; + $rl.find('.wmf-rule-row').each(function(){ + r.push({field:$(this).find('.wmf-rule-field').val(),operator:$(this).find('.wmf-rule-op').val(),value:$(this).find('.wmf-rule-value').val()}); + }); + fields[index].conditional_rules=r; + } + $(document).off('click.ar').on('click.ar','.wmf-add-rule',function(){ + var $r=$('
'); + $rl.append($r); sync(); + }); + $(document).off('click.rr').on('click.rr','.wmf-rule-remove',function(){ $(this).closest('.wmf-rule-row').remove(); sync(); }); + $(document).off('change.sr input.sr').on('change.sr input.sr','.wmf-rule-field,.wmf-rule-op,.wmf-rule-value',sync); +} +$(document).on('click','.wmf-field-del',function(e){ + e.stopPropagation(); + if(!confirm(WMF.i18n.confirm_delete)) return; + var idx=parseInt($(this).closest('.wmf-canvas-field').data('index')); + fields.splice(idx,1); + if(activeIndex===idx){ activeIndex=null; deselectField(); } else if(activeIndex>idx) activeIndex--; + renderCanvas(); initSortable(); +}); +function initSettingsClose(){ + $('#wmf-field-settings-close').on('click',deselectField); + $('#wmf-delete-field-btn').on('click',function(){ + if(activeIndex===null) return; + if(!confirm(WMF.i18n.confirm_delete)) return; + fields.splice(activeIndex,1); activeIndex=null; deselectField(); renderCanvas(); initSortable(); + }); +} +function initPalette(){ + $(document).on('click','.wmf-palette-item',function(){ addField($(this).data('type')); }); + $(document).on('dragstart','.wmf-palette-item',function(e){ e.originalEvent.dataTransfer.setData('text/plain',$(this).data('type')); }); + var $cv=$('#wmf-canvas'); + $cv.on('dragover',function(e){ e.preventDefault(); $cv.addClass('drag-over'); }); + $cv.on('dragleave drop',function(){ $cv.removeClass('drag-over'); }); + $cv.on('drop',function(e){ e.preventDefault(); var t=e.originalEvent.dataTransfer.getData('text/plain'); if(t) addField(t); }); +} +function addField(type){ + var def=getDef(type); if(!def) return; + var f=$.extend(true,{},def.defaults); + f.id='field_'+Math.random().toString(36).substr(2,8); f.name=f.id; f.label=def.label; f.step=0; + fields.push(f); activeIndex=fields.length-1; + renderCanvas(); initSortable(); selectField(activeIndex); +} +function initSortable(){ + $('#wmf-field-list').sortable({ + handle:'.wmf-drag-handle',placeholder:'wmf-canvas-field ui-sortable-placeholder',tolerance:'pointer', + update:function(){ + var r=[]; + $('#wmf-field-list .wmf-canvas-field').each(function(){ r.push(fields[parseInt($(this).data('index'))]); }); + fields=r; activeIndex=null; renderCanvas(); deselectField(); + } + }); +} +$(document).on('change','.wmf-step-select',function(){ + fields[parseInt($(this).data('index'))].step=parseInt($(this).val()); + stepCount=calcSteps(); updateStepLabels(); +}); +function updateStepLabels(){ + stepCount=calcSteps(); var $sl=$('#wmf-step-labels'); if(!$sl.length) return; + while($sl.find('input').length
'); + } +} +function initMultiStepToggle(){ + $('#wmf-multistep-toggle').on('change',function(){ multiStep=$(this).is(':checked'); renderCanvas(); }); + $('#wmf-add-step-label').on('click',function(){ stepCount++; updateStepLabels(); }); +} +function initTabs(){ + $(document).on('click','.wmf-tab',function(){ + var t=$(this).data('tab'),$p=$(this).closest('.wmf-panel,.wmf-panel-body'); + $p.find('.wmf-tab').removeClass('active'); $p.find('.wmf-tab-pane').removeClass('active'); + $(this).addClass('active'); $p.find('.wmf-tab-pane[data-tab="'+t+'"]').addClass('active'); + }); +} +function initFormSubmit(){ + $('#wmf-builder-form').on('submit',function(){ $('#wmf-form-fields-json').val(JSON.stringify(fields)); }); +} +function initPreview(){ + $('#wmf-preview-btn').on('click',function(){ + var $o=$('#wmf-preview-overlay'),$c=$('#wmf-preview-content'); + $o.show(); $c.html('

Lade Vorschau...

'); + $.post(WMF.ajax_url,{action:'wmf_preview_form',nonce:WMF.nonce,form_id:$('input[name=form_id]').val()||0,fields:JSON.stringify(fields)},function(res){ + $c.html(res.success?res.data.html:'

Vorschau-Fehler.

'); + }); + }); + $('#wmf-preview-overlay').on('click',function(e){ if($(e.target).is(this)) $(this).hide(); }); + $(document).on('click','#wmf-preview-close',function(){ $('#wmf-preview-overlay').hide(); }); +} +function initShortcodeCopy(){ + $(document).on('click','.wmf-sc-copy,.wmf-sc-badge',function(){ + var t=$(this).text().trim(); + if(navigator.clipboard) navigator.clipboard.writeText(t).then(function(){ toast('Shortcode kopiert!'); }); + }); +} +function initPaletteSearch(){ + $('#wmf-palette-search').on('input',function(){ + var term=$(this).val().toLowerCase(); + $('.wmf-palette-item').each(function(){ $(this).toggleClass('wmf-hidden',term!==''&&$(this).data('label').toLowerCase().indexOf(term)===-1); }); + }); +} +function getDef(type){ return WMF.fields.find(function(f){ return f.type===type; })||null; } +function esc(s){ return String(s||'').replace(/&/g,'&').replace(//g,'>').replace(/"/g,'"'); } +function toast(msg){ + var $t=$('
'+msg+'
').appendTo('body'); + setTimeout(function(){$t.css('opacity',1);},10); + setTimeout(function(){$t.css('opacity',0);setTimeout(function(){$t.remove();},400);},2200); +} +})(jQuery); diff --git a/assets/js/frontend.js b/assets/js/frontend.js new file mode 100644 index 0000000..8432d45 --- /dev/null +++ b/assets/js/frontend.js @@ -0,0 +1,259 @@ +/* WP Multi Formular – Frontend JS v2.0 */ +(function($){ +'use strict'; + +$(document).ready(function(){ + $('.wmf-form').each(function(){ WMF_Form.init($(this)); }); +}); + +var WMF_Form = { + + init: function($form){ + this.initConditional($form); + this.initMultiStep($form); + this.initRating($form); + this.initSignature($form); + this.initRange($form); + this.initCharCount($form); + this.initLiveValidation($form); + this.initSubmit($form); + }, + + /* BEDINGTE LOGIK */ + initConditional: function($form){ + var self = this; + var $fields = $form.find('[data-condition="1"]'); + if(!$fields.length) return; + + function evalAll(){ + $fields.each(function(){ + var $field = $(this); + var action = $field.data('condition-action') || 'show'; + var match = $field.data('condition-match') || 'all'; + var rules = $field.data('condition-rules'); + if(typeof rules === 'string'){ try{ rules=JSON.parse(rules); }catch(e){ rules=[]; } } + if(!rules||!rules.length) return; + + var results = $.map(rules, function(rule){ + if(!rule.field) return true; + var $t = $form.find('[name="wmf_fields['+rule.field+']"],[name="wmf_fields['+rule.field+'][]"]'); + var val = ''; + if($t.is('[type=checkbox]')){ var c=[]; $t.filter(':checked').each(function(){ c.push($(this).val()); }); val=c; } + else if($t.is('[type=radio]')){ val=$t.filter(':checked').val()||''; } + else { val=$t.val()||''; } + switch(rule.operator){ + case '=': return Array.isArray(val)?val.indexOf(rule.value)!==-1:val===rule.value; + case '!=': return Array.isArray(val)?val.indexOf(rule.value)===-1:val!==rule.value; + case 'contains': return (Array.isArray(val)?val.join(','):val).indexOf(rule.value)!==-1; + case 'not_empty':return Array.isArray(val)?val.length>0:val.trim()!==''; + default: return true; + } + }); + + var passed = (match==='all') ? results.every(Boolean) : results.some(Boolean); + var $wrap = $field.closest('.wmf-field-wrap'); + var hide = (action==='show') ? !passed : passed; + $wrap.toggleClass('wmf-cond-hidden', hide); + $wrap.find('input,select,textarea').prop('disabled', hide); + }); + } + + $form.on('change input','input,select,textarea', evalAll); + evalAll(); + }, + + /* MULTI STEP */ + initMultiStep: function($form){ + var ms = $form.data('multi-step'); + if(ms!==1&&ms!=='1') return; + var self = this; + var $steps = $form.find('.wmf-step'); + var total = $steps.length; + var current = 0; + var $prog = $form.closest('.wmf-form-wrap').find('.wmf-progress-bar'); + + function show(idx){ + $steps.hide().eq(idx).show(); + current = idx; + $prog.find('.wmf-step-indicator').each(function(i){ + $(this).toggleClass('active',i===idx).toggleClass('done',i=max); }); + }); + } +}; + +/* VALIDIERUNG */ +var WMF_Validate = { + field: function($i,$w){ + var req=$i.prop('required'), type=$i.attr('type')||$i.prop('tagName').toLowerCase(), val=$i.val(); + var i18n=(typeof WMF_Frontend!=='undefined'&&WMF_Frontend.i18n)||{}; + + if(type==='checkbox'){ + var $boxes=$w.find('input[type=checkbox]'); + if($boxes.first().prop('required')&&!$boxes.filter(':checked').length) return i18n.required||'Pflichtfeld.'; + return true; + } + if(type==='radio'){ + var $radios=$w.find('input[type=radio]'); + if($radios.first().prop('required')&&!$radios.filter(':checked').length) return i18n.required||'Pflichtfeld.'; + return true; + } + if($i.is('select[multiple]')){ + if(req&&(!val||!val.length)) return i18n.required||'Pflichtfeld.'; + return true; + } + if(req&&(!val||val.trim()==='')) return i18n.required||'Pflichtfeld.'; + if(!val||val.trim()==='') return true; + if(type==='email'&&!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val)) return i18n.email||'Ungültige E-Mail.'; + if(type==='url'){ try{ new URL(val); }catch(e){ return i18n.url||'Ungültige URL.'; } } + return true; + } +}; + +/* SHORTCODE KOPIEREN */ +$(document).on('click','.wmf-sc-copy',function(){ + var t=$(this).text().trim(); + if(navigator.clipboard) navigator.clipboard.writeText(t).then(function(){ WMF_Form.toast && WMF_Form.toast('Shortcode kopiert!'); }); +}); +WMF_Form.toast = function(msg){ + var $t=$('
'+msg+'
').appendTo('body'); + setTimeout(function(){$t.addClass('show');},10); + setTimeout(function(){$t.removeClass('show');setTimeout(function(){$t.remove();},400);},2500); +}; + +})(jQuery);