{"id":17459,"date":"2025-11-21T10:41:57","date_gmt":"2025-11-21T03:41:57","guid":{"rendered":"https:\/\/library.uns.ac.id\/?page_id=17459"},"modified":"2026-05-06T08:53:15","modified_gmt":"2026-05-06T01:53:15","slug":"sebelas-maret-university-library-new","status":"publish","type":"page","link":"https:\/\/library.uns.ac.id\/","title":{"rendered":"Sebelas Maret University Library"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n \r\n \r\n \r\n \r\n Library Dashboard<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n <link\r\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@300;400;500;700&display=swap\"\r\n rel=\"stylesheet\"\r\n \/>\r\n <link\r\n rel=\"stylesheet\"\r\n href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\"\r\n \/>\r\n <style>\r\n \/* === RESET DAN DASAR === *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n color: var(--link-color);\r\n }\r\n\r\n a,\r\n button,\r\n .button,\r\n input[type=\"submit\"] {\r\n color: var(--link-color);\r\n }\r\n\r\n .tabs-container * {\r\n all: unset;\r\n display: initial;\r\n }\r\n\r\n html,\r\n body {\r\n height: 100%;\r\n margin: 0;\r\n padding: 0;\r\n overflow-x: hidden;\r\n }\r\n\r\n body {\r\n font-family: \"Roboto\", sans-serif;\r\n background: #f5f5f5;\r\n }\r\n\r\n \/* === LIBRARY DASHBOARD WRAPPER === *\/\r\n .library-dashboard {\r\n width: 100vw !important;\r\n min-height: 100vh !important;\r\n position: relative !important;\r\n overflow: hidden !important;\r\n display: flex !important;\r\n flex-direction: column !important;\r\n z-index: 0 !important;\r\n background: transparent !important;\r\n }\r\n\r\n \/* === SLIDER BACKGROUND === *\/\r\n .library-dashboard > .slider-container {\r\n position: absolute !important;\r\n top: 0 !important;\r\n left: 0 !important;\r\n width: 100% !important;\r\n height: 100% !important;\r\n overflow: hidden !important;\r\n z-index: 1 !important;\r\n }\r\n\r\n .library-dashboard .slider-image {\r\n position: absolute !important;\r\n top: 0 !important;\r\n left: 0 !important;\r\n width: 100% !important;\r\n height: 100% !important;\r\n object-fit: cover !important;\r\n object-position: center !important;\r\n opacity: 0 !important;\r\n transition: opacity 0.8s ease-in-out !important;\r\n z-index: 1 !important;\r\n }\r\n\r\n .library-dashboard .slider-image.active {\r\n opacity: 1 !important;\r\n }\r\n\r\n .library-dashboard .slider-overlay {\r\n position: absolute !important;\r\n top: 0 !important;\r\n left: 0 !important;\r\n width: 100% !important;\r\n height: 100% !important;\r\n background: #002f5f;\r\n opacity: 0.7;\r\n z-index: 2 !important;\r\n }\r\n\r\n \/* === KONTEN UTAMA === *\/\r\n .content-wrapper {\r\n position: relative !important;\r\n z-index: 5 !important;\r\n padding: 60px 20px !important;\r\n flex: 1 !important;\r\n display: flex !important;\r\n flex-direction: column !important;\r\n justify-content: center !important;\r\n align-items: center !important;\r\n text-align: center !important;\r\n gap: 30px;\r\n }\r\n\r\n \/* === TAB === *\/\r\n .tabs-container {\r\n display: flex;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .tab-btn {\r\n padding: 14px 32px;\r\n border: 2px solid transparent;\r\n border-radius: 8px;\r\n font-size: 15px;\r\n font-weight: 700;\r\n font-family: Roboto;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n background: #17b8b8 !important;\r\n color: #ffffff !important;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\r\n position: relative;\r\n z-index: 5;\r\n }\r\n\r\n .tab-btn.active {\r\n background-color: #ffffff !important;\r\n color: #17b8b8 !important;\r\n border-color: #17b8b8;\r\n border-width: 3px;\r\n }\r\n\r\n .tab-btn:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n \/* === SEARCH === *\/\r\n .search-section {\r\n width: 100%;\r\n max-width: 850px;\r\n margin: 10px 0 30px 0;\r\n }\r\n\r\n .search-container {\r\n display: flex;\r\n gap: 8px;\r\n background: rgba(200, 240, 245, 0.9);\r\n padding: 12px 20px;\r\n border-radius: 50px;\r\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\r\n transition: box-shadow 0.3s ease;\r\n border: 2px solid rgba(255, 255, 255, 0.5);\r\n }\r\n\r\n .search-container:focus-within {\r\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);\r\n border-color: #17b8b8;\r\n }\r\n\r\n .search-container input {\r\n flex: 1;\r\n border: none;\r\n outline: none;\r\n font-size: 14px;\r\n padding: 6px 0;\r\n background: transparent;\r\n color: #333;\r\n }\r\n\r\n .search-container input::placeholder {\r\n color: #666;\r\n }\r\n\r\n .search-btn {\r\n background: #ffffff;\r\n border: none;\r\n cursor: pointer;\r\n color: #17b8b8 !important;\r\n font-size: 18px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 50%;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .search-btn:hover {\r\n background: rgba(255, 255, 255, 0.3);\r\n }\r\n\r\n \/* === NAVIGATION === *\/\r\n .nav-sections {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 24px;\r\n max-width: 1100px;\r\n width: 100%;\r\n margin-top: 20px;\r\n }\r\n\r\n .nav-section {\r\n background: rgba(23, 184, 184, 0.6);\r\n border-radius: 10px;\r\n backdrop-filter: blur(8px);\r\n transition: all 0.3s ease;\r\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);\r\n overflow: hidden;\r\n border-style: solid;\r\n border-color: rgba(30, 90, 120, 0.9);\r\n border-width: 4px;\r\n }\r\n\r\n .nav-section:hover {\r\n background: rgba(23, 184, 184, 0.92);\r\n transform: translateY(-6px);\r\n box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);\r\n }\r\n\r\n .section-title {\r\n background: rgba(30, 90, 120, 0.9);\r\n color: #ffffff;\r\n font-size: 18px;\r\n font-family: Roboto;\r\n font-weight: 700;\r\n letter-spacing: 1.2px;\r\n padding: 16px 20px;\r\n text-transform: uppercase;\r\n margin: 0;\r\n }\r\n\r\n .nav-links {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0;\r\n padding: 16px 0;\r\n margin-top: -5px;\r\n }\r\n\r\n .nav-link {\r\n color: #FFFFFF;\r\n text-decoration: none;\r\n padding: 12px 20px;\r\n font-size: 16px;\r\n font-weight: 500;\r\n font-family: Roboto;\r\n transition: all 0.2s ease;\r\n border-left: 3px solid transparent;\r\n }\r\n \r\n .nav-link-highlight {\r\n color: #FFD700;\r\n text-decoration: none;\r\n padding: 12px 20px;\r\n font-size: 16px;\r\n font-weight: 500;\r\n font-family: Roboto;\r\n transition: all 0.2s ease;\r\n border-left: 3px solid transparent;\r\n }\r\n\r\n .library-dashboard .nav-section .nav-link:hover {\r\n background: rgba(255, 255, 255, 0.15);\r\n }\r\n \r\n .nav-link-highlight:hover {\r\n background: rgba(255, 255, 255, 0.15) !important;\r\n border-left-color: rgba(255, 255, 255, 0.5) !important;\r\n padding-left: 24px !important;\r\n color: #FFD700 !important;\r\n \r\n }\r\n\r\n \/* === CAROUSEL CONTROLS (Hidden on Desktop) === *\/\r\n .carousel-wrapper-dashboard {\r\n position: relative;\r\n width: 100%;\r\n max-width: 1100px;\r\n display: none;\r\n }\r\n\r\n .carousel-controls {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 12px;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .carousel-btn {\r\n background: rgba(23, 184, 184, 0.9);\r\n color: #ffffff !important;\r\n border: none;\r\n width: 44px;\r\n height: 44px;\r\n border-radius: 50%;\r\n font-size: 20px;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\r\n transition: all 0.3s ease;\r\n z-index: 10;\r\n }\r\n\r\n .carousel-btn:active {\r\n transform: scale(0.95);\r\n }\r\n\r\n .carousel-btn:disabled {\r\n opacity: 0.4;\r\n cursor: not-allowed;\r\n }\r\n\r\n .carousel-indicator {\r\n flex: 1;\r\n text-align: center;\r\n color: #ffffff;\r\n font-weight: 600;\r\n font-size: 15px;\r\n text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\r\n }\r\n\r\n .carousel-container {\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n }\r\n\r\n .carousel-track-dashboard {\r\n display: flex;\r\n transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n width: 100%;\r\n }\r\n\r\n .carousel-slide {\r\n min-width: 100%;\r\n flex-shrink: 0;\r\n }\r\n\r\n \/* === RESPONSIVE TABLET === *\/\r\n @media (max-width: 1024px) and (min-width: 769px) {\r\n .nav-sections {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 20px;\r\n }\r\n\r\n .nav-section:last-child {\r\n grid-column: 1 \/ -1;\r\n max-width: 50%;\r\n margin: 0 auto;\r\n }\r\n }\r\n\r\n \/* === RESPONSIVE MOBILE & TABLET === *\/\r\n @media (max-width: 768px) {\r\n .library-dashboard {\r\n height: 100vh;\r\n min-height: -webkit-fill-available;\r\n }\r\n\r\n .slider-container,\r\n .slider-image,\r\n .slider-overlay {\r\n height: 100vh !important;\r\n min-height: -webkit-fill-available !important;\r\n }\r\n\r\n .content-wrapper {\r\n align-items: center !important;\r\n text-align: center !important;\r\n width: 100% !important;\r\n }\r\n\r\n .tabs-container {\r\n width: 100% !important;\r\n justify-content: center !important;\r\n align-items: center !important;\r\n }\r\n\r\n .tab-btn {\r\n margin-left: 0 !important;\r\n }\r\n\r\n .search-section {\r\n width: 100% !important;\r\n display: flex;\r\n justify-content: center;\r\n }\r\n\r\n .search-container {\r\n max-width: 380px;\r\n margin: 0 auto;\r\n }\r\n\r\n .carousel-wrapper-dashboard {\r\n width: 300px !important;\r\n display: flex !important;\r\n flex-direction: column;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n }\r\n\r\n .carousel-container {\r\n width: 100% !important;\r\n max-width: 420px;\r\n margin: 0 auto;\r\n }\r\n\r\n .carousel-controls {\r\n width: 100% !important;\r\n max-width: 420px;\r\n margin: 0 auto 16px auto;\r\n justify-content: space-between;\r\n }\r\n\r\n .nav-sections {\r\n display: none;\r\n }\r\n\r\n .nav-section {\r\n width: 100%;\r\n }\r\n\r\n .section-title {\r\n font-size: 16px;\r\n padding: 14px 18px;\r\n }\r\n\r\n .nav-link {\r\n font-size: 15px;\r\n padding: 11px 18px;\r\n }\r\n }\r\n\r\n @supports (-webkit-touch-callout: none) {\r\n .library-dashboard,\r\n .slider-container,\r\n .slider-image,\r\n .slider-overlay {\r\n min-height: -webkit-fill-available !important;\r\n }\r\n }\r\n\r\n \/* ========================================\r\n CAROUSEL POST LIBRARY STYLES\r\n ======================================== *\/\r\n\r\n .header-title {\r\n text-align: center;\r\n font-size: 38px;\r\n font-weight: 700;\r\n margin: 20px 0 0 0;\r\n padding: 30px 20px;\r\n color: #294766;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n position: relative;\r\n animation: fadeInDown 0.8s ease;\r\n z-index: 2;\r\n }\r\n\r\n .header-title::after {\r\n content: \"\";\r\n display: block;\r\n width: 150px;\r\n height: 4px;\r\n background: linear-gradient(90deg, #17b8b8, #0f8c8c);\r\n margin: 15px auto 0 auto;\r\n border-radius: 2px;\r\n }\r\n\r\n @keyframes fadeInDown {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-30px);\r\n }\r\n\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .left-sections {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n gap: 40px;\r\n width: 100% !important;\r\n padding: 50px 20px 20px 20px;\r\n z-index: 100;\r\n position: relative;\r\n animation: fadeInUp 0.8s ease backwards;\r\n }\r\n\r\n .info-section {\r\n background-color: #17b8b8;\r\n border-radius: 20px;\r\n border: 4px solid #1e5a78;\r\n overflow: hidden;\r\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n width: 420px;\r\n flex-shrink: 0;\r\n }\r\n\r\n .info-section:hover {\r\n transform: translateY(-10px);\r\n box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);\r\n background-color: #14a3a3;\r\n }\r\n\r\n .info-section::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 5px;\r\n background: rgba(30, 90, 120, 0.9);\r\n }\r\n\r\n .info-section:hover {\r\n transform: translateY(-8px) scale(1.02);\r\n box-shadow: 0 25px 60px rgba(23, 184, 184, 0.3);\r\n background: rgba(23, 184, 184, 0.92);\r\n }\r\n\r\n .info-section-title {\r\n background-color: #1e5a78;\r\n color: #ffffff;\r\n font-size: 18px;\r\n font-family: \"Roboto\", sans-serif;\r\n font-weight: 700;\r\n letter-spacing: 1.2px;\r\n padding: 18px 20px;\r\n text-transform: uppercase;\r\n text-align: center;\r\n margin: 0;\r\n }\r\n\r\n .info-links {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0;\r\n padding: 0;\r\n }\r\n\r\n .info-link {\r\n color: #ffffff !important;\r\n text-decoration: none;\r\n padding: 14px 20px;\r\n font-size: 14px;\r\n font-weight: 500;\r\n font-family: \"Segoe UI\", Tahoma, sans-serif;\r\n transition: all 0.2s ease;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .info-link:last-child {\r\n border-bottom: none;\r\n }\r\n\r\n .info-link:hover {\r\n background: rgba(255, 255, 255, 0.15);\r\n padding-left: 25px;\r\n }\r\n\r\n .recent-post-section {\r\n background: linear-gradient(\r\n 90deg,\r\n rgba(23, 184, 184, 0.05) 0%,\r\n rgba(23, 184, 184, 0.3) 50%,\r\n rgba(23, 184, 184, 0.5) 100%\r\n );\r\n position: relative;\r\n overflow: hidden;\r\n padding-top: 0;\r\n }\r\n\r\n .recent-post-section::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: radial-gradient(\r\n circle at 80% 50%,\r\n rgba(23, 184, 184, 0.15),\r\n transparent 60%\r\n );\r\n pointer-events: none;\r\n }\r\n\r\n .carousel-wrapper {\r\n width: 100%;\r\n padding: 40px 40px 80px 40px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: flex-start;\r\n gap: 30px;\r\n background: transparent;\r\n position: relative;\r\n overflow: visible;\r\n }\r\n\r\n .carousel-inner {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 30px;\r\n flex: 1;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .next-btn,\r\n .prev-btn {\r\n display: none !important;\r\n }\r\n\r\n .carousel-track {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 30px;\r\n width: 100%;\r\n max-width: 800px;\r\n align-items: stretch;\r\n margin-top: 0;\r\n transition: opacity 0.3s ease, transform 0.3s ease;\r\n }\r\n\r\n .card-big {\r\n width: 100%;\r\n min-height: 200px;\r\n height: auto;\r\n background: #fff;\r\n border-radius: 16px;\r\n border: none;\r\n overflow: hidden;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);\r\n flex-shrink: 0;\r\n transition: all 0.4s ease;\r\n display: flex;\r\n flex-direction: row;\r\n position: relative;\r\n animation: slideInUp 0.6s ease;\r\n }\r\n\r\n @keyframes slideInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n }\r\n\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .card-big::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 5px;\r\n background: linear-gradient(90deg, #17b8b8, #14a3a3, #0f8c8c);\r\n }\r\n\r\n .card-big:hover {\r\n transform: translateY(-10px) scale(1.02);\r\n box-shadow: 0 25px 60px rgba(23, 184, 184, 0.3);\r\n }\r\n\r\n .card-big .card-image {\r\n width: 35%;\r\n height: auto;\r\n min-height: 200px;\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n\r\n .card-big .card-image::after {\r\n content: \"\";\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n height: 60px;\r\n background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);\r\n }\r\n\r\n .card-big .card-image img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n\r\n .card-big:hover .card-image img {\r\n transform: scale(1.1);\r\n }\r\n\r\n .card-big .card-content {\r\n padding: 25px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n flex: 1;\r\n background: #fff;\r\n }\r\n\r\n .card-big .card-title {\r\n font-size: 20px;\r\n font-weight: 700;\r\n color: #294766;\r\n margin: 0 0 15px 0;\r\n line-height: 1.3;\r\n }\r\n\r\n .card-big .card-text {\r\n font-size: 15px;\r\n color: #666;\r\n line-height: 1.6;\r\n margin: 0 0 20px 0;\r\n }\r\n\r\n .read-more-btn {\r\n background: linear-gradient(135deg, #17b8b8, #14a3a3);\r\n color: white !important;\r\n border: none;\r\n padding: 10px 24px;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n font-size: 14px;\r\n font-weight: 600;\r\n text-align: center;\r\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n box-shadow: 0 4px 12px rgba(23, 184, 184, 0.25);\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n width: fit-content;\r\n }\r\n\r\n .read-more-btn::after {\r\n content: \"\\f061\";\r\n font-family: \"Font Awesome 6 Free\";\r\n font-weight: 900;\r\n font-size: 12px;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .read-more-btn:hover {\r\n background: linear-gradient(135deg, #14a3a3, #0f8c8c);\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 15px rgba(23, 184, 184, 0.4);\r\n }\r\n\r\n .read-more-btn:hover::after {\r\n transform: translateX(4px);\r\n }\r\n\r\n .read-more-btn:active {\r\n transform: translateY(0);\r\n }\r\n\r\n .view-all-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: linear-gradient(135deg, #17b8b8, #14a3a3);\r\n color: #fff !important;\r\n text-decoration: none;\r\n padding: 14px 40px;\r\n border-radius: 50px;\r\n font-weight: 700;\r\n font-size: 16px;\r\n box-shadow: 0 10px 25px rgba(23, 184, 184, 0.3);\r\n transition: all 0.3s ease;\r\n margin-top: 20px;\r\n border: none;\r\n cursor: pointer;\r\n }\r\n\r\n .view-all-btn:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 15px 35px rgba(23, 184, 184, 0.4);\r\n background: linear-gradient(135deg, #14a3a3, #0f8c8c);\r\n }\r\n\r\n .carousel-buttons {\r\n display: flex;\r\n gap: 16px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n margin-top: 20px;\r\n }\r\n\r\n .carousel-buttons .view-all-btn {\r\n margin-top: 0;\r\n }\r\n\r\n .see-all-articles-btn {\r\n background: linear-gradient(135deg, #1e5a78, #294766) !important;\r\n }\r\n\r\n .see-all-articles-btn:hover {\r\n background: linear-gradient(135deg, #294766, #1e3a5f) !important;\r\n box-shadow: 0 15px 35px rgba(30, 90, 120, 0.4) !important;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .carousel-wrapper {\r\n flex-direction: column !important;\r\n padding: 20px 10px !important;\r\n }\r\n\r\n .left-sections {\r\n display: flex !important;\r\n flex-direction: column !important;\r\n align-items: center !important;\r\n padding: 30px 10px !important;\r\n gap: 40px !important;\r\n width: 100% !important;\r\n }\r\n\r\n .info-section {\r\n width: 90% !important;\r\n max-width: none !important;\r\n margin: 0 auto !important;\r\n }\r\n\r\n .info-section-title {\r\n font-size: 16px !important;\r\n padding: 15px !important;\r\n }\r\n\r\n .info-link {\r\n padding: 12px 15px !important;\r\n font-size: 13px !important;\r\n }\r\n\r\n .card-big {\r\n flex-direction: column !important;\r\n width: 100% !important;\r\n }\r\n\r\n .card-big .card-image {\r\n width: 100% !important;\r\n height: 180px !important;\r\n min-height: auto !important;\r\n }\r\n\r\n .card-big .card-content {\r\n padding: 20px !important;\r\n }\r\n\r\n .card-big .card-title {\r\n font-size: 18px !important;\r\n }\r\n\r\n .card-big .card-text {\r\n font-size: 14px !important;\r\n margin-bottom: 15px !important;\r\n }\r\n\r\n .header-title {\r\n font-size: 28px !important;\r\n padding: 20px 10px !important;\r\n }\r\n\r\n .carousel-track {\r\n gap: 45px !important;\r\n }\r\n }\r\n\r\n .card-small {\r\n width: 110px;\r\n height: 200px;\r\n background: #fff;\r\n border-radius: 12px;\r\n border: none;\r\n overflow: hidden;\r\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);\r\n flex-shrink: 0;\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n display: flex;\r\n flex-direction: column;\r\n cursor: pointer;\r\n position: relative;\r\n animation: fadeInUp 0.6s ease;\r\n }\r\n\r\n @keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n }\r\n\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .card-small:nth-child(2) {\r\n animation-delay: 0.1s;\r\n }\r\n\r\n .card-small:nth-child(3) {\r\n animation-delay: 0.2s;\r\n }\r\n\r\n .card-small::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 4px;\r\n background: linear-gradient(90deg, #17b8b8, #0f8c8c);\r\n transform: scaleX(0);\r\n transition: transform 0.3s;\r\n }\r\n\r\n .card-small:hover::before {\r\n transform: scaleX(1);\r\n }\r\n\r\n .card-small:hover {\r\n transform: translateY(-8px) scale(1.05);\r\n box-shadow: 0 15px 35px rgba(23, 184, 184, 0.25);\r\n }\r\n\r\n .card-small .card-image {\r\n width: 100%;\r\n height: 100px;\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n\r\n .card-small .card-image img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n\r\n .card-small:hover .card-image img {\r\n transform: scale(1.15);\r\n }\r\n\r\n .card-small .card-content {\r\n padding: 10px;\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n background: linear-gradient(to bottom, #fff, #f8f9fa);\r\n }\r\n\r\n .card-small .card-title {\r\n font-size: 11px;\r\n font-weight: 700;\r\n color: #294766;\r\n margin: 0 0 6px 0;\r\n line-height: 1.3;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n transition: color 0.3s;\r\n }\r\n\r\n .card-small:hover .card-title {\r\n color: #17b8b8;\r\n }\r\n\r\n .card-small .card-text {\r\n font-size: 10px;\r\n color: #666;\r\n line-height: 1.4;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 3;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n flex: 1;\r\n }\r\n\r\n #loadingIndicator {\r\n text-align: right;\r\n padding: 40px;\r\n font-size: 20px;\r\n color: #294766;\r\n animation: pulse 1.5s ease-in-out infinite;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n @keyframes pulse {\r\n 0%,\r\n 100% {\r\n opacity: 1;\r\n }\r\n\r\n 50% {\r\n opacity: 0.5;\r\n }\r\n }\r\n\r\n .spinner {\r\n width: 50px;\r\n height: 50px;\r\n margin: 20px auto;\r\n border: 4px solid rgba(23, 184, 184, 0.2);\r\n border-top-color: #17b8b8;\r\n border-radius: 50%;\r\n animation: spin 1s linear infinite;\r\n }\r\n\r\n @keyframes spin {\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .header-title {\r\n font-size: 32px;\r\n margin-top: 40px;\r\n }\r\n\r\n .left-sections {\r\n display: none;\r\n }\r\n\r\n .carousel-wrapper {\r\n padding: 40px 0 50px 0;\r\n justify-content: center;\r\n background: none;\r\n }\r\n\r\n .carousel-inner {\r\n width: 100%;\r\n padding-right: 0;\r\n justify-content: center;\r\n gap: 20px;\r\n }\r\n\r\n .carousel-track {\r\n width: 90%;\r\n gap: 12px;\r\n }\r\n\r\n .card-big {\r\n width: 220px;\r\n height: auto;\r\n }\r\n\r\n .card-small {\r\n width: 90px;\r\n height: 170px;\r\n }\r\n\r\n .next-btn {\r\n padding: 16px;\r\n font-size: 14px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .header-title {\r\n font-size: 26px;\r\n }\r\n\r\n .carousel-wrapper {\r\n justify-content: center;\r\n padding: 30px 0 40px 0;\r\n }\r\n\r\n .carousel-inner {\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 15px;\r\n width: 100%;\r\n }\r\n\r\n .button-row {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 15px;\r\n width: 100%;\r\n order: 2;\r\n }\r\n\r\n .carousel-track {\r\n order: 1;\r\n width: 100%;\r\n justify-content: center;\r\n gap: 15px;\r\n }\r\n\r\n .carousel-buttons {\r\n order: 2;\r\n width: 100%;\r\n }\r\n\r\n .next-btn,\r\n .prev-btn {\r\n display: block !important;\r\n padding: 14px;\r\n font-size: 14px;\r\n transform: none !important;\r\n }\r\n\r\n .card-big {\r\n width: 85%;\r\n height: auto;\r\n }\r\n\r\n .card-small {\r\n display: none;\r\n }\r\n }\r\n <\/style>\r\n <\/head>\r\n\r\n <body>\r\n <div class=\"library-dashboard\">\r\n <!-- START MODIFICATION: Slider images now loaded dynamically -->\r\n <div class=\"slider-container\" id=\"sliderContainer\">\r\n <!-- Images will be injected dynamically from WordPress Media Library -->\r\n <div class=\"slider-overlay\"><\/div>\r\n <\/div>\r\n <!-- END MODIFICATION -->\r\n\r\n <div class=\"content-wrapper\">\r\n <div class=\"tabs-container\">\r\n <button\r\n class=\"tab-btn active\"\r\n onclick=\"switchTab('collection', this)\"\r\n >\r\n Collection Catalog\r\n <\/button>\r\n <button class=\"tab-btn\" onclick=\"switchTab('repository', this)\">\r\n Institutional Repository\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"search-section\">\r\n <div class=\"search-container\">\r\n <input\r\n type=\"text\"\r\n id=\"searchInput\"\r\n placeholder=\"Search for printed books collection\"\r\n onkeypress=\"handleSearch(event)\"\r\n \/>\r\n <a class=\"search-btn\" onclick=\"handleSearch()\">\ud83d\udd0d<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"carousel-wrapper-dashboard\">\r\n <div class=\"carousel-controls\">\r\n <a\r\n class=\"carousel-btn\"\r\n onclick=\"prevSlideDashboard()\"\r\n id=\"prevBtnDashboard\"\r\n >\u2039<\/a\r\n >\r\n <div class=\"carousel-indicator\">\r\n <span id=\"currentSlideNumDashboard\">1<\/span> \/\r\n <span id=\"totalSlidesDashboard\">3<\/span>\r\n <\/div>\r\n <a\r\n class=\"carousel-btn\"\r\n onclick=\"nextSlideDashboard()\"\r\n id=\"nextBtnDashboard\"\r\n >\u203a<\/a\r\n >\r\n <\/div>\r\n <div class=\"carousel-container\">\r\n <div class=\"carousel-track-dashboard\" id=\"carouselTrackDashboard\">\r\n <div class=\"carousel-slide\">\r\n <div class=\"nav-section\">\r\n <div class=\"section-title\">Research Support<\/div>\r\n <div class=\"nav-links\">\r\n <a href=\"\/research-101\" class=\"nav-link\">Research 101<\/a>\r\n <a href=\"\/research-tools\" class=\"nav-link\"\r\n >Research Tools<\/a\r\n >\r\n <a href=\"\/library-guide\" class=\"nav-link\">Library Guide<\/a>\r\n <a href=\"\/subject-guide\" class=\"nav-link\">Subject Guides<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n <div class=\"nav-section\">\r\n <div class=\"section-title\">Library Services<\/div>\r\n <div class=\"nav-links\">\r\n \r\n <a href=\"\/become-a-member\" class=\"nav-link\"\r\n >Become a Member<\/a\r\n >\r\n <a href=\"\/opening-hours-and-facility\" class=\"nav-link\"\r\n >Opening Hours and Facilities<\/a\r\n >\r\n <a href=\"\/consult-a-librarian\" class=\"nav-link\"\r\n >Consult a Librarian<\/a\r\n >\r\n <a href=\"\/user-education\" class=\"nav-link\"\r\n >User Education<\/a\r\n >\r\n <a href=\"\/public-access\" class=\"nav-link\">Public Access<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n <div class=\"nav-section\">\r\n <div class=\"section-title\">Collections<\/div>\r\n <div class=\"nav-links\">\r\n <a href=\"\/statistics\" class=\"nav-link\">Data<\/a>\r\n <a href=\"\/all-collections\" class=\"nav-link\"\r\n >All Collections<\/a\r\n >\r\n <a href=\"\/special-collections\" class=\"nav-link\"\r\n >Special Collections<\/a\r\n >\r\n <a href=\"\/new-collections\" class=\"nav-link\"\r\n >New Collections<\/a\r\n >\r\n <a href=\"\/reference-collection\" class=\"nav-link\"\r\n >Reference Collection<\/a\r\n >\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"nav-sections\">\r\n <div class=\"nav-section\">\r\n <div class=\"section-title\">Research Support<\/div>\r\n <div class=\"nav-links\">\r\n <a href=\"\/research-101\" class=\"nav-link\">Research 101<\/a>\r\n <a href=\"\/research-tools\" class=\"nav-link\">Research Tools<\/a>\r\n <a href=\"\/library-guide\" class=\"nav-link\">Library Guide<\/a>\r\n <a href=\"\/subject-guide\" class=\"nav-link\">Subject Guides<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"nav-section\">\r\n <div class=\"section-title\">Library Services<\/div>\r\n <div class=\"nav-links\">\r\n \r\n <a href=\"\/become-a-member\" class=\"nav-link\">Become a Member<\/a>\r\n <a href=\"\/opening-hours-and-facility\" class=\"nav-link\"\r\n >Opening Hours and Facilities<\/a\r\n >\r\n <a href=\"\/consult-a-librarian\" class=\"nav-link\"\r\n >Consult a Librarian<\/a\r\n >\r\n <a href=\"\/user-education\" class=\"nav-link\">User Education<\/a>\r\n <a href=\"\/public-access\" class=\"nav-link\">Public Access<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"nav-section\">\r\n <div class=\"section-title\">Collections<\/div>\r\n <div class=\"nav-links\">\r\n <a href=\"\/statistics\" class=\"nav-link\">Data<\/a>\r\n <a href=\"\/all-collections\" class=\"nav-link\">All Collections<\/a>\r\n <a href=\"\/special-collections\" class=\"nav-link\"\r\n >Special Collections<\/a\r\n >\r\n <a href=\"\/new-collections\" class=\"nav-link\">New Collections<\/a>\r\n <a href=\"\/reference-collection\" class=\"nav-link\"\r\n >Reference Collection<\/a\r\n >\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"recent-post-section\">\r\n <div class=\"left-sections\">\r\n <div class=\"info-section\">\r\n <div class=\"info-section-title\">E-Resources Access<\/div>\r\n <div class=\"info-links\">\r\n <a\r\n href=\"https:\/\/ezproxy.uns.ac.id\/\"\r\n target=\"_blank\"\r\n class=\"info-link\"\r\n >EZPROXY (e-books and e-journals access)<\/a\r\n >\r\n <a\r\n href=\"https:\/\/digilib.uns.ac.id\/\"\r\n target=\"_blank\"\r\n class=\"info-link\"\r\n >INSTITUTIONAL REPOSITORY<\/a\r\n >\r\n <a\r\n href=\"https:\/\/kubuku.id\/download\/uns-surakarta\/\"\r\n target=\"_blank\"\r\n class=\"info-link\"\r\n >KUBUKU (e-books)<\/a\r\n >\r\n <a href=\"\/open-access\/\" class=\"info-link\">OPEN ACCESS<\/a>\r\n <a href=\"\/e-learning\/\" class=\"info-link\">E-LEARNING<\/a>\r\n <a href=\"\/bibliometrics\/\" class=\"info-link\">BIBLIOMETRICS<\/a>\r\n <a href=\"\/vosviewer\/\" class=\"info-link\">VOSVIEWER<\/a>\r\n <a href=\"\/bibliometrics-labs\/\" class=\"info-link\">LABS<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"info-section\">\r\n <div class=\"info-section-title\">Information<\/div>\r\n <div class=\"info-links\">\r\n <a href=\"\/request-a-book\/\" class=\"info-link\">BOOK REQUEST<\/a>\r\n <a href=\"\/questionnaire\/\" class=\"info-link\">QUESTIONNAIRE<\/a>\r\n <a href=\"\/uns-library-profile\/\" class=\"info-link\"\r\n >UNS LIBRARY PROFILE<\/a\r\n >\r\n <a href=\"\/statistics\/\" class=\"info-link\">STATISTICS<\/a>\r\n <a href=\"\/accreditation-support\/\" class=\"info-link\"\r\n >ACCREDITATION SUPPORT<\/a\r\n >\r\n <a href=\"\/turnitin\/\" class=\"info-link\"\r\n >TURNITIN COMPLETE RESOURCES<\/a\r\n >\r\n <a href=\"\/faq-new\/\" class=\"info-link\">FREQUENTLY ASKED QUESTION<\/a>\r\n <a href=\"\/literacy-center\/\" class=\"info-link\">LITERACY CENTER<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <h1 class=\"header-title\">Recent Post<\/h1>\r\n\r\n <div id=\"loadingIndicator\">\r\n <div class=\"spinner\"><\/div>\r\n Loading posts...\r\n <\/div>\r\n\r\n <div\r\n class=\"carousel-wrapper\"\r\n id=\"carouselContainer\"\r\n style=\"display: none\"\r\n >\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-track\" id=\"carouselTrack\"><\/div>\r\n <div class=\"carousel-buttons\">\r\n <a\r\n href=\"https:\/\/library.uns.ac.id\/recent-post\/\"\r\n class=\"view-all-btn\"\r\n id=\"viewAllBtn\"\r\n >\r\n See All Articles\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ START MODIFICATION: Dynamic slider loading from WordPress Media Library\r\n let currentSlide = 0;\r\n let slides = [];\r\n let activeTab = \"collection\";\r\n\r\n \/\/ Fetch slider images from WordPress REST API\r\n async function loadSliderImages() {\r\n try {\r\n const response = await fetch(\r\n \"\/wp-json\/wp\/v2\/media?media_type=image&search=slides&per_page=10\"\r\n );\r\n const mediaItems = await response.json();\r\n\r\n const sliderContainer = document.getElementById(\"sliderContainer\");\r\n const overlay = sliderContainer.querySelector(\".slider-overlay\");\r\n\r\n mediaItems.forEach((item, index) => {\r\n const img = document.createElement(\"img\");\r\n img.className =\r\n index === 0 ? \"slider-image active\" : \"slider-image\";\r\n img.src = item.source_url;\r\n img.alt =\r\n item.alt_text || item.title?.rendered || `Slide ${index + 1}`;\r\n if (index !== 0) {\r\n img.loading = \"lazy\";\r\n }\r\n sliderContainer.insertBefore(img, overlay);\r\n });\r\n\r\n \/\/ Update slides reference and start rotation\r\n slides = document.querySelectorAll(\".slider-image\");\r\n if (slides.length > 1) {\r\n setInterval(rotateSlider, 6000);\r\n }\r\n } catch (error) {\r\n console.error(\"Failed to load slider images:\", error);\r\n }\r\n }\r\n\r\n function rotateSlider() {\r\n if (slides.length === 0) return;\r\n slides.forEach((slide) => slide.classList.remove(\"active\"));\r\n currentSlide = (currentSlide + 1) % slides.length;\r\n slides[currentSlide].classList.add(\"active\");\r\n }\r\n\r\n \/\/ Initialize slider\r\n loadSliderImages();\r\n \/\/ END MODIFICATION\r\n\r\n \/\/ Tab switching\r\n function switchTab(tab, button) {\r\n activeTab = tab;\r\n document\r\n .querySelectorAll(\".tab-btn\")\r\n .forEach((btn) => btn.classList.remove(\"active\"));\r\n button.classList.add(\"active\");\r\n\r\n const searchInput = document.getElementById(\"searchInput\");\r\n if (tab === \"collection\") {\r\n searchInput.placeholder = \"Search for printed books collection\";\r\n } else {\r\n searchInput.placeholder =\r\n \"Search for digital copies of UNS student's final project and staff research\";\r\n }\r\n }\r\n\r\n \/\/ Search handling\r\n function handleSearch(event) {\r\n if (event && event.key !== \"Enter\" && event.type !== \"click\") return;\r\n\r\n const searchQuery = document.getElementById(\"searchInput\").value.trim();\r\n if (!searchQuery) return;\r\n\r\n if (activeTab === \"collection\") {\r\n window.open(\r\n `https:\/\/unsla.uns.ac.id\/index.php?keywords=${encodeURIComponent(\r\n searchQuery\r\n )}&search=search`,\r\n \"_blank\"\r\n );\r\n } else {\r\n window.open(\r\n `https:\/\/digilib.uns.ac.id\/dokumen\/search?q=${encodeURIComponent(\r\n searchQuery\r\n )}`,\r\n \"_blank\"\r\n );\r\n }\r\n }\r\n\r\n \/\/ Dashboard Carousel functionality\r\n let currentCarouselSlideDashboard = 0;\r\n const totalCarouselSlidesDashboard = 3;\r\n const carouselTrackDashboard = document.getElementById(\r\n \"carouselTrackDashboard\"\r\n );\r\n const currentSlideNumDashboard = document.getElementById(\r\n \"currentSlideNumDashboard\"\r\n );\r\n const prevBtnDashboard = document.getElementById(\"prevBtnDashboard\");\r\n const nextBtnDashboard = document.getElementById(\"nextBtnDashboard\");\r\n\r\n function updateCarouselDashboard() {\r\n const slideWidth =\r\n carouselTrackDashboard.querySelector(\".carousel-slide\").offsetWidth;\r\n carouselTrackDashboard.style.transform = `translateX(-${\r\n currentCarouselSlideDashboard * slideWidth\r\n }px)`;\r\n currentSlideNumDashboard.textContent =\r\n currentCarouselSlideDashboard + 1;\r\n\r\n prevBtnDashboard.disabled = currentCarouselSlideDashboard === 0;\r\n nextBtnDashboard.disabled =\r\n currentCarouselSlideDashboard === totalCarouselSlidesDashboard - 1;\r\n }\r\n\r\n function nextSlideDashboard() {\r\n currentCarouselSlideDashboard++;\r\n if (currentCarouselSlideDashboard >= totalCarouselSlidesDashboard) {\r\n currentCarouselSlideDashboard = 0;\r\n }\r\n updateCarouselDashboard();\r\n }\r\n\r\n function prevSlideDashboard() {\r\n currentCarouselSlideDashboard--;\r\n if (currentCarouselSlideDashboard < 0) {\r\n currentCarouselSlideDashboard = totalCarouselSlidesDashboard - 1;\r\n }\r\n updateCarouselDashboard();\r\n }\r\n\r\n \/\/ Touch\/swipe support for dashboard\r\n let touchStartXDashboard = 0;\r\n let touchEndXDashboard = 0;\r\n\r\n carouselTrackDashboard.addEventListener(\"touchstart\", (e) => {\r\n touchStartXDashboard = e.changedTouches[0].screenX;\r\n });\r\n\r\n carouselTrackDashboard.addEventListener(\"touchend\", (e) => {\r\n touchEndXDashboard = e.changedTouches[0].screenX;\r\n handleSwipeDashboard();\r\n });\r\n \r\n function handleSwipeDashboard() {\r\n if (touchEndXDashboard < touchStartXDashboard - 50) {\r\n nextSlideDashboard();\r\n }\r\n if (touchEndXDashboard > touchStartXDashboard + 50) {\r\n prevSlideDashboard();\r\n }\r\n }\r\n\r\n window.addEventListener(\"resize\", updateCarouselDashboard);\r\n updateCarouselDashboard();\r\n\r\n \/\/ Carousel Post Library\r\n const track = document.getElementById(\"carouselTrack\");\r\n let posts = [];\r\n\r\n function cleanHTML(str) {\r\n let tmp = document.createElement(\"div\");\r\n tmp.innerHTML = str;\r\n return tmp.textContent || \"\";\r\n }\r\n\r\n function extractImage(html) {\r\n const div = document.createElement(\"div\");\r\n div.innerHTML = html;\r\n const img = div.querySelector(\"img\");\r\n return img\r\n ? img.src\r\n : \"https:\/\/via.placeholder.com\/400x250\/17b8b8\/ffffff?text=Library+Post\";\r\n }\r\n\r\n function truncateText(text, maxLength) {\r\n if (text.length <= maxLength) return text;\r\n return text.substr(0, maxLength) + \"...\";\r\n }\r\n\r\n function createBigCard(post) {\r\n let div = document.createElement(\"div\");\r\n div.className = \"card-big\";\r\n\r\n let content = cleanHTML(post.content);\r\n let excerpt = truncateText(content, 220);\r\n\r\n div.innerHTML = `\r\n <div class=\"card-image\">\r\n <img decoding=\"async\" src=\"${post.image}\" alt=\"${post.title}\">\r\n <\/div>\r\n <div class=\"card-content\">\r\n <h3 class=\"card-title\">${post.title}<\/h3>\r\n <p class=\"card-text\">${excerpt}<\/p>\r\n <button class=\"read-more-btn\" onclick=\"window.open('${post.link}', '_blank')\">Read More<\/button>\r\n <\/div>\r\n `;\r\n return div;\r\n }\r\n\r\n let showAllArticles = false;\r\n\r\n function render() {\r\n track.style.opacity = \"0\";\r\n track.style.transform = \"translateY(20px)\";\r\n\r\n setTimeout(() => {\r\n track.innerHTML = \"\";\r\n\r\n \/\/ Show only first 2 articles initially, or all if expanded\r\n const articlesToShow = showAllArticles ? posts : posts.slice(0, 3);\r\n\r\n articlesToShow.forEach((post, index) => {\r\n const card = createBigCard(post);\r\n card.style.animationDelay = `${index * 0.1}s`;\r\n track.appendChild(card);\r\n });\r\n\r\n \/\/ Update button visibility\r\n const viewAllBtn = document.getElementById(\"viewAllBtn\");\r\n if (posts.length <= 4) {\r\n viewAllBtn.style.display = \"none\";\r\n } else {\r\n viewAllBtn.style.display = \"inline-flex\";\r\n }\r\n\r\n setTimeout(() => {\r\n track.style.opacity = \"1\";\r\n track.style.transform = \"translateY(0)\";\r\n }, 50);\r\n }, 250);\r\n }\r\n\r\n function toggleAllArticles() {\r\n showAllArticles = !showAllArticles;\r\n render();\r\n\r\n \/\/ Smooth scroll to show new content if expanding\r\n if (showAllArticles) {\r\n setTimeout(() => {\r\n const thirdCard = track.children[2];\r\n if (thirdCard) {\r\n thirdCard.scrollIntoView({ behavior: \"smooth\", block: \"center\" });\r\n }\r\n }, 300);\r\n }\r\n }\r\n\r\n async function loadPosts() {\r\n try {\r\n const res = await fetch(\r\n \"https:\/\/library.uns.ac.id\/wp-json\/wp\/v2\/posts?per_page=6&_fields=title,content,link\"\r\n );\r\n const data = await res.json();\r\n\r\n posts = data.map((p) => ({\r\n title: cleanHTML(p.title.rendered),\r\n content: p.content.rendered,\r\n image: extractImage(p.content.rendered),\r\n link: p.link,\r\n }));\r\n\r\n document.getElementById(\"loadingIndicator\").style.display = \"none\";\r\n document.getElementById(\"carouselContainer\").style.display = \"flex\";\r\n\r\n track.style.transition = \"opacity 0.5s ease, transform 0.5s ease\";\r\n render();\r\n } catch (e) {\r\n console.error(e);\r\n document.getElementById(\"loadingIndicator\").innerHTML =\r\n '<div class=\"spinner\"><\/div>Failed to load posts. Please refresh the page.';\r\n }\r\n }\r\n\r\n loadPosts();\r\n <\/script>\r\n <\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\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>Library Dashboard Collection Catalog Institutional Repository \ud83d\udd0d \u2039 1 \/ 3 \u203a…<\/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-17459","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Sebelas Maret University Library -<\/title>\n<meta name=\"description\" content=\"Official website of Sebelas Maret University Library\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/library.uns.ac.id\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sebelas Maret University Library -\" \/>\n<meta property=\"og:description\" content=\"Official website of Sebelas Maret University Library\" \/>\n<meta property=\"og:url\" content=\"https:\/\/library.uns.ac.id\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-06T01:53:15+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/library.uns.ac.id\\\/\",\"url\":\"https:\\\/\\\/library.uns.ac.id\\\/\",\"name\":\"Sebelas Maret University Library -\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/library.uns.ac.id\\\/#website\"},\"datePublished\":\"2025-11-21T03:41:57+00:00\",\"dateModified\":\"2026-05-06T01:53:15+00:00\",\"description\":\"Official website of Sebelas Maret University Library\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/library.uns.ac.id\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/library.uns.ac.id\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/library.uns.ac.id\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/library.uns.ac.id\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sebelas Maret University Library\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/library.uns.ac.id\\\/#website\",\"url\":\"https:\\\/\\\/library.uns.ac.id\\\/\",\"name\":\"Universitas Sebelas Maret Library\",\"description\":\"Prima dan Unggul\",\"publisher\":{\"@id\":\"https:\\\/\\\/library.uns.ac.id\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/library.uns.ac.id\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/library.uns.ac.id\\\/#organization\",\"name\":\"Universitas Sebelas Maret\",\"url\":\"https:\\\/\\\/library.uns.ac.id\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/library.uns.ac.id\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/library.uns.ac.id\\\/wp-content\\\/uploads\\\/2016\\\/01\\\/logo1.png\",\"contentUrl\":\"https:\\\/\\\/library.uns.ac.id\\\/wp-content\\\/uploads\\\/2016\\\/01\\\/logo1.png\",\"width\":227,\"height\":101,\"caption\":\"Universitas Sebelas Maret\"},\"image\":{\"@id\":\"https:\\\/\\\/library.uns.ac.id\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.instagram.com\\\/unslibrary\\\/\",\"https:\\\/\\\/www.youtube.com\\\/@unslibrarysolo\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Sebelas Maret University Library -","description":"Official website of Sebelas Maret University Library","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/library.uns.ac.id\/","og_locale":"en_US","og_type":"article","og_title":"Sebelas Maret University Library -","og_description":"Official website of Sebelas Maret University Library","og_url":"https:\/\/library.uns.ac.id\/","article_modified_time":"2026-05-06T01:53:15+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/library.uns.ac.id\/","url":"https:\/\/library.uns.ac.id\/","name":"Sebelas Maret University Library -","isPartOf":{"@id":"https:\/\/library.uns.ac.id\/#website"},"datePublished":"2025-11-21T03:41:57+00:00","dateModified":"2026-05-06T01:53:15+00:00","description":"Official website of Sebelas Maret University Library","breadcrumb":{"@id":"https:\/\/library.uns.ac.id\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/library.uns.ac.id\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/library.uns.ac.id\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/library.uns.ac.id\/"},{"@type":"ListItem","position":2,"name":"Sebelas Maret University Library"}]},{"@type":"WebSite","@id":"https:\/\/library.uns.ac.id\/#website","url":"https:\/\/library.uns.ac.id\/","name":"Universitas Sebelas Maret Library","description":"Prima dan Unggul","publisher":{"@id":"https:\/\/library.uns.ac.id\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/library.uns.ac.id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/library.uns.ac.id\/#organization","name":"Universitas Sebelas Maret","url":"https:\/\/library.uns.ac.id\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/library.uns.ac.id\/#\/schema\/logo\/image\/","url":"https:\/\/library.uns.ac.id\/wp-content\/uploads\/2016\/01\/logo1.png","contentUrl":"https:\/\/library.uns.ac.id\/wp-content\/uploads\/2016\/01\/logo1.png","width":227,"height":101,"caption":"Universitas Sebelas Maret"},"image":{"@id":"https:\/\/library.uns.ac.id\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/unslibrary\/","https:\/\/www.youtube.com\/@unslibrarysolo"]}]}},"_links":{"self":[{"href":"https:\/\/library.uns.ac.id\/wp-json\/wp\/v2\/pages\/17459","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/library.uns.ac.id\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/library.uns.ac.id\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/library.uns.ac.id\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/library.uns.ac.id\/wp-json\/wp\/v2\/comments?post=17459"}],"version-history":[{"count":96,"href":"https:\/\/library.uns.ac.id\/wp-json\/wp\/v2\/pages\/17459\/revisions"}],"predecessor-version":[{"id":18535,"href":"https:\/\/library.uns.ac.id\/wp-json\/wp\/v2\/pages\/17459\/revisions\/18535"}],"wp:attachment":[{"href":"https:\/\/library.uns.ac.id\/wp-json\/wp\/v2\/media?parent=17459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}