{"id":294,"date":"2025-01-23T09:29:31","date_gmt":"2025-01-23T09:29:31","guid":{"rendered":"https:\/\/eduino-lms.com\/index.php\/aboutss\/"},"modified":"2025-05-13T19:33:48","modified_gmt":"2025-05-13T19:33:48","slug":"demo","status":"publish","type":"page","link":"https:\/\/eduino-lms.com\/index.php\/demo\/","title":{"rendered":"Demo"},"content":{"rendered":"\t\t<div data-elementor-type=\"page\" data-elementor-id=\"294\" class=\"elementor elementor-294\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8acfa30 e-con-full e-flex e-con e-parent\" data-id=\"8acfa30\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bbda015 elementor-widget elementor-widget-html\" data-id=\"bbda015\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div style=\"width: 100%; min-height: 80vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #5d4fc9 0%, #42276e 100%); font-family: 'Poppins', sans-serif; position: relative; overflow: hidden; padding: 40px 20px; box-sizing: border-box;\">\r\n  \r\n  <!-- Animated gradient background elements -->\r\n  <div style=\"position: absolute; width: 200px; height: 200px; background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%); border-radius: 50%; top: 20%; left: 10%; animation: float 8s ease-in-out infinite;\"><\/div>\r\n  <div style=\"position: absolute; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); border-radius: 50%; bottom: 15%; right: 10%; animation: float 12s ease-in-out infinite 2s;\"><\/div>\r\n  \r\n  <!-- Subtle particle effect -->\r\n  <div style=\"position: absolute; width: 100%; height: 100%; background-image: \r\n    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.03) 1px, transparent 1px),\r\n    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.03) 1px, transparent 1px);\r\n    background-size: 40px 40px;\"><\/div>\r\n\r\n  <!-- Main content container -->\r\n  <div style=\"position: relative; z-index: 3; max-width: 900px; width: 100%; text-align: center; padding: 0 20px;\">\r\n    \r\n    <!-- Animated title -->\r\n    <h1 style=\"font-size: clamp(36px, 5vw, 60px); font-weight: 700; color: white; margin: 0 0 20px; line-height: 1.2; text-shadow: 0 4px 12px rgba(0,0,0,0.15); opacity: 0; animation: fadeInUp 0.8s ease-out forwards;\">\r\n      Explore Eduino LMS \u2013 Live Demo\r\n    <\/h1>\r\n    \r\n    <!-- Animated subtitle with decorative elements -->\r\n    <div style=\"position: relative; display: inline-block;\">\r\n      <div style=\"position: absolute; top: -10px; left: -20px; width: 40px; height: 2px; background: rgba(255,255,255,0.5); transform: rotate(-45deg);\"><\/div>\r\n      <p style=\"font-size: clamp(18px, 2.5vw, 24px); color: rgba(255,255,255,0.9); line-height: 1.6; margin: 0 auto; max-width: 700px; font-weight: 300; opacity: 0; animation: fadeInUp 0.8s ease-out forwards 0.3s;\">\r\n        Try the platform as an <span style=\"color: #d1c4ff; font-weight: 500;\">Admin<\/span>, <span style=\"color: #c5b6ff; font-weight: 500;\">Teacher<\/span>, or <span style=\"color: #b3a4ff; font-weight: 500;\">Student<\/span> and experience the features firsthand.\r\n      <\/p>\r\n      <div style=\"position: absolute; bottom: -10px; right: -20px; width: 40px; height: 2px; background: rgba(255,255,255,0.5); transform: rotate(-45deg);\"><\/div>\r\n    <\/div>\r\n    \r\n    <!-- Animated decorative lines -->\r\n    <div style=\"margin: 40px auto; width: 80%; max-width: 400px; position: relative; height: 4px; opacity: 0; animation: fadeIn 1s ease-out forwards 0.6s;\">\r\n      <div style=\"position: absolute; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);\"><\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <style>\r\n    @keyframes float {\r\n      0%, 100% { transform: translate(0, 0); }\r\n      50% { transform: translate(20px, 20px); }\r\n    }\r\n    @keyframes fadeInUp {\r\n      from { \r\n        opacity: 0;\r\n        transform: translateY(20px);\r\n      }\r\n      to { \r\n        opacity: 1;\r\n        transform: translateY(0);\r\n      }\r\n    }\r\n    @keyframes fadeIn {\r\n      from { opacity: 0; }\r\n      to { opacity: 1; }\r\n    }\r\n  <\/style>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4227db3 e-con-full e-flex e-con e-parent\" data-id=\"4227db3\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9711006 elementor-widget elementor-widget-html\" data-id=\"9711006\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div style=\"display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; padding: 60px 20px; background: linear-gradient(135deg, #f3e8ff, #e8f4ff); font-family: 'Poppins', sans-serif; position: relative; overflow: hidden;\">\r\n\r\n  <!-- Floating background elements -->\r\n  <div style=\"position: absolute; width: 300px; height: 300px; background: radial-gradient(circle, rgba(108, 92, 231, 0.08) 0%, transparent 70%); border-radius: 50%; top: 10%; left: 5%; animation: float 12s ease-in-out infinite;\"><\/div>\r\n  <div style=\"position: absolute; width: 400px; height: 400px; background: radial-gradient(circle, rgba(61, 90, 254, 0.05) 0%, transparent 70%); border-radius: 50%; bottom: 5%; right: 5%; animation: float 15s ease-in-out infinite reverse;\"><\/div>\r\n\r\n  <!-- Admin Panel Card -->\r\n  <div style=\"flex: 1 1 calc(30% - 30px); max-width: 320px; min-width: 280px; background: rgba(255,255,255,0.9); border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); overflow: hidden; transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); transform: translateY(20px); opacity: 0; animation: fadeInUp 0.8s ease-out forwards; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3);\">\r\n    <div style=\"padding: 30px; text-align: center;\">\r\n      <div style=\"font-size: 60px; margin-bottom: 20px; color: #6c5ce7; transform: scale(0.8); opacity: 0; animation: scaleIn 0.6s ease-out forwards 0.3s;\">\r\n        <i class=\"fas fa-tools\"><\/i>\r\n      <\/div>\r\n      <h3 style=\"font-size: 24px; font-weight: 700; color: #2d3436; margin-bottom: 15px; transform: translateY(10px); opacity: 0; animation: fadeInUp 0.5s ease-out forwards 0.4s;\">Admin Panel<\/h3>\r\n      <p style=\"color: #636e72; font-size: 16px; line-height: 1.7; margin-bottom: 25px; transform: translateY(10px); opacity: 0; animation: fadeInUp 0.5s ease-out forwards 0.5s;\">Manage courses, users, and reports with complete control.<\/p>\r\n      <a href=\"#\" style=\"display: inline-block; background: linear-gradient(135deg, #6c5ce7, #5e4cb8); color: #fff; text-decoration: none; padding: 12px 28px; border-radius: 30px; font-size: 15px; font-weight: 500; box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3); transition: all 0.3s; transform: translateY(10px); opacity: 0; animation: fadeInUp 0.5s ease-out forwards 0.6s;\">Try Admin Panel<\/a>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Teacher Panel Card -->\r\n  <div style=\"flex: 1 1 calc(30% - 30px); max-width: 320px; min-width: 280px; background: rgba(255,255,255,0.9); border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); overflow: hidden; transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); transform: translateY(20px); opacity: 0; animation: fadeInUp 0.8s ease-out forwards 0.2s; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3);\">\r\n    <div style=\"padding: 30px; text-align: center;\">\r\n      <div style=\"font-size: 60px; margin-bottom: 20px; color: #5e4cb8; transform: scale(0.8); opacity: 0; animation: scaleIn 0.6s ease-out forwards 0.5s;\">\r\n        <i class=\"fas fa-chalkboard-teacher\"><\/i>\r\n      <\/div>\r\n      <h3 style=\"font-size: 24px; font-weight: 700; color: #2d3436; margin-bottom: 15px; transform: translateY(10px); opacity: 0; animation: fadeInUp 0.5s ease-out forwards 0.6s;\">Teacher Panel<\/h3>\r\n      <p style=\"color: #636e72; font-size: 16px; line-height: 1.7; margin-bottom: 25px; transform: translateY(10px); opacity: 0; animation: fadeInUp 0.5s ease-out forwards 0.7s;\">Create courses, track student progress, and manage assignments.<\/p>\r\n      <a href=\"#\" style=\"display: inline-block; background: linear-gradient(135deg, #5e4cb8, #4a3aa3); color: #fff; text-decoration: none; padding: 12px 28px; border-radius: 30px; font-size: 15px; font-weight: 500; box-shadow: 0 4px 15px rgba(94, 76, 184, 0.3); transition: all 0.3s; transform: translateY(10px); opacity: 0; animation: fadeInUp 0.5s ease-out forwards 0.8s;\">Try Teacher Panel<\/a>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Student Panel Card -->\r\n  <div style=\"flex: 1 1 calc(30% - 30px); max-width: 320px; min-width: 280px; background: rgba(255,255,255,0.9); border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); overflow: hidden; transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); transform: translateY(20px); opacity: 0; animation: fadeInUp 0.8s ease-out forwards 0.4s; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3);\">\r\n    <div style=\"padding: 30px; text-align: center;\">\r\n      <div style=\"font-size: 60px; margin-bottom: 20px; color: #3d5afe; transform: scale(0.8); opacity: 0; animation: scaleIn 0.6s ease-out forwards 0.7s;\">\r\n        <i class=\"fas fa-user-graduate\"><\/i>\r\n      <\/div>\r\n      <h3 style=\"font-size: 24px; font-weight: 700; color: #2d3436; margin-bottom: 15px; transform: translateY(10px); opacity: 0; animation: fadeInUp 0.5s ease-out forwards 0.8s;\">Student Panel<\/h3>\r\n      <p style=\"color: #636e72; font-size: 16px; line-height: 1.7; margin-bottom: 25px; transform: translateY(10px); opacity: 0; animation: fadeInUp 0.5s ease-out forwards 0.9s;\">Access courses, submit assignments, and track your learning.<\/p>\r\n      <a href=\"#\" style=\"display: inline-block; background: linear-gradient(135deg, #3d5afe, #2a4bdb); color: #fff; text-decoration: none; padding: 12px 28px; border-radius: 30px; font-size: 15px; font-weight: 500; box-shadow: 0 4px 15px rgba(61, 90, 254, 0.3); transition: all 0.3s; transform: translateY(10px); opacity: 0; animation: fadeInUp 0.5s ease-out forwards 1s;\">Try Student Panel<\/a>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Include Font Awesome -->\r\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.4\/js\/all.min.js\" crossorigin=\"anonymous\"><\/script>\r\n\r\n  <style>\r\n    @keyframes float {\r\n      0%, 100% { transform: translate(0, 0); }\r\n      50% { transform: translate(20px, 20px); }\r\n    }\r\n    @keyframes fadeInUp {\r\n      from { \r\n        opacity: 0;\r\n        transform: translateY(20px);\r\n      }\r\n      to { \r\n        opacity: 1;\r\n        transform: translateY(0);\r\n      }\r\n    }\r\n    @keyframes scaleIn {\r\n      from { \r\n        opacity: 0;\r\n        transform: scale(0.8);\r\n      }\r\n      to { \r\n        opacity: 1;\r\n        transform: scale(1);\r\n      }\r\n    }\r\n    div[style*=\"background: rgba(255,255,255,0.9)\"]:hover {\r\n      transform: translateY(-10px) !important;\r\n      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important;\r\n    }\r\n    a[href=\"#\"]:hover {\r\n      transform: translateY(-3px) !important;\r\n      box-shadow: 0 7px 20px rgba(0, 0, 0, 0.2) !important;\r\n    }\r\n    @media (max-width: 768px) {\r\n      div[style*=\"calc(30% - 30px)\"] {\r\n        flex: 1 1 calc(50% - 30px) !important;\r\n      }\r\n    }\r\n    @media (max-width: 576px) {\r\n      div[style*=\"calc(30% - 30px)\"] {\r\n        flex: 1 1 100% !important;\r\n        max-width: 100% !important;\r\n      }\r\n    }\r\n  <\/style>\r\n<\/div>\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>Explore Eduino LMS \u2013 Live Demo Try the platform as an Admin, Teacher, or Student and experience the features firsthand. Admin Panel Manage courses, users, and reports with complete control. Try Admin Panel Teacher Panel Create courses, track student progress, and manage assignments. Try Teacher Panel Student Panel Access courses, submit assignments, and track your [&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":{"_eb_attr":"","footnotes":""},"class_list":["post-294","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/eduino-lms.com\/index.php\/wp-json\/wp\/v2\/pages\/294","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eduino-lms.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eduino-lms.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eduino-lms.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eduino-lms.com\/index.php\/wp-json\/wp\/v2\/comments?post=294"}],"version-history":[{"count":10,"href":"https:\/\/eduino-lms.com\/index.php\/wp-json\/wp\/v2\/pages\/294\/revisions"}],"predecessor-version":[{"id":1212,"href":"https:\/\/eduino-lms.com\/index.php\/wp-json\/wp\/v2\/pages\/294\/revisions\/1212"}],"wp:attachment":[{"href":"https:\/\/eduino-lms.com\/index.php\/wp-json\/wp\/v2\/media?parent=294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}