zebra-day 0.0.32__py3-none-any.whl → 1.0.2__py3-none-any.whl

zebra_day/static/datschund.css

@@ -7,15 +7,17 @@
 
 body {
     font-family: 'Monoid', monospace;
-    background-color: #E6C79C; /* Light tan reminiscent of a dachshund's fur */
-    color: #4B321F; /* Deep brown for text color, like a dachshund's coat */
+    background-color: #FFD700; /* Bold golden background reminiscent of Warhol's color palette */
+    color: #D91E63; /* Bold Pink text, Warhol-esque */
     margin: 0;
     padding: 20px;
+    background-image: linear-gradient(rgba(21, 2, 2, 0.99), rgba(55, 55, 55, 0.8)), url('./datschund.png');
+    background-repeat: repeat;
 }
 
 h1, h2 {
-    color: #825C41; /* A deeper brown for headers */
-    border-bottom: 2px dashed #4B321F; /* Dashed border to evoke the dachshund's playfulness */
+    color: rgb(222,221,222); /* Vibrant blue for headers */
+    border-bottom: 3px solid #2E86C1;
     padding-bottom: 5px;
 }
 
@@ -26,95 +28,113 @@ ul {
 }
 
 li::before {
-    content: '\2022'; /* A simple dot as bullet */
-    color: #825C41;
-    font-weight: bold;
+    content: '';
     display: inline-block;
-    margin-right: 10px; 
-    font-size: 1.5em; 
-    line-height: 0; /* Adjust for the bullet point */
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background-color: #D91E63; /* Reusing bold pink color */
+    margin-right: 10px;
+    vertical-align: middle;
 }
 
 a {
-    color: #825C41; /* Brown links for a coherent feel */
+    color: rgb(111,255,10); /* A deep green for links, contrast with the daylily theme */
     text-decoration: none;
     transition: color 0.3s ease;
 }
 
 a:hover {
-    color: #4B321F; /* Darker shade of brown for hover */
+    color: #2E86C1; /* Vibrant blue on hover */
 }
 
 small {
-    color: #A8977E; /* Lighter shade of brown for less prominent text */
+    color: rgba(221,1,211); /* Purple tint for smaller text, keeping with the vibrant palette */
 }
 
 .spinner-hidden {
-    /* [No changes here] */
+    display: none;
+    position: fixed;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background: rgba(255,215,0,0.7); /* Transparent golden background, keeping in theme */
+    z-index: 1000;
+    align-items: center;
+    justify-content: center;
+    display: flex;
 }
 
 #spinner {
-    /* [No changes here] */
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 9999;
 }
 
-.loader {
-    /* Change the loader colors to match the theme */
-    border: 8px solid #E6C79C; 
-    border-top: 8px solid #825C41; 
+.loader, .cloader {
+    border: 8px solid #7D3C98; /* Purple borders */
+    border-top: 8px solid #2E86C1; /* Blue on top to keep the spinning noticeable */
     border-radius: 50%;
     width: 50px;
     height: 50px;
     animation: spin 1s linear infinite;
 }
 
-.cloader {
-    /* Change the cloader colors to match the theme */
-    border: 16px solid #E6C79C;
-    border-top: 16px solid #4B321F;
-    border-radius: 50%;
-    width: 50px;
-    height: 50px;
-    animation: spin 2s linear infinite;
-}
-
 @keyframes spin {
-    /* [No changes here] */
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
 }
 
 hr {
     border: 0;
-    height: 1px;
-    background-image: linear-gradient(to right, #825C41, #E6C79C, #825C41); /* Gradient using the dachshund palette */
+    height: 2px;
+    background-image: linear-gradient(to right, #D91E63, #FFD700, #2E86C1);
     margin: 20px 0;
 }
 
 input[type=text], textarea, select {
-    background-color: #F3E4D1; /* Slightly off-white for inputs */
-    color: #4B321F; 
-    border: 2px solid #825C41; 
-    border-radius: 5px; 
+    background-color: #FFFFFF; /* White background for input fields */
+    color: #D91E63; /* Pink text */
+    border: 2px solid #196F3D; /* Green border */
+    border-radius: 5px;
     padding: 5px 10px;
     outline: none;
     transition: background-color 0.3s ease;
 }
 
 input[type=text]:hover, textarea:hover, select:hover {
-    background-color: #E6C79C; 
+    background-color: #FFFAE5; /* A very light yellow for hover */
 }
 
 input[type=submit], button, input[type="button"] {
-    background-color: #825C41; 
-    color: #E6C79C;
+    background-color: #D91E63; /* Pink buttons */
+    color: #FFFFFF; /* White text on buttons */
     border: none;
     border-radius: 5px;
-    padding: 5px 10px;
+    padding: 8px 15px;
     cursor: pointer;
+    outline: none;
     transition: background-color 0.3s ease;
 }
 
 input[type=submit]:hover, button:hover, input[type="button"]:hover {
-    background-color: #4B321F; 
-    color: #F3E4D1;
+    background-color: #E74C3C; /* Reddish hover effect */
 }
 
-/* Adjust other styles as needed */
+textarea::-webkit-scrollbar {
+    width: 10px;
+}
+
+textarea::-webkit-scrollbar-thumb {
+    background-color: #2E86C1;
+    border-radius: 5px;
+}
+
+textarea::-webkit-scrollbar-track {
+    background-color: #FFD700; /* Golden background to keep in theme */
+    border-radius: 5px;
+}
+
+#spinner.spinner-hidden {
+    display: none;
+}

zebra_day/static/favicon.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <!-- Background circle -->
+  <circle cx="16" cy="16" r="15" fill="#f5f5f5" stroke="#333" stroke-width="1"/>
+  
+  <!-- Zebra stripes pattern -->
+  <g fill="#1a1a1a">
+    <!-- Diagonal stripes -->
+    <path d="M4 8 L8 4 L10 4 L4 10 Z"/>
+    <path d="M4 14 L14 4 L16 4 L4 16 Z"/>
+    <path d="M4 20 L20 4 L22 4 L4 22 Z"/>
+    <path d="M4 26 L26 4 L28 4 L6 28 L4 28 Z"/>
+    <path d="M10 28 L28 10 L28 12 L12 28 Z"/>
+    <path d="M16 28 L28 16 L28 18 L18 28 Z"/>
+    <path d="M22 28 L28 22 L28 24 L24 28 Z"/>
+  </g>
+  
+  <!-- Z letter overlay -->
+  <text x="16" y="22" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="bold" fill="#6b46c1" text-anchor="middle">Z</text>
+</svg>
+

zebra_day/static/general.css

@@ -0,0 +1,99 @@
+@font-face {
+    font-family: 'Monoid';
+    src: url('/etc/Monoid-Regular-HalfTight-Dollar-0-1-l.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+body {
+    font-family: 'DejaVu Sans Mono', monospace;
+}
+
+:root {
+    --hrColor: #C400DB;
+}
+
+.hrTiny {
+    height: 1px;
+    background-color: var(--hrColor);
+    width:100%;
+}
+
+.hrSmall {
+    height: 2px;
+    background-color: var(--hrColor);
+    width:100%;
+}
+
+.hrMed {
+    height: 3px;
+    width: 100%;
+    background-color: var(--hrColor);
+}
+
+
+.hrLarge {
+    height: 4px;
+    background-color: var(--hrColor);
+    width:100%;
+}
+
+.hrVLarge {
+    height: 5px;
+    background-color: var(--hrColor);
+    width:100%;
+}
+
+h3 {
+    margin-bottom: auto;
+}
+
+
+.spinner-hidden {
+    display: none;
+    position: fixed;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background: rgba(0,0,0,0.6);
+    z-index: 1000;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+}
+
+
+#spinner.spinner-hidden {
+    display: none;
+}
+
+
+#spinner {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 9999;
+}
+
+
+.loader, .cloader {
+    border: 8px solid #7D3C98; /* Purple borders */
+    border-top: 8px solid #2E86C1; /* Blue on top to keep the spinning noticeable */
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+#spinner.spinner-hidden {
+    display: none;
+}

zebra_day/static/js/zebra_modern.js

@@ -0,0 +1,172 @@
+/**
+ * Zebra Day Modern UI - JavaScript Utilities
+ */
+
+// Global state
+const ZebraDay = {
+    config: window.ZebraConfig || {},
+    toasts: [],
+};
+
+// DOM Ready
+document.addEventListener('DOMContentLoaded', function() {
+    initMobileMenu();
+    initTooltips();
+});
+
+// Mobile Menu Toggle
+function initMobileMenu() {
+    const menuToggle = document.getElementById('menu-toggle');
+    const navLinks = document.getElementById('nav-links');
+    
+    if (menuToggle && navLinks) {
+        menuToggle.addEventListener('click', () => {
+            navLinks.classList.toggle('active');
+        });
+    }
+}
+
+// Tooltips
+function initTooltips() {
+    document.querySelectorAll('[title]').forEach(el => {
+        el.addEventListener('mouseenter', showTooltip);
+        el.addEventListener('mouseleave', hideTooltip);
+    });
+}
+
+function showTooltip(e) {
+    const title = e.target.getAttribute('title');
+    if (!title) return;
+    
+    e.target.setAttribute('data-title', title);
+    e.target.removeAttribute('title');
+    
+    const tooltip = document.createElement('div');
+    tooltip.className = 'tooltip';
+    tooltip.textContent = title;
+    tooltip.style.cssText = `
+        position: fixed;
+        background: var(--color-gray-700, #1f1f1f);
+        color: white;
+        padding: 6px 10px;
+        border-radius: 6px;
+        font-size: 12px;
+        max-width: 280px;
+        z-index: 9999;
+        pointer-events: none;
+    `;
+    
+    document.body.appendChild(tooltip);
+    
+    const rect = e.target.getBoundingClientRect();
+    const margin = 8;
+    let left = rect.left + (rect.width / 2) - (tooltip.offsetWidth / 2);
+    let top = rect.top - tooltip.offsetHeight - margin;
+    
+    left = Math.max(margin, Math.min(left, window.innerWidth - tooltip.offsetWidth - margin));
+    if (top < margin) top = rect.bottom + margin;
+    
+    tooltip.style.left = left + 'px';
+    tooltip.style.top = top + 'px';
+    
+    e.target._tooltip = tooltip;
+}
+
+function hideTooltip(e) {
+    const title = e.target.getAttribute('data-title');
+    if (title) {
+        e.target.setAttribute('title', title);
+        e.target.removeAttribute('data-title');
+    }
+    if (e.target._tooltip) {
+        e.target._tooltip.remove();
+        delete e.target._tooltip;
+    }
+}
+
+// Toast Notifications
+function showToast(type, title, message, duration = 5000) {
+    const container = document.getElementById('toast-container');
+    if (!container) return;
+    
+    const icons = {
+        success: 'fa-check-circle',
+        error: 'fa-exclamation-circle',
+        warning: 'fa-exclamation-triangle',
+        info: 'fa-info-circle'
+    };
+    
+    const toast = document.createElement('div');
+    toast.className = `toast toast-${type}`;
+    toast.innerHTML = `
+        <div class="toast-icon">
+            <i class="fas ${icons[type] || icons.info}"></i>
+        </div>
+        <div class="toast-content">
+            <div class="toast-title">${title}</div>
+            <div class="toast-message">${message}</div>
+        </div>
+        <button class="toast-close" onclick="this.parentElement.remove()">&times;</button>
+    `;
+    
+    container.appendChild(toast);
+    
+    if (duration > 0) {
+        setTimeout(() => toast.remove(), duration);
+    }
+    
+    return toast;
+}
+
+// Loading Overlay
+function showLoading(message = 'Loading...') {
+    const overlay = document.getElementById('loading-overlay');
+    if (overlay) {
+        const p = overlay.querySelector('p');
+        if (p) p.textContent = message;
+        overlay.classList.remove('d-none');
+    }
+}
+
+function hideLoading() {
+    const overlay = document.getElementById('loading-overlay');
+    if (overlay) {
+        overlay.classList.add('d-none');
+    }
+}
+
+// Copy to Clipboard
+async function copyToClipboard(text) {
+    try {
+        await navigator.clipboard.writeText(text);
+        showToast('success', 'Copied!', 'Text copied to clipboard');
+    } catch (err) {
+        showToast('error', 'Copy Failed', 'Could not copy to clipboard');
+    }
+}
+
+// Format Date
+function formatDate(dateString) {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+    });
+}
+
+// Debounce
+function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}
+