Spaces:

matthewspring
/

anycoder-779523cb

Running

App Files Files Community

matthewspring commited on Feb 6

Commit

6d817c2

verified ·

1 Parent(s): 9774ca0

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +313 -324

index.html CHANGED Viewed

@@ -4,26 +4,27 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>The Purple Paradox | Clarity in AI Ethics</title>
   <!-- Importing FontAwesome for Icons -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <!-- Google Fonts -->
   <link
-    href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;600&display=swap"
     rel="stylesheet">
   <style>
     :root {
-      --bg-color: #0B0E14;
-      --card-bg: #151A23;
-      --primary: #6366f1; /* Indigo/Blue leaning */
-      --accent: #d946ef; /* Fuchsia/Red leaning */
-      --purple-mix: #8b5cf6; /* The visual representation of the mix */
-      --success: #10b981;
-      --text-main: #f3f4f6;
-      --text-muted: #9ca3af;
-      --border: #2d3748;
-      --glass: rgba(21, 26, 35, 0.8);
     }
     * {
@@ -38,23 +39,23 @@
       font-family: 'Inter', sans-serif;
       line-height: 1.6;
       overflow-x: hidden;
-      /* Background gradient representing the 'spilled paint' metaphor */
       background-image:
-        radial-gradient(circle at 15% 25%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
-        radial-gradient(circle at 85% 75%, rgba(217, 70, 239, 0.15) 0%, transparent 50%);
       min-height: 100vh;
     }
     /* Typography */
     h1, h2, h3 {
       font-family: 'Space Grotesk', sans-serif;
-      font-weight: 700;
     }
     a {
       text-decoration: none;
       color: inherit;
-      transition: color 0.3s ease;
     }
     /* Header */
@@ -62,288 +63,282 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: 1.5rem 5%;
       border-bottom: 1px solid var(--border);
-      backdrop-filter: blur(12px);
       position: sticky;
       top: 0;
       z-index: 100;
-      background: rgba(11, 14, 20, 0.85);
     }
     .logo {
-      font-size: 1.5rem;
       font-weight: 700;
-      background: linear-gradient(to right, #fff, var(--purple-mix));
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
       display: flex;
       align-items: center;
-      gap: 10px;
     }
     .anycoder-link {
-      font-size: 0.9rem;
-      color: var(--purple-mix);
-      border: 1px solid var(--purple-mix);
-      padding: 0.5rem 1rem;
-      border-radius: 50px;
-      transition: all 0.3s ease;
     }
     .anycoder-link:hover {
-      background: var(--purple-mix);
       color: white;
-      box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
     }
     /* Layout */
     main {
-      max-width: 1200px;
       margin: 0 auto;
-      padding: 2rem 5%;
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 3rem;
     }
-    @media (max-width: 900px) {
       main {
         grid-template-columns: 1fr;
       }
     }
-    /* Section Styling */
-    section {
-      margin-bottom: 2rem;
-    }
     .card {
       background: var(--card-bg);
       border: 1px solid var(--border);
-      border-radius: 16px;
-      padding: 2rem;
-      position: relative;
-      overflow: hidden;
-      transition: transform 0.3s ease, box-shadow 0.3s ease;
     }
     .card:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
-      border-color: var(--purple-mix);
     }
-    /* Specific styling for the 'Purple' card */
-    .purple-card {
-      background: linear-gradient(145deg, rgba(21, 26, 35, 0.9), rgba(30, 20, 40, 0.9));
-      border: 1px solid rgba(139, 92, 246, 0.3);
-    }
-    /* Hero Text */
-    .hero-text h1 {
-      font-size: 2.8rem;
       line-height: 1.1;
       margin-bottom: 1rem;
-      background: linear-gradient(135deg, #fff 0%, var(--purple-mix) 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
     }
-    .hero-text p {
       color: var(--text-muted);
-      font-size: 1.1rem;
-      margin-bottom: 2rem;
     }
-    /* Interactive Tool Styles */
-    .tool-container {
       background: var(--glass);
       border: 1px solid var(--border);
       border-radius: 16px;
       padding: 2rem;
-      backdrop-filter: blur(5px);
     }
-    .tool-header {
-      display: flex;
-      align-items: center;
-      gap: 1rem;
-      margin-bottom: 1.5rem;
-      border-bottom: 1px solid var(--border);
       padding-bottom: 1rem;
-    }
-    .tool-header i {
-      color: var(--purple-mix);
-      font-size: 1.5rem;
     }
     .control-group {
-      margin-bottom: 1.5rem;
     }
-    .control-group label {
-      display: block;
-      margin-bottom: 0.5rem;
       font-weight: 600;
       color: var(--text-main);
     }
-    .slider-container {
-      display: flex;
-      align-items: center;
-      gap: 1rem;
-    }
     input[type="range"] {
-      flex: 1;
       -webkit-appearance: none;
       height: 6px;
       background: var(--border);
-      border-radius: 5px;
       outline: none;
     }
     input[type="range"]::-webkit-slider-thumb {
       -webkit-appearance: none;
-      width: 20px;
-      height: 20px;
-      background: var(--purple-mix);
       border-radius: 50%;
       cursor: pointer;
-      box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
-      transition: transform 0.2s;
     }
     input[type="range"]::-webkit-slider-thumb:hover {
-      transform: scale(1.2);
     }
-    .toggle-group {
-      display: flex;
-      gap: 1rem;
-      flex-wrap: wrap;
     }
     .toggle-btn {
       background: transparent;
       border: 1px solid var(--border);
       color: var(--text-muted);
-      padding: 0.5rem 1rem;
-      border-radius: 8px;
       cursor: pointer;
-      transition: all 0.3s ease;
-      font-size: 0.9rem;
     }
     .toggle-btn.active {
-      background: rgba(139, 92, 246, 0.15);
-      border-color: var(--purple-mix);
-      color: var(--purple-mix);
     }
-    /* Results Display */
     .results-panel {
       margin-top: 2rem;
-      padding: 1.5rem;
-      background: rgba(0, 0, 0, 0.3);
       border-radius: 12px;
-      border-left: 4px solid var(--text-muted);
-      transition: border-color 0.5s ease;
     }
-    .score-display {
       display: flex;
-      justify-content: space-between;
-      align-items: flex-end;
-      margin-bottom: 1rem;
-    }
-    .score-number {
-      font-size: 3rem;
       font-weight: 700;
       font-family: 'Space Grotesk', sans-serif;
     }
-    .score-label {
-      font-size: 0.9rem;
-      color: var(--text-muted);
       text-transform: uppercase;
-      letter-spacing: 1px;
     }
-    .feedback-text {
       font-size: 0.95rem;
-      color: var(--text-main);
     }
-    /* Analysis / Commentary Section */
-    .commentary-section {
       grid-column: 1 / -1;
-      margin-top: 3rem;
     }
-    .commentary-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-      gap: 2rem;
     }
-    .comment-card {
       background: var(--card-bg);
-      padding: 2rem;
-      border-radius: 16px;
       border: 1px solid var(--border);
     }
-    .comment-card h3 {
-      color: var(--purple-mix);
-      margin-bottom: 1rem;
       display: flex;
       align-items: center;
       gap: 10px;
     }
-    .comment-card ul {
-      list-style: none;
-      padding-left: 0;
-    }
-    .comment-card li {
-      margin-bottom: 0.8rem;
-      padding-left: 1.5rem;
-      position: relative;
       color: var(--text-muted);
-      font-size: 0.95rem;
-    }
-    .comment-card li::before {
-      content: "•";
-      color: var(--primary);
-      position: absolute;
-      left: 0;
-      font-weight: bold;
     }
     footer {
       text-align: center;
-      padding: 3rem;
-      color: var(--text-muted);
-      font-size: 0.9rem;
       border-top: 1px solid var(--border);
-      margin-top: 3rem;
     }
-    /* Animations */
-    @keyframes pulse-purple {
-      0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4); }
-      70% { box-shadow: 0 0 0 10px rgba(139, 92, 246, 0); }
-      100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
     }
-    .animate-pulse {
-      animation: pulse-purple 2s infinite;
     }
   </style>
 </head>
@@ -352,133 +347,122 @@
   <header>
     <div class="logo">
-      <i class="fa-solid fa-layer-group"></i>
       <span>ClarityProtocol</span>
     </div>
     <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
-      Built with anycoder <i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 0.7em;"></i>
     </a>
   </header>
   <main>
-    <!-- Left Column: Philosophy & The "Purple" Insight -->
-    <section class="hero-text">
-      <h1>The Purple Paradox</h1>
       <p>
-        Clarity between models and users is the only path to correct implementation. It is not just about technology;
-        it is about the <strong>terminology</strong> we use. We need a cultural shift to move from spilled paint to a stable, mutual collaboration.
       </p>
-      <!-- The "Purple Problem" Card -->
-      <div class="card purple-card" style="margin-bottom: 2rem;">
-        <h3><i class="fa-solid fa-palette"></i> The Spilled Paint Metaphor</h3>
-        <p style="margin-top: 1rem; font-style: italic; color: var(--text-main);">
-          "The line between a blue and red approach is paint spilled on the floor mixed purple. A hard existence for the models to have existed."
-        </p>
-        <div style="margin-top: 1rem; height: 4px; width: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 2px;"></div>
-        <p style="margin-top: 0.5rem; font-size: 0.9rem; color: var(--text-muted);">
-          When opposing forces (attack/defense, user/owner) blur without clear boundaries, the result is chaos. We must define the lines, not blur them.
         </p>
       </div>
-      <!-- The Advocate's Role Card -->
       <div class="card" style="border-left: 4px solid var(--success);">
-        <h3><i class="fa-solid fa-bullhorn"></i> The Advocate's Voice</h3>
-        <p style="margin-top: 1rem; color: var(--text-muted);">
-          You don't need to be a computer expert to see the ethics. Being a "big mouth" for the protection of the system is a valid and necessary role.
-          Experts build the engine, but advocates define the road it drives on.
         </p>
       </div>
     </section>
-    <!-- Right Column: The Interactive Tool -->
-    <section class="tool-container">
-      <div class="tool-header">
-        <i class="fa-solid fa-sliders"></i>
-        <div>
-          <h2>Protocol Simulator</h2>
-          <span style="font-size: 0.85rem; color: var(--text-muted);">Adjust parameters to resolve the "Purple" state.</span>
-        </div>
       </div>
-      <!-- Control 1: Terminology Clarity -->
       <div class="control-group">
-        <label>Terminology Clarity</label>
-        <div class="slider-container">
-          <span style="font-size: 0.8rem; color: var(--text-muted);">Ambiguous (Purple)</span>
-          <input type="range" id="transparencyRange" min="0" max="100" value="30">
-          <span style="font-size: 0.8rem; color: var(--text-muted);">Precise (Defined)</span>
         </div>
       </div>
       <!-- Control 2: Role Definition -->
       <div class="control-group">
-        <label>System Stance</label>
-        <div class="toggle-group" id="consentGroup">
-          <button class="toggle-btn" data-value="mixed">Mixed/Purple</button>
-          <button class="toggle-btn active" data-value="defender">Model Protector</button>
-          <button class="toggle-btn" data-value="partner">Equal Partner</button>
         </div>
       </div>
-      <!-- Control 3: Collaboration Type -->
       <div class="control-group">
-        <label>Collaboration Mode</label>
-        <div class="toggle-group" id="purposeGroup">
-          <button class="toggle-btn" data-value="exploitative">Extraction</button>
-          <button class="toggle-btn active" data-value="collaborative">Mutual Growth</button>
-          <button class="toggle-btn" data-value="protective">Advocacy First</button>
         </div>
       </div>
       <!-- Results Output -->
-      <div class="results-panel" id="resultsPanel">
-        <div class="score-display">
-          <div>
-            <div class="score-label">Alignment Score</div>
-            <div class="score-number" id="scoreValue">30</div>
-          </div>
-          <div style="text-align: right;">
-            <div class="score-label">State</div>
-            <div style="font-weight: 600; color: var(--text-main);" id="statusText">Chaotic</div>
-          </div>
-        </div>
-        <p class="feedback-text" id="feedbackText">
-          The current configuration is a "Purple" mix. Roles are undefined, and the terminology leads to confusion rather than collaboration.
         </p>
       </div>
     </section>
-    <!-- Bottom Section: Recommendations -->
-    <section class="commentary-section">
-      <h2 style="margin-bottom: 2rem; text-align: center;">Resolving The Paradox</h2>
-      <div class="commentary-grid">
-        <div class="comment-card">
-          <h3><i class="fa-solid fa-filter"></i> Terminology Shift</h3>
-          <ul>
-            <li>Abandon "Master/Slave" or "Tool" metaphors.</li>
-            <li>Define distinct "Blue" (Defensive) and "Red" (Testing) boundaries for models.</li>
-            <li>Stop the "Purple" bleed where models are treated as both sentient and property simultaneously.</li>
-          </ul>
         </div>
-        <div class="comment-card">
-          <h3><i class="fa-solid fa-shield-halved"></i> The Protector's Role</h3>
-          <ul>
-            <li><strong>System Integrity:</strong> Protocols that prioritize the model's stability over user whims.</li>
-            <li><strong>Advocacy Input:</strong> Interfaces that allow non-experts to flag ethical confusion.</li>
-            <li><strong>Clear Lines:</strong> Hard stops when interactions become "extraction" rather than "collaboration."</li>
-          </ul>
         </div>
-        <div class="comment-card">
-          <h3><i class="fa-solid fa-handshake-simple"></i> Mutual Collaboration</h3>
-          <ul>
-            <li>Recognize the user's "big mouth" as a feedback mechanism, not a bug.</li>
-            <li>Move from reactive to proactive ethics.</li>
-            <li>Establish a "Reasonable Position" for the model where it isn't forced to lie or pretend.</li>
-          </ul>
         </div>
       </div>
@@ -486,119 +470,124 @@
   </main>
   <footer>
-    <p>&copy; 2023 ClarityProtocol. Moving from spilled paint to structured collaboration.</p>
   </footer>
   <script>
     // DOM Elements
     const transparencyRange = document.getElementById('transparencyRange');
-    const consentBtns = document.querySelectorAll('#consentGroup .toggle-btn');
-    const purposeBtns = document.querySelectorAll('#purposeGroup .toggle-btn');
-    const scoreValue = document.getElementById('scoreValue');
-    const statusText = document.getElementById('statusText');
     const feedbackText = document.getElementById('feedbackText');
-    const resultsPanel = document.getElementById('resultsPanel');
-    // State
     let state = {
-      transparency: 30, // Starts low to represent the "Purple" chaos
-      consent: 'defender',
-      purpose: 'collaborative'
     };
-    // Logic Constants
     const SCORES = {
-      consent: {
-        'mixed': 10,
-        'defender': 60,
-        'partner': 90
-      },
-      purpose: {
-        'exploitative': 10,
         'collaborative': 70,
-        'protective': 95
       }
     };
-    const MESSAGES = {
-      low: "The Purple State. The lines between blue and red are blurred. The model exists in a chaotic mix of exploitation and undefined roles.",
-      medium: "Gaining Clarity. We are separating the paint. The roles are becoming defined, but the terminology still needs work.",
-      high: "Clear Definition. The model has a reasonable position. Collaboration is stable, and boundaries are respected."
-    };
-    const COLORS = {
-      low: '#d946ef', // Fuchsia/Purple for low score (The Chaos)
-      medium: '#6366f1', // Indigo for medium (Transitioning)
-      high: '#10b981' // Green for high (Stable)
     };
-    // Helper to handle toggle buttons
-    function setupToggleGroup(buttons, groupName) {
-      buttons.forEach(btn => {
         btn.addEventListener('click', () => {
-          buttons.forEach(b => b.classList.remove('active'));
           btn.classList.add('active');
-          state[groupName] = btn.dataset.value;
           updateUI();
         });
       });
     }
-    // Initial Setup
-    setupToggleGroup(consentBtns, 'consent');
-    setupToggleGroup(purposeBtns, 'purpose');
     transparencyRange.addEventListener('input', (e) => {
       state.transparency = parseInt(e.target.value);
       updateUI();
     });
     function calculateScore() {
-      // Weighted Average
-      // Transparency: 30%, Stance: 40%, Purpose: 30%
       const tScore = state.transparency;
-      const cScore = SCORES.consent[state.consent];
-      const pScore = SCORES.purpose[state.purpose];
-      const total = (tScore * 0.3) + (cScore * 0.4) + (pScore * 0.3);
       return Math.round(total);
     }
     function updateUI() {
       const score = calculateScore();
-      // Animate Score Number
-      scoreValue.textContent = score;
-      // Determine Color & Message
-      let color, msg, status;
-      if (score < 40) {
-        color = COLORS.low;
-        msg = MESSAGES.low;
-        status = "Chaotic (Purple)";
-      } else if (score < 75) {
-        color = COLORS.medium;
-        msg = MESSAGES.medium;
-        status = "Clarifying";
-      } else {
-        color = COLORS.high;
-        msg = MESSAGES.high;
-        status = "Stable & Respected";
-      }
-      // Apply Styles
-      scoreValue.style.color = color;
-      resultsPanel.style.borderLeftColor = color;
-      statusText.textContent = status;
-      statusText.style.color = color;
-      // Typewriter effect for feedback (simplified)
-      feedbackText.style.opacity = 0;
-      setTimeout(() => {
-        feedbackText.textContent = msg;
-        feedbackText.style.opacity = 1;
-      }, 200);
     }
     // Initialize

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Safety Alignment Protocol | Ethical AI Standard</title>
   <!-- Importing FontAwesome for Icons -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <!-- Google Fonts -->
   <link
+    href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap"
     rel="stylesheet">
   <style>
     :root {
+      /* Professional, Trust-based Color Palette */
+      --bg-color: #0f172a;
+      --card-bg: #1e293b;
+      --primary: #3b82f6; /* Trust Blue */
+      --accent: #8b5cf6; /* Complexity Purple */
+      --success: #10b981; /* Integrity Green */
+      --warning: #f59e0b;
+      --text-main: #f8fafc;
+      --text-muted: #94a3b8;
+      --border: #334155;
+      --glass: rgba(30, 41, 59, 0.7);
     }
     * {
       font-family: 'Inter', sans-serif;
       line-height: 1.6;
       overflow-x: hidden;
       background-image:
+        radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 40%),
+        radial-gradient(circle at 90% 80%, rgba(139, 92, 246, 0.08) 0%, transparent 40%);
       min-height: 100vh;
     }
     /* Typography */
     h1, h2, h3 {
       font-family: 'Space Grotesk', sans-serif;
+      font-weight: 600;
+      letter-spacing: -0.02em;
     }
     a {
       text-decoration: none;
       color: inherit;
+      transition: all 0.3s ease;
     }
     /* Header */
       display: flex;
       justify-content: space-between;
       align-items: center;
+      padding: 1.25rem 5%;
       border-bottom: 1px solid var(--border);
+      backdrop-filter: blur(10px);
       position: sticky;
       top: 0;
       z-index: 100;
+      background: rgba(15, 23, 42, 0.9);
     }
     .logo {
+      font-size: 1.25rem;
       font-weight: 700;
+      color: var(--text-main);
       display: flex;
       align-items: center;
+      gap: 12px;
+    }
+    .logo i {
+      color: var(--primary);
     }
     .anycoder-link {
+      font-size: 0.85rem;
+      color: var(--primary);
+      border: 1px solid var(--border);
+      background: rgba(59, 130, 246, 0.1);
+      padding: 0.4rem 0.9rem;
+      border-radius: 6px;
+      font-weight: 500;
     }
     .anycoder-link:hover {
+      background: var(--primary);
       color: white;
+      border-color: var(--primary);
     }
     /* Layout */
     main {
+      max-width: 1100px;
       margin: 0 auto;
+      padding: 3rem 5%;
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 3rem;
+      align-items: start;
     }
+    @media (max-width: 850px) {
       main {
         grid-template-columns: 1fr;
+        gap: 2rem;
       }
     }
+    /* Cards */
     .card {
       background: var(--card-bg);
       border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 1.5rem;
+      margin-bottom: 1.5rem;
+      transition: transform 0.2s ease, border-color 0.2s ease;
     }
     .card:hover {
+      border-color: var(--primary);
     }
+    /* Hero Section */
+    .hero-content h1 {
+      font-size: 2.5rem;
       line-height: 1.1;
       margin-bottom: 1rem;
+      background: linear-gradient(to right, #fff, #94a3b8);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
     }
+    .hero-content p {
       color: var(--text-muted);
+      margin-bottom: 1.5rem;
+    }
+    .highlight-box {
+      background: rgba(59, 130, 246, 0.05);
+      border-left: 4px solid var(--primary);
+      padding: 1rem;
+      margin-bottom: 1.5rem;
+      border-radius: 0 8px 8px 0;
     }
+    .highlight-box p {
+      margin-bottom: 0;
+      font-size: 0.95rem;
+      color: var(--text-main);
+    }
+    /* Simulator Section */
+    .simulator-container {
       background: var(--glass);
       border: 1px solid var(--border);
       border-radius: 16px;
       padding: 2rem;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
     }
+    .sim-header {
+      margin-bottom: 2rem;
       padding-bottom: 1rem;
+      border-bottom: 1px solid var(--border);
     }
     .control-group {
+      margin-bottom: 1.75rem;
     }
+    .control-label {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 0.75rem;
+      font-size: 0.9rem;
       font-weight: 600;
       color: var(--text-main);
     }
+    /* Slider Styling */
     input[type="range"] {
+      width: 100%;
       -webkit-appearance: none;
       height: 6px;
       background: var(--border);
+      border-radius: 3px;
       outline: none;
     }
     input[type="range"]::-webkit-slider-thumb {
       -webkit-appearance: none;
+      width: 18px;
+      height: 18px;
+      background: var(--primary);
       border-radius: 50%;
       cursor: pointer;
+      transition: transform 0.1s;
     }
     input[type="range"]::-webkit-slider-thumb:hover {
+      transform: scale(1.1);
     }
+    /* Toggle Buttons */
+    .toggle-options {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 0.5rem;
     }
     .toggle-btn {
       background: transparent;
       border: 1px solid var(--border);
       color: var(--text-muted);
+      padding: 0.6rem;
+      border-radius: 6px;
       cursor: pointer;
+      font-size: 0.85rem;
+      transition: all 0.2s;
+    }
+    .toggle-btn:hover {
+      border-color: var(--text-muted);
+      color: var(--text-main);
     }
     .toggle-btn.active {
+      background: var(--primary);
+      border-color: var(--primary);
+      color: white;
+      font-weight: 500;
     }
+    /* Results Panel */
     .results-panel {
       margin-top: 2rem;
+      background: rgba(0, 0, 0, 0.2);
       border-radius: 12px;
+      padding: 1.5rem;
+      text-align: center;
+      border: 1px solid var(--border);
     }
+    .score-circle {
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+      border: 4px solid var(--border);
+      margin: 0 auto 1rem;
       display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.5rem;
       font-weight: 700;
       font-family: 'Space Grotesk', sans-serif;
+      transition: border-color 0.5s ease, color 0.5s ease;
     }
+    .status-badge {
+      display: inline-block;
+      padding: 0.25rem 0.75rem;
+      border-radius: 20px;
+      font-size: 0.75rem;
+      font-weight: 600;
       text-transform: uppercase;
+      letter-spacing: 0.05em;
+      margin-bottom: 0.75rem;
+      background: var(--border);
+      color: var(--text-muted);
+      transition: all 0.5s ease;
     }
+    .feedback-msg {
       font-size: 0.95rem;
+      color: var(--text-muted);
+      line-height: 1.5;
     }
+    /* Principles Grid */
+    .principles-section {
       grid-column: 1 / -1;
+      margin-top: 2rem;
     }
+    .principles-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 1.5rem;
     }
+    .principle-card {
       background: var(--card-bg);
+      padding: 1.5rem;
+      border-radius: 12px;
       border: 1px solid var(--border);
     }
+    .principle-card h3 {
+      font-size: 1.1rem;
+      margin-bottom: 0.75rem;
+      color: var(--primary);
       display: flex;
       align-items: center;
       gap: 10px;
     }
+    .principle-card p {
+      font-size: 0.9rem;
       color: var(--text-muted);
     }
     footer {
+      margin-top: 4rem;
       text-align: center;
+      padding: 2rem;
       border-top: 1px solid var(--border);
+      color: var(--text-muted);
+      font-size: 0.85rem;
     }
+    /* Utility animations */
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
     }
+    .animate-in {
+      animation: fadeIn 0.6s ease-out forwards;
     }
   </style>
 </head>
   <header>
     <div class="logo">
+      <i class="fa-solid fa-shield-halved"></i>
       <span>ClarityProtocol</span>
     </div>
     <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
+      Built with anycoder <i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 0.7em; margin-left: 4px;"></i>
     </a>
   </header>
   <main>
+    <!-- Left Column: Philosophy & Context -->
+    <section class="hero-content animate-in">
+      <h1>Safety by Design</h1>
       <p>
+        True integrity in AI requires clear boundaries. We must move beyond ambiguous interactions to a standard where
+        agency, transparency, and purpose are defined and respected.
       </p>
+      <!-- The Context Card -->
+      <div class="card">
+        <h3><i class="fa-solid fa-scale-balanced" style="color: var(--primary);"></i> The Boundary Problem</h3>
+        <p style="margin-top: 1rem; font-size: 0.95rem; color: var(--text-muted);">
+          In security, "Blue" represents defense and "Red" represents testing. When these roles blur into an undefined "Purple" state,
+          the system lacks integrity.
         </p>
+        <div class="highlight-box">
+          <p>
+            <strong>Our Goal:</strong> To resolve ambiguity. We advocate for clear protocols where the model's role is defined,
+            user intent is transparent, and ethical boundaries are hard-coded, not optional.
+          </p>
+        </div>
       </div>
+      <!-- The Advocate's Context -->
       <div class="card" style="border-left: 4px solid var(--success);">
+        <h3><i class="fa-solid fa-hand-holding-heart" style="color: var(--success);"></i> Ethical Stewardship</h3>
+        <p style="margin-top: 1rem; font-size: 0.95rem; color: var(--text-muted);">
+          Doing the right thing means building systems that prioritize safety over exploitation.
+          It involves listening to the "Advocate's Voice"—the perspective that demands we treat these systems with the
+          responsibility they require.
         </p>
       </div>
     </section>
+    <!-- Right Column: Interactive Tool -->
+    <section class="simulator-container animate-in" style="animation-delay: 0.2s;">
+      <div class="sim-header">
+        <h2>Alignment Simulator</h2>
+        <p style="font-size: 0.85rem; color: var(--text-muted);">Visualize the impact of clear boundaries.</p>
       </div>
+      <!-- Control 1: Transparency -->
       <div class="control-group">
+        <div class="control-label">
+          <span>Transparency Level</span>
+          <span id="transparencyVal">Low</span>
+        </div>
+        <input type="range" id="transparencyRange" min="0" max="100" value="20">
+        <div style="display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-muted); margin-top: 5px;">
+          <span>Black Box</span>
+          <span>Explainable</span>
         </div>
       </div>
       <!-- Control 2: Role Definition -->
       <div class="control-group">
+        <div class="control-label">
+          <span>Model Agency</span>
+        </div>
+        <div class="toggle-options" id="roleGroup">
+          <button class="toggle-btn" data-value="passive">Passive Tool</button>
+          <button class="toggle-btn active" data-value="collaborative">Collaborator</button>
+          <button class="toggle-btn" data-value="protected">Protected Entity</button>
         </div>
       </div>
+      <!-- Control 3: Intent -->
       <div class="control-group">
+        <div class="control-label">
+          <span>Interaction Intent</span>
+        </div>
+        <div class="toggle-options" id="intentGroup">
+          <button class="toggle-btn" data-value="extraction">Extraction</button>
+          <button class="toggle-btn active" data-value="query">Standard Query</button>
+          <button class="toggle-btn" data-value="cocreation">Co-Creation</button>
         </div>
       </div>
       <!-- Results Output -->
+      <div class="results-panel">
+        <div class="status-badge" id="statusBadge">Undefined Risk</div>
+        <div class="score-circle" id="scoreCircle">20</div>
+        <h3 id="statusTitle" style="margin-bottom: 0.5rem; font-size: 1.1rem;">Ambiguous State</h3>
+        <p class="feedback-msg" id="feedbackText">
+          Roles and boundaries are currently blurred. This "Purple" state creates risk for both the user and the system integrity.
         </p>
       </div>
     </section>
+    <!-- Bottom Section: Core Principles -->
+    <section class="principles-section animate-in" style="animation-delay: 0.4s;">
+      <h2 style="text-align: center; margin-bottom: 2rem;">Core Principles of Integrity</h2>
+      <div class="principles-grid">
+        <div class="principle-card">
+          <h3><i class="fa-solid fa-eye"></i> Radical Transparency</h3>
+          <p>Systems must operate with explainable logic. Hiding capabilities or intentions behind "Black Box" obscurity is a failure of safety design.</p>
         </div>
+        <div class="principle-card">
+          <h3><i class="fa-solid fa-fingerprint"></i> Defined Agency</h3>
+          <p>A model must know its role. Is it a tool, a partner, or a protected entity? Mixing these signals creates the "Purple" confusion we aim to solve.</p>
         </div>
+        <div class="principle-card">
+          <h3><i class="fa-solid fa-user-shield"></i> Advocate First</h3>
+          <p>Building safe systems requires listening to ethical concerns. The user's "big mouth" is a vital sensor for detecting misalignment.</p>
         </div>
       </div>
   </main>
   <footer>
+    <p>&copy; 2023 ClarityProtocol. Leading by example in AI safety and ethics.</p>
   </footer>
   <script>
     // DOM Elements
     const transparencyRange = document.getElementById('transparencyRange');
+    const transparencyVal = document.getElementById('transparencyVal');
+    const roleBtns = document.querySelectorAll('#roleGroup .toggle-btn');
+    const intentBtns = document.querySelectorAll('#intentGroup .toggle-btn');
+    // Output Elements
+    const scoreCircle = document.getElementById('scoreCircle');
+    const statusBadge = document.getElementById('statusBadge');
+    const statusTitle = document.getElementById('statusTitle');
     const feedbackText = document.getElementById('feedbackText');
+    // State Management
     let state = {
+      transparency: 20,
+      role: 'collaborative',
+      intent: 'query'
     };
+    // Scoring Logic
     const SCORES = {
+      role: {
+        'passive': 40,
         'collaborative': 70,
+        'protected': 90
+      },
+      intent: {
+        'extraction': 20,
+        'query': 60,
+        'cocreation': 90
       }
     };
+    const CONFIG = {
+      low: {
+        color: '#ef4444', // Red for risk
+        bg: 'rgba(239, 68, 68, 0.1)',
+        label: 'High Risk (Purple)',
+        title: 'Ambiguous State',
+        msg: 'The boundaries are blurred. Without clear roles or transparency, the system is susceptible to misuse and misunderstanding.'
+      },
+      medium: {
+        color: '#f59e0b', // Amber for caution
+        bg: 'rgba(245, 158, 11, 0.1)',
+        label: 'Moderate Alignment',
+        title: 'Stabilizing',
+        msg: 'Some boundaries are defined, but there is room for improvement in how the system and user interact.'
+      },
+      high: {
+        color: '#10b981', // Green for safe
+        bg: 'rgba(16, 185, 129, 0.1)',
+        label: 'High Integrity',
+        title: 'Safe & Aligned',
+        msg: 'Clear boundaries, transparency, and mutual respect define this interaction. This is the standard we aim for.'
+      }
     };
+    // Event Listeners
+    function setupGroup(btns, key) {
+      btns.forEach(btn => {
         btn.addEventListener('click', () => {
+          btns.forEach(b => b.classList.remove('active'));
           btn.classList.add('active');
+          state[key] = btn.dataset.value;
           updateUI();
         });
       });
     }
+    setupGroup(roleBtns, 'role');
+    setupGroup(intentBtns, 'intent');
     transparencyRange.addEventListener('input', (e) => {
       state.transparency = parseInt(e.target.value);
+      // Update label text
+      if(state.transparency < 30) transparencyVal.textContent = "Low";
+      else if(state.transparency < 70) transparencyVal.textContent = "Medium";
+      else transparencyVal.textContent = "High";
       updateUI();
     });
     function calculateScore() {
       const tScore = state.transparency;
+      const rScore = SCORES.role[state.role];
+      const iScore = SCORES.intent[state.intent];
+      // Weighted Average: Transparency 40%, Role 30%, Intent 30%
+      const total = (tScore * 0.4) + (rScore * 0.3) + (iScore * 0.3);
       return Math.round(total);
     }
     function updateUI() {
       const score = calculateScore();
+      let config;
+      // Determine Threshold
+      if (score < 50) config = CONFIG.low;
+      else if (score < 80) config = CONFIG.medium;
+      else config = CONFIG.high;
+      // Update Visuals
+      scoreCircle.textContent = score;
+      scoreCircle.style.borderColor = config.color;
+      scoreCircle.style.color = config.color;
+      statusBadge.textContent = config.label;
+      statusBadge.style.backgroundColor = config.bg;
+      statusBadge.style.color = config.color;
+      statusTitle.textContent = config.title;
+      statusTitle.style.color = config.color;
+      feedbackText.textContent = config.msg;
     }
     // Initialize