☰

Daymap Timetable Redesign

Modern redesign of the Daymap timetable interface

目前为 2025-04-10 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Daymap Timetable Redesign
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.1
  5. // @description  Modern redesign of the Daymap timetable interface
  6. // @author       You
  7. // @match        https://lefevrehs.daymap.net/daymap/timetable/timetable.aspx
  8. // @grant        GM_addStyle
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     // Add custom CSS
  15.     GM_addStyle(`
  16.         /* Main layout improvements */
  17.         .main-layout {
  18.             padding: 20px;
  19.             max-width: 14000px;
  20.             margin: 0 auto;
  21.         }
  22.  
  23.         .grid {
  24.             gap: 0px;
  25.         }
  26.  
  27.         .card {
  28.             border-radius: 10px;
  29.             box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  30.             border: none;
  31.             overflow: hidden;
  32.  
  33.         }
  34.  
  35.         /* Timetable styling */
  36.         .tt {
  37.             border-collapse: separate;
  38.             border-spacing: 0;
  39.             width: 100%;
  40.         }
  41.  
  42.         .tt th {
  43.             background: #1888C9;
  44.             color: white;
  45.             padding: 10px;
  46.             text-align: center;
  47.             font-weight: 500;
  48.         }
  49.  
  50.         .tt td {
  51.             padding: 0;
  52.             border: 1px solid #e9ecef;
  53.         }
  54.  
  55.         .ttCell {
  56.             padding: 8px;
  57.             height: 80px;
  58.             display: flex;
  59.             flex-direction: column;
  60.             justify-content: space-between;
  61.             transition: all 0.2s ease;
  62.         }
  63.  
  64.         .ttCell:hover {
  65.             filter: brightness(95%);
  66.             transform: translateY(-2px);
  67.         }
  68.  
  69.         .ttSubject {
  70.             font-weight: 600;
  71.             font-size: 0.9rem;
  72.             margin-bottom: 5px;
  73.         }
  74.  
  75.         .ttTeacher, .ttRoom {
  76.             font-size: 0.8rem;
  77.             color: white;
  78.         }
  79.  
  80.         .Period {
  81.             background: #f8f9fa;
  82.             font-weight: 500;
  83.             padding: 8px;
  84.             white-space: nowrap;
  85.         }
  86.  
  87.         /* Task list improvements */
  88.         .feed {
  89.             width: 100%;
  90.             border-collapse: collapse;
  91.         }
  92.  
  93.         .feed tr {
  94.             border-bottom: 1px solid #e9ecef;
  95.         }
  96.  
  97.         .feed td {
  98.             padding: 12px;
  99.         }
  100.  
  101.         .feed .cap {
  102.             width: 120px;
  103.             font-weight: 500;
  104.             color: #2c3e50;
  105.             vertical-align: top;
  106.         }
  107.  
  108.         .feed .itm {
  109.             cursor: pointer;
  110.             transition: background 0.2s ease;
  111.         }
  112.  
  113.         .feed .itm:hover {
  114.             background: #f8f9fa;
  115.         }
  116.  
  117.         .Caption {
  118.             font-size: 0.8rem;
  119.             color: #6c757d;
  120.         }
  121.  
  122.         /* Message list improvements */
  123.         .msgList {
  124.             padding: 0;
  125.         }
  126.  
  127.         daymap-list-item {
  128.             padding: 12px 15px;
  129.             border-bottom: 1px solid #e9ecef;
  130.             display: block;
  131.             transition: background 0.2s ease;
  132.         }
  133.  
  134.         daymap-list-item:hover {
  135.             background: #f8f9fa;
  136.         }
  137.  
  138.         /* Button improvements */
  139.         .btn {
  140.             border-radius: 6px;
  141.             padding: 8px 16px;
  142.             transition: all 0.2s ease;
  143.         }
  144.  
  145.         .btn:hover {
  146.             transform: translateY(-1px);
  147.         }
  148.  
  149.         /* Responsive adjustments */
  150.         @media (max-width: 768px) {
  151.             .grid > div {
  152.                 width: 100% !important;
  153.             }
  154.  
  155.             .ttCell {
  156.                 height: auto;
  157.                 min-height: 60px;
  158.             }
  159.         }
  160.     `);
  161.  
  162.     // Wait for page to load
  163.     window.addEventListener('load', function() {
  164.         // Add a loading indicator while we process
  165.         const loadingIndicator = document.createElement('div');
  166.         loadingIndicator.style.position = 'fixed';
  167.         loadingIndicator.style.top = '0';
  168.         loadingIndicator.style.left = '0';
  169.         loadingIndicator.style.width = '100%';
  170.         loadingIndicator.style.height = '3px';
  171.         loadingIndicator.style.backgroundColor = '#1888C9';
  172.         loadingIndicator.style.zIndex = '9999';
  173.         document.body.appendChild(loadingIndicator);
  174.  
  175.         // Process timetable cells
  176.         setTimeout(() => {
  177.             const cells = document.querySelectorAll('.ttCell');
  178.             cells.forEach(cell => {
  179.                 // Add hover effect
  180.                 cell.style.cursor = 'pointer';
  181.  
  182.                 // Improve layout of cell content
  183.                 const subject = cell.querySelector('.ttSubject');
  184.                 if (subject) {
  185.                     // Shorten long subject names
  186.                     const text = subject.textContent.trim();
  187.                     if (text.length > 25) {
  188.                         subject.textContent = text.substring(0, 22) + '...';
  189.                     }
  190.                 }
  191.             });
  192.  
  193.             // Process task list
  194.             const tasks = document.querySelectorAll('.feed .itm');
  195.             tasks.forEach(task => {
  196.                 // Add hover effect
  197.                 task.style.transition = 'all 0.2s ease';
  198.  
  199.                 // Color code based on status
  200.                 if (task.innerHTML.includes('Overdue')) {
  201.                     task.style.borderLeft = '3px solid #e81123';
  202.                 } else if (task.innerHTML.includes('Uh did you submit on Turnitin or something?')) {
  203.                     task.style.borderLeft = '3px solid #e81123';
  204.                 } else if (task.innerHTML.includes('Work has been received')) {
  205.                     task.style.borderLeft = '3px solid #107c10';
  206.                 } else {
  207.                     task.style.borderLeft = '3px solid #ffb900';
  208.                 }
  209.             });
  210.  
  211.             // Remove loading indicator
  212.             loadingIndicator.style.opacity = '0';
  213.             setTimeout(() => loadingIndicator.remove(), 300);
  214.         }, 500);
  215.     });
  216. })();