Add course

resources/common.js

@@ -472,7 +472,9 @@ $(function() {
         let key = `oj-content-${window.location.href}`;
         let $contentClone = $('#content').clone();
         $contentClone.find('.select2').remove();
-            $contentClone.find('.select2-hidden-accessible').removeClass('select2-hidden-accessible');
+        $contentClone.find('.select2-hidden-accessible').removeClass('select2-hidden-accessible');
+        $contentClone.find('.noUi-base').remove();
+        $contentClone.find('.wmd-button-row').remove();
         sessionStorage.setItem(key, JSON.stringify({
           "html": $contentClone.html(),
           "page": window.page,

resources/course.scss

@@ -0,0 +1,133 @@
+@import "vars";
+
+.course-content-title {
+    font-weight: bold;
+}
+
+.course-list {
+    width: 100%;
+    margin: 0 auto;
+    list-style: none;
+    padding: 0;
+
+    .course-item {
+        display: flex;
+        align-items: center;
+        border: 1px solid #ddd;
+        padding: 20px;
+        margin-bottom: 10px;
+        border-radius: 8px;
+        background-color: #fff;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        transition: transform 0.2s ease-in-out;
+    }
+    .course-item:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
+    }
+    .course-image {
+        flex: 0 0 auto;
+        width: 50px;
+        height: 50px;
+        margin-right: 20px;
+        border-radius: 5px;
+        overflow: hidden;
+    }
+    .course-image img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 5px;
+    }
+    .course-content {
+        flex: 1;
+    }
+    .course-name {
+        font-size: 1.5em;
+        margin-bottom: 5px;
+    }
+}
+
+.lesson-list {
+    list-style: none;
+    padding: 0;
+
+    li:hover {
+        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
+        background: #ffffe0;
+    }
+
+    li {
+        background: #fff;
+        border: 1px solid #ddd;
+        margin-bottom: 20px;
+        padding-top: 10px;
+        border-radius: 5px;
+        box-shadow: 0 2px 4px #ccc;
+    }
+    .lesson-title {
+        font-size: 1.5em;
+        margin-left: 1em;
+        margin-right: 1em;
+        color: initial;
+        display: flex;
+        gap: 1em;
+
+        .lesson-points {
+            margin-left: auto;
+            font-size: 0.9em;
+            align-self: flex-end;
+            color: #636363;
+        }
+    }
+    .progress-container {
+        background: #e0e0e0;
+        border-radius: 3px;
+        height: 10px;
+        width: 100%;
+        margin-top: 10px;
+    }
+    .progress-bar {
+        background: $theme_color;
+        height: 10px;
+        border-radius: 3px;
+        line-height: 10px;
+        color: white;
+        text-align: right;
+        font-size: smaller;
+    }
+}
+
+.course-problem-list {
+    list-style-type: none;
+    padding: 0;
+    font-size: 15px;
+
+    i {
+        font-size: large;
+    }
+
+    li {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid #eee;
+        padding: 10px;
+        border-radius: 5px;
+    }
+    .problem-name {
+        margin-left: 10px;
+    }
+
+    li:hover {
+        background: #e0e0e0;
+    }
+    .score {
+        font-weight: bold;
+        margin-left: auto;
+    }
+    a {
+        text-decoration: none;
+        color: inherit;
+    }
+}

resources/pagedown_widget.scss

@@ -17,6 +17,7 @@
     background: #fff;
     border: 1px solid DarkGray;
     font-family: $monospace-fonts;
+    font-size: 15px;
 }
 
 .wmd-preview {

resources/style.scss

@@ -15,4 +15,5 @@
 @import "organization";
 @import "ticket";
 @import "pagedown_widget";
-@import "dmmd-preview";
+@import "dmmd-preview";
+@import "course";