{"id":1248,"date":"2026-02-04T12:10:56","date_gmt":"2026-02-04T05:10:56","guid":{"rendered":"https:\/\/celoe.telkomuniversity.ac.id\/code\/?page_id=1248"},"modified":"2026-02-18T10:58:44","modified_gmt":"2026-02-18T03:58:44","slug":"dashboard","status":"publish","type":"page","link":"https:\/\/celoe.telkomuniversity.ac.id\/code\/dashboard\/","title":{"rendered":"Dashboard"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1248\" class=\"elementor elementor-1248\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b7b9d38 e-flex e-con-boxed e-con e-parent\" data-id=\"b7b9d38\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b7cb2f9 elementor-widget elementor-widget-html\" data-id=\"b7cb2f9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"id\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>CeLOE Header Section<\/title>\r\n    <style>\r\n        \/* Import Font Poppins agar sesuai desain *\/\r\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;700;800&display=swap');\r\n\r\n        \/* Container untuk memastikan layout rapi *\/\r\n        .celoe-header-wrapper {\r\n            font-family: 'Poppins', sans-serif;\r\n            padding: 40px 20px;\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            text-align: center;\r\n        }\r\n\r\n        \/* Styling Header Utama *\/\r\n        .celoe-creative-header {\r\n            position: relative;\r\n            z-index: 1;\r\n            \/* Animasi masuk dari atas *\/\r\n            animation: celoeFadeInDown 1s ease-out;\r\n        }\r\n\r\n        .celoe-creative-header h2 {\r\n            font-size: 2.8rem;\r\n            color: #8a1a19; \/* Telkom Dark Maroon *\/\r\n            font-weight: 800;\r\n            margin: 0 0 20px 0;\r\n            text-transform: uppercase;\r\n            letter-spacing: 1px;\r\n            position: relative;\r\n            display: inline-block;\r\n        }\r\n\r\n        \/* Garis bawah merah di bawah judul *\/\r\n        .celoe-creative-header h2::after {\r\n            content: '';\r\n            display: block;\r\n            width: 60px;\r\n            height: 4px;\r\n            background: #b02120; \/* Telkom Red *\/\r\n            margin: 10px auto 0;\r\n            border-radius: 2px;\r\n            transition: width 0.3s ease; \/* Efek transisi halus *\/\r\n        }\r\n\r\n        \/* Efek saat mouse diarahkan ke header: Garis memanjang *\/\r\n        .celoe-creative-header:hover h2::after {\r\n            width: 120px;\r\n        }\r\n\r\n        \/* Styling Paragraf Deskripsi *\/\r\n        .celoe-creative-header p {\r\n            color: #555;\r\n            max-width: 700px;\r\n            margin: 0 auto;\r\n            font-size: 1.1rem;\r\n            line-height: 1.6;\r\n        }\r\n\r\n        \/* Definisi Keyframes untuk Animasi *\/\r\n        @keyframes celoeFadeInDown {\r\n            from { \r\n                opacity: 0; \r\n                transform: translateY(-30px); \r\n            }\r\n            to { \r\n                opacity: 1; \r\n                transform: translateY(0); \r\n            }\r\n        }\r\n\r\n        \/* Responsif untuk Layar HP *\/\r\n        @media (max-width: 768px) {\r\n            .celoe-creative-header h2 {\r\n                font-size: 2rem; \/* Ukuran font lebih kecil di HP *\/\r\n            }\r\n            .celoe-creative-header p {\r\n                font-size: 1rem;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n    <div class=\"celoe-header-wrapper\">\r\n        <div class=\"celoe-creative-header\">\r\n            <h2>CeLOE Executive Dashboard<\/h2>\r\n            \r\n            <p>Pusat kendali data terintegrasi. Pantau performa produksi konten, statistik akademik, monetisasi aset digital, dan layanan operasional dalam satu tampilan komprehensif.<\/p>\r\n        <\/div>\r\n    <\/div>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-556dc07 e-flex e-con-boxed e-con e-parent\" data-id=\"556dc07\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-62e0336 elementor-widget elementor-widget-html\" data-id=\"62e0336\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n    \/* Scoped CSS *\/\r\n    #celoe-dashboard-wrapper {\r\n        font-family: 'Roboto', sans-serif;\r\n        width: 100%;\r\n        max-width: 100%;\r\n        margin: 20px 0;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    #celoe-dashboard-wrapper * {\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    \/* Grid Layout *\/\r\n    .celoe-grid {\r\n        display: grid;\r\n        grid-template-columns: 1fr 1fr;\r\n        gap: 20px;\r\n        width: 100%;\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n        .celoe-grid {\r\n            grid-template-columns: 1fr;\r\n        }\r\n    }\r\n\r\n    \/* Card Styling *\/\r\n    .celoe-card {\r\n        background: #ffffff;\r\n        border: 1px solid #e0e0e0;\r\n        border-radius: 8px;\r\n        overflow: hidden;\r\n        box-shadow: 0 4px 6px rgba(0,0,0,0.05);\r\n        transition: all 0.3s ease;\r\n        text-decoration: none !important;\r\n        display: flex;\r\n        flex-direction: column;\r\n        height: 100%;\r\n        border-top: 4px solid transparent;\r\n        position: relative;\r\n    }\r\n\r\n    .celoe-card:hover {\r\n        transform: translateY(-5px);\r\n        box-shadow: 0 12px 24px rgba(190, 30, 45, 0.15);\r\n        border-top: 4px solid #be1e2d;\r\n    }\r\n\r\n    \/* Thumbnail Area *\/\r\n    .celoe-thumbnail {\r\n        height: 160px;\r\n        background-color: #f5f5f5;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .celoe-thumbnail img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n        object-position: center;\r\n        transition: transform 0.6s ease;\r\n    }\r\n\r\n    .celoe-card:hover .celoe-thumbnail img {\r\n        transform: scale(1.1);\r\n    }\r\n\r\n    .celoe-content {\r\n        padding: 16px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        flex-grow: 1;\r\n        text-align: left;\r\n    }\r\n\r\n    .celoe-tag {\r\n        font-size: 0.65rem;\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n        color: #be1e2d;\r\n        font-weight: 700;\r\n        margin-bottom: 6px;\r\n        display: block;\r\n    }\r\n\r\n    .celoe-title {\r\n        font-size: 1rem;\r\n        font-weight: 700;\r\n        color: #222;\r\n        margin: 0 0 8px 0;\r\n        line-height: 1.4;\r\n        font-family: inherit;\r\n    }\r\n\r\n    .celoe-desc {\r\n        font-size: 0.85rem;\r\n        color: #666;\r\n        line-height: 1.5;\r\n        margin-bottom: 15px;\r\n        font-family: inherit;\r\n    }\r\n\r\n    .celoe-btn {\r\n        margin-top: auto;\r\n        color: #be1e2d;\r\n        font-weight: 700;\r\n        font-size: 0.8rem;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n    }\r\n    \r\n    .celoe-btn i {\r\n        transition: transform 0.3s ease;\r\n    }\r\n    \r\n    .celoe-card:hover .celoe-btn i {\r\n        transform: translateX(4px);\r\n    }\r\n<\/style>\r\n\r\n<div id=\"celoe-dashboard-wrapper\">\r\n    <div class=\"celoe-grid\">\r\n\r\n        <a href=\"https:\/\/celoe.telkomuniversity.ac.id\/code\/dashboard-1\/\" class=\"celoe-card\" target=\"_blank\">\r\n            <div class=\"celoe-thumbnail\">\r\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1516035069371-29a1b244cc32?auto=format&fit=crop&w=600&q=80\" alt=\"Video Camera Lens\">\r\n            <\/div>\r\n            <div class=\"celoe-content\">\r\n                <span class=\"celoe-tag\">PRODUKSI<\/span>\r\n                <h4 class=\"celoe-title\">1. Dashboard Pemanfaatan MK External<\/h4>\r\n                <p class=\"celoe-desc\">Monitoring jumlah produksi dan status unggah konten video edukasi publik.<\/p>\r\n                <div class=\"celoe-btn\">Lihat Data <i class=\"fas fa-arrow-right\"><\/i><\/div>\r\n            <\/div>\r\n        <\/a>\r\n\r\n        <a href=\"https:\/\/celoe.telkomuniversity.ac.id\/code\/dashboard-2\/\" class=\"celoe-card\" target=\"_blank\">\r\n            <div class=\"celoe-thumbnail\">\r\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=600&q=80\" alt=\"LMS Analytics\">\r\n            <\/div>\r\n            <div class=\"celoe-content\">\r\n                <span class=\"celoe-tag\">AKADEMIK<\/span>\r\n                <h4 class=\"celoe-title\">2. Dashboard Pencapaian KM Online Learning<\/h4>\r\n                <p class=\"celoe-desc\">Analisis performa delivery system dan statistik keaktifan user di LMS.<\/p>\r\n                <div class=\"celoe-btn\">Lihat Data <i class=\"fas fa-arrow-right\"><\/i><\/div>\r\n            <\/div>\r\n        <\/a>\r\n\r\n        <a href=\"https:\/\/celoe.telkomuniversity.ac.id\/code\/dashboard-3\/\" class=\"celoe-card\" target=\"_blank\">\r\n            <div class=\"celoe-thumbnail\">\r\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=600&q=80\" alt=\"Business Revenue\">\r\n            <\/div>\r\n            <div class=\"celoe-content\">\r\n                <span class=\"celoe-tag\">REVENUE<\/span>\r\n                <h4 class=\"celoe-title\">3. Dashboard Pemanfaatan Mata Kuliah Platform Eksternal Berbayar<\/h4>\r\n                <p class=\"celoe-desc\">Laporan Non-Tuition Fee dan monetisasi aset pembelajaran digital.<\/p>\r\n                <div class=\"celoe-btn\">Lihat Data <i class=\"fas fa-arrow-right\"><\/i><\/div>\r\n            <\/div>\r\n        <\/a>\r\n\r\n        <a href=\"https:\/\/celoe.telkomuniversity.ac.id\/code\/dashboard-4\/\" class=\"celoe-card\" target=\"_blank\">\r\n            <div class=\"celoe-thumbnail\">\r\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1598488035139-bdbb2231ce04?auto=format&fit=crop&w=600&q=80\" alt=\"Studio Recording\">\r\n            <\/div>\r\n            <div class=\"celoe-content\">\r\n                <span class=\"celoe-tag\">OPERASIONAL<\/span>\r\n                <h4 class=\"celoe-title\">4. Dashboard Layanan & Peminjaman<\/h4>\r\n                <p class=\"celoe-desc\">Status peminjaman studio rekaman, alat, dan antrian layanan.<\/p>\r\n                <div class=\"celoe-btn\">Lihat Data <i class=\"fas fa-arrow-right\"><\/i><\/div>\r\n            <\/div>\r\n        <\/a>\r\n\r\n    <\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>CeLOE Header Section CeLOE Executive Dashboard Pusat kendali data terintegrasi. Pantau performa produksi konten, statistik akademik, monetisasi aset digital, dan layanan operasional dalam satu tampilan komprehensif. PRODUKSI 1. Dashboard Pemanfaatan MK External Monitoring jumlah produksi dan status unggah konten video edukasi publik. Lihat Data AKADEMIK 2. Dashboard Pencapaian KM Online Learning Analisis performa delivery system [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-1248","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-json\/wp\/v2\/pages\/1248","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-json\/wp\/v2\/comments?post=1248"}],"version-history":[{"count":0,"href":"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-json\/wp\/v2\/pages\/1248\/revisions"}],"wp:attachment":[{"href":"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-json\/wp\/v2\/media?parent=1248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}