add menu icon

change to main.js fo auto-start container
add new parameters , fixed secondaryColor
2025-09-15 11:21:30 +00:00 · 2025-09-15 11:21:14 +00:00 · 2025-09-04 12:39:03 +00:00
9 changed files with 595 additions and 89 deletions
--- a/main.js
+++ b/main.js
@ -33,21 +33,28 @@ websocket.initialize(server);

 // Static images mapping
 const staticImages = {
+    mulberry: 'am_mulberry_logo_wide_color.png' , 
    home: 'payment.png',
    scan: 'Scanner.png',
    printer: 'Check.png',
    settings: 'Settings.png',
    pinpad: 'pinpad.png',
    cashier: 'cashier.png', 
+    menu: 'Menu.png', 
 };

 // Topics list
 const topics = [
+
+    { deviceName: 'M50F_Second', deviceID: '01534090202502210057' },
    { deviceName: 'M50F_Igor', deviceID: '01534090202502210142' },
    { deviceName: 'M60_Igor', deviceID: '01620013202312220735' }, 
    { deviceName: 'M70_Igor', deviceID: '01723060202412010280' }, 
    { deviceName: 'M30_Igor', deviceID: '01364100202503060196' },
 
+{ deviceName: 'M80F_Ahmed', deviceID: '01804042025072100015' },
+ { deviceName: 'M80K_Ahmed', deviceID: '78040132025082600001' },
+  { deviceName: 'M50F_Ahmed', deviceID: '01534090202502210065' },
    { deviceName: 'M50F_Ahmed', deviceID: '01534090202502210065' },
    { deviceName: 'M60_Ahmed', deviceID: '01620013202312221500' },
    { deviceName: 'M30_Ahmed', deviceID: '01364100202503060115' },
@ -98,10 +105,17 @@ const defaultConfig = {
        type: "base64",
        value: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaQAAAWY"
    },
+    printLogo: {
+        type: "base64",
+        value: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaQAAAWY"
+    },
+    printURL: "www.mulberrypos.ru",
    footerLogoVisibility: "true",
+    bankMode: false,
    footerGreetingText: "Привет Игорь! ))",
    footerText: "Mulberry, OOO Demo ©2025",
-    primaryColor: "#002233"
+    primaryColor: "#002233",
+    secondaryColor: "#67777eff",
 };

 // Routes
--- a/public/css/receipt.css
+++ b/public/css/receipt.css
@ -4,6 +4,7 @@ body {
    display: flex;
    justify-content: center;
    padding: 20px;
+    font-size: large;
    margin: 0;
 }

@ -14,27 +15,30 @@ body {
    background: white;
    padding: 25px;
    /* box-shadow: 0 0 10px rgba(0,0,0,0.1); */
-    border-top: 5px solid #00b8d7;
+    /* border-top: 5px solid #00b8d7; */
 }
+
 .header {
    text-align: center;
    margin-bottom: 20px;
 }
+
 .header h1 {
    color: #f03024;
    font-size: 24px;
    margin: 0;
 }
+
 .header p {
    margin: 5px 0;
    color: #666;
 }

-.datex-pay-logo{
+.datex-pay-logo {
    width: 250px;
 }

-.mulberry-logo{
+.mulberry-logo {
    width: 100px;
 }

@ -42,19 +46,23 @@ body {
    border-top: 1px dashed #ccc;
    margin: 15px 0;
 }
+
 .receipt-details {
    margin-bottom: 20px;
    font-size: smaller;
 }
+
 .receipt-row {
    display: flex;
    justify-content: space-between;
    margin: 8px 0;
 }
+
 .label {
    font-weight: bold;
    color: #333;
 }
+
 .footer {
    text-align: center;
    font-size: 12px;
@ -69,41 +77,46 @@ body {
    gap: 10px;
    margin-top: 20px;
    justify-content: center;
-    }
+}

-    #payButton, #cancelButton {
+#payButton,
+#cancelButton {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
-    }
+}

-    #payButton {
-        background-color: #4CAF50; /* Green */
+#payButton {
+    background-color: #553285;
    color: white;
-    }
     
-    #payButton:hover {
-        background-color: #45a049;
-    }
+}

-    #cancelButton {
-        background-color: #f44336; /* Red */
+#payButton:hover {
+    background-color: #cdbbe7;
+}
+
+#cancelButton {
    color: white;
-    }
+    border-style: solid;
+    background-color: #f3f3f3;
+    color: #553285;
+}

-    #cancelButton:hover {
-        background-color: #d32f2f;
-    }
+#cancelButton:hover {
+    background-color: #f7bef2;
+}


-    .loading {
+.loading {
    position: absolute;
    top: 150px;

-            display: none; /* Hide loading circle by default */
+    display: none;
+    /* Hide loading circle by default */
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
@ -111,9 +124,61 @@ body {
    height: 30px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
    }

-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
+    100% {
+        transform: rotate(360deg);
    }
+}
+
+
+div#buttons {
+    width: 300px;
+    background: white;
+    padding: 25px;
+}
+
+/* .bearHolder{
+        place-self: center;
+        justify-self: center;
+}
+.bear-image{
+height: 292px;
+} */
+
+.bearHolder {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    /* Optional: set a specific height if needed */
+    /* height: 300px; */
+
+   
+    overflow: hidden; /* Crop anything outside the container */
+    height: 200px; /* Set your desired height */
+}
+
+.bear-image {
+    max-width: 64%;
+    max-height: 74%;
+    height: auto;
+    width: auto;
+    display: block; 
+    transform: scale(1.8);
+    /* Removes extra space below image */
+}
+
+/* Fallback for older browsers (optional) */
+.bearHolder {
+    text-align: center; /* Fallback for very old browsers */
+}
+
+.bear-image {
+    margin: 0 auto; /* Fallback for very old browsers */
+}
--- a/public/css/style.css
+++ b/public/css/style.css
@ -283,6 +283,27 @@ textarea {
 }


+.receipt_container {
+    text-align: center;
+    margin-top: 29px;
+    width: 65%;
+    padding: 20px;
+    background: #f5f5f5;
+    justify-items: center;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+}
+
+#printLogoPreview {
+    width: 144px; 
+}
+
+.printer_container {
+    display: flex ;
+    justify-content: space-around;
+}
+



--- a/public/images/Mishka_like_0109.gif
+++ b/public/images/Mishka_like_0109.gif
--- a/public/js/presets.js
+++ b/public/js/presets.js
--- a/public/js/script.js
+++ b/public/js/script.js
@ -11,6 +11,7 @@ const imageStore = {
        settings: 'Settings.png',
        pinpad: 'pinpad.png',
        cashier: 'cashier.png', 
+        menu: 'Menu.png', 
        mulberry: 'am_mulberry_logo_wide_color.png',
        overtec: 'am_overtec_logo_wide_color.png',
        datexpay: 'am_datexpay_logo_wide_color.png',
@ -50,7 +51,7 @@ document.addEventListener('DOMContentLoaded', function () {
        console.log('[DEBUG] Initializing form event listeners');

        // Handle logo type toggling
-        document.querySelectorAll('[name="mainLogoType"], [name="footerLogoType"]').forEach(select => {
+        document.querySelectorAll('[name="mainLogoType"], [name="footerLogoType"], [name="printLogoType"] ').forEach(select => {
            select.addEventListener('change', function () {
                const type = this.value;
                console.log(`[DEBUG] Logo type changed to ${type}`);
@ -75,6 +76,7 @@ document.addEventListener('DOMContentLoaded', function () {
       


+
        // Handle image uploads (updated for SVG support)
        document.querySelectorAll('.upload-input').forEach(input => {
            input.addEventListener('change', async function () {
@ -204,7 +206,7 @@ document.addEventListener('DOMContentLoaded', function () {

                } catch (error) {
                    console.error('[ERROR] Upload failed:', error);
-                    alert('Error uploading image. Please try again.');
+                    
                }
            });
        });
@ -224,11 +226,6 @@ document.addEventListener('DOMContentLoaded', function () {
            const config = buildConfigObject(formData);
            console.log('[DEBUG] Final configuration:', config);

-            // Here you would typically send the config to your server
-            // fetch('/save-config', { method: 'POST', body: JSON.stringify(config) })
-            // .then(response => response.json())
-            // .then(data => console.log('Success:', data))
-            // .catch(error => console.error('Error:', error));
            fetch('/sendToDevice', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
@ -259,10 +256,14 @@ document.addEventListener('DOMContentLoaded', function () {
            navItems: [],
            mainLogo: getLogoConfig(formData, 'mainLogo'),
            footerLogo: getLogoConfig(formData, 'footerLogo'),
+            printLogo: getLogoConfig(formData, 'printLogo'),
+            printURL: formData.get('printURL'),
            footerLogoVisibility: formData.get('footerLogoVisibility') === 'on',
+            bankMode: formData.get('bankMode') === 'on',
            footerGreetingText: formData.get('footerGreetingText'),
            footerText: formData.get('footerText'),
-            primaryColor: formData.get('primaryColor')
+            primaryColor: formData.get('primaryColor'),
+            secondaryColor: formData.get('secondaryColor'),
        };

        // Process navigation items
@ -289,7 +290,6 @@ document.addEventListener('DOMContentLoaded', function () {
            value = imageStore.getBase64(storageKey);
        }

-        // console.log(`[DEBUG] ${prefix} config - type: ${type}, value: ${value ? 'exists' : 'null'}`);
        return {
            type,
            value,
@ -453,6 +453,19 @@ document.addEventListener('DOMContentLoaded', function () {
            }
        }

+        // Update footer logo preview (similar to main logo)
+        const printLogoType = formData.get('printLogoType');
+        if (printLogoType === 'resource') {
+            const logoValue = formData.get('printLogoResource');
+            document.getElementById('printLogoPreview').src = imageStore.getStaticImage(logoValue);
+        } else if (printLogoType === 'base64') {
+            const storageKey = formData.get('printLogoValue');
+            const base64Data = imageStore.getBase64(storageKey);
+            if (base64Data) {
+                document.getElementById('printLogoPreview').src = base64Data;
+            }
+        }
+
        // NEW: Update footer visibility
        const footerLogoVisibility = formData.get('footerLogoVisibility') === 'on';
        const footerLogoElement = document.getElementById('footerLogoPreview');
@ -467,6 +480,13 @@ document.addEventListener('DOMContentLoaded', function () {
            footerGreetingElement.textContent = footerGreetingText;
        }

+        // NEW: Update footer greeting text
+        const printURL = formData.get('printURL') || 'www.mulberrypos.ru';
+        const printURLElement = document.getElementById('printURLPreview');
+        if (printURLElement) {
+            printURLElement.textContent = printURL;
+        }
+
        // NEW: Update footer text
        const footerText = formData.get('footerText') || 'Mulberry ©2025';
        const footerTextElement = document.getElementById('footerText');
@ -476,6 +496,7 @@ document.addEventListener('DOMContentLoaded', function () {

        // Update primary color preview
        const primaryColor = formData.get('primaryColor') || '#002233';
+        const secondaryColor = formData.get('secondaryColor') ||'#85969fff' ;
        const previewButtons = document.querySelectorAll('.preview-button');
        previewButtons.forEach(button => {
            button.style.backgroundColor = primaryColor;
@ -511,6 +532,10 @@ document.addEventListener('DOMContentLoaded', function () {
            footerLogo: {
                type: config.footerLogo.type,
                value: config.footerLogo.value ? '[...base64 data...]' : null
+            },
+            printLogo: {
+                type: config.printLogo.type,
+                value: config.printLogo.value ? '[...base64 data...]' : null
            }
        };

@ -539,9 +564,15 @@ document.addEventListener('DOMContentLoaded', function () {
    }


+    
+    
+
+
    // Initialize the application
    initializeForm();

    updateConfigLog();
    updatePreview();
 });
+
+ 
--- a/translations.js
+++ b/translations.js
@ -22,14 +22,14 @@ const translations = {
    receiptNumber: "Квитанция №",
    paymentType: "Тип оплаты:",
    testPayment: "Тестовый платеж:",
-    paymentAddress: "АДРЕС ПЛАТЕЖА:",
-    issueDate: "ДАТА ВЫПУСКА:",
+    paymentAddress: "Адрес:",
+    issueDate: "Дата:",
    total: "ИТОГО:",
    thankYou: "Спасибо за использование Mulberry",
    transactionId: "ID транзакции:",
    status: "Статус:",
-    receiptRejected: "Квитанция отклонена",
-    paymentDate: "ДАТА ПЛАТЕЖА:",
+    receiptRejected: "Операция отклонена",
+    paymentDate: "Дата платежа:",
    amountToPay: "Сумма к оплате:",
    cancel: "Отмена",
    pay: "Оплатить",
--- a/views/index.ejs
+++ b/views/index.ejs
@ -19,9 +19,26 @@

    <div class="container">

+
        <!-- Preview Section -->
        <div class="preview">

+
+            <div class="form-group">
+    <label>Configuration Presets</label>
+    <select id="presetSelector">
+        <option value="">-- Select a preset --</option>
+        <option value="default">Default Configuration</option>
+        <option value="bank">Bank Mode</option>
+        <option value="minimal">Minimal Interface</option>
+        <option value="D30_bankmode_false">D30 - BankMode OFF</option>
+        <option value="D30_bankmode_true">D30 - BankMode ON</option>
+        <option value="minimal">Minimal Interface</option>
+        <option value="minimal">Minimal Interface</option>
+    </select>
+    <button type="button" id="sendPresetBtn" style="margin-top: 10px;">Send Selected Preset</button>
+</div>
+
            <div class="pos-terminal">
                <!-- Main Logo -->
                <div class="main-logo-preview">
@ -47,7 +64,25 @@
                            <div id="footerText">Mulberry ©2025</div>
                </div>
            </div>
+
+            <div class="receipt_container">
+                <p>Receipt #00123</p>
+
+                <% if (defaultConfig.printLogo) { %>
+                    <img id="printLogoPreview" src="/images/drawable/am_mulberry_logo_wide_color.png">
+                    <% } %>
+                        <p>Total ............ 10.00$</p>
+                        <% if (defaultConfig.printURL) { %>
+                            <p id="printURLPreview"></p>
+                            <% } %>
+
            </div>
+        </div>
+
+
+
+
+

        <!-- Configuration Form -->
        <div class="config-form">
@ -105,11 +140,11 @@
                                        <option value="NAV_SETTINGS" <%=item.navPage==='NAV_SETTINGS' ? 'selected' : ''
                                            %>>Settings</option>

-                                        <option value="NAV_PINPAD" <%=item.navPage==='NAV_PINPAD' ? 'selected' : ''
-                                            %>>PinPad</option>
+                                        <option value="NAV_PINPAD" <%=item.navPage==='NAV_PINPAD' ? 'selected' : '' %>
+                                            >PinPad</option>

-                                        <option value="NAV_CASHIER" <%=item.navPage==='NAV_CASHIER' ? 'selected' : ''
-                                            %>>Cashier</option>
+                                        <option value="NAV_CASHIER" <%=item.navPage==='NAV_CASHIER' ? 'selected' : '' %>
+                                            >Cashier</option>


                                    </select>
@ -187,6 +222,41 @@
                    </label>
                </div>

+                <div class="form-group">
+                    <label>Bank Mode</label>
+                    <label class="switch">
+                        <input type="checkbox" name="bankMode" <%=defaultConfig.bankMode ? 'checked' : '' %>>
+                        <span class="slider round"></span>
+                    </label>
+                </div>
+
+                <div class="printer_container">
+
+                    <!-- Print Config -->
+                    <div class="form-group">
+                        <label>Print Logo</label>
+                        <select name="printLogoType">
+                            <option value="resource">Static Image</option>
+                            <option value="base64">Upload Image</option>
+                        </select>
+                        <select name="printLogoResource" class="resource-select">
+                            <% staticImages.forEach(img=> { %>
+                                <option value="<%= img %>">
+                                    <%= img %>
+                                </option>
+                                <% }); %>
+                        </select>
+                        <input type="file" name="printLogoUpload" class="upload-input" style="display:none;">
+                    </div>
+
+                    <div class="form-group">
+                        <label>Print URL</label>
+                        <input type="text" name="printURL" value="www.mulberrypos.ru">
+                    </div>
+
+                </div>
+
+
                <div class="form-group">
                    <label>Greeting Text</label>
                    <input type="text" name="footerGreetingText" value="Hello!">
@ -194,23 +264,17 @@

                <div class="form-group">
                    <label>Footer Text</label>
-                    <input type="text" name="footerText" value="Mulberry ©2025">
+                    <input type="text" name="footerText" value="©Mulberry 2025">
                </div>

                <div class="form-group">
                    <label>Primary Color</label>
-                    <input type="color" name="primaryColor" value="#002233">
+                    <input type="color" name="primaryColor" value="#bb2aa1">
                </div>

                <div class="form-group">
-                    <label>Primary Color</label>
-                    <input type="color" name="primaryColor" value="#002233">
-                    <!-- Add this preview button -->
-                    <div class="color-preview" style="margin-top: 10px;">
-                        <button class="preview-button" style="padding: 8px 16px; border-radius: 4px;">
-                            Submit Button Preview
-                        </button>
-                    </div>
+                    <label>Secondary Color</label>
+                    <input type="color" name="secondaryColor" value="#4aa6d3">
                </div>

            </form>
@ -218,13 +282,15 @@
            <!-- Log Area -->
            <div class="form-group">
                <label>Configuration JSON</label>
-                <textarea id="configLog" readonly rows="10" style="width: 100%;"></textarea>
+                <textarea id="configLog" readonly rows="20" style="width: 100%;"></textarea>
            </div>

        </div>
    </div>

    <script src="/js/script.js"></script>
+    <script src="/js/presets.js"></script>
+
 </body>

 </html>
--- a/views/receipt.ejs
+++ b/views/receipt.ejs
@ -8,11 +8,11 @@
 </head>
 <body>
    <!-- Accepted Receipt -->
-    <div id="acceptedReceipt" class="receipt" style="border-top: 5px solid <%= appColor %>;">
+    <div id="acceptedReceipt" class="receipt"  >
        <div class="header">
            <!-- <img class="datex-pay-logo" src="/images/dynamic/<%= appLogo %>.png" alt="" srcset=""> -->
            <img class="datex-pay-logo" src="/images/am_mulberry_logo_wide_color.png" alt="" srcset="">
-            <p><%= t.receiptNumber %> 2949</p>
+            <!-- <p><%= t.receiptNumber %> 2949</p> -->
            <!-- <p>https://www.mulberrypos.com</p> -->
            <!-- <img class="mulberry-logo" src="/images/dynamic/overtec.png" alt="" srcset=""> -->
        </div>
@ -41,7 +41,7 @@
        <div class="divider"></div>

        <div class="receipt-details">
-            <div style="font-size: large;" class="receipt-row">
+            <div style="font-size: x-large;" class="receipt-row">
                <span class="label"><%= t.total %></span>
                <span><%= amount %> <%= currencyS %></span>
            </div>
@ -49,6 +49,11 @@

        <div class="divider"></div>

+        <div class="bearHolder">
+            <img class="bear-image" src="images/Mishka_like_0109.gif" alt="">
+        </div>
+        <div class="divider"></div>
+
        <div class="footer">
            <p><%= t.thankYou %></p>
            <p><%= t.transactionId %> <%= transactionId %></p>
@ -56,10 +61,10 @@
    </div>

    <!-- Rejected Receipt -->
-    <div id="rejectedReceipt" class="receipt" style="border-top: 5px solid <%= appColor %>;">
+    <div id="rejectedReceipt" class="receipt"  >
        <div class="header">
            <img class="datex-pay-logo" src="/images/am_mulberry_logo_wide_color.png" alt="" srcset="">
-            <p><%= t.receiptNumber %> 2949</p>
+            <!-- <p><%= t.receiptNumber %> 2949</p> -->
            <!-- <p>https://www.mulberrypos.com</p> -->
            <!-- <img class="mulberry-logo" src="/images/dynamic/overtec.png" alt="" srcset=""> -->
        </div>
@ -85,10 +90,10 @@
    </div>

    <!-- Buttons Section -->
-    <div id="buttons" class="buttons-section" style="border-top: 5px solid <%= appColor %>;">
+    <div id="buttons" class="buttons-section"  >
        <div class="header">
            <img class="datex-pay-logo" src="/images/am_mulberry_logo_wide_color.png" alt="" srcset="">
-            <p><%= t.receiptNumber %> 2949</p>
+            <!-- <p><%= t.receiptNumber %> 2949</p> -->
            <!-- <p>https://www.mulberrypos.com</p> -->
            <!-- <img class="mulberry-logo" src="/images/dynamic/overtec.png" alt="" srcset=""> -->
        </div>
Author	SHA1	Message	Date
Ahmed-DatexPay	1a7672fdec	add menu icon	2025-09-15 11:21:30 +00:00
Ahmed-DatexPay	7bf72fbb07	change to main.js fo auto-start container	2025-09-15 11:21:14 +00:00
Ahmed-DatexPay	5bf3d7143a	add new parameters , fixed secondaryColor	2025-09-04 12:39:03 +00:00