Yebbo Communication Network – Drag & Drop Dashboard<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Share+Tech+Mono&family=Nunito:wght@300;400;600;700;800&display=swap\" rel=\"stylesheet\" \/>\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" \/>\n<style>\n \/* Reset & Base *\/\n * { \n box-sizing: border-box; \n margin: 0; \n padding: 0; \n }\n \n body {\n background: linear-gradient(135deg, #020617 0%, #0f172a 100%);\n min-height: 100vh;\n font-family: 'Nunito', system-ui, sans-serif;\n color: #e2e8f0;\n padding: 10px;\n user-select: none;\n }\n \n \/* Top Control Panel *\/\n .control-panel {\n background: rgba(15, 23, 42, 0.9);\n border-radius: 12px;\n padding: 15px 20px;\n margin-bottom: 20px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border: 1px solid rgba(255, 255, 255, 0.1);\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n }\n \n .controls-left, .controls-right {\n display: flex;\n gap: 15px;\n align-items: center;\n }\n \n .control-btn {\n background: rgba(56, 189, 248, 0.1);\n border: 1px solid rgba(56, 189, 248, 0.3);\n color: #38bdf8;\n padding: 8px 16px;\n border-radius: 8px;\n cursor: pointer;\n font-weight: 600;\n font-size: 14px;\n transition: all 0.3s ease;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n \n .control-btn:hover {\n background: rgba(56, 189, 248, 0.2);\n transform: translateY(-2px);\n }\n \n .control-btn.reset {\n background: rgba(220, 38, 38, 0.1);\n border-color: rgba(220, 38, 38, 0.3);\n color: #ef4444;\n }\n \n .control-btn.reset:hover {\n background: rgba(220, 38, 38, 0.2);\n }\n \n .status-indicator {\n font-size: 14px;\n color: #22c55e;\n padding: 8px 12px;\n background: rgba(34, 197, 94, 0.1);\n border-radius: 8px;\n border: 1px solid rgba(34, 197, 94, 0.2);\n }\n \n \/* Main Container Grid *\/\n .dashboard-container {\n max-width: 1400px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 20px;\n min-height: 650px;\n }\n \n \/* Column Styles *\/\n .column {\n background: rgba(15, 23, 42, 0.8);\n border-radius: 16px;\n padding: 20px;\n border: 1px solid rgba(255, 255, 255, 0.1);\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);\n backdrop-filter: blur(10px);\n display: flex;\n flex-direction: column;\n position: relative;\n }\n \n \/* Drag Handle *\/\n .drag-handle {\n position: absolute;\n top: 10px;\n right: 10px;\n width: 30px;\n height: 30px;\n background: rgba(252, 221, 9, 0.1);\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: grab;\n color: #FCDD09;\n font-size: 14px;\n z-index: 10;\n transition: all 0.2s ease;\n }\n \n .drag-handle:hover {\n background: rgba(252, 221, 9, 0.2);\n transform: scale(1.1);\n }\n \n .drag-handle:active {\n cursor: grabbing;\n }\n \n \/* Dragging State *\/\n .dragging {\n opacity: 0.7;\n transform: rotate(2deg);\n box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);\n }\n \n .drop-zone {\n border: 2px dashed rgba(56, 189, 248, 0.5);\n background: rgba(56, 189, 248, 0.05);\n }\n \n \/* Column 1 - Services Description *\/\n .col-1 {\n background: linear-gradient(145deg, #0c4a6e 0%, #075985 100%);\n }\n \n \/* Column 2 - Ethiopian Clock *\/\n .col-2 {\n background: linear-gradient(145deg, #020617 0%, #0f172a 100%);\n padding: 0;\n overflow: hidden;\n }\n \n \/* Column 3 - Future Use *\/\n .col-3 {\n background: linear-gradient(145deg, #1e3a8a 0%, #1e40af 100%);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n \/* Column 4 - Logos *\/\n .col-4 {\n background: linear-gradient(145deg, #166534 0%, #15803d 100%);\n }\n \n \/* Column Headers *\/\n .column-header {\n color: #FCDD09;\n font-size: 20px;\n font-weight: 700;\n margin-bottom: 20px;\n text-align: center;\n padding-bottom: 12px;\n border-bottom: 2px solid rgba(252, 221, 9, 0.3);\n text-transform: uppercase;\n letter-spacing: 1px;\n }\n \n \/* Column 1 Styles *\/\n .services-content {\n flex: 1;\n line-height: 1.8;\n font-size: 16px;\n color: #f8fafc;\n }\n \n .services-content p {\n margin-bottom: 15px;\n }\n \n .services-list {\n list-style: none;\n margin: 20px 0;\n }\n \n .services-list li {\n margin-bottom: 12px;\n padding-left: 24px;\n position: relative;\n }\n \n .services-list li:before {\n content: \"\u2713\";\n position: absolute;\n left: 0;\n color: #22c55e;\n font-weight: bold;\n }\n \n .phone-number {\n background: rgba(252, 221, 9, 0.1);\n border: 1px solid rgba(252, 221, 9, 0.3);\n border-radius: 10px;\n padding: 12px;\n margin: 20px 0;\n text-align: center;\n font-size: 18px;\n font-weight: 700;\n color: #FCDD09;\n }\n \n .ad-container {\n margin-top: 20px;\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: 10px;\n padding: 10px;\n background: rgba(0, 0, 0, 0.3);\n }\n \n \/* Column 2 - Clock Styles *\/\n .yebbo-vertical-clock {\n width: 100%;\n height: 100%;\n background: #020617;\n border-radius: 20px;\n overflow: hidden;\n position: relative;\n display: flex;\n flex-direction: column;\n }\n \n .yebbo-vertical-stripes {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n z-index: 0;\n opacity: 0.15;\n }\n \n .yebbo-vertical-stripe {\n flex: 1;\n }\n \n .yebbo-vs-green { background: #078930; }\n .yebbo-vs-yellow { background: #FCDD09; }\n .yebbo-vs-red { background: #DA121A; }\n \n .yebbo-vertical-header {\n padding: 25px 20px 15px;\n text-align: center;\n position: relative;\n z-index: 1;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n background: linear-gradient(to bottom, rgba(2, 6, 23, 0.9), rgba(2, 6, 23, 0.7));\n }\n \n .yebbo-vertical-title {\n color: #FCDD09;\n font-size: 22px;\n font-weight: 800;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n margin-bottom: 5px;\n text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);\n }\n \n .yebbo-vertical-subtitle {\n color: #38bdf8;\n font-size: 14px;\n opacity: 0.9;\n font-weight: 600;\n }\n \n .yebbo-time-section {\n padding: 30px 20px;\n position: relative;\n z-index: 1;\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n }\n \n .yebbo-section-label {\n color: #e5e7eb;\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 0.15em;\n margin-bottom: 15px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n }\n \n .yebbo-section-label::before,\n .yebbo-section-label::after {\n content: '';\n flex: 1;\n height: 1px;\n background: linear-gradient(90deg, transparent, currentColor, transparent);\n }\n \n .yebbo-time-display {\n font-family: 'Share Tech Mono', monospace;\n font-size: 38px;\n text-align: center;\n color: #38bdf8;\n text-shadow: 0 0 15px rgba(56, 189, 248, 0.7);\n margin-bottom: 8px;\n font-weight: 400;\n letter-spacing: 0.05em;\n display: flex;\n align-items: baseline;\n justify-content: center;\n gap: 4px;\n }\n \n .yebbo-time-main {\n font-size: 42px;\n animation: yebbo-glow 3s ease-in-out infinite;\n }\n \n .yebbo-am-pm {\n font-size: 18px;\n color: #FCDD09;\n opacity: 0.9;\n font-weight: 600;\n margin-left: 5px;\n text-shadow: 0 0 8px rgba(252, 221, 9, 0.5);\n animation: yebbo-ampm-pulse 4s ease-in-out infinite;\n }\n \n .yebbo-date-display {\n color: #e5e7eb;\n font-size: 16px;\n text-align: center;\n opacity: 0.9;\n font-weight: 600;\n line-height: 1.4;\n }\n \n .yebbo-ethiopian-date {\n color: #FCDD09;\n font-size: 18px;\n margin-top: 5px;\n }\n \n .yebbo-timezone {\n display: inline-block;\n padding: 4px 10px;\n background: rgba(56, 189, 248, 0.1);\n border: 1px solid rgba(56, 189, 248, 0.3);\n border-radius: 12px;\n color: #38bdf8;\n font-size: 10px;\n margin-top: 10px;\n font-weight: 600;\n }\n \n .yebbo-vertical-separator {\n height: 40px;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n .yebbo-vertical-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: #22c55e;\n box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);\n position: relative;\n }\n \n .yebbo-vertical-dot::before,\n .yebbo-vertical-dot::after {\n content: '';\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n width: 1px;\n height: 15px;\n background: rgba(34, 197, 94, 0.3);\n }\n \n .yebbo-vertical-dot::before {\n bottom: 100%;\n }\n \n .yebbo-vertical-dot::after {\n top: 100%;\n }\n \n .yebbo-vertical-footer {\n padding: 20px;\n text-align: center;\n position: relative;\n z-index: 1;\n background: rgba(0, 0, 0, 0.5);\n border-top: 1px solid rgba(255, 255, 255, 0.08);\n }\n \n .yebbo-vertical-brand {\n color: #22c55e;\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 0.05em;\n line-height: 1.6;\n }\n \n .yebbo-vertical-copyright {\n color: rgba(255, 255, 255, 0.7);\n font-size: 11px;\n margin-top: 8px;\n }\n \n @keyframes yebbo-glow {\n 0%, 100% { text-shadow: 0 0 15px rgba(56, 189, 248, 0.7), 0 0 25px rgba(56, 189, 248, 0.3); }\n 50% { text-shadow: 0 0 20px rgba(56, 189, 248, 0.9), 0 0 35px rgba(56, 189, 248, 0.5), 0 0 45px rgba(56, 189, 248, 0.2); }\n }\n \n @keyframes yebbo-ampm-pulse {\n 0%, 100% { opacity: 0.9; text-shadow: 0 0 8px rgba(252, 221, 9, 0.5); }\n 50% { opacity: 1; text-shadow: 0 0 12px rgba(252, 221, 9, 0.7); }\n }\n \n \/* Column 3 - Future Use *\/\n .future-use {\n text-align: center;\n color: #cbd5e1;\n font-size: 18px;\n opacity: 0.7;\n }\n \n \/* Column 4 - Logo Rows *\/\n .logo-rows-container {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 15px;\n }\n \n .logo-row {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background: rgba(255, 255, 255, 0.05);\n border-radius: 12px;\n border: 1px solid rgba(255, 255, 255, 0.1);\n transition: all 0.3s ease;\n padding: 10px;\n cursor: pointer;\n }\n \n .logo-row:hover {\n background: rgba(255, 255, 255, 0.1);\n transform: translateY(-3px);\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\n }\n \n .logo-title {\n font-size: 14px;\n font-weight: 600;\n color: #FCDD09;\n margin-bottom: 8px;\n text-align: center;\n }\n \n .logo-image {\n max-width: 150px;\n max-height: 60px;\n object-fit: contain;\n filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));\n transition: transform 0.3s ease;\n }\n \n .logo-row:hover .logo-image {\n transform: scale(1.05);\n }\n \n \/* Bottom Row *\/\n .bottom-row {\n height: 50px;\n margin-top: 20px;\n \/* Intentionally left blank *\/\n }\n \n \/* Responsive Design *\/\n @media (max-width: 1200px) {\n .dashboard-container {\n grid-template-columns: repeat(2, 1fr);\n }\n \n .column {\n min-height: 600px;\n }\n }\n \n @media (max-width: 768px) {\n .dashboard-container {\n grid-template-columns: 1fr;\n gap: 15px;\n }\n \n .column {\n min-height: auto;\n margin-bottom: 20px;\n }\n \n .control-panel {\n flex-direction: column;\n gap: 15px;\n }\n \n .controls-left, .controls-right {\n width: 100%;\n justify-content: center;\n }\n \n .yebbo-time-main {\n font-size: 36px;\n }\n \n .yebbo-am-pm {\n font-size: 16px;\n }\n \n .logo-image {\n max-width: 120px;\n }\n \n .top-row, .bottom-row {\n height: 30px;\n }\n }\n<\/style>\n<\/head>\n\n<body>\n \n <div class=\"control-panel\">\n <div class=\"controls-left\">\n <button class=\"control-btn\" id=\"saveLayout\">\n <i class=\"fas fa-save\"><\/i> Save Layout\n <\/button>\n <button class=\"control-btn\" id=\"loadLayout\">\n <i class=\"fas fa-folder-open\"><\/i> Load Layout\n <\/button>\n <button class=\"control-btn reset\" id=\"resetLayout\">\n <i class=\"fas fa-undo\"><\/i> Reset to Default\n <\/button>\n <\/div>\n <div class=\"controls-right\">\n <div class=\"status-indicator\" id=\"statusIndicator\">\n <i class=\"fas fa-check-circle\"><\/i> Ready to Drag & Drop\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"dashboard-container\" id=\"dashboardContainer\">\n \n \n <div class=\"column col-1\" data-column=\"1\" draggable=\"true\">\n <div class=\"drag-handle\" title=\"Drag to rearrange\">\n <i class=\"fas fa-arrows-alt\"><\/i>\n <\/div>\n <h2 class=\"column-header\">\u12e8\u1266 \u12ae\u121a\u1292\u12ac\u123d\u1295 \u1294\u1275 \u12c8\u122d\u12ad<\/h2>\n <div class=\"services-content\">\n <p>\u120825 \u12a0\u1218\u1273\u1275 \u1260\u120b\u12ed \u12e8\u1235\u122b \u120d\u121d\u12f5 \u12eb\u12ab\u1260\u1270\u12cd \u12e8\u12a5\u1293\u1295\u1270\u12cd \u1260\u12a5\u1293\u1295\u1270\u12cd\u1362 \u12a8\u121d\u1230\u1323\u1278\u12cd \u12a0\u1308\u120d\u130d\u120e\u1276\u127d \u12cd\u1235\u1325:<\/p>\n \n <ul class=\"services-list\">\n <li>\u12e8\u12cd\u12ad\u120d\u1293 \u12a0\u1308\u120d\u130d\u120e\u1275 \u1218\u1235\u1320\u1275<\/li>\n <li>\u12e8\u12a2\u1275\u12ee\u1335\u12eb \u1353\u1235\u1356\u122d\u1275 \u12a0\u1308\u120d\u130d\u120e\u1275 \u1218\u1235\u1320\u1275<\/li>\n <li>\u12e8\u1262\u132b \u12ab\u122d\u12f5 \u12e8\u121b\u12cd\u1323\u1275 \u12a0\u1308\u120d\u130d\u120e\u1275<\/li>\n <li>\u12e8\u1273\u12ad\u1235 \u12a0\u1308\u120d\u130d\u120e\u1275 \u1218\u1235\u1320\u1275 (\u12e8\u1275\u121d \u12e8\u12a2\u1275\u12ee\u1335\u12eb \u130d\u12db\u1275 \u12ed\u1291\u1229)<\/li>\n <li>\u12e8\u1309\u12de \u12c8\u12aa\u120d<\/li>\n <li>\u12e8\u1275\u122d\u1309\u121d \u1235\u122b \u12a0\u1308\u120d\u130d\u120e\u1275<\/li>\n <\/ul>\n \n <div class=\"phone-number\">\n \ud83d\udcde \u1208\u1260\u1208\u1320 \u1218\u1228\u1303 \u1260\u1235\u120d\u12ad \u1241\u1325\u122d 619-255-5530 \u12ed\u12f0\u12cd\u1209\u1362\n <\/div>\n \n \n <div class=\"ad-container\">\n <script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-7297722780244848\"\n crossorigin=\"anonymous\"><\/script>\n <ins class=\"adsbygoogle\"\n style=\"display:block; width:100%; height:250px;\"\n data-ad-client=\"ca-pub-7297722780244848\"\n data-ad-slot=\"2057876812\"\n data-ad-format=\"auto\"\n data-full-width-responsive=\"true\"><\/ins>\n <script>\n (adsbygoogle = window.adsbygoogle || []).push({});\n <\/script>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"column col-2\" data-column=\"2\" draggable=\"true\">\n <div class=\"drag-handle\" title=\"Drag to rearrange\">\n <i class=\"fas fa-arrows-alt\"><\/i>\n <\/div>\n <div class=\"yebbo-vertical-clock\">\n \n <div class=\"yebbo-vertical-stripes\">\n <div class=\"yebbo-vertical-stripe yebbo-vs-green\"><\/div>\n <div class=\"yebbo-vertical-stripe yebbo-vs-yellow\"><\/div>\n <div class=\"yebbo-vertical-stripe yebbo-vs-red\"><\/div>\n <\/div>\n \n <div class=\"yebbo-vertical-header\">\n <div class=\"yebbo-vertical-title\">\u12e8\u12a2\u1275\u12ee\u1335\u12eb \u1230\u12d3\u1275<\/div>\n <div class=\"yebbo-vertical-subtitle\">Ethiopian Time Display<\/div>\n <\/div>\n \n <div class=\"yebbo-time-section\">\n <div class=\"yebbo-section-label\">Ethiopian Time<\/div>\n <div class=\"yebbo-time-display\">\n <span class=\"yebbo-time-main\" id=\"yebboVerticalEthTime\">12:00:00<\/span>\n <span class=\"yebbo-am-pm\" id=\"yebboVerticalEthAmPm\">AM<\/span>\n <\/div>\n <div class=\"yebbo-date-display\">\n <div id=\"yebboVerticalEthDate\">\u1218\u1235\u12a8\u1228\u121d 1, 2016 \u12d3.\u121d<\/div>\n <div class=\"yebbo-timezone\">GMT+3 \u2022 Addis Ababa<\/div>\n <\/div>\n <\/div>\n \n <div class=\"yebbo-vertical-separator\">\n <div class=\"yebbo-vertical-dot\"><\/div>\n <\/div>\n \n <div class=\"yebbo-time-section\">\n <div class=\"yebbo-section-label\">Local Time<\/div>\n <div class=\"yebbo-time-display\">\n <span class=\"yebbo-time-main\" id=\"yebboVerticalLocalTime\">12:00:00<\/span>\n <span class=\"yebbo-am-pm\" id=\"yebboVerticalLocalAmPm\">AM<\/span>\n <\/div>\n <div class=\"yebbo-date-display\" id=\"yebboVerticalLocalDate\">\n Monday, January 1, 2025\n <\/div>\n <\/div>\n \n <div class=\"yebbo-vertical-footer\">\n <div class=\"yebbo-vertical-brand\">\n Yebbo Communication Network\n <\/div>\n <div class=\"yebbo-vertical-copyright\">\n \u00a9 1999\u20132026 \u2022 YebboBooks \u2022 All rights reserved\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"column col-3\" data-column=\"3\" draggable=\"true\">\n <div class=\"drag-handle\" title=\"Drag to rearrange\">\n <i class=\"fas fa-arrows-alt\"><\/i>\n <\/div>\n <div class=\"future-use\">\n <div style=\"font-size: 48px; margin-bottom: 20px;\">\u23f3<\/div>\n <h3>Coming Soon<\/h3>\n <p>This space is reserved for future content.<\/p>\n <p style=\"font-size: 14px; margin-top: 20px; opacity: 0.6;\">\n Drag me anywhere!\n <\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"column col-4\" data-column=\"4\" draggable=\"true\">\n <div class=\"drag-handle\" title=\"Drag to rearrange\">\n <i class=\"fas fa-arrows-alt\"><\/i>\n <\/div>\n <h2 class=\"column-header\">Our Services<\/h2>\n \n <div class=\"logo-rows-container\">\n \n <div class=\"logo-row\" onclick=\"window.open('https:\/\/yebbo.com', '_blank')\">\n <div class=\"logo-title\">YebboTravel<\/div>\n <img decoding=\"async\" src=\"https:\/\/yebbo.com\/2013\/wp-content\/uploads\/2025\/12\/ChatGPT-Image-Dec-14-2025-07_31_40-PM-768x768.png\" \n alt=\"YebboTravel Logo\" \n class=\"logo-image\"\n onerror=\"this.src='https:\/\/via.placeholder.com\/150x60\/078930\/ffffff?text=YebboTravel'\">\n <\/div>\n \n \n <div class=\"logo-row\" onclick=\"window.open('https:\/\/yebbo.com', '_blank')\">\n <div class=\"logo-title\">YebboTax<\/div>\n <img decoding=\"async\" src=\"https:\/\/yebbo.com\/2013\/wp-content\/uploads\/2025\/12\/ChatGPT-Image-Dec-14-2025-07_31_40-PM-768x768.png\" \n alt=\"YebboTax Logo\" \n class=\"logo-image\"\n onerror=\"this.src='https:\/\/via.placeholder.com\/150x60\/FCDD09\/000000?text=YebboTax'\">\n <\/div>\n \n \n <div class=\"logo-row\" onclick=\"window.open('https:\/\/wilina.net', '_blank')\">\n <div class=\"logo-title\">Wilina.net<\/div>\n <img decoding=\"async\" src=\"https:\/\/yebbo.com\/2013\/wp-content\/uploads\/2025\/12\/WikilinaLogo-1.png\" \n alt=\"Wilina.net Logo\" \n class=\"logo-image\"\n onerror=\"this.src='https:\/\/via.placeholder.com\/150x60\/DA121A\/ffffff?text=Wilina.net'\">\n <\/div>\n \n \n <div class=\"logo-row\" onclick=\"window.open('https:\/\/www.ethiotrans.com', '_blank')\">\n <div class=\"logo-title\">Ethiotrans.com<\/div>\n <img decoding=\"async\" src=\"https:\/\/yebbo.com\/2013\/wp-content\/uploads\/2025\/12\/ChatGPT-Image-Dec-14-2025-09_50_06-AM-768x768.png\" \n alt=\"Ethiotrans.com Logo\" \n class=\"logo-image\"\n onerror=\"this.src='https:\/\/via.placeholder.com\/150x60\/38bdf8\/ffffff?text=Ethiotrans'\">\n <\/div>\n \n \n <div class=\"logo-row\" onclick=\"window.open('https:\/\/yebbo.com', '_blank')\">\n <div class=\"logo-title\">Global Passport Photos<\/div>\n <img decoding=\"async\" src=\"https:\/\/yebbo.com\/2013\/wp-content\/uploads\/2025\/12\/Global-Passport-and-Visa-Photos-Logo-1-380x254.png\" \n alt=\"Global Passport Photos Logo\" \n class=\"logo-image\"\n onerror=\"this.src='https:\/\/via.placeholder.com\/150x60\/22c55e\/ffffff?text=Passport+Photos'\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bottom-row\"><\/div>\n\n<script>\n\/\/ Ethiopian Calendar Functions\nfunction gregorianToJDN(year, month, day) {\n const a = Math.floor((14 - month) \/ 12);\n const y = year + 4800 - a;\n const m = month + 12 * a - 3;\n return day + Math.floor((153 * m + 2) \/ 5) + \n 365 * y + Math.floor(y \/ 4) - \n Math.floor(y \/ 100) + Math.floor(y \/ 400) - 32045;\n}\n\nfunction jdnToEthiopian(jdn) {\n const ETHIOPIC_EPOCH = 1723856;\n const diff = jdn - ETHIOPIC_EPOCH;\n const r = diff % 1461;\n const n = Math.floor(diff \/ 1461);\n const year = 4 * n + Math.floor(r \/ 365);\n const dayOfYear = (r % 365) + 1;\n const month = Math.floor((dayOfYear - 1) \/ 30) + 1;\n const day = ((dayOfYear - 1) % 30) + 1;\n return { year, month, day };\n}\n\n\/\/ Ethiopian Month Names\nconst ETHIOPIC_MONTHS = [\n \"\u1218\u1235\u12a8\u1228\u121d\", \"\u1325\u1245\u121d\u1275\", \"\u1205\u12f3\u122d\", \"\u1273\u1205\u1233\u1235\", \"\u1325\u122d\", \"\u12e8\u12ab\u1272\u1275\",\n \"\u1218\u130b\u1262\u1275\", \"\u121a\u12eb\u12da\u12eb\", \"\u130d\u1295\u1266\u1275\", \"\u1230\u1294\", \"\u1210\u121d\u120c\", \"\u1290\u1210\u1234\", \"\u1333\u1309\u121c\u1295\"\n];\n\n\/\/ English Day Names for Ethiopian Date\nconst ENGLISH_DAYS = [\n \"Sunday\", \"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\"\n];\n\nconst ENGLISH_MONTHS = [\n \"January\", \"February\", \"March\", \"April\", \"May\", \"June\",\n \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"\n];\n\n\/\/ Helper Functions\nfunction padZero(num) {\n return String(num).padStart(2, '0');\n}\n\nfunction updateElement(id, text) {\n const element = document.getElementById(id);\n if (element) element.textContent = text;\n}\n\n\/\/ Format time in 12-hour format with AM\/PM\nfunction formatTime12Hour(hours, minutes, seconds) {\n \/\/ Convert to 12-hour format\n const hour12 = hours % 12 || 12; \/\/ 0 becomes 12\n const ampm = hours >= 12 ? 'PM' : 'AM';\n \n return {\n time: `${padZero(hour12)}:${padZero(minutes)}:${padZero(seconds)}`,\n ampm: ampm\n };\n}\n\n\/\/ Format Ethiopian date with weekday\nfunction formatEthiopianDateFull(ethDate) {\n const monthName = ETHIOPIC_MONTHS[ethDate.month - 1];\n return `${monthName} ${ethDate.day}, ${ethDate.year} \u12d3.\u121d`;\n}\n\n\/\/ Format local date nicely\nfunction formatLocalDateFull(date) {\n const day = ENGLISH_DAYS[date.getDay()];\n const month = ENGLISH_MONTHS[date.getMonth()];\n const dayNum = date.getDate();\n const year = date.getFullYear();\n return `${day}, ${month} ${dayNum}, ${year}`;\n}\n\n\/\/ Update Clock\nfunction updateClock() {\n const now = new Date();\n \n \/\/ Local Time (12-hour format)\n const localHours = now.getHours();\n const localMinutes = now.getMinutes();\n const localSeconds = now.getSeconds();\n const localTime12 = formatTime12Hour(localHours, localMinutes, localSeconds);\n \n \/\/ Update Local Time Display with AM\/PM\n updateElement('yebboVerticalLocalTime', localTime12.time);\n updateElement('yebboVerticalLocalAmPm', localTime12.ampm);\n updateElement('yebboVerticalLocalDate', formatLocalDateFull(now));\n \n \/\/ Ethiopian Time (Addis Ababa timezone)\n const addisAbabaTime = new Date(\n now.toLocaleString('en-US', { timeZone: 'Africa\/Addis_Ababa' })\n );\n \n \/\/ Ethiopian Time Format (12-hour)\n const ethHours = addisAbabaTime.getHours();\n const ethMinutes = addisAbabaTime.getMinutes();\n const ethSeconds = addisAbabaTime.getSeconds();\n const ethTime12 = formatTime12Hour(ethHours, ethMinutes, ethSeconds);\n \n \/\/ Update Ethiopian Time Display with AM\/PM\n updateElement('yebboVerticalEthTime', ethTime12.time);\n updateElement('yebboVerticalEthAmPm', ethTime12.ampm);\n \n \/\/ Calculate Ethiopian Date\n const ethGregorianYear = addisAbabaTime.getFullYear();\n const ethGregorianMonth = addisAbabaTime.getMonth() + 1;\n const ethGregorianDay = addisAbabaTime.getDate();\n \n const jdn = gregorianToJDN(ethGregorianYear, ethGregorianMonth, ethGregorianDay);\n const ethDate = jdnToEthiopian(jdn);\n \n \/\/ Update Ethiopian Date Display\n updateElement('yebboVerticalEthDate', formatEthiopianDateFull(ethDate));\n \n \/\/ Update AM\/PM indicator colors\n updateAmPmColors();\n}\n\n\/\/ Update AM\/PM indicator colors based on time\nfunction updateAmPmColors() {\n const ethAmPm = document.getElementById('yebboVerticalEthAmPm');\n const localAmPm = document.getElementById('yebboVerticalLocalAmPm');\n \n if (ethAmPm) {\n if (ethAmPm.textContent === 'AM') {\n ethAmPm.style.color = '#38bdf8'; \/\/ Blue for AM\n ethAmPm.style.textShadow = '0 0 8px rgba(56, 189, 248, 0.5)';\n } else {\n ethAmPm.style.color = '#FCDD09'; \/\/ Yellow for PM\n ethAmPm.style.textShadow = '0 0 8px rgba(252, 221, 9, 0.5)';\n }\n }\n \n if (localAmPm) {\n if (localAmPm.textContent === 'AM') {\n localAmPm.style.color = '#38bdf8'; \/\/ Blue for AM\n localAmPm.style.textShadow = '0 0 8px rgba(56, 189, 248, 0.5)';\n } else {\n localAmPm.style.color = '#FCDD09'; \/\/ Yellow for PM\n localAmPm.style.textShadow = '0 0 8px rgba(252, 221, 9, 0.5)';\n }\n }\n}\n\n\/\/ Initialize Clock\nfunction initializeClock() {\n \/\/ Initial update\n updateClock();\n \n \/\/ Update every second\n setInterval(updateClock, 1000);\n \n \/\/ Add hover effects to clock\n const clock = document.querySelector('.yebbo-vertical-clock');\n if (clock) {\n clock.addEventListener('mouseenter', () => {\n clock.style.transform = 'translateY(-5px)';\n clock.style.boxShadow = '0 20px 40px rgba(0, 0, 0, 0.8)';\n });\n \n clock.addEventListener('mouseleave', () => {\n clock.style.transform = 'translateY(0)';\n clock.style.boxShadow = 'none';\n });\n }\n}\n\n\/\/ =============================================\n\/\/ DRAG & DROP FUNCTIONALITY\n\/\/ =============================================\n\nlet draggedColumn = null;\nlet draggedIndex = null;\nlet defaultLayout = [1, 2, 3, 4]; \/\/ Default column order\n\n\/\/ Initialize drag & drop\nfunction initializeDragAndDrop() {\n const columns = document.querySelectorAll('.column');\n const container = document.getElementById('dashboardContainer');\n \n \/\/ Add drag event listeners to all columns\n columns.forEach(column => {\n column.addEventListener('dragstart', handleDragStart);\n column.addEventListener('dragend', handleDragEnd);\n column.addEventListener('dragover', handleDragOver);\n column.addEventListener('dragenter', handleDragEnter);\n column.addEventListener('dragleave', handleDragLeave);\n column.addEventListener('drop', handleDrop);\n \n \/\/ Also make drag handles work\n const dragHandle = column.querySelector('.drag-handle');\n if (dragHandle) {\n dragHandle.addEventListener('mousedown', () => {\n column.draggable = true;\n });\n \n dragHandle.addEventListener('mouseup', () => {\n column.draggable = false;\n });\n }\n });\n \n \/\/ Initialize control buttons\n document.getElementById('saveLayout').addEventListener('click', saveLayout);\n document.getElementById('loadLayout').addEventListener('click', loadLayout);\n document.getElementById('resetLayout').addEventListener('click', resetLayout);\n \n \/\/ Load saved layout if exists\n loadSavedLayout();\n}\n\n\/\/ Drag & Drop Handlers\nfunction handleDragStart(e) {\n draggedColumn = this;\n draggedIndex = Array.from(this.parentNode.children).indexOf(this);\n \n \/\/ Add visual feedback\n this.classList.add('dragging');\n \n \/\/ Set drag effect\n e.dataTransfer.effectAllowed = 'move';\n e.dataTransfer.setData('text\/plain', this.getAttribute('data-column'));\n \n \/\/ Update status indicator\n updateStatus(`Dragging column ${this.getAttribute('data-column')}`);\n}\n\nfunction handleDragEnd(e) {\n \/\/ Remove visual feedback from all columns\n const columns = document.querySelectorAll('.column');\n columns.forEach(col => {\n col.classList.remove('dragging');\n col.classList.remove('drop-zone');\n });\n \n draggedColumn = null;\n draggedIndex = null;\n \n \/\/ Update status indicator\n updateStatus('Ready to Drag & Drop');\n}\n\nfunction handleDragOver(e) {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n return false;\n}\n\nfunction handleDragEnter(e) {\n e.preventDefault();\n if (this !== draggedColumn) {\n this.classList.add('drop-zone');\n }\n}\n\nfunction handleDragLeave(e) {\n this.classList.remove('drop-zone');\n}\n\nfunction handleDrop(e) {\n e.preventDefault();\n e.stopPropagation();\n \n if (draggedColumn && this !== draggedColumn) {\n const container = this.parentNode;\n const targetIndex = Array.from(container.children).indexOf(this);\n \n \/\/ Remove drop zone styling\n this.classList.remove('drop-zone');\n \n \/\/ Reorder columns\n if (draggedIndex < targetIndex) {\n container.insertBefore(draggedColumn, this.nextSibling);\n } else {\n container.insertBefore(draggedColumn, this);\n }\n \n \/\/ Update status\n updateStatus('Layout updated!');\n \n \/\/ Save the new layout\n saveCurrentLayout();\n }\n \n return false;\n}\n\n\/\/ Layout Management Functions\nfunction saveCurrentLayout() {\n const container = document.getElementById('dashboardContainer');\n const columns = Array.from(container.children);\n const layout = columns.map(col => parseInt(col.getAttribute('data-column')));\n \n \/\/ Save to localStorage\n localStorage.setItem('yebboDashboardLayout', JSON.stringify(layout));\n \n \/\/ Show visual feedback\n showNotification('Layout saved successfully!');\n}\n\nfunction loadSavedLayout() {\n const savedLayout = localStorage.getItem('yebboDashboardLayout');\n \n if (savedLayout) {\n try {\n const layout = JSON.parse(savedLayout);\n applyLayout(layout);\n updateStatus('Loaded saved layout');\n } catch (e) {\n console.error('Error loading layout:', e);\n applyLayout(defaultLayout);\n }\n }\n}\n\nfunction applyLayout(layout) {\n const container = document.getElementById('dashboardContainer');\n const columns = Array.from(container.children);\n \n \/\/ Create a map of columns by their data-column attribute\n const columnMap = {};\n columns.forEach(col => {\n const colNum = parseInt(col.getAttribute('data-column'));\n columnMap[colNum] = col;\n });\n \n \/\/ Clear container\n container.innerHTML = '';\n \n \/\/ Re-add columns in the specified order\n layout.forEach(colNum => {\n if (columnMap[colNum]) {\n container.appendChild(columnMap[colNum]);\n }\n });\n \n \/\/ Re-initialize drag events\n initializeDragAndDrop();\n}\n\nfunction saveLayout() {\n saveCurrentLayout();\n showNotification('Layout saved to browser storage!');\n}\n\nfunction loadLayout() {\n loadSavedLayout();\n showNotification('Layout loaded from browser storage!');\n}\n\nfunction resetLayout() {\n if (confirm('Reset to default layout?')) {\n applyLayout(defaultLayout);\n localStorage.removeItem('yebboDashboardLayout');\n updateStatus('Reset to default layout');\n showNotification('Layout reset to default!');\n }\n}\n\n\/\/ UI Helper Functions\nfunction updateStatus(message) {\n const statusIndicator = document.getElementById('statusIndicator');\n statusIndicator.innerHTML = `<i class=\"fas fa-check-circle\"><\/i> ${message}`;\n}\n\nfunction showNotification(message) {\n \/\/ Create notification element\n const notification = document.createElement('div');\n notification.style.cssText = `\n position: fixed;\n top: 20px;\n right: 20px;\n background: #22c55e;\n color: white;\n padding: 12px 20px;\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0,0,0,0.3);\n z-index: 1000;\n font-weight: 600;\n animation: slideIn 0.3s ease;\n `;\n \n \/\/ Add CSS for animation\n const style = document.createElement('style');\n style.textContent = `\n @keyframes slideIn {\n from { transform: translateX(100%); opacity: 0; }\n to { transform: translateX(0); opacity: 1; }\n }\n `;\n document.head.appendChild(style);\n \n notification.textContent = message;\n document.body.appendChild(notification);\n \n \/\/ Remove after 3 seconds\n setTimeout(() => {\n notification.style.animation = 'slideIn 0.3s ease reverse';\n setTimeout(() => {\n document.body.removeChild(notification);\n document.head.removeChild(style);\n }, 300);\n }, 3000);\n}\n\n\/\/ Initialize everything when DOM is loaded\ndocument.addEventListener('DOMContentLoaded', () => {\n initializeClock();\n initializeDragAndDrop();\n});\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Yebbo Communication Network – Drag & Drop Dashboard Save Layout Load Layout Reset to Default Ready to Drag & Drop […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1],"tags":[],"class_list":["post-635","post","type-post","status-publish","format-standard","hentry","category-ethiodiego"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8nzgb-af","jetpack_likes_enabled":true,"_links":{"self":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/posts\/635","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/comments?post=635"}],"version-history":[{"count":1,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/posts\/635\/revisions"}],"predecessor-version":[{"id":640,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/posts\/635\/revisions\/640"}],"wp:attachment":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/media?parent=635"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/categories?post=635"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/tags?post=635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":635,"date":"2026-01-12T16:45:32","date_gmt":"2026-01-12T16:45:32","guid":{"rendered":"https:\/\/yebbo.com\/ethiodiego\/?p=635"},"modified":"2026-01-12T16:45:38","modified_gmt":"2026-01-12T16:45:38","slug":"what-time-is-in-ethiopia","status":"publish","type":"post","link":"http:\/\/yebbo.com\/ethiodiego\/what-time-is-in-ethiopia\/","title":{"rendered":"What time is in Ethiopia?"},"content":{"rendered":"\n\n\n\n\n\nYebbo Communication Network – Drag & Drop Dashboard<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Share+Tech+Mono&family=Nunito:wght@300;400;600;700;800&display=swap\" rel=\"stylesheet\" \/>\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" \/>\n<style>\n \/* Reset & Base *\/\n * { \n box-sizing: border-box; \n margin: 0; \n padding: 0; \n }\n \n body {\n background: linear-gradient(135deg, #020617 0%, #0f172a 100%);\n min-height: 100vh;\n font-family: 'Nunito', system-ui, sans-serif;\n color: #e2e8f0;\n padding: 10px;\n user-select: none;\n }\n \n \/* Top Control Panel *\/\n .control-panel {\n background: rgba(15, 23, 42, 0.9);\n border-radius: 12px;\n padding: 15px 20px;\n margin-bottom: 20px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border: 1px solid rgba(255, 255, 255, 0.1);\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n }\n \n .controls-left, .controls-right {\n display: flex;\n gap: 15px;\n align-items: center;\n }\n \n .control-btn {\n background: rgba(56, 189, 248, 0.1);\n border: 1px solid rgba(56, 189, 248, 0.3);\n color: #38bdf8;\n padding: 8px 16px;\n border-radius: 8px;\n cursor: pointer;\n font-weight: 600;\n font-size: 14px;\n transition: all 0.3s ease;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n \n .control-btn:hover {\n background: rgba(56, 189, 248, 0.2);\n transform: translateY(-2px);\n }\n \n .control-btn.reset {\n background: rgba(220, 38, 38, 0.1);\n border-color: rgba(220, 38, 38, 0.3);\n color: #ef4444;\n }\n \n .control-btn.reset:hover {\n background: rgba(220, 38, 38, 0.2);\n }\n \n .status-indicator {\n font-size: 14px;\n color: #22c55e;\n padding: 8px 12px;\n background: rgba(34, 197, 94, 0.1);\n border-radius: 8px;\n border: 1px solid rgba(34, 197, 94, 0.2);\n }\n \n \/* Main Container Grid *\/\n .dashboard-container {\n max-width: 1400px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 20px;\n min-height: 650px;\n }\n \n \/* Column Styles *\/\n .column {\n background: rgba(15, 23, 42, 0.8);\n border-radius: 16px;\n padding: 20px;\n border: 1px solid rgba(255, 255, 255, 0.1);\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);\n backdrop-filter: blur(10px);\n display: flex;\n flex-direction: column;\n position: relative;\n }\n \n \/* Drag Handle *\/\n .drag-handle {\n position: absolute;\n top: 10px;\n right: 10px;\n width: 30px;\n height: 30px;\n background: rgba(252, 221, 9, 0.1);\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: grab;\n color: #FCDD09;\n font-size: 14px;\n z-index: 10;\n transition: all 0.2s ease;\n }\n \n .drag-handle:hover {\n background: rgba(252, 221, 9, 0.2);\n transform: scale(1.1);\n }\n \n .drag-handle:active {\n cursor: grabbing;\n }\n \n \/* Dragging State *\/\n .dragging {\n opacity: 0.7;\n transform: rotate(2deg);\n box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);\n }\n \n .drop-zone {\n border: 2px dashed rgba(56, 189, 248, 0.5);\n background: rgba(56, 189, 248, 0.05);\n }\n \n \/* Column 1 - Services Description *\/\n .col-1 {\n background: linear-gradient(145deg, #0c4a6e 0%, #075985 100%);\n }\n \n \/* Column 2 - Ethiopian Clock *\/\n .col-2 {\n background: linear-gradient(145deg, #020617 0%, #0f172a 100%);\n padding: 0;\n overflow: hidden;\n }\n \n \/* Column 3 - Future Use *\/\n .col-3 {\n background: linear-gradient(145deg, #1e3a8a 0%, #1e40af 100%);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n \/* Column 4 - Logos *\/\n .col-4 {\n background: linear-gradient(145deg, #166534 0%, #15803d 100%);\n }\n \n \/* Column Headers *\/\n .column-header {\n color: #FCDD09;\n font-size: 20px;\n font-weight: 700;\n margin-bottom: 20px;\n text-align: center;\n padding-bottom: 12px;\n border-bottom: 2px solid rgba(252, 221, 9, 0.3);\n text-transform: uppercase;\n letter-spacing: 1px;\n }\n \n \/* Column 1 Styles *\/\n .services-content {\n flex: 1;\n line-height: 1.8;\n font-size: 16px;\n color: #f8fafc;\n }\n \n .services-content p {\n margin-bottom: 15px;\n }\n \n .services-list {\n list-style: none;\n margin: 20px 0;\n }\n \n .services-list li {\n margin-bottom: 12px;\n padding-left: 24px;\n position: relative;\n }\n \n .services-list li:before {\n content: \"\u2713\";\n position: absolute;\n left: 0;\n color: #22c55e;\n font-weight: bold;\n }\n \n .phone-number {\n background: rgba(252, 221, 9, 0.1);\n border: 1px solid rgba(252, 221, 9, 0.3);\n border-radius: 10px;\n padding: 12px;\n margin: 20px 0;\n text-align: center;\n font-size: 18px;\n font-weight: 700;\n color: #FCDD09;\n }\n \n .ad-container {\n margin-top: 20px;\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: 10px;\n padding: 10px;\n background: rgba(0, 0, 0, 0.3);\n }\n \n \/* Column 2 - Clock Styles *\/\n .yebbo-vertical-clock {\n width: 100%;\n height: 100%;\n background: #020617;\n border-radius: 20px;\n overflow: hidden;\n position: relative;\n display: flex;\n flex-direction: column;\n }\n \n .yebbo-vertical-stripes {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n z-index: 0;\n opacity: 0.15;\n }\n \n .yebbo-vertical-stripe {\n flex: 1;\n }\n \n .yebbo-vs-green { background: #078930; }\n .yebbo-vs-yellow { background: #FCDD09; }\n .yebbo-vs-red { background: #DA121A; }\n \n .yebbo-vertical-header {\n padding: 25px 20px 15px;\n text-align: center;\n position: relative;\n z-index: 1;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n background: linear-gradient(to bottom, rgba(2, 6, 23, 0.9), rgba(2, 6, 23, 0.7));\n }\n \n .yebbo-vertical-title {\n color: #FCDD09;\n font-size: 22px;\n font-weight: 800;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n margin-bottom: 5px;\n text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);\n }\n \n .yebbo-vertical-subtitle {\n color: #38bdf8;\n font-size: 14px;\n opacity: 0.9;\n font-weight: 600;\n }\n \n .yebbo-time-section {\n padding: 30px 20px;\n position: relative;\n z-index: 1;\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n }\n \n .yebbo-section-label {\n color: #e5e7eb;\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 0.15em;\n margin-bottom: 15px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n }\n \n .yebbo-section-label::before,\n .yebbo-section-label::after {\n content: '';\n flex: 1;\n height: 1px;\n background: linear-gradient(90deg, transparent, currentColor, transparent);\n }\n \n .yebbo-time-display {\n font-family: 'Share Tech Mono', monospace;\n font-size: 38px;\n text-align: center;\n color: #38bdf8;\n text-shadow: 0 0 15px rgba(56, 189, 248, 0.7);\n margin-bottom: 8px;\n font-weight: 400;\n letter-spacing: 0.05em;\n display: flex;\n align-items: baseline;\n justify-content: center;\n gap: 4px;\n }\n \n .yebbo-time-main {\n font-size: 42px;\n animation: yebbo-glow 3s ease-in-out infinite;\n }\n \n .yebbo-am-pm {\n font-size: 18px;\n color: #FCDD09;\n opacity: 0.9;\n font-weight: 600;\n margin-left: 5px;\n text-shadow: 0 0 8px rgba(252, 221, 9, 0.5);\n animation: yebbo-ampm-pulse 4s ease-in-out infinite;\n }\n \n .yebbo-date-display {\n color: #e5e7eb;\n font-size: 16px;\n text-align: center;\n opacity: 0.9;\n font-weight: 600;\n line-height: 1.4;\n }\n \n .yebbo-ethiopian-date {\n color: #FCDD09;\n font-size: 18px;\n margin-top: 5px;\n }\n \n .yebbo-timezone {\n display: inline-block;\n padding: 4px 10px;\n background: rgba(56, 189, 248, 0.1);\n border: 1px solid rgba(56, 189, 248, 0.3);\n border-radius: 12px;\n color: #38bdf8;\n font-size: 10px;\n margin-top: 10px;\n font-weight: 600;\n }\n \n .yebbo-vertical-separator {\n height: 40px;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n .yebbo-vertical-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: #22c55e;\n box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);\n position: relative;\n }\n \n .yebbo-vertical-dot::before,\n .yebbo-vertical-dot::after {\n content: '';\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n width: 1px;\n height: 15px;\n background: rgba(34, 197, 94, 0.3);\n }\n \n .yebbo-vertical-dot::before {\n bottom: 100%;\n }\n \n .yebbo-vertical-dot::after {\n top: 100%;\n }\n \n .yebbo-vertical-footer {\n padding: 20px;\n text-align: center;\n position: relative;\n z-index: 1;\n background: rgba(0, 0, 0, 0.5);\n border-top: 1px solid rgba(255, 255, 255, 0.08);\n }\n \n .yebbo-vertical-brand {\n color: #22c55e;\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 0.05em;\n line-height: 1.6;\n }\n \n .yebbo-vertical-copyright {\n color: rgba(255, 255, 255, 0.7);\n font-size: 11px;\n margin-top: 8px;\n }\n \n @keyframes yebbo-glow {\n 0%, 100% { text-shadow: 0 0 15px rgba(56, 189, 248, 0.7), 0 0 25px rgba(56, 189, 248, 0.3); }\n 50% { text-shadow: 0 0 20px rgba(56, 189, 248, 0.9), 0 0 35px rgba(56, 189, 248, 0.5), 0 0 45px rgba(56, 189, 248, 0.2); }\n }\n \n @keyframes yebbo-ampm-pulse {\n 0%, 100% { opacity: 0.9; text-shadow: 0 0 8px rgba(252, 221, 9, 0.5); }\n 50% { opacity: 1; text-shadow: 0 0 12px rgba(252, 221, 9, 0.7); }\n }\n \n \/* Column 3 - Future Use *\/\n .future-use {\n text-align: center;\n color: #cbd5e1;\n font-size: 18px;\n opacity: 0.7;\n }\n \n \/* Column 4 - Logo Rows *\/\n .logo-rows-container {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 15px;\n }\n \n .logo-row {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background: rgba(255, 255, 255, 0.05);\n border-radius: 12px;\n border: 1px solid rgba(255, 255, 255, 0.1);\n transition: all 0.3s ease;\n padding: 10px;\n cursor: pointer;\n }\n \n .logo-row:hover {\n background: rgba(255, 255, 255, 0.1);\n transform: translateY(-3px);\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\n }\n \n .logo-title {\n font-size: 14px;\n font-weight: 600;\n color: #FCDD09;\n margin-bottom: 8px;\n text-align: center;\n }\n \n .logo-image {\n max-width: 150px;\n max-height: 60px;\n object-fit: contain;\n filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));\n transition: transform 0.3s ease;\n }\n \n .logo-row:hover .logo-image {\n transform: scale(1.05);\n }\n \n \/* Bottom Row *\/\n .bottom-row {\n height: 50px;\n margin-top: 20px;\n \/* Intentionally left blank *\/\n }\n \n \/* Responsive Design *\/\n @media (max-width: 1200px) {\n .dashboard-container {\n grid-template-columns: repeat(2, 1fr);\n }\n \n .column {\n min-height: 600px;\n }\n }\n \n @media (max-width: 768px) {\n .dashboard-container {\n grid-template-columns: 1fr;\n gap: 15px;\n }\n \n .column {\n min-height: auto;\n margin-bottom: 20px;\n }\n \n .control-panel {\n flex-direction: column;\n gap: 15px;\n }\n \n .controls-left, .controls-right {\n width: 100%;\n justify-content: center;\n }\n \n .yebbo-time-main {\n font-size: 36px;\n }\n \n .yebbo-am-pm {\n font-size: 16px;\n }\n \n .logo-image {\n max-width: 120px;\n }\n \n .top-row, .bottom-row {\n height: 30px;\n }\n }\n<\/style>\n<\/head>\n\n<body>\n \n <div class=\"control-panel\">\n <div class=\"controls-left\">\n <button class=\"control-btn\" id=\"saveLayout\">\n <i class=\"fas fa-save\"><\/i> Save Layout\n <\/button>\n <button class=\"control-btn\" id=\"loadLayout\">\n <i class=\"fas fa-folder-open\"><\/i> Load Layout\n <\/button>\n <button class=\"control-btn reset\" id=\"resetLayout\">\n <i class=\"fas fa-undo\"><\/i> Reset to Default\n <\/button>\n <\/div>\n <div class=\"controls-right\">\n <div class=\"status-indicator\" id=\"statusIndicator\">\n <i class=\"fas fa-check-circle\"><\/i> Ready to Drag & Drop\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"dashboard-container\" id=\"dashboardContainer\">\n \n \n <div class=\"column col-1\" data-column=\"1\" draggable=\"true\">\n <div class=\"drag-handle\" title=\"Drag to rearrange\">\n <i class=\"fas fa-arrows-alt\"><\/i>\n <\/div>\n <h2 class=\"column-header\">\u12e8\u1266 \u12ae\u121a\u1292\u12ac\u123d\u1295 \u1294\u1275 \u12c8\u122d\u12ad<\/h2>\n <div class=\"services-content\">\n <p>\u120825 \u12a0\u1218\u1273\u1275 \u1260\u120b\u12ed \u12e8\u1235\u122b \u120d\u121d\u12f5 \u12eb\u12ab\u1260\u1270\u12cd \u12e8\u12a5\u1293\u1295\u1270\u12cd \u1260\u12a5\u1293\u1295\u1270\u12cd\u1362 \u12a8\u121d\u1230\u1323\u1278\u12cd \u12a0\u1308\u120d\u130d\u120e\u1276\u127d \u12cd\u1235\u1325:<\/p>\n \n <ul class=\"services-list\">\n <li>\u12e8\u12cd\u12ad\u120d\u1293 \u12a0\u1308\u120d\u130d\u120e\u1275 \u1218\u1235\u1320\u1275<\/li>\n <li>\u12e8\u12a2\u1275\u12ee\u1335\u12eb \u1353\u1235\u1356\u122d\u1275 \u12a0\u1308\u120d\u130d\u120e\u1275 \u1218\u1235\u1320\u1275<\/li>\n <li>\u12e8\u1262\u132b \u12ab\u122d\u12f5 \u12e8\u121b\u12cd\u1323\u1275 \u12a0\u1308\u120d\u130d\u120e\u1275<\/li>\n <li>\u12e8\u1273\u12ad\u1235 \u12a0\u1308\u120d\u130d\u120e\u1275 \u1218\u1235\u1320\u1275 (\u12e8\u1275\u121d \u12e8\u12a2\u1275\u12ee\u1335\u12eb \u130d\u12db\u1275 \u12ed\u1291\u1229)<\/li>\n <li>\u12e8\u1309\u12de \u12c8\u12aa\u120d<\/li>\n <li>\u12e8\u1275\u122d\u1309\u121d \u1235\u122b \u12a0\u1308\u120d\u130d\u120e\u1275<\/li>\n <\/ul>\n \n <div class=\"phone-number\">\n \ud83d\udcde \u1208\u1260\u1208\u1320 \u1218\u1228\u1303 \u1260\u1235\u120d\u12ad \u1241\u1325\u122d 619-255-5530 \u12ed\u12f0\u12cd\u1209\u1362\n <\/div>\n \n \n <div class=\"ad-container\">\n <script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-7297722780244848\"\n crossorigin=\"anonymous\"><\/script>\n <ins class=\"adsbygoogle\"\n style=\"display:block; width:100%; height:250px;\"\n data-ad-client=\"ca-pub-7297722780244848\"\n data-ad-slot=\"2057876812\"\n data-ad-format=\"auto\"\n data-full-width-responsive=\"true\"><\/ins>\n <script>\n (adsbygoogle = window.adsbygoogle || []).push({});\n <\/script>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"column col-2\" data-column=\"2\" draggable=\"true\">\n <div class=\"drag-handle\" title=\"Drag to rearrange\">\n <i class=\"fas fa-arrows-alt\"><\/i>\n <\/div>\n <div class=\"yebbo-vertical-clock\">\n \n <div class=\"yebbo-vertical-stripes\">\n <div class=\"yebbo-vertical-stripe yebbo-vs-green\"><\/div>\n <div class=\"yebbo-vertical-stripe yebbo-vs-yellow\"><\/div>\n <div class=\"yebbo-vertical-stripe yebbo-vs-red\"><\/div>\n <\/div>\n \n <div class=\"yebbo-vertical-header\">\n <div class=\"yebbo-vertical-title\">\u12e8\u12a2\u1275\u12ee\u1335\u12eb \u1230\u12d3\u1275<\/div>\n <div class=\"yebbo-vertical-subtitle\">Ethiopian Time Display<\/div>\n <\/div>\n \n <div class=\"yebbo-time-section\">\n <div class=\"yebbo-section-label\">Ethiopian Time<\/div>\n <div class=\"yebbo-time-display\">\n <span class=\"yebbo-time-main\" id=\"yebboVerticalEthTime\">12:00:00<\/span>\n <span class=\"yebbo-am-pm\" id=\"yebboVerticalEthAmPm\">AM<\/span>\n <\/div>\n <div class=\"yebbo-date-display\">\n <div id=\"yebboVerticalEthDate\">\u1218\u1235\u12a8\u1228\u121d 1, 2016 \u12d3.\u121d<\/div>\n <div class=\"yebbo-timezone\">GMT+3 \u2022 Addis Ababa<\/div>\n <\/div>\n <\/div>\n \n <div class=\"yebbo-vertical-separator\">\n <div class=\"yebbo-vertical-dot\"><\/div>\n <\/div>\n \n <div class=\"yebbo-time-section\">\n <div class=\"yebbo-section-label\">Local Time<\/div>\n <div class=\"yebbo-time-display\">\n <span class=\"yebbo-time-main\" id=\"yebboVerticalLocalTime\">12:00:00<\/span>\n <span class=\"yebbo-am-pm\" id=\"yebboVerticalLocalAmPm\">AM<\/span>\n <\/div>\n <div class=\"yebbo-date-display\" id=\"yebboVerticalLocalDate\">\n Monday, January 1, 2025\n <\/div>\n <\/div>\n \n <div class=\"yebbo-vertical-footer\">\n <div class=\"yebbo-vertical-brand\">\n Yebbo Communication Network\n <\/div>\n <div class=\"yebbo-vertical-copyright\">\n \u00a9 1999\u20132026 \u2022 YebboBooks \u2022 All rights reserved\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"column col-3\" data-column=\"3\" draggable=\"true\">\n <div class=\"drag-handle\" title=\"Drag to rearrange\">\n <i class=\"fas fa-arrows-alt\"><\/i>\n <\/div>\n <div class=\"future-use\">\n <div style=\"font-size: 48px; margin-bottom: 20px;\">\u23f3<\/div>\n <h3>Coming Soon<\/h3>\n <p>This space is reserved for future content.<\/p>\n <p style=\"font-size: 14px; margin-top: 20px; opacity: 0.6;\">\n Drag me anywhere!\n <\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"column col-4\" data-column=\"4\" draggable=\"true\">\n <div class=\"drag-handle\" title=\"Drag to rearrange\">\n <i class=\"fas fa-arrows-alt\"><\/i>\n <\/div>\n <h2 class=\"column-header\">Our Services<\/h2>\n \n <div class=\"logo-rows-container\">\n \n <div class=\"logo-row\" onclick=\"window.open('https:\/\/yebbo.com', '_blank')\">\n <div class=\"logo-title\">YebboTravel<\/div>\n <img decoding=\"async\" src=\"https:\/\/yebbo.com\/2013\/wp-content\/uploads\/2025\/12\/ChatGPT-Image-Dec-14-2025-07_31_40-PM-768x768.png\" \n alt=\"YebboTravel Logo\" \n class=\"logo-image\"\n onerror=\"this.src='https:\/\/via.placeholder.com\/150x60\/078930\/ffffff?text=YebboTravel'\">\n <\/div>\n \n \n <div class=\"logo-row\" onclick=\"window.open('https:\/\/yebbo.com', '_blank')\">\n <div class=\"logo-title\">YebboTax<\/div>\n <img decoding=\"async\" src=\"https:\/\/yebbo.com\/2013\/wp-content\/uploads\/2025\/12\/ChatGPT-Image-Dec-14-2025-07_31_40-PM-768x768.png\" \n alt=\"YebboTax Logo\" \n class=\"logo-image\"\n onerror=\"this.src='https:\/\/via.placeholder.com\/150x60\/FCDD09\/000000?text=YebboTax'\">\n <\/div>\n \n \n <div class=\"logo-row\" onclick=\"window.open('https:\/\/wilina.net', '_blank')\">\n <div class=\"logo-title\">Wilina.net<\/div>\n <img decoding=\"async\" src=\"https:\/\/yebbo.com\/2013\/wp-content\/uploads\/2025\/12\/WikilinaLogo-1.png\" \n alt=\"Wilina.net Logo\" \n class=\"logo-image\"\n onerror=\"this.src='https:\/\/via.placeholder.com\/150x60\/DA121A\/ffffff?text=Wilina.net'\">\n <\/div>\n \n \n <div class=\"logo-row\" onclick=\"window.open('https:\/\/www.ethiotrans.com', '_blank')\">\n <div class=\"logo-title\">Ethiotrans.com<\/div>\n <img decoding=\"async\" src=\"https:\/\/yebbo.com\/2013\/wp-content\/uploads\/2025\/12\/ChatGPT-Image-Dec-14-2025-09_50_06-AM-768x768.png\" \n alt=\"Ethiotrans.com Logo\" \n class=\"logo-image\"\n onerror=\"this.src='https:\/\/via.placeholder.com\/150x60\/38bdf8\/ffffff?text=Ethiotrans'\">\n <\/div>\n \n \n <div class=\"logo-row\" onclick=\"window.open('https:\/\/yebbo.com', '_blank')\">\n <div class=\"logo-title\">Global Passport Photos<\/div>\n <img decoding=\"async\" src=\"https:\/\/yebbo.com\/2013\/wp-content\/uploads\/2025\/12\/Global-Passport-and-Visa-Photos-Logo-1-380x254.png\" \n alt=\"Global Passport Photos Logo\" \n class=\"logo-image\"\n onerror=\"this.src='https:\/\/via.placeholder.com\/150x60\/22c55e\/ffffff?text=Passport+Photos'\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bottom-row\"><\/div>\n\n<script>\n\/\/ Ethiopian Calendar Functions\nfunction gregorianToJDN(year, month, day) {\n const a = Math.floor((14 - month) \/ 12);\n const y = year + 4800 - a;\n const m = month + 12 * a - 3;\n return day + Math.floor((153 * m + 2) \/ 5) + \n 365 * y + Math.floor(y \/ 4) - \n Math.floor(y \/ 100) + Math.floor(y \/ 400) - 32045;\n}\n\nfunction jdnToEthiopian(jdn) {\n const ETHIOPIC_EPOCH = 1723856;\n const diff = jdn - ETHIOPIC_EPOCH;\n const r = diff % 1461;\n const n = Math.floor(diff \/ 1461);\n const year = 4 * n + Math.floor(r \/ 365);\n const dayOfYear = (r % 365) + 1;\n const month = Math.floor((dayOfYear - 1) \/ 30) + 1;\n const day = ((dayOfYear - 1) % 30) + 1;\n return { year, month, day };\n}\n\n\/\/ Ethiopian Month Names\nconst ETHIOPIC_MONTHS = [\n \"\u1218\u1235\u12a8\u1228\u121d\", \"\u1325\u1245\u121d\u1275\", \"\u1205\u12f3\u122d\", \"\u1273\u1205\u1233\u1235\", \"\u1325\u122d\", \"\u12e8\u12ab\u1272\u1275\",\n \"\u1218\u130b\u1262\u1275\", \"\u121a\u12eb\u12da\u12eb\", \"\u130d\u1295\u1266\u1275\", \"\u1230\u1294\", \"\u1210\u121d\u120c\", \"\u1290\u1210\u1234\", \"\u1333\u1309\u121c\u1295\"\n];\n\n\/\/ English Day Names for Ethiopian Date\nconst ENGLISH_DAYS = [\n \"Sunday\", \"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\"\n];\n\nconst ENGLISH_MONTHS = [\n \"January\", \"February\", \"March\", \"April\", \"May\", \"June\",\n \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"\n];\n\n\/\/ Helper Functions\nfunction padZero(num) {\n return String(num).padStart(2, '0');\n}\n\nfunction updateElement(id, text) {\n const element = document.getElementById(id);\n if (element) element.textContent = text;\n}\n\n\/\/ Format time in 12-hour format with AM\/PM\nfunction formatTime12Hour(hours, minutes, seconds) {\n \/\/ Convert to 12-hour format\n const hour12 = hours % 12 || 12; \/\/ 0 becomes 12\n const ampm = hours >= 12 ? 'PM' : 'AM';\n \n return {\n time: `${padZero(hour12)}:${padZero(minutes)}:${padZero(seconds)}`,\n ampm: ampm\n };\n}\n\n\/\/ Format Ethiopian date with weekday\nfunction formatEthiopianDateFull(ethDate) {\n const monthName = ETHIOPIC_MONTHS[ethDate.month - 1];\n return `${monthName} ${ethDate.day}, ${ethDate.year} \u12d3.\u121d`;\n}\n\n\/\/ Format local date nicely\nfunction formatLocalDateFull(date) {\n const day = ENGLISH_DAYS[date.getDay()];\n const month = ENGLISH_MONTHS[date.getMonth()];\n const dayNum = date.getDate();\n const year = date.getFullYear();\n return `${day}, ${month} ${dayNum}, ${year}`;\n}\n\n\/\/ Update Clock\nfunction updateClock() {\n const now = new Date();\n \n \/\/ Local Time (12-hour format)\n const localHours = now.getHours();\n const localMinutes = now.getMinutes();\n const localSeconds = now.getSeconds();\n const localTime12 = formatTime12Hour(localHours, localMinutes, localSeconds);\n \n \/\/ Update Local Time Display with AM\/PM\n updateElement('yebboVerticalLocalTime', localTime12.time);\n updateElement('yebboVerticalLocalAmPm', localTime12.ampm);\n updateElement('yebboVerticalLocalDate', formatLocalDateFull(now));\n \n \/\/ Ethiopian Time (Addis Ababa timezone)\n const addisAbabaTime = new Date(\n now.toLocaleString('en-US', { timeZone: 'Africa\/Addis_Ababa' })\n );\n \n \/\/ Ethiopian Time Format (12-hour)\n const ethHours = addisAbabaTime.getHours();\n const ethMinutes = addisAbabaTime.getMinutes();\n const ethSeconds = addisAbabaTime.getSeconds();\n const ethTime12 = formatTime12Hour(ethHours, ethMinutes, ethSeconds);\n \n \/\/ Update Ethiopian Time Display with AM\/PM\n updateElement('yebboVerticalEthTime', ethTime12.time);\n updateElement('yebboVerticalEthAmPm', ethTime12.ampm);\n \n \/\/ Calculate Ethiopian Date\n const ethGregorianYear = addisAbabaTime.getFullYear();\n const ethGregorianMonth = addisAbabaTime.getMonth() + 1;\n const ethGregorianDay = addisAbabaTime.getDate();\n \n const jdn = gregorianToJDN(ethGregorianYear, ethGregorianMonth, ethGregorianDay);\n const ethDate = jdnToEthiopian(jdn);\n \n \/\/ Update Ethiopian Date Display\n updateElement('yebboVerticalEthDate', formatEthiopianDateFull(ethDate));\n \n \/\/ Update AM\/PM indicator colors\n updateAmPmColors();\n}\n\n\/\/ Update AM\/PM indicator colors based on time\nfunction updateAmPmColors() {\n const ethAmPm = document.getElementById('yebboVerticalEthAmPm');\n const localAmPm = document.getElementById('yebboVerticalLocalAmPm');\n \n if (ethAmPm) {\n if (ethAmPm.textContent === 'AM') {\n ethAmPm.style.color = '#38bdf8'; \/\/ Blue for AM\n ethAmPm.style.textShadow = '0 0 8px rgba(56, 189, 248, 0.5)';\n } else {\n ethAmPm.style.color = '#FCDD09'; \/\/ Yellow for PM\n ethAmPm.style.textShadow = '0 0 8px rgba(252, 221, 9, 0.5)';\n }\n }\n \n if (localAmPm) {\n if (localAmPm.textContent === 'AM') {\n localAmPm.style.color = '#38bdf8'; \/\/ Blue for AM\n localAmPm.style.textShadow = '0 0 8px rgba(56, 189, 248, 0.5)';\n } else {\n localAmPm.style.color = '#FCDD09'; \/\/ Yellow for PM\n localAmPm.style.textShadow = '0 0 8px rgba(252, 221, 9, 0.5)';\n }\n }\n}\n\n\/\/ Initialize Clock\nfunction initializeClock() {\n \/\/ Initial update\n updateClock();\n \n \/\/ Update every second\n setInterval(updateClock, 1000);\n \n \/\/ Add hover effects to clock\n const clock = document.querySelector('.yebbo-vertical-clock');\n if (clock) {\n clock.addEventListener('mouseenter', () => {\n clock.style.transform = 'translateY(-5px)';\n clock.style.boxShadow = '0 20px 40px rgba(0, 0, 0, 0.8)';\n });\n \n clock.addEventListener('mouseleave', () => {\n clock.style.transform = 'translateY(0)';\n clock.style.boxShadow = 'none';\n });\n }\n}\n\n\/\/ =============================================\n\/\/ DRAG & DROP FUNCTIONALITY\n\/\/ =============================================\n\nlet draggedColumn = null;\nlet draggedIndex = null;\nlet defaultLayout = [1, 2, 3, 4]; \/\/ Default column order\n\n\/\/ Initialize drag & drop\nfunction initializeDragAndDrop() {\n const columns = document.querySelectorAll('.column');\n const container = document.getElementById('dashboardContainer');\n \n \/\/ Add drag event listeners to all columns\n columns.forEach(column => {\n column.addEventListener('dragstart', handleDragStart);\n column.addEventListener('dragend', handleDragEnd);\n column.addEventListener('dragover', handleDragOver);\n column.addEventListener('dragenter', handleDragEnter);\n column.addEventListener('dragleave', handleDragLeave);\n column.addEventListener('drop', handleDrop);\n \n \/\/ Also make drag handles work\n const dragHandle = column.querySelector('.drag-handle');\n if (dragHandle) {\n dragHandle.addEventListener('mousedown', () => {\n column.draggable = true;\n });\n \n dragHandle.addEventListener('mouseup', () => {\n column.draggable = false;\n });\n }\n });\n \n \/\/ Initialize control buttons\n document.getElementById('saveLayout').addEventListener('click', saveLayout);\n document.getElementById('loadLayout').addEventListener('click', loadLayout);\n document.getElementById('resetLayout').addEventListener('click', resetLayout);\n \n \/\/ Load saved layout if exists\n loadSavedLayout();\n}\n\n\/\/ Drag & Drop Handlers\nfunction handleDragStart(e) {\n draggedColumn = this;\n draggedIndex = Array.from(this.parentNode.children).indexOf(this);\n \n \/\/ Add visual feedback\n this.classList.add('dragging');\n \n \/\/ Set drag effect\n e.dataTransfer.effectAllowed = 'move';\n e.dataTransfer.setData('text\/plain', this.getAttribute('data-column'));\n \n \/\/ Update status indicator\n updateStatus(`Dragging column ${this.getAttribute('data-column')}`);\n}\n\nfunction handleDragEnd(e) {\n \/\/ Remove visual feedback from all columns\n const columns = document.querySelectorAll('.column');\n columns.forEach(col => {\n col.classList.remove('dragging');\n col.classList.remove('drop-zone');\n });\n \n draggedColumn = null;\n draggedIndex = null;\n \n \/\/ Update status indicator\n updateStatus('Ready to Drag & Drop');\n}\n\nfunction handleDragOver(e) {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n return false;\n}\n\nfunction handleDragEnter(e) {\n e.preventDefault();\n if (this !== draggedColumn) {\n this.classList.add('drop-zone');\n }\n}\n\nfunction handleDragLeave(e) {\n this.classList.remove('drop-zone');\n}\n\nfunction handleDrop(e) {\n e.preventDefault();\n e.stopPropagation();\n \n if (draggedColumn && this !== draggedColumn) {\n const container = this.parentNode;\n const targetIndex = Array.from(container.children).indexOf(this);\n \n \/\/ Remove drop zone styling\n this.classList.remove('drop-zone');\n \n \/\/ Reorder columns\n if (draggedIndex < targetIndex) {\n container.insertBefore(draggedColumn, this.nextSibling);\n } else {\n container.insertBefore(draggedColumn, this);\n }\n \n \/\/ Update status\n updateStatus('Layout updated!');\n \n \/\/ Save the new layout\n saveCurrentLayout();\n }\n \n return false;\n}\n\n\/\/ Layout Management Functions\nfunction saveCurrentLayout() {\n const container = document.getElementById('dashboardContainer');\n const columns = Array.from(container.children);\n const layout = columns.map(col => parseInt(col.getAttribute('data-column')));\n \n \/\/ Save to localStorage\n localStorage.setItem('yebboDashboardLayout', JSON.stringify(layout));\n \n \/\/ Show visual feedback\n showNotification('Layout saved successfully!');\n}\n\nfunction loadSavedLayout() {\n const savedLayout = localStorage.getItem('yebboDashboardLayout');\n \n if (savedLayout) {\n try {\n const layout = JSON.parse(savedLayout);\n applyLayout(layout);\n updateStatus('Loaded saved layout');\n } catch (e) {\n console.error('Error loading layout:', e);\n applyLayout(defaultLayout);\n }\n }\n}\n\nfunction applyLayout(layout) {\n const container = document.getElementById('dashboardContainer');\n const columns = Array.from(container.children);\n \n \/\/ Create a map of columns by their data-column attribute\n const columnMap = {};\n columns.forEach(col => {\n const colNum = parseInt(col.getAttribute('data-column'));\n columnMap[colNum] = col;\n });\n \n \/\/ Clear container\n container.innerHTML = '';\n \n \/\/ Re-add columns in the specified order\n layout.forEach(colNum => {\n if (columnMap[colNum]) {\n container.appendChild(columnMap[colNum]);\n }\n });\n \n \/\/ Re-initialize drag events\n initializeDragAndDrop();\n}\n\nfunction saveLayout() {\n saveCurrentLayout();\n showNotification('Layout saved to browser storage!');\n}\n\nfunction loadLayout() {\n loadSavedLayout();\n showNotification('Layout loaded from browser storage!');\n}\n\nfunction resetLayout() {\n if (confirm('Reset to default layout?')) {\n applyLayout(defaultLayout);\n localStorage.removeItem('yebboDashboardLayout');\n updateStatus('Reset to default layout');\n showNotification('Layout reset to default!');\n }\n}\n\n\/\/ UI Helper Functions\nfunction updateStatus(message) {\n const statusIndicator = document.getElementById('statusIndicator');\n statusIndicator.innerHTML = `<i class=\"fas fa-check-circle\"><\/i> ${message}`;\n}\n\nfunction showNotification(message) {\n \/\/ Create notification element\n const notification = document.createElement('div');\n notification.style.cssText = `\n position: fixed;\n top: 20px;\n right: 20px;\n background: #22c55e;\n color: white;\n padding: 12px 20px;\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0,0,0,0.3);\n z-index: 1000;\n font-weight: 600;\n animation: slideIn 0.3s ease;\n `;\n \n \/\/ Add CSS for animation\n const style = document.createElement('style');\n style.textContent = `\n @keyframes slideIn {\n from { transform: translateX(100%); opacity: 0; }\n to { transform: translateX(0); opacity: 1; }\n }\n `;\n document.head.appendChild(style);\n \n notification.textContent = message;\n document.body.appendChild(notification);\n \n \/\/ Remove after 3 seconds\n setTimeout(() => {\n notification.style.animation = 'slideIn 0.3s ease reverse';\n setTimeout(() => {\n document.body.removeChild(notification);\n document.head.removeChild(style);\n }, 300);\n }, 3000);\n}\n\n\/\/ Initialize everything when DOM is loaded\ndocument.addEventListener('DOMContentLoaded', () => {\n initializeClock();\n initializeDragAndDrop();\n});\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Yebbo Communication Network – Drag & Drop Dashboard Save Layout Load Layout Reset to Default Ready to Drag & Drop […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1],"tags":[],"class_list":["post-635","post","type-post","status-publish","format-standard","hentry","category-ethiodiego"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8nzgb-af","jetpack_likes_enabled":true,"_links":{"self":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/posts\/635","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/comments?post=635"}],"version-history":[{"count":1,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/posts\/635\/revisions"}],"predecessor-version":[{"id":640,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/posts\/635\/revisions\/640"}],"wp:attachment":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/media?parent=635"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/categories?post=635"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/tags?post=635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}