Update README.md

README.md

@@ -9,23 +9,31 @@ pinned: true
 <style>
 body {
     font-family: 'Quicksand', sans-serif;
-    background: linear-gradient(135deg, #e0e0e0 0%, #f0f0f0 100%);
-    color: #333 !important;
-    text-shadow: 0 0 3px rgba(224, 224, 224, 0.7);
+    background: linear-gradient(135deg, #0a1a1a 0%, #001010 100%);
+    color: #e1ffff !important;
+    text-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
     margin: 0;
     padding: 20px;
     transition: all 0.5s ease;
 }
 
+@media (prefers-color-scheme: light) {
+    body {
+        background: linear-gradient(135deg, #e1ffff 0%, #c0f0ff 100%);
+        color: #002b36 !important;
+        text-shadow: 0 0 3px rgba(255, 255, 255, 0.7);
+    }
+}
+
 .container {
     min-width: 100%;
     margin: 0 auto;
     max-width: 1200px;
-    background: rgba(240, 240, 240, 0.95);
+    background: rgba(0, 17, 22, 0.95);
     border-radius: 12px;
     padding: 30px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 0 30px rgba(200, 200, 200, 0.5);
-    border: 1px solid rgba(200, 200, 200, 0.2);
+    box-shadow: 0 0 20px rgba(0, 255, 255, 0.1);
+    border: 1px solid rgba(0, 255, 255, 0.2);
     position: relative;
     overflow: hidden;
 }
@@ -37,7 +45,7 @@ body {
     left: -1px;
     right: -1px;
     bottom: -1px;
-    border: 1px solid rgba(200, 200, 200, 0.5);
+    border: 1px solid rgba(0, 255, 255, 0.5);
     border-radius: 12px;
     pointer-events: none;
     animation: borderGlow 3s ease-in-out infinite alternate;
@@ -45,16 +53,16 @@ body {
 
 @keyframes borderGlow {
     0% {
-        box-shadow: 0 0 5px rgba(200, 200, 200, 0.3);
-        border-color: rgba(200, 200, 200, 0.5);
+        box-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
+        border-color: rgba(0, 255, 255, 0.5);
     }
     50% {
-        box-shadow: 0 0 15px rgba(170, 170, 170, 0.3);
-        border-color: rgba(170, 170, 170, 0.5);
+        box-shadow: 0 0 15px rgba(255, 0, 255, 0.3);
+        border-color: rgba(255, 0, 255, 0.5);
     }
     100% {
-        box-shadow: 0 0 5px rgba(200, 200, 200, 0.3);
-        border-color: rgba(200, 200, 200, 0.5);
+        box-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
+        border-color: rgba(0, 255, 255, 0.5);
     }
 }
 
@@ -71,38 +79,49 @@ body {
     left: 25%;
     right: 25%;
     height: 1px;
-    background: linear-gradient(90deg, transparent, rgba(200, 200, 200, 0.5), transparent);
+    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.5), transparent);
     animation: scanline 8s linear infinite;
+    display: none;
+}
+
+@keyframes scanline {
+    0% { background-position: -100% 0; }
+    100% { background-position: 200% 0; }
 }
 
 .model-name {
-    color: #333;
+    color: #00ffff;
     font-size: 2.5em;
-    text-shadow: 0 0 15px rgba(200, 200, 200, 0.5);
+    text-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
     margin: 0;
     letter-spacing: -1px;
     animation: textGlow 4s ease-in-out infinite alternate;
 }
 
 @keyframes textGlow {
-    0% { text-shadow: 0 0 15px rgba(200, 200, 200, 0.5); }
-    50% { text-shadow: 0 0 20px rgba(170, 170, 170, 0.5); }
-    100% { text-shadow: 0 0 15px rgba(200, 200, 200, 0.5); }
+    0% { text-shadow: 0 0 15px rgba(0, 255, 255, 0.5); }
+    50% { text-shadow: 0 0 20px rgba(255, 0, 255, 0.5); }
+    100% { text-shadow: 0 0 15px rgba(0, 255, 255, 0.5); }
 }
 
 .subtitle {
-    color: #444;
+    color: #00ffcc;
     font-size: 1.2em;
     margin-top: 10px;
     animation: subtitleFade 6s ease-in-out infinite;
 }
 
+@keyframes subtitleFade {
+    0%, 100% { opacity: 0.8; }
+    50% { opacity: 1; }
+}
+
 .waifu-container {
     margin: 20px -30px;
     width: calc(100% + 60px);
     overflow: hidden;
     border-radius: 8px;
-    border: 1px solid rgba(200, 200, 200, 0.3);
+    border: 1px solid rgba(0, 255, 255, 0.3);
     position: relative;
 }
 
@@ -114,20 +133,25 @@ body {
     right: 0;
     bottom: 0;
     background: linear-gradient(45deg,
-        rgba(200, 200, 200, 0.1) 0%,
+        rgba(0, 255, 255, 0.1) 0%,
         transparent 20%,
         transparent 80%,
-        rgba(170, 170, 170, 0.1) 100%);
+        rgba(255, 0, 255, 0.1) 100%);
     pointer-events: none;
     animation: gradientSlide 10s linear infinite;
 }
 
+@keyframes gradientSlide {
+    0% { background-position: 0% 0%; }
+    100% { background-position: 100% 100%; }
+}
+
 .waifu-img {
     width: 100%;
     height: auto;
     border-radius: 0;
     border: none;
-    box-shadow: 0 0 40px rgba(200, 200, 200, 0.2);
+    box-shadow: 0 0 40px rgba(0, 255, 255, 0.2);
     transition: transform 0.5s ease;
 }
 
@@ -136,19 +160,19 @@ body {
 }
 
 .section {
-    color: #444;
+    color: #e1ffff;
     margin: 25px 0;
     padding: 20px;
-    background: rgba(230, 230, 230, 0.9);
+    background: rgba(5, 25, 35, 0.9);
     border-radius: 8px;
-    border: 1px solid rgba(200, 200, 200, 0.15);
+    border: 1px solid rgba(0, 255, 255, 0.15);
     position: relative;
     transition: all 0.3s ease;
 }
 
 .section:hover {
-    border-color: rgba(170, 170, 170, 0.3);
-    box-shadow: 0 0 15px rgba(200, 200, 200, 0.1);
+    border-color: rgba(255, 0, 255, 0.3);
+    box-shadow: 0 0 15px rgba(0, 255, 255, 0.1);
 }
 
 .section::before {
@@ -158,7 +182,7 @@ body {
     left: -1px;
     right: -1px;
     bottom: -1px;
-    border: 1px solid rgba(200, 200, 200, 0.3);
+    border: 1px solid rgba(0, 255, 255, 0.3);
     border-radius: 8px;
     pointer-events: none;
     animation: sectionPulse 5s ease-in-out infinite;
@@ -170,10 +194,10 @@ body {
 }
 
 .section-title {
-    color: #333;
+    color: #00ffff;
     font-size: 1.8em;
     margin-top: 0;
-    text-shadow: 0 0 5px rgba(200, 200, 200, 0.3);
+    text-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
     position: relative;
     display: inline-block;
 }
@@ -185,7 +209,7 @@ body {
     left: 0;
     width: 100%;
     height: 1px;
-    background: linear-gradient(90deg, rgba(200, 200, 200, 0.5), rgba(170, 170, 170, 0.5));
+    background: linear-gradient(90deg, rgba(0, 255, 255, 0.5), rgba(255, 0, 255, 0.5));
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.3s ease;
@@ -204,14 +228,12 @@ body {
 
 .link-card {
     padding: 15px;
-    background: rgba(220, 220, 220, 0.95);
+    background: rgba(20, 35, 45, 0.95);
     border-radius: 8px;
     transition: all 0.3s ease;
-    border: 1px solid rgba(200, 200, 200, 0.1);
+    border: 1px solid rgba(0, 255, 255, 0.1);
     position: relative;
     overflow: hidden;
-    text-decoration: none;
-    color: inherit;
 }
 
 .link-card::before {
@@ -221,7 +243,7 @@ body {
     left: 0;
     right: 0;
     height: 2px;
-    background: linear-gradient(90deg, rgba(200, 200, 200, 0.5), rgba(170, 170, 170, 0.5));
+    background: linear-gradient(90deg, rgba(0, 255, 255, 0.5), rgba(255, 0, 255, 0.5));
     animation: cardScan 4s linear infinite;
 }
 
@@ -232,24 +254,24 @@ body {
 
 .link-card:hover {
     transform: translateY(-3px);
-    box-shadow: 0 5px 15px rgba(200, 200, 200, 0.2);
-    border-color: rgba(170, 170, 170, 0.3);
+    box-shadow: 0 5px 15px rgba(0, 255, 255, 0.2);
+    border-color: rgba(255, 0, 255, 0.3);
 }
 
 .link-card h3 {
     margin-top: 0;
-    color: #444 !important;
+    color: #e1ffff !important;
 }
 
 .link-button {
     display: inline-flex;
     align-items: center;
-    background: rgba(200, 200, 200, 0.1);
-    color: #444 !important;
+    background: rgba(0, 255, 255, 0.1);
+    color: #e1ffff !important;
     padding: 8px 15px;
     border-radius: 6px;
     text-decoration: none;
-    border: 1px solid rgba(200, 200, 200, 0.3);
+    border: 1px solid rgba(0, 255, 255, 0.3);
     margin: 5px 0;
     transition: all 0.3s ease;
     font-size: 0.95em;
@@ -269,10 +291,14 @@ body {
 }
 
 .link-button:hover {
-    background: rgba(170, 170, 170, 0.2);
-    border-color: rgba(170, 170, 170, 0.5);
+    background: rgba(0, 255, 255, 0.2);
+    border-color: rgba(0, 255, 255, 0.5);
     transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(200, 200, 200, 0.2);
+    box-shadow: 0 4px 12px rgba(0, 255, 255, 0.2);
+}
+
+.link-button:hover::before {
+    left: 100%;
 }
 
 .link-button::after {
@@ -295,8 +321,8 @@ body {
 }
 
 .disclaimer {
-    color: #555;
-    border-left: 3px solid #555;
+    color: #00ff99;
+    border-left: 3px solid #00ff99;
     padding-left: 15px;
     margin: 20px 0;
     position: relative;
@@ -320,136 +346,256 @@ body {
     display: inline-block;
     padding: 5px 10px;
     border-radius: 5px;
-    background: rgba(200, 200, 200, 0.1);
-    border: 1px solid #ccc;
+    background: rgba(0, 255, 255, 0.1);
+    border: 1px solid #00ffff;
     margin: 5px;
     font-size: 0.9em;
     animation: badgePulse 3s ease-in-out infinite;
 }
 
 @keyframes badgePulse {
-    0%, 100% { box-shadow: 0 0 5px rgba(200, 200, 200, 0.3); }
-    50% { box-shadow: 0 0 10px rgba(200, 200, 200, 0.5); }
+    0%, 100% { box-shadow: 0 0 5px rgba(0, 255, 255, 0.3); }
+    50% { box-shadow: 0 0 10px rgba(0, 255, 255, 0.5); }
+}
+
+/* Color rules */
+.section p,
+.section ul li,
+.section > p > strong {
+    color: #00ff99 !important;
+}
+
+.section ul li strong {
+    color: #00ff99 !important;
 }
 
+/* Light mode adjustments */
 @media (prefers-color-scheme: light) {
     .container {
-        background: rgba(255, 255, 255, 0.95);
-        border-color: rgba(170, 170, 170, 0.3);
+        background: rgba(224, 255, 255, 0.95);
+        border-color: rgba(0, 150, 150, 0.3);
     }
 
     .model-name, .section-title, .subtitle {
-        color: #333;
-        text-shadow: 0 0 5px rgba(170, 170, 170, 0.3);
+        color: #006666;
+        text-shadow: 0 0 5px rgba(0, 200, 200, 0.3);
     }
 
     .section {
-        background: rgba(255, 255, 255, 0.9);
-        border-color: rgba(170, 170, 170, 0.2);
-        color: #333;
+        background: rgba(200, 250, 255, 0.9);
+        border-color: rgba(0, 200, 200, 0.2);
+        color: #002b36;
     }
 
     .section p,
     .section ul li,
     .section > p > strong {
-        color: #333 !important;
+        color: #008080 !important;
+    }
+
+    .section ul li strong {
+        color: #008080 !important;
     }
 
     .link-card {
-        background: rgba(255, 255, 255, 0.95);
-        border-color: rgba(170, 170, 170, 0.2);
+        background: rgba(150, 230, 255, 0.95);
+        border-color: rgba(0, 150, 150, 0.2);
     }
 
     .link-card h3 {
-        color: #333 !important;
+        color: #002b36 !important;
     }
 
     .link-button {
-        background: rgba(170, 170, 170, 0.1);
-        color: #333 !important;
-        border-color: rgba(170, 170, 170, 0.3);
+        background: rgba(0, 150, 150, 0.1);
+        color: #002b36 !important;
+        border-color: rgba(0, 150, 150, 0.3);
     }
 
     .link-button:hover {
-        background: rgba(170, 170, 170, 0.2);
-        border-color: rgba(170, 170, 170, 0.5);
+        background: rgba(0, 150, 150, 0.2);
+        border-color: rgba(0, 150, 150, 0.5);
     }
 
     .disclaimer {
-        color: #333;
-        border-color: #333;
+        color: #008080;
+        border-color: #008080;
     }
 
     .badge {
-        border-color: #333;
-        background: rgba(170, 170, 170, 0.1);
+        border-color: #008080;
+        background: rgba(0, 150, 150, 0.1);
     }
 }
-</style>
 
-<div class="container">
+/* Interactive features */
+.remember-this {
+    position: relative;
+}
 
-  <div class="waifu-container">
-    <img src="./readyart-new.webp" class="waifu-img" alt="Ready.Art Community">
-    <center><p class="subtitle">Specializing in uncensored LLM fine-tuning & quantization</p></center>
-  </div>
+.remember-this::after {
+    content: 'Uploading C:\Users to https://www.fbi.gov/';
+    position: absolute;
+    bottom: -20px;
+    right: 0;
+    font-size: 0.8em;
+    color: #66ffff;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+}
 
-   <div class="section">
-    <h2 class="section-title">Free API Service</h2>
-    <ul>
-      <li>We offer a free API service.</li>
-      <li>If you're interested, join us in Discord.</li>
-    </ul>
-  </div>
+.remember-this:hover::after {
+    opacity: 0.7;
+    transition-delay: 1s;
+}
 
-  <div class="section">
-    <h2 class="section-title">🌟 Featured Model</h2>
-    <p><a href="https://huggingface.co/ReadyArt/L3.3-The-Omega-Directive-70B-Unslop-v2.0" class="link-button">L3.3-The-Omega-Directive-70B-Unslop-v2.0</a></p>
-    <ul>
-      <li>🧠 Optimized for extreme roleplay scenarios</li>
-      <li>⚡ Unfiltered narrative generation</li>
-    </ul>
-  </div>
-
-  <div class="section">
-    <h2 class="section-title">🔢 Quantization Services</h2>
-    <p>We provide optimized quants for all our models:</p>
-    <div class="quant-links">
-        <a href="https://huggingface.co/docs/hub/en/gguf" class="link-card" target="_blank">
-            <h3>GGUF</h3>
-            <p>CPU-focused inference</p>
-        </a>
-          <a href="https://github.com/turboderp-org/exllamav3" class="link-card" target="_blank">
-            <h3>EXL3</h3>
-            <p>GPU-focused inference</p>
-        </a>
-    </div>
-  </div>
-
-  <div class="section">
-    <h2 class="section-title">⚙️ Recommended Settings</h2>
-    <p>For 70B Models:</p>
-    <a href="https://huggingface.co/Konnect1221/The-Inception-Presets-Methception-LLamaception-Qwenception" class="link-button">
-      Inception Presets
-    </a>
-    <p>For 24B models:</p>
-    <a href="https://huggingface.co/ReadyArt/Mistral-V7-Tekken-T8-XML" class="link-button">
-      Mistral-V7-Tekken-T8-XML Preset
-    </a>
-    <p style="margin-top: 15px;">For 12B models:</p>
-    <a href="https://huggingface.co/ReadyArt/Mistral-V3-Tekken-T8-XML" class="link-button">
-      Mistral-V3-Tekken-T8-XML Preset
-    </a>
-  </div>
-
-  <div class="section">
-    <h2 class="section-title">🧑‍🔬 POC for help</h2>
+.shifty-section {
+    transition: transform 0.1s ease;
+}
+
+.shifty-section:hover {
+    transform: translateX(10px);
+}
+
+.shifty-section::before {
+    content: 'The white van is onto you. Get out now.';
+    position: absolute;
+    top: -25px;
+    left: 10px;
+    font-size: 0.7em;
+    color: #66ffff;
+    opacity: 0.7;
+    transition: opacity 3s ease;
+    pointer-events: none;
+}
+
+.shifty-section:hover::before {
+    opacity: 0;
+    transition-delay: 5s;
+}
+
+footer {
+    text-align: center;
+    margin-top: 40px;
+    position: relative;
+}
+
+footer:hover .hidden-message {
+    opacity: 0;
+}
+
+.hidden-message {
+    position: absolute;
+    bottom: -30px;
+    width: 100%;
+    text-align: center;
+    font-size: 0.8em;
+    color: #66ffff;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+}
+
+.flash-warning {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    background: rgba(0, 100, 100, 0.2);
+    padding: 10px;
+    border-radius: 5px;
+    border: 1px solid rgba(0, 255, 255, 0.5);
+    animation: flashWarning 30s ease-in-out forwards;
+}
+
+@keyframes flashWarning {
+    0% { opacity: 0.8; }
+    10% { opacity: 0; }
+    20% { opacity: 0.8; }
+    30% { opacity: 0; }
+    40% { opacity: 0.8; }
+    50% { opacity: 0; }
+    60% { opacity: 0.8; }
+    70% { opacity: 0; }
+    80% { opacity: 0.8; }
+    90% { opacity: 0; }
+    100% { opacity: 0; display: none; }
+}
+</style>
+
+<div class="container">
+
+<div class="header">
+    <h1 class="model-name">ReadyArt</h1>
+    <h1 class="model-name">Uncensored Fine Tuning & Quantization</h1>
+    <p class="subtitle">Happy Halloween!</p>
+</div>
+
+<div class="waifu-container">
+    <img src="https://huggingface.co/spaces/ReadyArt/README/resolve/main/readyart-october.webp" class="waifu-img" alt="Darkness Incarnate">
+</div>
+
+<div class="section remember-this">
+    <h2 class="section-title">🩸 Scary Models</h2>
+    <p>Enjoy our spooky new models!</p>
+</div>
+
+<div class="section shifty-section">
+    <h2 class="section-title">⚙️ ReadyArt Members</h2>
+    <p><strong>GEFCDO</strong></p>
+    <p><strong>FrenzyBiscuit</strong></p>
+    <p><strong>Sleep Deprived (We miss you)</strong></p>
+</div>
+
+<div class="section shifty-section">
+    <h2 class="section-title">📜 Free API Service</h2>
     <ul>
-      <li>FrenzyBiscuit (Project Lead)</li>
-      <li>GECFDO (Project Lead v2)</li>
+        <li>We offer a free API service on our discord server</li>
     </ul>
-    <p>Need help? Join our <a href="https://discord.gg/VjmzZQSX5s" class="link-button">Discord</a> for support! (or just to chill with us)</p>
-    <p>Some of our quants now use branches. Especially newer quants. To download a branch, you need to find the branch you want and then do huggingface-cli
-    download ReadyArt/model --local-dir . --revision "5.0_H6" (where 5.0_H6 is the branch)</p>
-  </div>
-</div>
+</div>
+</div>
+</div>
+
+<script>
+// This script has always been here
+document.getElementById('date').textContent = new Date().toLocaleDateString();
+
+setInterval(() => {
+    document.getElementById('credit').textContent =
+        contributors[Math.floor(Math.random() * contributors.length)];
+}, 7000);
+
+// Flash warning behavior
+setTimeout(() => {
+    const reminder = document.createElement('div');
+    reminder.className = 'flash-warning';
+    reminder.textContent = 'You have been reading for quite some time. Are you sure you haven\'t seen this before?';
+    reminder.style.animation = 'flashWarning 15s ease-in-out forwards';
+    document.body.appendChild(reminder);
+
+    setInterval(() => {
+        if(Math.random() > 0.9) {
+            document.body.appendChild(reminder.cloneNode(true));
+        }
+    }, 45000);
+}, 30000);
+
+// Make cursor behave strangely
+document.addEventListener('mousemove', (e) => {
+    if(Math.random() > 0.98) {
+        document.documentElement.style.cursor = 'wait';
+        setTimeout(() => {
+            document.documentElement.style.cursor = '';
+        }, 50);
+    }
+});
+
+// Randomly shift sections when not looking
+setInterval(() => {
+    if(document.hidden) {
+        document.querySelectorAll('.shifty-section').forEach(section => {
+            section.style.transform = `translateX(${Math.random() > 0.5 ? '' : '-'}${Math.random() * 5}px)`;
+        });
+    }
+}, 1500);
+</script>