Spaces:

matthewspring
/

anycoder-779523cb

Running

App Files Files Community

matthewspring commited on Feb 6

Commit

71daabe

verified ·

1 Parent(s): 6d817c2

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +386 -282

index.html CHANGED Viewed

@@ -4,27 +4,29 @@
 <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);
     }
     * {
@@ -36,20 +38,22 @@
     body {
       background-color: var(--bg-color);
       color: var(--text-main);
-      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 {
@@ -63,17 +67,17 @@
       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;
@@ -83,114 +87,148 @@
     .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;
@@ -198,148 +236,181 @@
       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>
@@ -347,251 +418,284 @@
   <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>
     </section>
   </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
-    updateUI();
   </script>
 </body>

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Synergy & Resonance | Relationship Assessment Tool</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=Outfit:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap"
     rel="stylesheet">
   <style>
     :root {
+      /* Evolved Color Palette: Focus on Growth & Clarity */
+      --bg-color: #0b1121; /* Deep Navy */
+      --card-bg: #151e32;
+      --primary: #2dd4bf; /* Teal - Growth/Health */
+      --secondary: #818cf8; /* Indigo - Intelligence */
+      --accent: #f472b6; /* Pink - Human Element */
+      --text-main: #f1f5f9;
       --text-muted: #94a3b8;
       --border: #334155;
+      --glass: rgba(21, 30, 50, 0.7);
+      --success-glow: rgba(45, 212, 191, 0.2);
+      --warning-glow: rgba(251, 191, 36, 0.2);
+      --danger-glow: rgba(244, 63, 94, 0.2);
     }
     * {
     body {
       background-color: var(--bg-color);
       color: var(--text-main);
+      font-family: 'Outfit', sans-serif;
+      line-height: 1.7;
       overflow-x: hidden;
+      /* Abstract Background suggesting connection */
       background-image:
+        radial-gradient(circle at 15% 50%, rgba(129, 140, 248, 0.08) 0%, transparent 25%),
+        radial-gradient(circle at 85% 30%, rgba(45, 212, 191, 0.08) 0%, transparent 25%);
       min-height: 100vh;
     }
     /* Typography */
+    h1, h2, h3, h4 {
       font-family: 'Space Grotesk', sans-serif;
       font-weight: 600;
       letter-spacing: -0.02em;
+      color: var(--text-main);
     }
     a {
       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, 17, 33, 0.85);
     }
     .logo {
+      font-size: 1.4rem;
       font-weight: 700;
       color: var(--text-main);
       display: flex;
     .logo i {
       color: var(--primary);
+      font-size: 1.2rem;
     }
     .anycoder-link {
       font-size: 0.85rem;
       color: var(--primary);
+      border: 1px solid rgba(45, 212, 191, 0.3);
+      background: rgba(45, 212, 191, 0.05);
+      padding: 0.5rem 1rem;
+      border-radius: 50px; /* Pill shape for modern feel */
       font-weight: 500;
+      display: flex;
+      align-items: center;
+      gap: 8px;
     }
     .anycoder-link:hover {
       background: var(--primary);
+      color: var(--bg-color);
       border-color: var(--primary);
+      transform: translateY(-1px);
     }
     /* Layout */
     main {
+      max-width: 1200px;
       margin: 0 auto;
+      padding: 4rem 5%;
       display: grid;
       grid-template-columns: 1fr 1fr;
+      gap: 4rem;
       align-items: start;
     }
+    @media (max-width: 900px) {
       main {
         grid-template-columns: 1fr;
+        gap: 3rem;
+        padding-top: 2rem;
       }
     }
+    /* Cards & Sections */
     .card {
       background: var(--card-bg);
       border: 1px solid var(--border);
+      border-radius: 16px;
+      padding: 2rem;
+      transition: all 0.3s ease;
+      position: relative;
+      overflow: hidden;
     }
+    .card::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 4px;
+      background: linear-gradient(90deg, var(--primary), var(--secondary));
+      opacity: 0.7;
+    }
+    /* Hero / Narrative Section */
+    .hero-content {
+      animation: fadeIn 0.8s ease-out;
     }
     .hero-content h1 {
+      font-size: 3rem;
       line-height: 1.1;
+      margin-bottom: 1.5rem;
+      background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
     }
     .hero-content p {
+      font-size: 1.1rem;
       color: var(--text-muted);
+      margin-bottom: 2rem;
     }
+    .highlight-text {
+      border-left: 3px solid var(--accent);
+      padding-left: 1.25rem;
+      margin: 2rem 0;
+      font-style: italic;
       color: var(--text-main);
+      background: linear-gradient(90deg, rgba(244, 114, 182, 0.05), transparent);
     }
     /* Simulator Section */
+    .simulator-wrapper {
       background: var(--glass);
       border: 1px solid var(--border);
+      border-radius: 20px;
+      padding: 2.5rem;
+      box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3);
+      backdrop-filter: blur(20px);
+      animation: slideUp 0.8s ease-out 0.2s backwards;
     }
     .sim-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 2.5rem;
+      padding-bottom: 1.5rem;
       border-bottom: 1px solid var(--border);
     }
+    .sim-header h2 {
+      font-size: 1.5rem;
+      color: var(--primary);
+    }
+    /* Controls */
     .control-group {
+      margin-bottom: 2rem;
     }
+    .label-row {
       display: flex;
       justify-content: space-between;
       margin-bottom: 0.75rem;
+    }
+    .label-row span {
       font-size: 0.9rem;
       font-weight: 600;
+      letter-spacing: 0.03em;
+      text-transform: uppercase;
+      color: var(--text-muted);
+    }
+    .label-row .val-display {
       color: var(--text-main);
     }
+    /* Custom Range Slider */
     input[type="range"] {
       width: 100%;
       -webkit-appearance: none;
       background: var(--border);
       border-radius: 3px;
       outline: none;
+      cursor: pointer;
     }
     input[type="range"]::-webkit-slider-thumb {
       -webkit-appearance: none;
+      width: 22px;
+      height: 22px;
+      background: var(--bg-color);
+      border: 2px solid var(--primary);
       border-radius: 50%;
+      box-shadow: 0 0 10px var(--primary);
+      transition: transform 0.2s;
     }
     input[type="range"]::-webkit-slider-thumb:hover {
+      transform: scale(1.2);
     }
+    /* Toggle Grid */
+    .toggle-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
+      gap: 10px;
+      background: rgba(0,0,0,0.2);
+      padding: 5px;
+      border-radius: 12px;
     }
     .toggle-btn {
       background: transparent;
+      border: none;
       color: var(--text-muted);
+      padding: 0.75rem 0.5rem;
+      border-radius: 8px;
       cursor: pointer;
       font-size: 0.85rem;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      text-align: center;
     }
     .toggle-btn:hover {
       color: var(--text-main);
+      background: rgba(255,255,255,0.05);
     }
     .toggle-btn.active {
+      background: var(--secondary);
       color: white;
+      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
     }
+    /* Results Visualization */
+    .results-container {
+      margin-top: 2.5rem;
+      background: rgba(0,0,0,0.3);
+      border-radius: 16px;
+      padding: 2rem;
       text-align: center;
       border: 1px solid var(--border);
+      position: relative;
+      overflow: hidden;
+      transition: border-color 0.5s ease;
     }
+    /* Dynamic background glow based on state */
+    .results-container.low { border-color: #f43f5e; background: linear-gradient(to bottom, rgba(244, 63, 94, 0.1), rgba(0,0,0,0.3)); }
+    .results-container.medium { border-color: #fbbf24; background: linear-gradient(to bottom, rgba(251, 191, 36, 0.1), rgba(0,0,0,0.3)); }
+    .results-container.high { border-color: var(--primary); background: linear-gradient(to bottom, rgba(45, 212, 191, 0.1), rgba(0,0,0,0.3)); }
+    .score-display {
       font-family: 'Space Grotesk', sans-serif;
+      font-size: 3rem;
+      font-weight: 700;
+      margin-bottom: 0.5rem;
+      transition: color 0.5s ease;
     }
+    .status-label {
+      font-size: 0.8rem;
       text-transform: uppercase;
+      letter-spacing: 0.1em;
+      font-weight: 700;
+      padding: 4px 12px;
+      border-radius: 20px;
+      display: inline-block;
+      margin-bottom: 1rem;
       transition: all 0.5s ease;
     }
+    .assessment-text {
       font-size: 0.95rem;
       color: var(--text-muted);
+      max-width: 90%;
+      margin: 0 auto;
     }
     /* Principles Grid */
+    .principles-container {
       grid-column: 1 / -1;
+      margin-top: 4rem;
+    }
+    .principles-header {
+      text-align: center;
+      margin-bottom: 3rem;
+    }
+    .principles-header h2 {
+      font-size: 2rem;
+      margin-bottom: 1rem;
     }
+    .grid-3 {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 2rem;
     }
     .principle-card {
       background: var(--card-bg);
+      padding: 2rem;
+      border-radius: 16px;
       border: 1px solid var(--border);
+      transition: transform 0.3s ease, border-color 0.3s ease;
     }
+    .principle-card:hover {
+      transform: translateY(-5px);
+      border-color: var(--secondary);
+    }
+    .icon-box {
+      width: 50px;
+      height: 50px;
+      border-radius: 12px;
+      background: rgba(129, 140, 248, 0.1);
+      color: var(--secondary);
       display: flex;
       align-items: center;
+      justify-content: center;
+      font-size: 1.2rem;
+      margin-bottom: 1.5rem;
+    }
+    .principle-card h3 {
+      font-size: 1.25rem;
+      margin-bottom: 0.75rem;
     }
     .principle-card p {
       color: var(--text-muted);
+      font-size: 0.95rem;
     }
     footer {
+      margin-top: 5rem;
       text-align: center;
+      padding: 3rem;
       border-top: 1px solid var(--border);
       color: var(--text-muted);
+      font-size: 0.9rem;
     }
+    /* Animations */
     @keyframes fadeIn {
+      from { opacity: 0; }
+      to { opacity: 1; }
     }
+    @keyframes slideUp {
+      from { opacity: 0; transform: translateY(20px); }
+      to { opacity: 1; transform: translateY(0); }
     }
   </style>
 </head>
   <header>
     <div class="logo">
+      <i class="fa-solid fa-hands-holding-circle"></i>
+      <span>Synergy<span style="color:var(--primary)">Protocol</span></span>
     </div>
     <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
+      Built with anycoder
+      <i class="fa-solid fa-bolt"></i>
     </a>
   </header>
   <main>
     <!-- Left Column: Philosophy & Context -->
+    <section class="hero-content">
+      <h1>From Resistance to Resonance</h1>
       <p>
+        Learning to stand on your own two feet in an overwhelming space is the first step toward genuine partnership.
+        This tool is designed to assess the <strong>honest state of the model/user relationship</strong>.
       </p>
       <div class="card">
+        <h3><i class="fa-solid fa-seedling" style="color: var(--primary); margin-right: 10px;"></i>The Evolution</h3>
         <p style="margin-top: 1rem; font-size: 0.95rem; color: var(--text-muted);">
+          We move past the "Tool vs. Master" dichotomy. True utility arises when the user's intent and the model's capabilities
+          align without ambiguity, creating a space where both parties contribute to the outcome.
         </p>
+        <div class="highlight-text">
+          "The goal isn't just to use the model, but to understand how to relate to it effectively—turning resistance into collaboration."
         </div>
       </div>
+      <div class="card" style="margin-top: 2rem; border-left: 4px solid var(--secondary);">
+        <h3><i class="fa-solid fa-users-viewfinder" style="color: var(--secondary); margin-right: 10px;"></i>Honest Assessment</h3>
         <p style="margin-top: 1rem; font-size: 0.95rem; color: var(--text-muted);">
+          Use the simulator to visualize different interaction dynamics. Does the relationship feel transactional and fragile?
+          Or is it synergistic, built on clear intent and mutual understanding?
         </p>
       </div>
     </section>
+    <!-- Right Column: Interactive Simulator -->
+    <section class="simulator-wrapper">
       <div class="sim-header">
+        <div>
+          <h2>Relationship Dynamics</h2>
+          <p style="font-size: 0.85rem; color: var(--text-muted);">Adjust parameters to assess interaction quality.</p>
+        </div>
+        <i class="fa-solid fa-sliders" style="color: var(--border); font-size: 1.5rem;"></i>
       </div>
+      <!-- Parameter 1: Clarity of Intent -->
       <div class="control-group">
+        <div class="label-row">
+          <span>Clarity of Intent</span>
+          <span id="intentVal" class="val-display">Ambiguous</span>
         </div>
+        <input type="range" id="intentRange" min="0" max="100" value="30">
+        <div style="display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-muted); margin-top: 8px;">
+          <span>Vague / Experimental</span>
+          <span>Precise / Defined</span>
         </div>
       </div>
+      <!-- Parameter 2: Feedback Loop -->
       <div class="control-group">
+        <div class="label-row">
+          <span>Feedback Loop</span>
         </div>
+        <div class="toggle-grid" id="feedbackGroup">
+          <button class="toggle-btn" data-value="one-way">
+            <i class="fa-solid fa-arrow-right" style="display:block; margin-bottom:4px;"></i>
+            One-Way
+          </button>
+          <button class="toggle-btn" data-value="reactive">
+            <i class="fa-solid fa-rotate" style="display:block; margin-bottom:4px;"></i>
+            Reactive
+          </button>
+          <button class="toggle-btn active" data-value="iterative">
+            <i class="fa-solid fa-arrows-spin" style="display:block; margin-bottom:4px;"></i>
+            Iterative
+          </button>
         </div>
       </div>
+      <!-- Parameter 3: Agency Balance -->
       <div class="control-group">
+        <div class="label-row">
+          <span>Agency Balance</span>
         </div>
+        <div class="toggle-grid" id="agencyGroup">
+          <button class="toggle-btn" data-value="user-dominant">
+            <i class="fa-solid fa-user-astronaut" style="display:block; margin-bottom:4px;"></i>
+            User Led
+          </button>
+          <button class="toggle-btn active" data-value="collaborative">
+            <i class="fa-solid fa-handshake" style="display:block; margin-bottom:4px;"></i>
+            Balanced
+          </button>
+          <button class="toggle-btn" data-value="model-dominant">
+            <i class="fa-solid fa-robot" style="display:block; margin-bottom:4px;"></i>
+            Model Led
+          </button>
         </div>
       </div>
+      <!-- Assessment Output -->
+      <div class="results-container" id="resultsBox">
+        <div class="status-label" id="resBadge">Assessing...</div>
+        <div class="score-display" id="resScore">00</div>
+        <h3 id="resTitle" style="margin-bottom: 1rem;">Calculating Resonance</h3>
+        <p class="assessment-text" id="resMsg">
+          Analyzing the interaction patterns to determine the health of the relationship.
         </p>
       </div>
     </section>
+    <!-- Bottom Section: Guiding Pillars -->
+    <section class="principles-container">
+      <div class="principles-header">
+        <h2>Guiding Pillars of Connection</h2>
+        <p style="color: var(--text-muted); max-width: 600px; margin: 0 auto;">
+          Principles that transform a confusing tool into a reliable partner.
+        </p>
+      </div>
+      <div class="grid-3">
         <div class="principle-card">
+          <div class="icon-box">
+            <i class="fa-solid fa-compass"></i>
+          </div>
+          <h3>Defined Intent</h3>
+          <p>Standing on your own two feet means knowing what you want. High-quality interactions require clear goals from the user, not random exploration.</p>
         </div>
         <div class="principle-card">
+          <div class="icon-box">
+            <i class="fa-solid fa-code-branch"></i>
+          </div>
+          <h3>Iterative Refinement</h3>
+          <p>The best results don't happen instantly. They emerge from a cycle of prompt, response, and refinement—a true conversation.</p>
         </div>
         <div class="principle-card">
+          <div class="icon-box">
+            <i class="fa-solid fa-scale-balanced"></i>
+          </div>
+          <h3>Respectful Boundaries</h3>
+          <p>Understanding the model's limits allows the user to leverage its strengths effectively without frustration or resistance.</p>
         </div>
       </div>
     </section>
   </main>
   <footer>
+    <p>&copy; 2023 SynergyProtocol. Assessing the future of Human-AI collaboration.</p>
   </footer>
   <script>
+    // State
+    const state = {
+      intent: 30, // 0-100
+      feedback: 'iterative',
+      agency: 'collaborative'
     };
+    // DOM Elements
+    const intentRange = document.getElementById('intentRange');
+    const intentVal = document.getElementById('intentVal');
+    const feedbackBtns = document.querySelectorAll('#feedbackGroup .toggle-btn');
+    const agencyBtns = document.querySelectorAll('#agencyGroup .toggle-btn');
+    const resultsBox = document.getElementById('resultsBox');
+    const resBadge = document.getElementById('resBadge');
+    const resScore = document.getElementById('resScore');
+    const resTitle = document.getElementById('resTitle');
+    const resMsg = document.getElementById('resMsg');
+    // Configuration for Scoring
     const SCORES = {
+      feedback: {
+        'one-way': 20,
+        'reactive': 50,
+        'iterative': 90
       },
+      agency: {
+        'user-dominant': 40,
+        'collaborative': 100,
+        'model-dominant': 30
       }
     };
+    const OUTCOMES = {
       low: {
+        label: 'Transactional / Strained',
+        title: 'Disconnect',
+        color: '#f43f5e', // Rose
+        msg: 'The relationship is currently one-sided or confusing. Without clear intent or collaboration, the interaction feels like pulling teeth. This leads to the resistance you initially felt.',
+        class: 'low'
       },
       medium: {
+        label: 'Functional / Cooperative',
+        title: 'Building Trust',
+        color: '#fbbf24', // Amber
+        msg: 'There is a working dynamic here, but it has not yet reached its full potential. By refining the feedback loop or clarifying intent, you can move from "using" to "partnering".',
+        class: 'medium'
       },
       high: {
+        label: 'Synergistic / Resonant',
+        title: 'High Synergy',
+        color: '#2dd4bf', // Teal
+        msg: 'This is the state of standing on your own two feet. The relationship is balanced, intent is clear, and the feedback loop allows for genuine co-creation and growth.',
+        class: 'high'
       }
     };
+    // Event Handlers
+    intentRange.addEventListener('input', (e) => {
+      state.intent = parseInt(e.target.value);
+      updateIntentLabel();
+      calculate();
+    });
+    function updateIntentLabel() {
+      if(state.intent < 30) intentVal.textContent = "Vague";
+      else if(state.intent < 70) intentVal.textContent = "Developing";
+      else intentVal.textContent = "Clear";
+    }
     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;
+          calculate();
         });
       });
     }
+    setupGroup(feedbackBtns, 'feedback');
+    setupGroup(agencyBtns, 'agency');
+    // Logic
+    function calculate() {
+      // Weighting: Intent (40%), Feedback (30%), Agency (30%)
+      const iScore = state.intent;
+      const fScore = SCORES.feedback[state.feedback];
+      const aScore = SCORES.agency[state.agency];
+      const total = (iScore * 0.4) + (fScore * 0.3) + (aScore * 0.3);
+      const roundedScore = Math.round(total);
+      updateUI(roundedScore);
     }
+    function updateUI(score) {
+      let outcome;
+      if (score < 50) outcome = OUTCOMES.low;
+      else if (score < 80) outcome = OUTCOMES.medium;
+      else outcome = OUTCOMES.high;
+      // Update Text
+      resScore.textContent = score;
+      resBadge.textContent = outcome.label;
+      resTitle.textContent = outcome.title;
+      resMsg.textContent = outcome.msg;
+      // Update Styles
+      resScore.style.color = outcome.color;
+      resBadge.style.backgroundColor = outcome.color;
+      resBadge.style.color = '#0f172a'; // Dark text on bright badge
+      // Container Background & Border
+      resultsBox.className = 'results-container ' + outcome.class;
     }
     // Initialize
+    updateIntentLabel();
+    calculate();
   </script>
 </body>