')
+ .html(`
${msg}`);
+ $('#toastContainer').append($t);
+ setTimeout(() => $t.fadeOut(400, () => $t.remove()), 4000);
+ }
+
+ function setApiStatus(status, label) {
+ const $el = $('#apiStatus');
+ $el.attr('class', 'api-status api-status--' + status);
+ $el.html(`
${label}`);
+ }
+
+ function setStep(n) {
+ state.step = n;
+ $('.step-pip').each(function () {
+ const s = parseInt($(this).data('step'));
+ $(this).removeClass('active done');
+ if (s < n) $(this).addClass('done').html('
');
+ else if (s === n) $(this).addClass('active').text(s);
+ else $(this).text(s);
+ });
+ }
+
+ function updateSummary() {
+ $('#metaType').text($('#garmentType').find(':selected').text() || 'β');
+ $('#metaAsset').text(state.activeAssetName || 'β');
+ $('#metaBlending').text($('#artBlending').find(':selected').text() || 'β');
+ const scale = $('#artScale').val() + '%';
+ const rot = $('#artRotation').val() + 'Β°';
+ $('#metaScaleRot').text(`${scale} / ${rot}`);
+ }
+
+ function showViewportLoading(msg = 'Processing...') {
+ $('#loadingMsg').text(msg);
+ $('#viewportLoading').show();
+ $('#viewportEmpty, #viewportContent').hide();
+ setApiStatus('working', msg);
+ // Animate progress bar
+ let pct = 5;
+ const timer = setInterval(() => {
+ pct = Math.min(pct + Math.random() * 12, 88);
+ $('#loadingBar').css('width', pct + '%');
+ }, 600);
+ return timer;
+ }
+
+ function hideViewportLoading(timer) {
+ clearInterval(timer);
+ $('#loadingBar').css('width', '100%');
+ setTimeout(() => {
+ $('#viewportLoading').hide();
+ $('#loadingBar').css('width', '0%');
+ }, 400);
+ setApiStatus('idle', 'Idle');
+ }
+
+ function loadModelIntoCanvas(url) {
+ state.modelUrl = url;
+ $('#layerModel').attr('src', url).show();
+ $('#layerArtwork').hide();
+ $('#viewportEmpty').hide();
+ $('#viewportContent').show();
+ // Enable apply + export buttons
+ $('#btnApplyArtwork').prop('disabled', !state.activeAssetUrl);
+ // Update export thumb
+ updateExportThumb(url);
+ setStep(3);
+ toast('Model ready in canvas', 'success');
+ setApiStatus('done', 'Done');
+ }
+
+ function updateExportThumb(url) {
+ const $thumb = $('#exportThumb');
+ if (url) {
+ $thumb.html(`
`);
+ }
+ }
+
+ /* ============================================================
+ TABS β Generic handler
+ ============================================================ */
+ function initTabs($container, activeClass = 'active--purple') {
+ $container.on('click', '.tab-item', function () {
+ const tab = $(this).data('tab');
+ $container.find('.tab-item').removeClass('active--purple active--orange');
+ $(this).addClass(activeClass);
+ // Show pane
+ const $panes = $container.closest('[data-tabs-scope]').find('.tab-pane');
+ $panes.removeClass('active').hide();
+ $('#' + tab).addClass('active').show();
+ });
+ // Init: show first active pane
+ $container.find('.tab-pane.active').show();
+ }
+
+ // Asset tabs
+ initTabs($('#assetTabs'));
+ // Model tabs
+ initTabs($('#modelTabs'));
+
+ // Also handle tab panes in the left panel (they share same scope)
+ $('.tab-pane').not('.active').hide();
+
+ /* ============================================================
+ STEP 1 β UPLOAD
+ ============================================================ */
+ const $zone = $('#uploadZone');
+ const $input = $('#fileInput');
+
+ $('#btnBrowse').on('click', () => $input.trigger('click'));
+ $zone.on('click', function (e) {
+ if ($(e.target).is('button') || $(e.target).closest('button').length) return;
+ $input.trigger('click');
+ });
+
+ // Drag & drop visual
+ $zone.on('dragover dragenter', e => { e.preventDefault(); $zone.addClass('drag-over'); })
+ .on('dragleave drop', () => $zone.removeClass('drag-over'));
+
+ $zone.on('drop', function (e) {
+ e.preventDefault();
+ const files = e.originalEvent.dataTransfer.files;
+ if (files.length) handleFiles(files);
+ });
+
+ $input.on('change', function () {
+ if (this.files.length) handleFiles(this.files);
+ });
+
+ function handleFiles(files) {
+ Array.from(files).forEach(file => uploadFile(file));
+ }
+
+ function uploadFile(file) {
+ const ext = file.name.split('.').pop().toUpperCase();
+ const allowed = ['PNG', 'JPG', 'JPEG', 'SVG'];
+ if (!allowed.includes(ext)) {
+ toast('Unsupported format: ' + ext, 'danger');
+ return;
+ }
+ if (file.size > 10 * 1024 * 1024) {
+ toast('File too large (max 10MB)', 'danger');
+ return;
+ }
+
+ const fd = new FormData();
+ fd.append('file', file);
+
+ // Optimistic: add placeholder to list
+ const $item = addAssetItem(file.name, ext, null, true);
+
+ $.ajax({
+ url: API.upload,
+ type: 'POST',
+ data: fd,
+ processData: false,
+ contentType: false,
+ success: function (r) {
+ if (r.success) {
+ $item.data('url', r.url).removeClass('uploading');
+ $item.find('.file-badge').text(ext);
+ toast(file.name + ' uploaded', 'success');
+ setStep(Math.max(state.step, 1));
+ } else {
+ $item.remove();
+ toast(r.error || 'Upload failed', 'danger');
+ }
+ },
+ error: function () {
+ if (D2C.debug) {
+ // Mock for dev: use local object URL
+ const mockUrl = URL.createObjectURL(file);
+ $item.data('url', mockUrl).removeClass('uploading');
+ toast('[DEV] ' + file.name + ' mocked', 'warning');
+ } else {
+ $item.remove();
+ toast('Upload error', 'danger');
+ }
+ },
+ });
+ }
+
+ function addAssetItem(name, ext, url, uploading = false) {
+ $('#emptyHint').hide();
+ const extClass = ext.toLowerCase() === 'jpg' || ext.toLowerCase() === 'jpeg' ? 'jpg' : ext.toLowerCase();
+ const $item = $(`
+
+
+
+ ${name}
+
+
${uploading ? 'β¦' : ext}
+
+ `);
+ $('#assetList').append($item);
+ return $item;
+ }
+
+ // Select active asset
+ $('#assetList').on('click', '.asset-item', function () {
+ if ($(this).hasClass('uploading')) return;
+ $('.asset-item').removeClass('asset-item--active');
+ $(this).addClass('asset-item--active');
+ state.activeAssetUrl = $(this).data('url');
+ state.activeAssetName = $(this).data('name');
+ // Enable Apply button if model exists
+ $('#btnApplyArtwork').prop('disabled', !state.modelUrl);
+ updateSummary();
+ toast('Asset selected: ' + state.activeAssetName, 'info');
+ });
+
+ /* ============================================================
+ STEP 2 β GENERATE MODEL
+ ============================================================ */
+ $('#btnGenerateModel').on('click', function () {
+ const prompt = $('#modelPrompt').val().trim();
+ const pose = $('#modelPose').val();
+ const type = $('#garmentType').val();
+ const fabric = $('#garmentFabric').val();
+ const color = $('#garmentColor').val();
+ const mode = $('#modelTabs .tab-item.active--purple').data('tab');
+ const predefined = state.selectedModel;
+
+ if (mode === 'tabPredefined' && !predefined) {
+ toast('Select a predefined model first', 'warning');
+ return;
+ }
+
+ const timer = showViewportLoading('Generating model...');
+ $(this).addClass('is-loading');
+
+ $.ajax({
+ url: API.generate,
+ type: 'POST',
+ dataType: 'json',
+ data: {
+ action: 'model',
+ prompt: prompt,
+ pose: pose,
+ type: type,
+ fabric: fabric,
+ color: color,
+ predefined: predefined || '',
+ },
+ success: function (r) {
+ hideViewportLoading(timer);
+ $('#btnGenerateModel').removeClass('is-loading');
+ if (r.success) {
+ loadModelIntoCanvas(r.url);
+ updateSummary();
+ } else {
+ toast(r.error || 'Generation failed', 'danger');
+ setApiStatus('error', 'Error');
+ }
+ },
+ error: function () {
+ hideViewportLoading(timer);
+ $('#btnGenerateModel').removeClass('is-loading');
+ if (D2C.debug) {
+ // Mock: use a placeholder for dev
+ const mockUrl = 'https://placehold.co/600x800/1B1B1B/6F2CFF?text=Model+Mock&font=inter';
+ loadModelIntoCanvas(mockUrl);
+ toast('[DEV] Model mocked', 'warning');
+ } else {
+ toast('API error. Check n8n connection.', 'danger');
+ setApiStatus('error', 'Error');
+ }
+ },
+ });
+ });
+
+ // Predefined model selection
+ $(document).on('click', '.predefined-item', function () {
+ $('.predefined-item').removeClass('selected');
+ $(this).addClass('selected');
+ state.selectedModel = $(this).data('model');
+
+ // Auto-load predefined model (local static image or placeholder)
+ const timer = showViewportLoading('Loading predefined model...');
+ setTimeout(() => {
+ hideViewportLoading(timer);
+ const mockUrl = `https://placehold.co/600x800/1B1B1B/6F2CFF?text=${encodeURIComponent($(this).find('span').text())}&font=inter`;
+ loadModelIntoCanvas(mockUrl);
+ updateSummary();
+ }, 800);
+ });
+
+ /* ============================================================
+ INSPECTOR β Slider live feedback
+ ============================================================ */
+ $('#artScale').on('input', function () {
+ $('#scaleVal').text($(this).val() + '%');
+ updateArtworkOverlay();
+ });
+
+ $('#artRotation').on('input', function () {
+ $('#rotVal').text($(this).val() + 'Β°');
+ updateArtworkOverlay();
+ });
+
+ $('#artOpacity').on('input', function () {
+ $('#opaVal').text($(this).val() + '%');
+ $('#layerArtwork').css('opacity', $(this).val() / 100);
+ });
+
+ $('#artBlending').on('change', updateSummary);
+ $('#garmentType, #garmentFabric').on('change', updateSummary);
+
+ function updateArtworkOverlay() {
+ const scale = parseInt($('#artScale').val()) / 100;
+ const rot = parseInt($('#artRotation').val());
+ const opa = parseInt($('#artOpacity').val()) / 100;
+ $('#layerArtwork').css({
+ transform: `translate(-50%, -50%) scale(${scale}) rotate(${rot}deg)`,
+ opacity: opa,
+ });
+ updateSummary();
+ }
+
+ /* ============================================================
+ STEP 3 β APPLY ARTWORK
+ ============================================================ */
+ $('#btnApplyArtwork').on('click', function () {
+ if (!state.modelUrl || !state.activeAssetUrl) {
+ toast('Generate a model and select an asset first', 'warning');
+ return;
+ }
+
+ // Save to history for undo
+ if (state.resultUrl) state.history.push(state.resultUrl);
+ $('#btnUndoApply').prop('disabled', false);
+
+ const timer = showViewportLoading('Applying artwork...');
+ $(this).addClass('is-loading');
+
+ $.ajax({
+ url: API.generate,
+ type: 'POST',
+ dataType: 'json',
+ data: {
+ action: 'apply',
+ model_url: state.modelUrl,
+ asset_url: state.activeAssetUrl,
+ scale: $('#artScale').val(),
+ rotation: $('#artRotation').val(),
+ opacity: $('#artOpacity').val(),
+ blending: $('#artBlending').val(),
+ prompt: $('#applyPromptInput').val().trim(),
+ },
+ success: function (r) {
+ hideViewportLoading(timer);
+ $('#btnApplyArtwork').removeClass('is-loading');
+ if (r.success) {
+ state.resultUrl = r.url;
+ $('#layerModel').attr('src', r.url);
+ $('#layerArtwork').hide();
+ updateExportThumb(r.url);
+ $('#btnExport').prop('disabled', false);
+ setStep(4);
+ toast('Artwork applied successfully', 'success');
+ setApiStatus('done', 'Done');
+ updateSummary();
+ } else {
+ toast(r.error || 'Apply failed', 'danger');
+ setApiStatus('error', 'Error');
+ }
+ },
+ error: function () {
+ hideViewportLoading(timer);
+ $('#btnApplyArtwork').removeClass('is-loading');
+ if (D2C.debug) {
+ // Mock
+ const mockUrl = 'https://placehold.co/600x800/171717/FF6A00?text=Applied+Mock&font=inter';
+ state.resultUrl = mockUrl;
+ $('#layerModel').attr('src', mockUrl);
+ updateExportThumb(mockUrl);
+ $('#btnExport').prop('disabled', false);
+ setStep(4);
+ toast('[DEV] Apply mocked', 'warning');
+ } else {
+ toast('API error. Check n8n connection.', 'danger');
+ setApiStatus('error', 'Error');
+ }
+ },
+ });
+ });
+
+ // Undo last apply
+ $('#btnUndoApply').on('click', function () {
+ if (!state.history.length) return;
+ const prev = state.history.pop();
+ state.resultUrl = prev;
+ $('#layerModel').attr('src', prev);
+ updateExportThumb(prev);
+ if (!state.history.length) $(this).prop('disabled', true);
+ toast('Undone', 'info');
+ });
+
+ /* ============================================================
+ STEP 4 β EXPORT
+ ============================================================ */
+ $('#btnExport').on('click', function () {
+ if (!state.resultUrl && !state.modelUrl) {
+ toast('Nothing to export yet', 'warning');
+ return;
+ }
+
+ const resolution = $('input[name="exportRes"]:checked').val();
+ const format = $('input[name="exportFmt"]:checked').val();
+ const sourceUrl = state.resultUrl || state.modelUrl;
+
+ $(this).addClass('is-loading');
+ setApiStatus('working', 'Exporting...');
+ $('#exportStatus').show().text('Preparing export...');
+
+ $.ajax({
+ url: API.generate,
+ type: 'POST',
+ dataType: 'json',
+ data: {
+ action: 'export',
+ source_url: sourceUrl,
+ resolution: resolution,
+ format: format,
+ },
+ success: function (r) {
+ $('#btnExport').removeClass('is-loading');
+ if (r.success) {
+ // Trigger download
+ const a = document.createElement('a');
+ a.href = r.url;
+ a.download = r.filename || 'design2clothes_export.' + format;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ $('#exportStatus').text('β Exported: ' + (r.filename || 'file'));
+ setApiStatus('done', 'Exported');
+ toast('Export ready!', 'success');
+ } else {
+ $('#exportStatus').text('Error: ' + (r.error || 'Export failed'));
+ setApiStatus('error', 'Error');
+ toast(r.error || 'Export failed', 'danger');
+ }
+ },
+ error: function () {
+ $('#btnExport').removeClass('is-loading');
+ if (D2C.debug) {
+ // Mock: just open the image in new tab
+ window.open(state.resultUrl || state.modelUrl, '_blank');
+ $('#exportStatus').text('[DEV] Opened in new tab (mock)');
+ setApiStatus('done', 'Mock Export');
+ toast('[DEV] Export mocked', 'warning');
+ } else {
+ setApiStatus('error', 'Error');
+ $('#exportStatus').text('Export API unavailable');
+ toast('Export API error', 'danger');
+ }
+ },
+ });
+ });
+
+ /* ============================================================
+ MODALS
+ ============================================================ */
+ function openModal(id) { $('#' + id).addClass('active'); }
+ function closeModal(id) { $('#' + id).removeClass('active'); }
+
+ $('#btnNewProject').on('click', () => openModal('modalNewProject'));
+ $('#btnAssetLib').on('click', () => openModal('modalProjectsList'));
+ $('#btnProjectsList').on('click', () => {
+ loadProjects();
+ openModal('modalProjectsList');
+ });
+ $('#btnNewFromList').on('click', () => {
+ closeModal('modalProjectsList');
+ openModal('modalNewProject');
+ });
+
+ // Close buttons
+ $(document).on('click', '[data-close-modal]', function () {
+ closeModal($(this).data('close-modal'));
+ });
+
+ // Close on overlay click
+ $(document).on('click', '.modal-overlay', function (e) {
+ if ($(e.target).is('.modal-overlay')) closeModal($(this).attr('id'));
+ });
+
+ // Create project
+ $('#btnCreateProject').on('click', function () {
+ const title = $('#newProjectTitle').val().trim();
+ if (!title) { toast('Enter a project name', 'warning'); return; }
+ $('#projectTitle').text(title);
+ $('#projectDesc').text($('#newProjectDesc').val().trim() || '');
+ closeModal('modalNewProject');
+ toast('Project "' + title + '" created', 'success');
+ // Reset state
+ state.activeAssetUrl = null;
+ state.modelUrl = null;
+ state.resultUrl = null;
+ state.history = [];
+ $('#assetList').empty();
+ $('#emptyHint').show();
+ $('#viewportEmpty').show();
+ $('#viewportContent').hide();
+ $('#layerModel, #layerArtwork').attr('src', '');
+ $('#btnApplyArtwork, #btnExport').prop('disabled', true);
+ $('#exportThumb').html('
Result preview');
+ setStep(1);
+ updateSummary();
+ });
+
+ // Edit title inline
+ $('#btnEditTitle').on('click', function () {
+ const $title = $('#projectTitle');
+ const current = $title.text();
+ const $input = $('
')
+ .val(current);
+ $title.replaceWith($input);
+ $input.focus().select();
+ $input.on('blur keydown', function (e) {
+ if (e.type === 'blur' || e.key === 'Enter') {
+ const v = $(this).val().trim() || current;
+ $(this).replaceWith(`
${v}
`);
+ toast('Project renamed', 'info');
+ }
+ if (e.key === 'Escape') {
+ $(this).replaceWith(`
${current}
`);
+ }
+ });
+ });
+
+ /* βββ Projects List βββ */
+ function loadProjects() {
+ $.getJSON(API.projects)
+ .done(function (r) {
+ const $c = $('#projectsListContent').empty();
+ if (!r.projects || !r.projects.length) {
+ $c.html('
No projects yet
');
+ return;
+ }
+ r.projects.forEach(p => {
+ $c.append(`
+
+
+
${p.title}
+
${p.created || ''}
+
+
+
+ `);
+ });
+ })
+ .fail(function () {
+ if (D2C.debug) {
+ $('#projectsListContent').html('
[DEV] API not yet connected
');
+ }
+ });
+ }
+
+ /* ============================================================
+ CANVAS ZOOM
+ ============================================================ */
+ let zoom = 1;
+ const $layers = $('#canvasLayers');
+
+ $('#btnZoomIn').on('click', () => {
+ zoom = Math.min(zoom + 0.15, 3);
+ $layers.css('transform', `scale(${zoom})`);
+ });
+ $('#btnZoomOut').on('click', () => {
+ zoom = Math.max(zoom - 0.15, 0.3);
+ $layers.css('transform', `scale(${zoom})`);
+ });
+ $('#btnZoomReset').on('click', () => {
+ zoom = 1;
+ $layers.css('transform', 'scale(1)');
+ });
+
+ /* ============================================================
+ INIT
+ ============================================================ */
+ setStep(1);
+ updateSummary();
+
+ if (D2C.debug) {
+ toast('Design2Clothes ready
[DEV]', 'info');
+ }
+});
diff --git a/media/uploads/projects.json b/media/uploads/projects.json
new file mode 100644
index 0000000..5e5acf6
--- /dev/null
+++ b/media/uploads/projects.json
@@ -0,0 +1,12 @@
+[
+ {
+ "id": "p_1",
+ "title": "ThreadVision FW24 Capsule",
+ "created": "2026-03-09 18:16"
+ },
+ {
+ "id": "p_2",
+ "title": "Neon Streetwear Concept",
+ "created": "2026-03-10 18:16"
+ }
+]
\ No newline at end of file
diff --git a/ui-kit.html b/ui-kit.html
new file mode 100644
index 0000000..016f738
--- /dev/null
+++ b/ui-kit.html
@@ -0,0 +1,1063 @@
+
+
+
+
+
+
Design2Clothes β UI Kit
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Design2Clothes β UI Kit
+
Componentes visuales generados a partir del diseΓ±o de referencia design2clothes.pen
+
+
+
+ 1 β Design Tokens / Colores
+
+
+
+
+
+
+
+ 2 β Typography (Inter)
+
+
+
+
Brand / Logo β 34px 700
+
Design2Clothes
+
+
+
Project Title β 30px 700
+
ThreadVision SS26 Capsule
+
+
+
Section Heading β 24px 600
+
Design Canvas
+
+
+
Panel Title β 20px 600
+
Assets
+
+
+
CTA Button β 16px 700
+
New Project
+
+
+
Body / Label β 14px 500
+
AI-assisted fashion mockup workflow for mapping 2D graphics onto 3D garment avatars.
+
+
+
Sub-Panel Head β 14px 600
+
Model Controls
+
+
+
Small / Tag β 12px 600
+
Asset Library Uploads Patterns Graphics
+
+
+
Micro / Badge β 11px 500β600
+
Scale 85% Β· Rotation 12Β° Β· Opacity 82% Β· 4K PNG βΎ
+
+
+
+
+
+
+
+
+
+
+
+
+ 4 β Tabs
+
+
+
Purple active (Assets)
+
+
+
+
+
+
+
+
Purple active (Model)
+
+
+
+
+
+
+
Orange active
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 6 β Selects / Dropdowns nativos
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 7 β Textareas
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 8 β Checkboxes & Radios
+
+
+
+
+
+
+
+ 9 β Toggle Switches
+
+
+
+
+
+
+
+ 10 β Range Sliders
+
+
+
+
+
+
+
+ 11 β File Upload / Drop Zone
+
+
+
Drop Zone (estilo diseΓ±o)
+
+
+
+
Drop your designs in
.png, .jpg, .svg here
+
+
+
+
+
Drop Zone β Estado drag over
+
+
+
Suelta el archivo aquΓ
+
+
+
+
+
+
+
+
+ 12 β Asset List Items
+
+
+
+
+ Logo_Brandmark.svg
+
+
SVG
+
+
+
+
+ Tiger_Print.png
+
+
PNG
+
+
+
+
+ Floral_Allover.jpg
+
+
JPG
+
+
+
+
+ Geometric_Pattern.svg
+
+
SVG
+
+
+
+
+
+
+
+ 13 β Custom Dropdown (ResoluciΓ³n Export)
+
+
+
+ ResoluciΓ³n
+
+ 4K PNG βΎ
+
+
+
+
+
+
+
+
+
+
+ 14 β Panels / Cards
+
+
+
Panel estΓ‘ndar
+
+
Quick Access
+
+
+
+
+
+
Sub-panel (Model Controls)
+
+
Model Controls
+
+
+
+
+
+
+
+
+
+
Project Info Card
+
+
Current Project
+
+
+ AI-assisted fashion mockup workflow for mapping 2D graphics onto 3D garment avatars.
+
+
+
+
+
+
+
+
+
+ 15 β Badges & Tags
+
+ Activo
+ Generando
+ Exportado
+ Error
+ Draft
+ SVG
+ PNG
+ JPG
+
+
+
+
+
+
+
+ 16 β Alerts
+
+
+
+ El modelo se estΓ‘ generando. Esto puede tardar unos segundos.
+
+
+
+ DiseΓ±o exportado correctamente en resoluciΓ³n 4K.
+
+
+
+ La API de Gemini ha alcanzado el lΓmite de solicitudes. Reintenta en un momento.
+
+
+
+ Error al conectar con el workflow de n8n. Revisa el webhook.
+
+
+
+
+
+
+
+ 17 β Modal
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 18 β Loading / Progress
+
+
+
+
+ Generando modelo...
+ 65%
+
+
+
+
+
+ Aplicando artwork...
+ 92%
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 20 β App Layout Preview (mini)
+
+
+
+
Design2Clothes
+
+
+
+
+
+
Assets
+
+
+
+
+
+ Logo.svg
+ SVG
+
+
+
+
+
AI Texture-Mapped Preview
+
+
+
Export
+
High-res render for portfolio.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+