munchboka-edutools 0.1.13__py3-none-any.whl

munchboka_edutools/static/css/parsons/parsonsPuzzle.css

@@ -0,0 +1,331 @@
+/* Define color variables for each mode */
+:root {
+    --parsons-puzzle-background-color: #f9f9f9 !important;
+    --parsons-puzzle-border-color: #ccc;
+    --parsons-puzzle-draggable-background-color: #ffffff;
+    --parsons-puzzle-drop-area-background-color: #ffffff;
+    --parsons-puzzle-drop-area-border-color: #007bff;
+    --parsons-puzzle-text-color: #24292f;
+    --parsons-puzzle-hover-background-color: #e9ecef;
+    --parsons-puzzle-hover-border-color: #0056b3;
+    --parsons-puzzle-placeholder-background-color: #bcbbbb;
+    --parsons-puzzle-placeholder-border-color: #999;
+    --parsons-puzzle-button-background-color-check: #28a745;
+    --parsons-puzzle-button-background-color-reset: #ffc107;
+    --parsons-puzzle-button-text-color: black;
+    --parsons-puzzle-modal-background-color: #fefefe;
+    --parsons-puzzle-modal-border-color: #888;
+    --parsons-puzzle-draggable-item-background-color: #e8e8e8;
+    --parsons-puzzle-draggable-item-border-color: #007bff;
+    --parsons-puzzle-toast-background-color: rgba(0, 128, 128, 0.9);
+    --parsons-puzzle-toast-success-background-color: rgba(25, 135, 84, 0.9);
+    --parsons-puzzle-toast-success-text-color: #ffffff;
+    --parsons-puzzle-toast-error-background-color: rgba(220, 53, 69, 0.9);
+    --parsons-puzzle-toast-error-text-color: #ffffff;
+    /* If you use a "primary" color elsewhere: */
+    --parsons-puzzle-primary-color: #007bff;
+}
+
+/* Dark mode variables */
+[data-mode="dark"] {
+    --parsons-puzzle-background-color: #202020 !important;
+    --parsons-puzzle-border-color: #ccc;
+    --parsons-puzzle-draggable-background-color: #141923;
+    --parsons-puzzle-drop-area-background-color: #3b3b3b;
+    --parsons-puzzle-drop-area-border-color: #007bff;
+    --parsons-puzzle-text-color: #ffffff;
+    --parsons-puzzle-hover-background-color: #333333;
+    --parsons-puzzle-hover-border-color: #0056b3;
+    --parsons-puzzle-placeholder-background-color: #000000;
+    --parsons-puzzle-placeholder-border-color: #999;
+    --parsons-puzzle-button-background-color-check: #28a745;
+    --parsons-puzzle-button-background-color-reset: #ffc107;
+    --parsons-puzzle-button-text-color: black;
+    --parsons-puzzle-modal-background-color: #181818;
+    --parsons-puzzle-modal-border-color: #888;
+    --parsons-puzzle-draggable-item-background-color: #252d40;
+    --parsons-puzzle-draggable-item-border-color: #1b1b1b;
+    --parsons-puzzle-toast-background-color: rgba(0, 128, 128, 0.9);
+}
+
+/* Auto mode using system preferences */
+@media (prefers-color-scheme: light) {
+    [data-mode="auto"] {
+        --parsons-puzzle-background-color: #f9f9f9 !important;
+        --parsons-puzzle-border-color: #ccc;
+        --parsons-puzzle-draggable-background-color: #ffffff;
+        --parsons-puzzle-drop-area-background-color: #ffffff;
+        --parsons-puzzle-drop-area-border-color: #007bff;
+        --parsons-puzzle-text-color: #24292f;
+        --parsons-puzzle-hover-background-color: #e9ecef;
+        --parsons-puzzle-hover-border-color: #0056b3;
+        --parsons-puzzle-placeholder-background-color: #bcbbbb;
+        --parsons-puzzle-placeholder-border-color: #999;
+        --parsons-puzzle-button-background-color-check: #28a745;
+        --parsons-puzzle-button-background-color-reset: #ffc107;
+        --parsons-puzzle-button-text-color: black;
+        --parsons-puzzle-modal-background-color: #fefefe;
+        --parsons-puzzle-modal-border-color: #888;
+        --parsons-puzzle-draggable-item-background-color: #e8e8e8;
+        --parsons-puzzle-draggable-item-border-color: #007bff;
+        --parsons-puzzle-toast-background-color: rgba(0, 128, 128, 0.9);
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    [data-mode="auto"] {
+        --parsons-puzzle-background-color: #202020 !important;
+        --parsons-puzzle-border-color: #ccc;
+        --parsons-puzzle-draggable-background-color: #141923;
+        --parsons-puzzle-drop-area-background-color: #3b3b3b;
+        --parsons-puzzle-drop-area-border-color: #007bff;
+        --parsons-puzzle-text-color: #ffffff;
+        --parsons-puzzle-hover-background-color: #333333;
+        --parsons-puzzle-hover-border-color: #0056b3;
+        --parsons-puzzle-placeholder-background-color: #000000;
+        --parsons-puzzle-placeholder-border-color: #999;
+        --parsons-puzzle-button-background-color-check: #28a745;
+        --parsons-puzzle-button-background-color-reset: #ffc107;
+        --parsons-puzzle-button-text-color: black;
+        --parsons-puzzle-modal-background-color: #181818;
+        --parsons-puzzle-modal-border-color: #888;
+        --parsons-puzzle-draggable-item-background-color: #252d40;
+        --parsons-puzzle-draggable-item-border-color: #1b1b1b;
+        --parsons-puzzle-toast-background-color: rgba(0, 128, 128, 0.9);
+    }
+}
+
+/* Main container for Parsons puzzle */
+.puzzle-container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 20px;
+    border: 1px solid var(--parsons-puzzle-border-color);
+    border-radius: 8px;
+    background-color: var(--parsons-puzzle-background-color) !important;
+    position: relative;
+}
+
+/* Draggable code area (alternate) */
+/* .draggable-code {
+    width: 100%;
+    background-color: var(--parsons-puzzle-draggable-background-color);
+    padding: 10px;
+    border: 1px solid var(--parsons-puzzle-border-color);
+    border-radius: 8px;
+    margin-bottom: 15px;
+} */
+
+/* Draggable items */
+.draggable-code {
+    background-color: var(--parsons-puzzle-draggable-background-color) !important;
+    color: var(--parsons-puzzle-text-color);
+    border: 2px solid var(--parsons-puzzle-primary-color);
+    padding: 10px 15px;
+    margin-bottom: 10px;
+    border-radius: 5px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    cursor: grab;
+    display: inline-block;
+    white-space: normal;
+    width: 100%;
+    height: auto;
+    max-width: 100%;
+    box-sizing: border-box;
+    transition: all 0.2s ease;
+}
+
+/* .pairing-puzzle-container .draggable-code {
+    background-color: var(--parsons-puzzle-draggable-background-color) !important;
+    color: var(--parsons-puzzle-text-color);
+    border: 2px solid var(--parsons-puzzle-primary-color);
+    padding: 10px 15px;
+    margin-bottom: 10px;
+    border-radius: 5px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    cursor: grab;
+    display: inline-block;
+    width: 100%;
+    white-space: nowrap;
+    overflow: visible;
+    text-overflow: ellipsis;
+    box-sizing: border-box;
+    transition: all 0.2s ease;
+} */
+
+/* Drop area */
+.drop-area {
+    width: 100%;
+    background-color: var(--parsons-puzzle-drop-area-background-color) !important;
+    border: 2px dashed var(--parsons-puzzle-drop-area-border-color);
+    min-height: 150px;
+    padding: 10px;
+    border-radius: 8px;
+    position: relative;
+    margin-bottom: 15px;
+}
+
+/* General draggable item styles */
+.draggable {
+    background-color: var(--parsons-puzzle-draggable-item-background-color) !important;
+    color: var(--parsons-puzzle-text-color);
+    border: 1px solid var(--parsons-puzzle-draggable-item-border-color);
+    padding: 5px;
+    margin-bottom: 5px;
+    border-radius: 3px;
+    cursor: grab;
+}
+
+/* Placeholder in drop area */
+.placeholder {
+    height: 50px;
+    margin-bottom: 5px;
+    background-color: var(--parsons-puzzle-placeholder-background-color) !important;
+    border: 1px dashed var(--parsons-puzzle-placeholder-border-color);
+    width: 100%;
+    padding: 5px;
+    box-sizing: border-box;
+    text-align: center;
+}
+
+/* Dragging styles (commented out) */
+/* .draggable:active {
+    background-color: #e0f7fa;
+    opacity: 1;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    transform: scale(1.01);
+    border: 2px solid #007bff;
+    cursor: grabbing;
+    color: #000000;
+    transition: all 0.2s ease;
+    opacity: 0.9;
+} */
+
+/* Drop area hover effect */
+/* .drop-area.dragover {
+    background-color: var(--parsons-puzzle-hover-background-color);
+    border-color: var(--parsons-puzzle-hover-border-color);
+} */
+
+/* Feedback when dragging */
+/* .dragging {
+    display: block;
+    background-color: #e0f7fa;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    transform: scale(1.05);
+    transition: all 0.2s ease;
+    opacity: 0.9 !important;
+} */
+
+/* Code block styles */
+pre.highlight {
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    border: none;
+    font-family: inherit;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+/* Button styles */
+.button-check-solution {
+    background-color: var(--parsons-puzzle-button-background-color-check);
+    color: var(--parsons-puzzle-button-text-color) !important;
+}
+
+.button-reset-puzzle {
+    background-color: var(--parsons-puzzle-button-background-color-reset);
+    color: var(--parsons-puzzle-button-text-color) !important;
+}
+
+/* Modal container (hidden by default) */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.4);
+}
+
+/* Modal content */
+.modal-content {
+    background-color: var(--parsons-puzzle-modal-background-color);
+    margin: 15% auto;
+    padding: 20px;
+    border: 1px solid var(--parsons-puzzle-modal-border-color);
+    width: 80%;
+    border-radius: 5px;
+}
+
+/* Close button */
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+/* Copy button */
+.button-copy-code {
+    margin-top: 10px;
+    padding: 10px 20px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.button-copy-code:hover {
+    background-color: #0056b3;
+}
+
+.button-container {
+    display: flex;
+    gap: 10px;
+    margin-top: 5px;
+}
+
+/* Toast Notification */
+.toast {
+    position: absolute;
+    padding: 15px;
+    border-radius: 8px;
+    z-index: 1000;
+    display: none;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    font-size: 30px;
+    text-align: center;
+}
+
+/* Success Toast */
+.toast-success {
+    background-color: var(--parsons-puzzle-toast-success-background-color);
+    color: var(--parsons-puzzle-toast-success-text-color);
+}
+
+/* Error Toast */
+.toast-error {
+    background-color: var(--parsons-puzzle-toast-error-background-color);
+    color: var(--parsons-puzzle-toast-error-text-color);
+}
+
+/* Toast Message */
+.toast p {
+    margin: 0;
+    font-size: 16px;
+    font-weight: bold;
+}

munchboka_edutools/static/css/popup.css

@@ -0,0 +1,115 @@
+/* =======================
+   Wrapper & Trigger
+   ======================= */
+
+   .popup-wrapper {
+    display: inline-block;
+    position: relative;
+  }
+  
+  .popup-trigger {
+    cursor: pointer;
+    border-bottom: 1px dashed #4a86e8;
+    color: #1a73e8; 
+    transition: color 0.2s, border-color 0.2s;
+  }
+  
+  .popup-trigger:hover {
+    color: #0d5bcd;
+    border-bottom-color: #0d5bcd;
+  }
+  
+  /* =======================
+     Bubble Base Style
+     ======================= */
+  
+  .popup-bubble {
+    position: absolute;
+    top: calc(100% + 6px);
+    left: 0;
+    background: #333;
+    color: white;
+    padding: 0.75em 1em;
+    border-radius: 8px;
+    font-size: 0.95em;
+    line-height: 1.5;
+    z-index: 1000;
+    max-width: 500px;
+    width: max-content;
+    white-space: normal;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+    transition: opacity 0.2s ease, transform 0.2s ease;
+    transform: translateY(4px);
+    opacity: 0;
+    pointer-events: none;
+  }
+  
+  /* =======================
+     Show when active
+     ======================= */
+  
+  .popup-bubble[style*="display: block"] {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0);
+  }
+  
+  /* =======================
+     Light Mode
+     ======================= */
+  
+  [data-mode="light"] .popup-bubble {
+    background: #f9f9f9;
+    color: #222;
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+  }
+
+  [data-mode="light"] .popup-trigger {
+    color: #0023d1;
+    border-bottom-color: #8f00d1;
+  }
+  
+  /* =======================
+     Dark Mode
+     ======================= */
+  
+  [data-mode="dark"] .popup-bubble {
+    background: #1e1e1e !important;
+    color: #e0e0e0;
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+  }
+
+  [data-mode="dark"] .popup-trigger {
+    color: #66b5ff;
+    border-bottom-color: #66b5ff;
+  }
+  
+  /* =======================
+     Auto (respects OS)
+     ======================= */
+  
+  @media (prefers-color-scheme: dark) {
+    [data-mode="auto"] .popup-bubble {
+      background: #1e1e1e !important;
+      color: #e0e0e0;
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+    }
+  
+    [data-mode="auto"] .popup-trigger {
+      color: #66b5ff;
+      border-bottom-color: #66b5ff;
+    }
+  
+    [data-mode="auto"] .popup-trigger:hover {
+      color: #7ac1ff;
+      border-bottom-color: #7ac1ff;
+    }
+  }
+  
+  @media (prefers-color-scheme: light) {
+    [data-mode="auto"] .popup-bubble {
+      background: #f9f9f9;
+      color: #222;
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+    }
+  }