Yebbo Communication Network – Single Column 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 max-width: 800px;\n margin-left: auto;\n margin-right: auto;\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 Single Column Container *\/\n .single-column-container {\n max-width: 800px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n gap: 20px;\n }\n \n \/* Row Styles *\/\n .row {\n background: rgba(15, 23, 42, 0.8);\n border-radius: 16px;\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 position: relative;\n transition: all 0.3s ease;\n }\n \n \/* Drag Handle *\/\n .drag-handle {\n position: absolute;\n top: 15px;\n right: 15px;\n width: 35px;\n height: 35px;\n background: rgba(252, 221, 9, 0.1);\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: grab;\n color: #FCDD09;\n font-size: 16px;\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: scale(0.98);\n box-shadow: 0 15px 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 \/* Row Content Padding *\/\n .row-content {\n padding: 25px;\n }\n \n \/* Row 1: Services Description *\/\n .row-1 {\n background: linear-gradient(145deg, #0c4a6e 0%, #075985 100%);\n }\n \n \/* Row 2: Ethiopian Clock *\/\n .row-2 {\n background: linear-gradient(145deg, #020617 0%, #0f172a 100%);\n padding: 0;\n }\n \n \/* Row 3: Logos Grid *\/\n .row-3 {\n background: linear-gradient(145deg, #166534 0%, #15803d 100%);\n }\n \n \/* Row 4: Google Ad *\/\n .row-4 {\n background: linear-gradient(145deg, #1e3a8a 0%, #1e40af 100%);\n }\n \n \/* Row 5: Future Use *\/\n .row-5 {\n background: linear-gradient(145deg, #7c2d12 0%, #9a3412 100%);\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 200px;\n }\n \n \/* Row Headers *\/\n .row-header {\n color: #FCDD09;\n font-size: 22px;\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 \/* Row 1 Styles *\/\n .services-content {\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 \/* Row 2 - Clock Styles *\/\n .yebbo-horizontal-clock {\n width: 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-horizontal-stripes {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n z-index: 0;\n opacity: 0.15;\n }\n \n .yebbo-horizontal-stripe {\n flex: 1;\n }\n \n .yebbo-hs-green { background: #078930; }\n .yebbo-hs-yellow { background: #FCDD09; }\n .yebbo-hs-red { background: #DA121A; }\n \n .yebbo-horizontal-header {\n padding: 20px;\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-horizontal-title {\n color: #FCDD09;\n font-size: 24px;\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-horizontal-subtitle {\n color: #38bdf8;\n font-size: 16px;\n opacity: 0.9;\n font-weight: 600;\n }\n \n .yebbo-horizontal-time-container {\n display: flex;\n justify-content: space-around;\n padding: 30px 20px;\n position: relative;\n z-index: 1;\n }\n \n .yebbo-time-block {\n text-align: center;\n flex: 1;\n padding: 0 15px;\n }\n \n .yebbo-time-block-label {\n color: #e5e7eb;\n font-size: 14px;\n text-transform: uppercase;\n letter-spacing: 0.15em;\n margin-bottom: 15px;\n display: block;\n font-weight: 600;\n }\n \n .yebbo-horizontal-time {\n font-family: 'Share Tech Mono', monospace;\n font-size: 36px;\n color: #38bdf8;\n text-shadow: 0 0 15px rgba(56, 189, 248, 0.7);\n font-weight: 400;\n letter-spacing: 0.05em;\n display: flex;\n align-items: baseline;\n justify-content: center;\n gap: 4px;\n margin-bottom: 10px;\n }\n \n .yebbo-time-main {\n font-size: 40px;\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 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: 11px;\n margin-top: 10px;\n font-weight: 600;\n }\n \n .yebbo-horizontal-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-horizontal-brand {\n color: #22c55e;\n font-size: 14px;\n font-weight: 600;\n letter-spacing: 0.05em;\n line-height: 1.6;\n }\n \n .yebbo-horizontal-copyright {\n color: rgba(255, 255, 255, 0.7);\n font-size: 12px;\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 \/* Row 3 - Logos Grid *\/\n .logos-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 20px;\n margin-top: 20px;\n }\n \n @media (max-width: 600px) {\n .logos-grid {\n grid-template-columns: 1fr;\n }\n }\n \n .logo-card {\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: 20px;\n cursor: pointer;\n text-align: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 150px;\n }\n \n .logo-card:hover {\n background: rgba(255, 255, 255, 0.1);\n transform: translateY(-5px);\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);\n }\n \n .logo-card-title {\n font-size: 16px;\n font-weight: 700;\n color: #FCDD09;\n margin-bottom: 15px;\n text-align: center;\n }\n \n .logo-card-image {\n max-width: 120px;\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-card:hover .logo-card-image {\n transform: scale(1.1);\n }\n \n \/* Row 4 - Google Ad *\/\n .ad-row {\n text-align: center;\n padding: 30px 20px;\n }\n \n .ad-container {\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: 12px;\n padding: 20px;\n background: rgba(0, 0, 0, 0.3);\n max-width: 100%;\n margin: 0 auto;\n }\n \n \/* Row 5 - Future Use *\/\n .future-use {\n text-align: center;\n color: #f8fafc;\n padding: 40px 20px;\n }\n \n .future-use h3 {\n font-size: 24px;\n margin-bottom: 15px;\n color: #FCDD09;\n }\n \n .future-use p {\n font-size: 16px;\n opacity: 0.8;\n max-width: 500px;\n margin: 0 auto;\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: 768px) {\n .control-panel {\n flex-direction: column;\n gap: 15px;\n padding: 15px;\n }\n \n .controls-left, .controls-right {\n width: 100%;\n justify-content: center;\n flex-wrap: wrap;\n }\n \n .yebbo-horizontal-time-container {\n flex-direction: column;\n gap: 30px;\n }\n \n .yebbo-time-block {\n padding: 0;\n }\n \n .yebbo-time-main {\n font-size: 36px;\n }\n \n .yebbo-am-pm {\n font-size: 16px;\n }\n \n .row-content {\n padding: 20px 15px;\n }\n }\n \n @media (max-width: 480px) {\n .control-btn {\n padding: 8px 12px;\n font-size: 13px;\n }\n \n .status-indicator {\n font-size: 13px;\n padding: 6px 10px;\n }\n \n .row-header {\n font-size: 20px;\n }\n \n .yebbo-horizontal-title {\n font-size: 20px;\n }\n \n .yebbo-time-main {\n font-size: 32px;\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 Order\n <\/button>\n <\/div>\n <div class=\"controls-right\">\n <div class=\"status-indicator\" id=\"statusIndicator\">\n <i class=\"fas fa-check-circle\"><\/i> Drag & Drop Rows\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"single-column-container\" id=\"dashboardContainer\">\n \n \n <div class=\"row row-1\" data-row=\"1\" draggable=\"true\">\n <div class=\"drag-handle\" title=\"Drag to rearrange\">\n <i class=\"fas fa-arrows-alt\"><\/i>\n <\/div>\n <div class=\"row-content\">\n <h2 class=\"row-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 ? \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 <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"row row-2\" data-row=\"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-horizontal-clock\">\n \n <div class=\"yebbo-horizontal-stripes\">\n <div class=\"yebbo-horizontal-stripe yebbo-hs-green\"><\/div>\n <div class=\"yebbo-horizontal-stripe yebbo-hs-yellow\"><\/div>\n <div class=\"yebbo-horizontal-stripe yebbo-hs-red\"><\/div>\n <\/div>\n \n <div class=\"yebbo-horizontal-header\">\n <div class=\"yebbo-horizontal-title\">\u12e8\u12a2\u1275\u12ee\u1335\u12eb \u1230\u12d3\u1275<\/div>\n <div class=\"yebbo-horizontal-subtitle\">Ethiopian Time Display<\/div>\n <\/div>\n \n <div class=\"yebbo-horizontal-time-container\">\n \n <div class=\"yebbo-time-block\">\n <span class=\"yebbo-time-block-label\">Ethiopian Time<\/span>\n <div class=\"yebbo-horizontal-time\">\n <span class=\"yebbo-time-main\" id=\"yebboHorizontalEthTime\">12:00:00<\/span>\n <span class=\"yebbo-am-pm\" id=\"yebboHorizontalEthAmPm\">AM<\/span>\n <\/div>\n <div class=\"yebbo-date-display\">\n <div id=\"yebboHorizontalEthDate\">\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 \n <div class=\"yebbo-time-block\">\n <span class=\"yebbo-time-block-label\">Local Time<\/span>\n <div class=\"yebbo-horizontal-time\">\n <span class=\"yebbo-time-main\" id=\"yebboHorizontalLocalTime\">12:00:00<\/span>\n <span class=\"yebbo-am-pm\" id=\"yebboHorizontalLocalAmPm\">AM<\/span>\n <\/div>\n <div class=\"yebbo-date-display\" id=\"yebboHorizontalLocalDate\">\n Monday, January 1, 2025\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"yebbo-horizontal-footer\">\n <div class=\"yebbo-horizontal-brand\">\n Yebbo Communication Network\n <\/div>\n <div class=\"yebbo-horizontal-copyright\">\n \u00a9 1999\u20132026 \u2022 YebboBooks \u2022 All rights reserved\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"row row-3\" data-row=\"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=\"row-content\">\n <h2 class=\"row-header\">Our Services<\/h2>\n \n <div class=\"logos-grid\">\n \n <div class=\"logo-card\" onclick=\"window.open('https:\/\/yebbo.com', '_blank')\">\n <div class=\"logo-card-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-card-image\"\n onerror=\"this.src='https:\/\/via.placeholder.com\/120x60\/078930\/ffffff?text=YebboTravel'\">\n <\/div>\n \n \n <div class=\"logo-card\" onclick=\"window.open('https:\/\/yebbo.com', '_blank')\">\n <div class=\"logo-card-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-card-image\"\n onerror=\"this.src='https:\/\/via.placeholder.com\/120x60\/FCDD09\/000000?text=YebboTax'\">\n <\/div>\n \n \n <div class=\"logo-card\" onclick=\"window.open('https:\/\/wilina.net', '_blank')\">\n <div class=\"logo-card-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-card-image\"\n onerror=\"this.src='https:\/\/via.placeholder.com\/120x60\/DA121A\/ffffff?text=Wilina.net'\">\n <\/div>\n \n \n <div class=\"logo-card\" onclick=\"window.open('https:\/\/www.ethiotrans.com', '_blank')\">\n <div class=\"logo-card-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-card-image\"\n onerror=\"this.src='https:\/\/via.placeholder.com\/120x60\/38bdf8\/ffffff?text=Ethiotrans'\">\n <\/div>\n \n \n <div class=\"logo-card\" onclick=\"window.open('https:\/\/yebbo.com', '_blank')\">\n <div class=\"logo-card-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-card-image\"\n onerror=\"this.src='https:\/\/via.placeholder.com\/120x60\/22c55e\/ffffff?text=Passport+Photos'\">\n <\/div>\n \n \n <div class=\"logo-card\" onclick=\"window.open('https:\/\/yebbo.com', '_blank')\">\n <div class=\"logo-card-title\">YebboBooks<\/div>\n <div style=\"font-size: 48px; color: #FCDD09;\">?<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"row row-4\" data-row=\"4\" draggable=\"true\">\n <div class=\"drag-handle\" title=\"Drag to rearrange\">\n <i class=\"fas fa-arrows-alt\"><\/i>\n <\/div>\n <div class=\"ad-row\">\n <h2 class=\"row-header\">Sponsored Content<\/h2>\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=\"row row-5\" data-row=\"5\" 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; color: #FCDD09;\">?<\/div>\n <h3>Coming Soon<\/h3>\n <p>This space is reserved for future content and features.<\/p>\n <p style=\"margin-top: 15px; font-size: 14px; opacity: 0.7;\">\n Drag me to reorder the rows!\n <\/p>\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('yebboHorizontalLocalTime', localTime12.time);\n updateElement('yebboHorizontalLocalAmPm', localTime12.ampm);\n updateElement('yebboHorizontalLocalDate', 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('yebboHorizontalEthTime', ethTime12.time);\n updateElement('yebboHorizontalEthAmPm', 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('yebboHorizontalEthDate', 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('yebboHorizontalEthAmPm');\n const localAmPm = document.getElementById('yebboHorizontalLocalAmPm');\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\n\/\/ =============================================\n\/\/ DRAG & DROP FUNCTIONALITY FOR SINGLE COLUMN\n\/\/ =============================================\n\nlet draggedRow = null;\nlet draggedIndex = null;\nlet defaultLayout = [1, 2, 3, 4, 5]; \/\/ Default row order\n\n\/\/ Initialize drag & drop\nfunction initializeDragAndDrop() {\n const rows = document.querySelectorAll('.row');\n const container = document.getElementById('dashboardContainer');\n \n \/\/ Add drag event listeners to all rows\n rows.forEach(row => {\n row.addEventListener('dragstart', handleDragStart);\n row.addEventListener('dragend', handleDragEnd);\n row.addEventListener('dragover', handleDragOver);\n row.addEventListener('dragenter', handleDragEnter);\n row.addEventListener('dragleave', handleDragLeave);\n row.addEventListener('drop', handleDrop);\n \n \/\/ Also make drag handles work\n const dragHandle = row.querySelector('.drag-handle');\n if (dragHandle) {\n dragHandle.addEventListener('mousedown', () => {\n row.draggable = true;\n });\n \n dragHandle.addEventListener('mouseup', () => {\n row.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 draggedRow = 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-row'));\n \n \/\/ Update status indicator\n updateStatus(`Dragging row ${this.getAttribute('data-row')}`);\n}\n\nfunction handleDragEnd(e) {\n \/\/ Remove visual feedback from all rows\n const rows = document.querySelectorAll('.row');\n rows.forEach(row => {\n row.classList.remove('dragging');\n row.classList.remove('drop-zone');\n });\n \n draggedRow = 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 !== draggedRow) {\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 (draggedRow && this !== draggedRow) {\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 rows\n if (draggedIndex < targetIndex) {\n container.insertBefore(draggedRow, this.nextSibling);\n } else {\n container.insertBefore(draggedRow, 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 rows = Array.from(container.children);\n const layout = rows.map(row => parseInt(row.getAttribute('data-row')));\n \n \/\/ Save to localStorage\n localStorage.setItem('yebboSingleColumnLayout', JSON.stringify(layout));\n \n \/\/ Show visual feedback\n showNotification('Row order saved!');\n}\n\nfunction loadSavedLayout() {\n const savedLayout = localStorage.getItem('yebboSingleColumnLayout');\n \n if (savedLayout) {\n try {\n const layout = JSON.parse(savedLayout);\n applyLayout(layout);\n updateStatus('Loaded saved row order');\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 rows = Array.from(container.children);\n \n \/\/ Create a map of rows by their data-row attribute\n const rowMap = {};\n rows.forEach(row => {\n const rowNum = parseInt(row.getAttribute('data-row'));\n rowMap[rowNum] = row;\n });\n \n \/\/ Clear container\n container.innerHTML = '';\n \n \/\/ Re-add rows in the specified order\n layout.forEach(rowNum => {\n if (rowMap[rowNum]) {\n container.appendChild(rowMap[rowNum]);\n }\n });\n \n \/\/ Re-initialize drag events\n initializeDragAndDrop();\n}\n\nfunction saveLayout() {\n saveCurrentLayout();\n showNotification('Row order saved to browser storage!');\n}\n\nfunction loadLayout() {\n loadSavedLayout();\n showNotification('Row order loaded from browser storage!');\n}\n\nfunction resetLayout() {\n if (confirm('Reset to default row order?')) {\n applyLayout(defaultLayout);\n localStorage.removeItem('yebboSingleColumnLayout');\n updateStatus('Reset to default row order');\n showNotification('Row order 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 – Single Column Dashboard Save Layout Load Layout Reset Order Drag & Drop Rows \u12e8\u1266 \u12ae\u121a\u1292\u12ac\u123d\u1295 \u1294\u1275 \u12c8\u122d\u12ad \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: \u12e8\u12cd\u12ad\u120d\u1293 \u12a0\u1308\u120d\u130d\u120e\u1275 \u1218\u1235\u1320\u1275 \u12e8\u12a2\u1275\u12ee\u1335\u12eb \u1353\u1235\u1356\u122d\u1275 \u12a0\u1308\u120d\u130d\u120e\u1275 \u1218\u1235\u1320\u1275 \u12e8\u1262\u132b \u12ab\u122d\u12f5 \u12e8\u121b\u12cd\u1323\u1275 \u12a0\u1308\u120d\u130d\u120e\u1275 \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) \u12e8\u1309\u12de \u12c8\u12aa\u120d \u12e8\u1275\u122d\u1309\u121d \u1235\u122b \u12a0\u1308\u120d\u130d\u120e\u1275<span class=\"post-excerpt-end\">…<\/span><\/p>\n<p class=\"more-link\"><a href=\"https:\/\/yebbo.com\/2013\/2026\/01\/31\/%e1%8b%a8%e1%8a%a2%e1%89%b5%e1%8b%ae%e1%8c%b5%e1%8b%ab-%e1%88%b0%e1%8b%93%e1%89%b5\/\" class=\"themebutton\">Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_seo_schema_type":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1],"tags":[],"class_list":["post-224","post","type-post","status-publish","format-standard","hentry","category-blog"],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/posts\/224","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/comments?post=224"}],"version-history":[{"count":1,"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/posts\/224\/revisions"}],"predecessor-version":[{"id":225,"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/posts\/224\/revisions\/225"}],"wp:attachment":[{"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/media?parent=224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/categories?post=224"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/tags?post=224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":224,"date":"2026-01-31T00:00:54","date_gmt":"2026-01-31T00:00:54","guid":{"rendered":"https:\/\/yebbo.com\/2013\/?p=224"},"modified":"2026-01-31T00:00:54","modified_gmt":"2026-01-31T00:00:54","slug":"%e1%8b%a8%e1%8a%a2%e1%89%b5%e1%8b%ae%e1%8c%b5%e1%8b%ab-%e1%88%b0%e1%8b%93%e1%89%b5","status":"publish","type":"post","link":"https:\/\/yebbo.com\/2013\/2026\/01\/31\/%e1%8b%a8%e1%8a%a2%e1%89%b5%e1%8b%ae%e1%8c%b5%e1%8b%ab-%e1%88%b0%e1%8b%93%e1%89%b5\/","title":{"rendered":"\u12e8\u12a2\u1275\u12ee\u1335\u12eb \u1230\u12d3\u1275"},"content":{"rendered":"\n\n\n\n\n\nYebbo Communication Network – Single Column 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 max-width: 800px;\n margin-left: auto;\n margin-right: auto;\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 Single Column Container *\/\n .single-column-container {\n max-width: 800px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n gap: 20px;\n }\n \n \/* Row Styles *\/\n .row {\n background: rgba(15, 23, 42, 0.8);\n border-radius: 16px;\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 position: relative;\n transition: all 0.3s ease;\n }\n \n \/* Drag Handle *\/\n .drag-handle {\n position: absolute;\n top: 15px;\n right: 15px;\n width: 35px;\n height: 35px;\n background: rgba(252, 221, 9, 0.1);\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: grab;\n color: #FCDD09;\n font-size: 16px;\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: scale(0.98);\n box-shadow: 0 15px 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 \/* Row Content Padding *\/\n .row-content {\n padding: 25px;\n }\n \n \/* Row 1: Services Description *\/\n .row-1 {\n background: linear-gradient(145deg, #0c4a6e 0%, #075985 100%);\n }\n \n \/* Row 2: Ethiopian Clock *\/\n .row-2 {\n background: linear-gradient(145deg, #020617 0%, #0f172a 100%);\n padding: 0;\n }\n \n \/* Row 3: Logos Grid *\/\n .row-3 {\n background: linear-gradient(145deg, #166534 0%, #15803d 100%);\n }\n \n \/* Row 4: Google Ad *\/\n .row-4 {\n background: linear-gradient(145deg, #1e3a8a 0%, #1e40af 100%);\n }\n \n \/* Row 5: Future Use *\/\n .row-5 {\n background: linear-gradient(145deg, #7c2d12 0%, #9a3412 100%);\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 200px;\n }\n \n \/* Row Headers *\/\n .row-header {\n color: #FCDD09;\n font-size: 22px;\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 \/* Row 1 Styles *\/\n .services-content {\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 \/* Row 2 - Clock Styles *\/\n .yebbo-horizontal-clock {\n width: 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-horizontal-stripes {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n z-index: 0;\n opacity: 0.15;\n }\n \n .yebbo-horizontal-stripe {\n flex: 1;\n }\n \n .yebbo-hs-green { background: #078930; }\n .yebbo-hs-yellow { background: #FCDD09; }\n .yebbo-hs-red { background: #DA121A; }\n \n .yebbo-horizontal-header {\n padding: 20px;\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-horizontal-title {\n color: #FCDD09;\n font-size: 24px;\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-horizontal-subtitle {\n color: #38bdf8;\n font-size: 16px;\n opacity: 0.9;\n font-weight: 600;\n }\n \n .yebbo-horizontal-time-container {\n display: flex;\n justify-content: space-around;\n padding: 30px 20px;\n position: relative;\n z-index: 1;\n }\n \n .yebbo-time-block {\n text-align: center;\n flex: 1;\n padding: 0 15px;\n }\n \n .yebbo-time-block-label {\n color: #e5e7eb;\n font-size: 14px;\n text-transform: uppercase;\n letter-spacing: 0.15em;\n margin-bottom: 15px;\n display: block;\n font-weight: 600;\n }\n \n .yebbo-horizontal-time {\n font-family: 'Share Tech Mono', monospace;\n font-size: 36px;\n color: #38bdf8;\n text-shadow: 0 0 15px rgba(56, 189, 248, 0.7);\n font-weight: 400;\n letter-spacing: 0.05em;\n display: flex;\n align-items: baseline;\n justify-content: center;\n gap: 4px;\n margin-bottom: 10px;\n }\n \n .yebbo-time-main {\n font-size: 40px;\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 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: 11px;\n margin-top: 10px;\n font-weight: 600;\n }\n \n .yebbo-horizontal-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-horizontal-brand {\n color: #22c55e;\n font-size: 14px;\n font-weight: 600;\n letter-spacing: 0.05em;\n line-height: 1.6;\n }\n \n .yebbo-horizontal-copyright {\n color: rgba(255, 255, 255, 0.7);\n font-size: 12px;\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 \/* Row 3 - Logos Grid *\/\n .logos-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 20px;\n margin-top: 20px;\n }\n \n @media (max-width: 600px) {\n .logos-grid {\n grid-template-columns: 1fr;\n }\n }\n \n .logo-card {\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: 20px;\n cursor: pointer;\n text-align: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 150px;\n }\n \n .logo-card:hover {\n background: rgba(255, 255, 255, 0.1);\n transform: translateY(-5px);\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);\n }\n \n .logo-card-title {\n font-size: 16px;\n font-weight: 700;\n color: #FCDD09;\n margin-bottom: 15px;\n text-align: center;\n }\n \n .logo-card-image {\n max-width: 120px;\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-card:hover .logo-card-image {\n transform: scale(1.1);\n }\n \n \/* Row 4 - Google Ad *\/\n .ad-row {\n text-align: center;\n padding: 30px 20px;\n }\n \n .ad-container {\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: 12px;\n padding: 20px;\n background: rgba(0, 0, 0, 0.3);\n max-width: 100%;\n margin: 0 auto;\n }\n \n \/* Row 5 - Future Use *\/\n .future-use {\n text-align: center;\n color: #f8fafc;\n padding: 40px 20px;\n }\n \n .future-use h3 {\n font-size: 24px;\n margin-bottom: 15px;\n color: #FCDD09;\n }\n \n .future-use p {\n font-size: 16px;\n opacity: 0.8;\n max-width: 500px;\n margin: 0 auto;\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: 768px) {\n .control-panel {\n flex-direction: column;\n gap: 15px;\n padding: 15px;\n }\n \n .controls-left, .controls-right {\n width: 100%;\n justify-content: center;\n flex-wrap: wrap;\n }\n \n .yebbo-horizontal-time-container {\n flex-direction: column;\n gap: 30px;\n }\n \n .yebbo-time-block {\n padding: 0;\n }\n \n .yebbo-time-main {\n font-size: 36px;\n }\n \n .yebbo-am-pm {\n font-size: 16px;\n }\n \n .row-content {\n padding: 20px 15px;\n }\n }\n \n @media (max-width: 480px) {\n .control-btn {\n padding: 8px 12px;\n font-size: 13px;\n }\n \n .status-indicator {\n font-size: 13px;\n padding: 6px 10px;\n }\n \n .row-header {\n font-size: 20px;\n }\n \n .yebbo-horizontal-title {\n font-size: 20px;\n }\n \n .yebbo-time-main {\n font-size: 32px;\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 Order\n <\/button>\n <\/div>\n <div class=\"controls-right\">\n <div class=\"status-indicator\" id=\"statusIndicator\">\n <i class=\"fas fa-check-circle\"><\/i> Drag & Drop Rows\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"single-column-container\" id=\"dashboardContainer\">\n \n \n <div class=\"row row-1\" data-row=\"1\" draggable=\"true\">\n <div class=\"drag-handle\" title=\"Drag to rearrange\">\n <i class=\"fas fa-arrows-alt\"><\/i>\n <\/div>\n <div class=\"row-content\">\n <h2 class=\"row-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 ? \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 <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"row row-2\" data-row=\"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-horizontal-clock\">\n \n <div class=\"yebbo-horizontal-stripes\">\n <div class=\"yebbo-horizontal-stripe yebbo-hs-green\"><\/div>\n <div class=\"yebbo-horizontal-stripe yebbo-hs-yellow\"><\/div>\n <div class=\"yebbo-horizontal-stripe yebbo-hs-red\"><\/div>\n <\/div>\n \n <div class=\"yebbo-horizontal-header\">\n <div class=\"yebbo-horizontal-title\">\u12e8\u12a2\u1275\u12ee\u1335\u12eb \u1230\u12d3\u1275<\/div>\n <div class=\"yebbo-horizontal-subtitle\">Ethiopian Time Display<\/div>\n <\/div>\n \n <div class=\"yebbo-horizontal-time-container\">\n \n <div class=\"yebbo-time-block\">\n <span class=\"yebbo-time-block-label\">Ethiopian Time<\/span>\n <div class=\"yebbo-horizontal-time\">\n <span class=\"yebbo-time-main\" id=\"yebboHorizontalEthTime\">12:00:00<\/span>\n <span class=\"yebbo-am-pm\" id=\"yebboHorizontalEthAmPm\">AM<\/span>\n <\/div>\n <div class=\"yebbo-date-display\">\n <div id=\"yebboHorizontalEthDate\">\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 \n <div class=\"yebbo-time-block\">\n <span class=\"yebbo-time-block-label\">Local Time<\/span>\n <div class=\"yebbo-horizontal-time\">\n <span class=\"yebbo-time-main\" id=\"yebboHorizontalLocalTime\">12:00:00<\/span>\n <span class=\"yebbo-am-pm\" id=\"yebboHorizontalLocalAmPm\">AM<\/span>\n <\/div>\n <div class=\"yebbo-date-display\" id=\"yebboHorizontalLocalDate\">\n Monday, January 1, 2025\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"yebbo-horizontal-footer\">\n <div class=\"yebbo-horizontal-brand\">\n Yebbo Communication Network\n <\/div>\n <div class=\"yebbo-horizontal-copyright\">\n \u00a9 1999\u20132026 \u2022 YebboBooks \u2022 All rights reserved\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"row row-3\" data-row=\"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=\"row-content\">\n <h2 class=\"row-header\">Our Services<\/h2>\n \n <div class=\"logos-grid\">\n \n <div class=\"logo-card\" onclick=\"window.open('https:\/\/yebbo.com', '_blank')\">\n <div class=\"logo-card-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-card-image\"\n onerror=\"this.src='https:\/\/via.placeholder.com\/120x60\/078930\/ffffff?text=YebboTravel'\">\n <\/div>\n \n \n <div class=\"logo-card\" onclick=\"window.open('https:\/\/yebbo.com', '_blank')\">\n <div class=\"logo-card-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-card-image\"\n onerror=\"this.src='https:\/\/via.placeholder.com\/120x60\/FCDD09\/000000?text=YebboTax'\">\n <\/div>\n \n \n <div class=\"logo-card\" onclick=\"window.open('https:\/\/wilina.net', '_blank')\">\n <div class=\"logo-card-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-card-image\"\n onerror=\"this.src='https:\/\/via.placeholder.com\/120x60\/DA121A\/ffffff?text=Wilina.net'\">\n <\/div>\n \n \n <div class=\"logo-card\" onclick=\"window.open('https:\/\/www.ethiotrans.com', '_blank')\">\n <div class=\"logo-card-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-card-image\"\n onerror=\"this.src='https:\/\/via.placeholder.com\/120x60\/38bdf8\/ffffff?text=Ethiotrans'\">\n <\/div>\n \n \n <div class=\"logo-card\" onclick=\"window.open('https:\/\/yebbo.com', '_blank')\">\n <div class=\"logo-card-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-card-image\"\n onerror=\"this.src='https:\/\/via.placeholder.com\/120x60\/22c55e\/ffffff?text=Passport+Photos'\">\n <\/div>\n \n \n <div class=\"logo-card\" onclick=\"window.open('https:\/\/yebbo.com', '_blank')\">\n <div class=\"logo-card-title\">YebboBooks<\/div>\n <div style=\"font-size: 48px; color: #FCDD09;\">?<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"row row-4\" data-row=\"4\" draggable=\"true\">\n <div class=\"drag-handle\" title=\"Drag to rearrange\">\n <i class=\"fas fa-arrows-alt\"><\/i>\n <\/div>\n <div class=\"ad-row\">\n <h2 class=\"row-header\">Sponsored Content<\/h2>\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=\"row row-5\" data-row=\"5\" 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; color: #FCDD09;\">?<\/div>\n <h3>Coming Soon<\/h3>\n <p>This space is reserved for future content and features.<\/p>\n <p style=\"margin-top: 15px; font-size: 14px; opacity: 0.7;\">\n Drag me to reorder the rows!\n <\/p>\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('yebboHorizontalLocalTime', localTime12.time);\n updateElement('yebboHorizontalLocalAmPm', localTime12.ampm);\n updateElement('yebboHorizontalLocalDate', 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('yebboHorizontalEthTime', ethTime12.time);\n updateElement('yebboHorizontalEthAmPm', 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('yebboHorizontalEthDate', 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('yebboHorizontalEthAmPm');\n const localAmPm = document.getElementById('yebboHorizontalLocalAmPm');\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\n\/\/ =============================================\n\/\/ DRAG & DROP FUNCTIONALITY FOR SINGLE COLUMN\n\/\/ =============================================\n\nlet draggedRow = null;\nlet draggedIndex = null;\nlet defaultLayout = [1, 2, 3, 4, 5]; \/\/ Default row order\n\n\/\/ Initialize drag & drop\nfunction initializeDragAndDrop() {\n const rows = document.querySelectorAll('.row');\n const container = document.getElementById('dashboardContainer');\n \n \/\/ Add drag event listeners to all rows\n rows.forEach(row => {\n row.addEventListener('dragstart', handleDragStart);\n row.addEventListener('dragend', handleDragEnd);\n row.addEventListener('dragover', handleDragOver);\n row.addEventListener('dragenter', handleDragEnter);\n row.addEventListener('dragleave', handleDragLeave);\n row.addEventListener('drop', handleDrop);\n \n \/\/ Also make drag handles work\n const dragHandle = row.querySelector('.drag-handle');\n if (dragHandle) {\n dragHandle.addEventListener('mousedown', () => {\n row.draggable = true;\n });\n \n dragHandle.addEventListener('mouseup', () => {\n row.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 draggedRow = 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-row'));\n \n \/\/ Update status indicator\n updateStatus(`Dragging row ${this.getAttribute('data-row')}`);\n}\n\nfunction handleDragEnd(e) {\n \/\/ Remove visual feedback from all rows\n const rows = document.querySelectorAll('.row');\n rows.forEach(row => {\n row.classList.remove('dragging');\n row.classList.remove('drop-zone');\n });\n \n draggedRow = 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 !== draggedRow) {\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 (draggedRow && this !== draggedRow) {\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 rows\n if (draggedIndex < targetIndex) {\n container.insertBefore(draggedRow, this.nextSibling);\n } else {\n container.insertBefore(draggedRow, 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 rows = Array.from(container.children);\n const layout = rows.map(row => parseInt(row.getAttribute('data-row')));\n \n \/\/ Save to localStorage\n localStorage.setItem('yebboSingleColumnLayout', JSON.stringify(layout));\n \n \/\/ Show visual feedback\n showNotification('Row order saved!');\n}\n\nfunction loadSavedLayout() {\n const savedLayout = localStorage.getItem('yebboSingleColumnLayout');\n \n if (savedLayout) {\n try {\n const layout = JSON.parse(savedLayout);\n applyLayout(layout);\n updateStatus('Loaded saved row order');\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 rows = Array.from(container.children);\n \n \/\/ Create a map of rows by their data-row attribute\n const rowMap = {};\n rows.forEach(row => {\n const rowNum = parseInt(row.getAttribute('data-row'));\n rowMap[rowNum] = row;\n });\n \n \/\/ Clear container\n container.innerHTML = '';\n \n \/\/ Re-add rows in the specified order\n layout.forEach(rowNum => {\n if (rowMap[rowNum]) {\n container.appendChild(rowMap[rowNum]);\n }\n });\n \n \/\/ Re-initialize drag events\n initializeDragAndDrop();\n}\n\nfunction saveLayout() {\n saveCurrentLayout();\n showNotification('Row order saved to browser storage!');\n}\n\nfunction loadLayout() {\n loadSavedLayout();\n showNotification('Row order loaded from browser storage!');\n}\n\nfunction resetLayout() {\n if (confirm('Reset to default row order?')) {\n applyLayout(defaultLayout);\n localStorage.removeItem('yebboSingleColumnLayout');\n updateStatus('Reset to default row order');\n showNotification('Row order 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 – Single Column Dashboard Save Layout Load Layout Reset Order Drag & Drop Rows \u12e8\u1266 \u12ae\u121a\u1292\u12ac\u123d\u1295 \u1294\u1275 \u12c8\u122d\u12ad \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: \u12e8\u12cd\u12ad\u120d\u1293 \u12a0\u1308\u120d\u130d\u120e\u1275 \u1218\u1235\u1320\u1275 \u12e8\u12a2\u1275\u12ee\u1335\u12eb \u1353\u1235\u1356\u122d\u1275 \u12a0\u1308\u120d\u130d\u120e\u1275 \u1218\u1235\u1320\u1275 \u12e8\u1262\u132b \u12ab\u122d\u12f5 \u12e8\u121b\u12cd\u1323\u1275 \u12a0\u1308\u120d\u130d\u120e\u1275 \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) \u12e8\u1309\u12de \u12c8\u12aa\u120d \u12e8\u1275\u122d\u1309\u121d \u1235\u122b \u12a0\u1308\u120d\u130d\u120e\u1275<span class=\"post-excerpt-end\">…<\/span><\/p>\n<p class=\"more-link\"><a href=\"https:\/\/yebbo.com\/2013\/2026\/01\/31\/%e1%8b%a8%e1%8a%a2%e1%89%b5%e1%8b%ae%e1%8c%b5%e1%8b%ab-%e1%88%b0%e1%8b%93%e1%89%b5\/\" class=\"themebutton\">Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_seo_schema_type":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1],"tags":[],"class_list":["post-224","post","type-post","status-publish","format-standard","hentry","category-blog"],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/posts\/224","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/comments?post=224"}],"version-history":[{"count":1,"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/posts\/224\/revisions"}],"predecessor-version":[{"id":225,"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/posts\/224\/revisions\/225"}],"wp:attachment":[{"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/media?parent=224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/categories?post=224"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/tags?post=224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}