Upload folder using huggingface_hub

index.html

@@ -5,8 +5,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="description" content="Hardened Gemma 3 LLM Container Security Dashboard - Enhanced Security Edition">
-  <title>Gemma 3 Hardened Container Dashboard - Enhanced Security</title>
+  <meta name="description" content="Hardened Gemma 3 LLM Container Security Dashboard - Critical Fixes Applied">
+  <title>Gemma 3 Hardened Container Dashboard - Critical Fixes v2.0</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <style>
     :root {
@@ -22,6 +22,7 @@
       --dark: #0a0a0f;
       --purple: #9b59b6;
       --orange: #e67e22;
+      --fixed: #2ecc71;
       --shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
       --radius: 12px;
       --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -63,6 +64,8 @@
       max-width: 1800px;
       margin: 0 auto;
       width: 100%;
+      flex-wrap: wrap;
+      gap: 1rem;
     }
 
     .logo-container {
@@ -73,7 +76,7 @@
     }
 
     .logo {
-      font-size: 1.6rem;
+      font-size: 1.5rem;
       font-weight: 700;
       display: flex;
       align-items: center;
@@ -96,17 +99,17 @@
       background: linear-gradient(135deg, var(--accent), var(--secondary));
       padding: 0.3rem 0.8rem;
       border-radius: 20px;
-      font-size: 0.75rem;
+      font-size: 0.7rem;
       font-weight: 600;
       border: 1px solid rgba(233, 69, 96, 0.5);
       color: var(--highlight);
     }
 
-    .security-level-badge {
-      background: linear-gradient(135deg, var(--success), #00b386);
+    .version-badge {
+      background: linear-gradient(135deg, var(--fixed), #27ae60);
       padding: 0.3rem 0.8rem;
       border-radius: 20px;
-      font-size: 0.75rem;
+      font-size: 0.7rem;
       font-weight: 600;
       color: white;
       display: flex;
@@ -114,6 +117,21 @@
       gap: 0.3rem;
     }
 
+    .fixes-badge {
+      background: linear-gradient(135deg, var(--danger), #c0392b);
+      padding: 0.3rem 0.8rem;
+      border-radius: 20px;
+      font-size: 0.7rem;
+      font-weight: 600;
+      color: white;
+      animation: pulse-badge 2s infinite;
+    }
+
+    @keyframes pulse-badge {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.7; }
+    }
+
     .built-with {
       font-size: 0.85rem;
       opacity: 0.9;
@@ -135,11 +153,6 @@
     }
 
     /* Navigation */
-    nav {
-      display: flex;
-      gap: 1.5rem;
-    }
-
     nav ul {
       display: flex;
       list-style: none;
@@ -154,32 +167,12 @@
       border-radius: var(--radius);
       transition: var(--transition);
       font-weight: 500;
-      font-size: 0.9rem;
+      font-size: 0.85rem;
       position: relative;
-      overflow: hidden;
     }
 
     nav a:hover {
       background: rgba(233, 69, 96, 0.2);
-      transform: translateY(-2px);
-    }
-
-    nav a::after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: 2px;
-      background: var(--highlight);
-      transform: scaleX(0);
-      transform-origin: right;
-      transition: var(--transition);
-    }
-
-    nav a:hover::after {
-      transform: scaleX(1);
-      transform-origin: left;
     }
 
     /* Main Content */
@@ -191,717 +184,459 @@
       width: 100%;
     }
 
-    /* Section Title */
-    .section-title-main {
-      font-size: 1.8rem;
-      margin-bottom: 1.5rem;
-      color: var(--light);
-      display: flex;
-      align-items: center;
-      gap: 0.8rem;
+    /* Critical Fixes Banner */
+    .critical-fixes-banner {
+      background: linear-gradient(135deg, rgba(220, 53, 69, 0.2) 0%, rgba(192, 57, 43, 0.2) 100%);
+      border: 2px solid var(--danger);
+      border-radius: var(--radius);
+      padding: 1.5rem;
+      margin-bottom: 2rem;
+      position: relative;
+      overflow: hidden;
     }
 
-    .section-title-main i {
-      color: var(--highlight);
+    .critical-fixes-banner::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 4px;
+      background: linear-gradient(90deg, var(--danger), var(--warning), var(--fixed));
     }
 
-    /* Security Score */
-    .security-score-container {
-      background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%);
-      border-radius: var(--radius);
-      padding: 2rem;
-      margin-bottom: 2rem;
-      border: 1px solid rgba(0, 217, 160, 0.3);
-      display: grid;
-      grid-template-columns: auto 1fr;
-      gap: 2rem;
+    .banner-header {
+      display: flex;
       align-items: center;
+      gap: 1rem;
+      margin-bottom: 1rem;
     }
 
-    .score-circle {
-      width: 150px;
-      height: 150px;
+    .banner-icon {
+      width: 50px;
+      height: 50px;
+      background: var(--danger);
       border-radius: 50%;
-      background: conic-gradient(var(--success) 0deg, var(--success) 324deg, rgba(255,255,255,0.1) 324deg);
       display: flex;
       align-items: center;
       justify-content: center;
-      position: relative;
+      font-size: 1.5rem;
+      color: white;
+      animation: pulse 2s infinite;
     }
 
-    .score-circle::before {
-      content: '';
-      position: absolute;
-      width: 120px;
-      height: 120px;
-      background: var(--primary);
-      border-radius: 50%;
+    .banner-title {
+      font-size: 1.4rem;
+      font-weight: 700;
+      color: var(--danger);
     }
 
-    .score-value {
-      position: relative;
-      z-index: 1;
-      font-size: 2.5rem;
-      font-weight: 700;
-      color: var(--success);
+    .banner-subtitle {
+      color: rgba(255, 255, 255, 0.8);
+      font-size: 0.9rem;
     }
 
-    .score-details {
-      flex: 1;
+    .fixes-summary {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: 1rem;
+      margin-top: 1rem;
     }
 
-    .score-title {
-      font-size: 1.5rem;
-      margin-bottom: 0.5rem;
-      color: var(--light);
+    .fix-item {
+      background: rgba(0, 0, 0, 0.3);
+      border-radius: 8px;
+      padding: 1rem;
+      display: flex;
+      align-items: flex-start;
+      gap: 0.8rem;
     }
 
-    .score-subtitle {
-      color: rgba(255,255,255,0.7);
-      margin-bottom: 1rem;
+    .fix-status {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.75rem;
+      flex-shrink: 0;
     }
 
-    .score-breakdown {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-      gap: 1rem;
+    .fix-status.fixed {
+      background: var(--fixed);
+      color: white;
     }
 
-    .score-item {
-      background: rgba(255,255,255,0.05);
-      padding: 0.8rem;
-      border-radius: 8px;
-      text-align: center;
+    .fix-status.critical {
+      background: var(--danger);
+      color: white;
     }
 
-    .score-item-value {
-      font-size: 1.3rem;
-      font-weight: 600;
-      color: var(--success);
+    .fix-content h4 {
+      color: var(--light);
+      font-size: 0.9rem;
+      margin-bottom: 0.3rem;
     }
 
-    .score-item-label {
-      font-size: 0.75rem;
-      color: rgba(255,255,255,0.6);
-      text-transform: uppercase;
+    .fix-content p {
+      color: rgba(255, 255, 255, 0.7);
+      font-size: 0.8rem;
     }
 
-    /* Dashboard Grid */
-    .dashboard-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-      gap: 1.5rem;
-      margin-bottom: 2.5rem;
+    /* Section Title */
+    .section-title-main {
+      font-size: 1.6rem;
+      margin-bottom: 1.5rem;
+      color: var(--light);
+      display: flex;
+      align-items: center;
+      gap: 0.8rem;
     }
 
-    /* Card Styles */
-    .card {
-      background: linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(22, 33, 62, 0.9) 100%);
-      backdrop-filter: blur(10px);
+    .section-title-main i {
+      color: var(--highlight);
+    }
+
+    /* Flaw Analysis Section */
+    .flaw-analysis {
+      background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%);
       border-radius: var(--radius);
-      box-shadow: var(--shadow);
-      padding: 1.5rem;
-      transition: var(--transition);
-      position: relative;
+      padding: 2rem;
+      margin-bottom: 2rem;
+      border: 1px solid rgba(220, 53, 69, 0.3);
+    }
+
+    .flaw-card {
+      background: rgba(0, 0, 0, 0.3);
+      border-radius: 8px;
+      margin-bottom: 1.5rem;
       overflow: hidden;
-      display: flex;
-      flex-direction: column;
       border: 1px solid rgba(255, 255, 255, 0.1);
     }
 
-    .card:hover {
-      transform: translateY(-5px);
-      box-shadow: 0 8px 30px rgba(233, 69, 96, 0.2);
-      border-color: rgba(233, 69, 96, 0.3);
+    .flaw-header {
+      background: rgba(220, 53, 69, 0.2);
+      padding: 1rem 1.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid rgba(220, 53, 69, 0.3);
+      flex-wrap: wrap;
+      gap: 0.5rem;
     }
 
-    .card::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 3px;
-      background: linear-gradient(90deg, var(--highlight), var(--success));
+    .flaw-header.fixed {
+      background: rgba(46, 204, 113, 0.2);
+      border-bottom-color: rgba(46, 204, 113, 0.3);
     }
 
-    .card.new-feature::before {
-      background: linear-gradient(90deg, var(--purple), var(--info));
+    .flaw-title {
+      display: flex;
+      align-items: center;
+      gap: 0.8rem;
+      font-weight: 600;
+      color: var(--light);
     }
 
-    .card.enhanced::before {
-      background: linear-gradient(90deg, var(--success), #00ff88);
+    .flaw-title i {
+      color: var(--danger);
     }
 
-    .card-badge {
-      position: absolute;
-      top: 1rem;
-      right: 1rem;
-      padding: 0.2rem 0.6rem;
-      border-radius: 12px;
-      font-size: 0.65rem;
+    .flaw-header.fixed .flaw-title i {
+      color: var(--fixed);
+    }
+
+    .flaw-severity {
+      padding: 0.3rem 0.8rem;
+      border-radius: 20px;
+      font-size: 0.7rem;
       font-weight: 600;
       text-transform: uppercase;
     }
 
-    .badge-new {
-      background: var(--purple);
+    .severity-critical {
+      background: var(--danger);
       color: white;
     }
 
-    .badge-enhanced {
-      background: var(--success);
+    .severity-fixed {
+      background: var(--fixed);
       color: white;
     }
 
-    .badge-critical {
-      background: var(--danger);
-      color: white;
+    .flaw-body {
+      padding: 1.5rem;
     }
 
-    .card-icon {
-      width: 48px;
-      height: 48px;
-      border-radius: 50%;
+    .flaw-section {
+      margin-bottom: 1.5rem;
+    }
+
+    .flaw-section:last-child {
+      margin-bottom: 0;
+    }
+
+    .flaw-section-title {
+      font-size: 0.9rem;
+      font-weight: 600;
+      color: var(--highlight);
+      margin-bottom: 0.5rem;
       display: flex;
       align-items: center;
-      justify-content: center;
-      font-size: 1.3rem;
-      margin-bottom: 1rem;
-      background: linear-gradient(135deg, var(--highlight), #ff6b6b);
-      color: white;
-      box-shadow: 0 4px 15px rgba(233, 69, 96, 0.3);
+      gap: 0.5rem;
     }
 
-    .card-icon.purple {
-      background: linear-gradient(135deg, var(--purple), #8e44ad);
+    .flaw-section-content {
+      color: rgba(255, 255, 255, 0.8);
+      font-size: 0.85rem;
+      line-height: 1.7;
     }
 
-    .card-icon.green {
-      background: linear-gradient(135deg, var(--success), #00b386);
+    .comparison-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 1rem;
+      margin-top: 1rem;
     }
 
-    .card-icon.blue {
-      background: linear-gradient(135deg, var(--info), #138496);
+    @media (max-width: 768px) {
+      .comparison-grid {
+        grid-template-columns: 1fr;
+      }
     }
 
-    .card-icon.orange {
-      background: linear-gradient(135deg, var(--orange), #d35400);
+    .comparison-box {
+      background: rgba(0, 0, 0, 0.3);
+      border-radius: 8px;
+      padding: 1rem;
+      border: 1px solid rgba(255, 255, 255, 0.1);
     }
 
-    .card-title {
-      font-size: 1.15rem;
-      margin-bottom: 0.6rem;
-      color: var(--light);
-      font-weight: 600;
+    .comparison-box.before {
+      border-color: rgba(220, 53, 69, 0.5);
     }
 
-    .card-description {
-      color: rgba(255, 255, 255, 0.7);
-      margin-bottom: 1rem;
-      flex: 1;
-      font-size: 0.9rem;
+    .comparison-box.after {
+      border-color: rgba(46, 204, 113, 0.5);
     }
 
-    .card-status {
+    .comparison-label {
+      font-size: 0.75rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      margin-bottom: 0.5rem;
       display: flex;
       align-items: center;
-      gap: 0.5rem;
-      margin-top: auto;
-    }
-
-    .status-indicator {
-      width: 10px;
-      height: 10px;
-      border-radius: 50%;
-      background: var(--success);
-      box-shadow: 0 0 10px rgba(0, 217, 160, 0.5);
-      animation: pulse 2s infinite;
-    }
-
-    @keyframes pulse {
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.6; }
-    }
-
-    .status-warning .status-indicator {
-      background: var(--warning);
-      box-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
-    }
-
-    .status-danger .status-indicator {
-      background: var(--danger);
-      box-shadow: 0 0 10px rgba(220, 53, 69, 0.5);
-    }
-
-    .status-text {
-      font-size: 0.85rem;
-      font-weight: 500;
-    }
-
-    /* Security Layers Section */
-    .security-layers {
-      background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%);
-      border-radius: var(--radius);
-      padding: 2rem;
-      margin-bottom: 2rem;
-      border: 1px solid rgba(255, 255, 255, 0.1);
-    }
-
-    .layers-title {
-      font-size: 1.3rem;
-      margin-bottom: 1.5rem;
-      color: var(--light);
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
+      gap: 0.3rem;
     }
 
-    .layers-title i {
-      color: var(--highlight);
+    .comparison-box.before .comparison-label {
+      color: var(--danger);
     }
 
-    .layer-diagram {
-      display: flex;
-      flex-direction: column;
-      gap: 0.5rem;
+    .comparison-box.after .comparison-label {
+      color: var(--fixed);
     }
 
-    .layer {
-      padding: 1rem 1.5rem;
+    /* Code Block */
+    .code-block {
+      background: rgba(0, 0, 0, 0.5);
       border-radius: 8px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      transition: var(--transition);
-      cursor: pointer;
+      padding: 1rem;
+      font-family: 'Fira Code', 'Courier New', monospace;
+      font-size: 0.75rem;
+      overflow-x: auto;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      margin: 0.5rem 0;
+      white-space: pre-wrap;
+      word-break: break-all;
+      line-height: 1.6;
     }
 
-    .layer:hover {
-      transform: translateX(10px);
+    .code-block .comment {
+      color: #6a9955;
     }
 
-    .layer-external {
-      background: linear-gradient(90deg, rgba(220, 53, 69, 0.3), rgba(220, 53, 69, 0.1));
-      border-left: 4px solid var(--danger);
+    .code-block .keyword {
+      color: #569cd6;
     }
 
-    .layer-network {
-      background: linear-gradient(90deg, rgba(230, 126, 34, 0.3), rgba(230, 126, 34, 0.1));
-      border-left: 4px solid var(--orange);
+    .code-block .string {
+      color: #ce9178;
     }
 
-    .layer-host {
-      background: linear-gradient(90deg, rgba(255, 193, 7, 0.3), rgba(255, 193, 7, 0.1));
-      border-left: 4px solid var(--warning);
+    .code-block .function {
+      color: #dcdcaa;
     }
 
-    .layer-runtime {
-      background: linear-gradient(90deg, rgba(23, 162, 184, 0.3), rgba(23, 162, 184, 0.1));
-      border-left: 4px solid var(--info);
+    .code-block .class {
+      color: #4ec9b0;
     }
 
-    .layer-container {
-      background: linear-gradient(90deg, rgba(155, 89, 182, 0.3), rgba(155, 89, 182, 0.1));
-      border-left: 4px solid var(--purple);
+    .code-block .decorator {
+      color: #c586c0;
     }
 
-    .layer-application {
-      background: linear-gradient(90deg, rgba(0, 217, 160, 0.3), rgba(0, 217, 160, 0.1));
-      border-left: 4px solid var(--success);
+    .code-block .number {
+      color: #b5cea8;
     }
 
-    .layer-info {
-      display: flex;
-      align-items: center;
-      gap: 1rem;
+    .code-block .error {
+      color: #f44747;
+      text-decoration: line-through;
     }
 
-    .layer-name {
-      font-weight: 600;
-      color: var(--light);
+    .code-block .correct {
+      color: #4ec9b0;
     }
 
-    .layer-controls {
-      display: flex;
-      gap: 0.5rem;
-      flex-wrap: wrap;
+    .code-block .highlight-line {
+      background: rgba(233, 69, 96, 0.2);
+      display: block;
+      margin: 0 -1rem;
+      padding: 0 1rem;
     }
 
-    .layer-control {
-      background: rgba(0, 0, 0, 0.3);
-      padding: 0.3rem 0.6rem;
-      border-radius: 4px;
-      font-size: 0.7rem;
-      color: rgba(255, 255, 255, 0.8);
+    .code-block .fixed-line {
+      background: rgba(46, 204, 113, 0.2);
+      display: block;
+      margin: 0 -1rem;
+      padding: 0 1rem;
     }
 
-    /* Improvement Categories */
-    .improvements-section {
+    /* Dashboard Grid */
+    .dashboard-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 1.5rem;
       margin-bottom: 2rem;
     }
 
-    .improvements-tabs {
-      display: flex;
-      gap: 0.5rem;
-      margin-bottom: 1.5rem;
-      flex-wrap: wrap;
-    }
-
-    .improvement-tab {
-      padding: 0.8rem 1.5rem;
-      background: rgba(255, 255, 255, 0.05);
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      border-radius: 8px;
-      color: rgba(255, 255, 255, 0.7);
-      cursor: pointer;
-      transition: var(--transition);
-      font-size: 0.9rem;
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-    }
-
-    .improvement-tab:hover {
-      background: rgba(255, 255, 255, 0.1);
-      color: var(--light);
-    }
-
-    .improvement-tab.active {
-      background: linear-gradient(135deg, var(--highlight), #ff6b6b);
-      color: white;
-      border-color: var(--highlight);
-    }
-
-    .improvement-content {
-      display: none;
-    }
-
-    .improvement-content.active {
-      display: block;
-    }
-
-    /* Security Controls Section */
-    .security-section {
-      background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%);
+    /* Card Styles */
+    .card {
+      background: linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(22, 33, 62, 0.9) 100%);
       backdrop-filter: blur(10px);
       border-radius: var(--radius);
       box-shadow: var(--shadow);
       padding: 1.5rem;
-      margin-bottom: 2rem;
-      border: 1px solid rgba(255, 255, 255, 0.1);
-    }
-
-    .section-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 1.5rem;
-      padding-bottom: 1rem;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-      flex-wrap: wrap;
-      gap: 1rem;
-    }
-
-    .section-title {
-      font-size: 1.3rem;
-      color: var(--light);
-      font-weight: 600;
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-    }
-
-    .section-title i {
-      color: var(--highlight);
-    }
-
-    .section-actions {
-      display: flex;
-      gap: 0.8rem;
-      flex-wrap: wrap;
-    }
-
-    .btn {
-      padding: 0.5rem 1rem;
-      border-radius: 8px;
-      text-decoration: none;
-      font-weight: 500;
       transition: var(--transition);
-      border: none;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      font-size: 0.85rem;
-    }
-
-    .btn-primary {
-      background: linear-gradient(135deg, var(--highlight), #ff6b6b);
-      color: white;
-    }
-
-    .btn-primary:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 4px 15px rgba(233, 69, 96, 0.4);
-    }
-
-    .btn-secondary {
-      background: rgba(255, 255, 255, 0.1);
-      color: var(--light);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-    }
-
-    .btn-secondary:hover {
-      background: rgba(255, 255, 255, 0.2);
-    }
-
-    .btn-success {
-      background: linear-gradient(135deg, var(--success), #00b386);
-      color: white;
-    }
-
-    .btn-success:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 4px 15px rgba(0, 217, 160, 0.4);
-    }
-
-    /* Security Item */
-    .security-item {
-      margin-bottom: 1rem;
-      padding: 1.2rem;
-      border-radius: var(--radius);
-      background: rgba(255, 255, 255, 0.05);
-      border-left: 4px solid var(--success);
-      transition: var(--transition);
-    }
-
-    .security-item:hover {
-      background: rgba(255, 255, 255, 0.08);
-      transform: translateX(5px);
-    }
-
-    .security-item.warning {
-      border-left-color: var(--warning);
-    }
-
-    .security-item.danger {
-      border-left-color: var(--danger);
-    }
-
-    .security-item.new {
-      border-left-color: var(--purple);
-    }
-
-    .security-item.enhanced {
-      border-left-color: var(--info);
-    }
-
-    .security-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 0.8rem;
-      flex-wrap: wrap;
-      gap: 0.5rem;
-    }
-
-    .security-title {
-      font-weight: 600;
-      color: var(--light);
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-    }
-
-    .security-title i {
-      color: var(--highlight);
-      font-size: 0.9rem;
-    }
-
-    .security-status {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      font-size: 0.85rem;
-    }
-
-    .security-content {
-      display: grid;
-      grid-template-columns: 1fr auto;
-      gap: 1rem;
-    }
-
-    .security-details {
-      color: rgba(255, 255, 255, 0.7);
-      margin-bottom: 0.4rem;
-      font-size: 0.85rem;
-    }
-
-    .security-details strong {
-      color: var(--light);
-    }
-
-    .security-actions {
+      position: relative;
+      overflow: hidden;
       display: flex;
       flex-direction: column;
-      gap: 0.5rem;
-      align-items: flex-end;
-    }
-
-    .btn-sm {
-      padding: 0.3rem 0.6rem;
-      font-size: 0.75rem;
-    }
-
-    /* Code Block */
-    .code-block {
-      background: rgba(0, 0, 0, 0.4);
-      border-radius: 8px;
-      padding: 1rem;
-      font-family: 'Courier New', monospace;
-      font-size: 0.8rem;
-      overflow-x: auto;
       border: 1px solid rgba(255, 255, 255, 0.1);
-      margin: 0.5rem 0;
-      white-space: pre-wrap;
-      word-break: break-all;
-    }
-
-    .code-block .comment {
-      color: #6a9955;
     }
 
-    .code-block .keyword {
-      color: var(--highlight);
+    .card:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 8px 30px rgba(233, 69, 96, 0.2);
+      border-color: rgba(233, 69, 96, 0.3);
     }
 
-    .code-block .string {
-      color: #ce9178;
+    .card::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 3px;
+      background: linear-gradient(90deg, var(--highlight), var(--success));
     }
 
-    .code-block .flag {
-      color: #4ec9b0;
+    .card.fixed::before {
+      background: linear-gradient(90deg, var(--fixed), #27ae60);
     }
 
-    /* Threat Model Section */
-    .threat-model {
-      background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%);
-      border-radius: var(--radius);
-      padding: 1.5rem;
-      margin-bottom: 2rem;
-      border: 1px solid rgba(255, 255, 255, 0.1);
+    .card.critical::before {
+      background: linear-gradient(90deg, var(--danger), var(--warning));
     }
 
-    .threat-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-      gap: 1rem;
+    .card-badge {
+      position: absolute;
+      top: 1rem;
+      right: 1rem;
+      padding: 0.2rem 0.6rem;
+      border-radius: 12px;
+      font-size: 0.65rem;
+      font-weight: 600;
+      text-transform: uppercase;
     }
 
-    .threat-card {
-      background: rgba(0, 0, 0, 0.3);
-      border-radius: 8px;
-      padding: 1.2rem;
-      border: 1px solid rgba(255, 255, 255, 0.1);
+    .badge-fixed {
+      background: var(--fixed);
+      color: white;
     }
 
-    .threat-header {
-      display: flex;
-      align-items: center;
-      gap: 0.8rem;
-      margin-bottom: 0.8rem;
+    .badge-critical {
+      background: var(--danger);
+      color: white;
     }
 
-    .threat-icon {
-      width: 36px;
-      height: 36px;
+    .card-icon {
+      width: 48px;
+      height: 48px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 1rem;
-    }
-
-    .threat-icon.high {
-      background: rgba(220, 53, 69, 0.3);
-      color: var(--danger);
-    }
-
-    .threat-icon.medium {
-      background: rgba(255, 193, 7, 0.3);
-      color: var(--warning);
-    }
-
-    .threat-icon.low {
-      background: rgba(0, 217, 160, 0.3);
-      color: var(--success);
-    }
-
-    .threat-title {
-      font-weight: 600;
-      color: var(--light);
-      font-size: 0.95rem;
+      font-size: 1.3rem;
+      margin-bottom: 1rem;
+      background: linear-gradient(135deg, var(--highlight), #ff6b6b);
+      color: white;
+      box-shadow: 0 4px 15px rgba(233, 69, 96, 0.3);
     }
 
-    .threat-description {
-      color: rgba(255, 255, 255, 0.7);
-      font-size: 0.8rem;
-      margin-bottom: 0.8rem;
+    .card-icon.green {
+      background: linear-gradient(135deg, var(--fixed), #27ae60);
     }
 
-    .threat-mitigation {
-      background: rgba(0, 217, 160, 0.1);
-      padding: 0.6rem;
-      border-radius: 6px;
-      font-size: 0.75rem;
-      color: var(--success);
-      border-left: 3px solid var(--success);
+    .card-icon.blue {
+      background: linear-gradient(135deg, var(--info), #138496);
     }
-
-    /* System Health Section */
-    .health-section {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-      gap: 1rem;
-      margin-bottom: 2rem;
+
+    .card-icon.orange {
+      background: linear-gradient(135deg, var(--orange), #d35400);
     }
 
-    .health-card {
-      background: linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(22, 33, 62, 0.9) 100%);
-      border-radius: var(--radius);
-      padding: 1.2rem;
-      text-align: center;
-      box-shadow: var(--shadow);
-      transition: var(--transition);
-      border: 1px solid rgba(255, 255, 255, 0.1);
+    .card-title {
+      font-size: 1.1rem;
+      margin-bottom: 0.6rem;
+      color: var(--light);
+      font-weight: 600;
     }
 
-    .health-card:hover {
-      transform: translateY(-3px);
-      border-color: rgba(233, 69, 96, 0.3);
+    .card-description {
+      color: rgba(255, 255, 255, 0.7);
+      margin-bottom: 1rem;
+      flex: 1;
+      font-size: 0.85rem;
     }
 
-    .health-value {
-      font-size: 1.8rem;
-      font-weight: 700;
-      color: var(--success);
-      margin-bottom: 0.3rem;
+    .card-status {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin-top: auto;
     }
 
-    .health-value.warning {
-      color: var(--warning);
+    .status-indicator {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: var(--success);
+      box-shadow: 0 0 10px rgba(0, 217, 160, 0.5);
+      animation: pulse 2s infinite;
     }
 
-    .health-value.danger {
-      color: var(--danger);
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.6; }
     }
 
-    .health-label {
-      color: rgba(255, 255, 255, 0.7);
-      font-size: 0.8rem;
-      text-transform: uppercase;
-      letter-spacing: 1px;
+    .status-text {
+      font-size: 0.85rem;
+      font-weight: 500;
     }
 
     /* Script Section */
@@ -955,7 +690,7 @@
       color: rgba(255, 255, 255, 0.7);
       cursor: pointer;
       transition: var(--transition);
-      font-size: 0.85rem;
+      font-size: 0.8rem;
       border-bottom: 2px solid transparent;
       white-space: nowrap;
     }
@@ -979,12 +714,57 @@
 
     .script-content pre {
       margin: 0;
-      font-family: 'Courier New', monospace;
-      font-size: 0.75rem;
+      font-family: 'Fira Code', 'Courier New', monospace;
+      font-size: 0.72rem;
       line-height: 1.5;
       color: #d4d4d4;
     }
 
+    /* Buttons */
+    .btn {
+      padding: 0.5rem 1rem;
+      border-radius: 8px;
+      text-decoration: none;
+      font-weight: 500;
+      transition: var(--transition);
+      border: none;
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-size: 0.85rem;
+    }
+
+    .btn-primary {
+      background: linear-gradient(135deg, var(--highlight), #ff6b6b);
+      color: white;
+    }
+
+    .btn-primary:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 15px rgba(233, 69, 96, 0.4);
+    }
+
+    .btn-success {
+      background: linear-gradient(135deg, var(--fixed), #27ae60);
+      color: white;
+    }
+
+    .btn-success:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4);
+    }
+
+    .btn-secondary {
+      background: rgba(255, 255, 255, 0.1);
+      color: var(--light);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+    }
+
+    .btn-secondary:hover {
+      background: rgba(255, 255, 255, 0.2);
+    }
+
     /* Alert Box */
     .alert {
       padding: 1rem 1.2rem;
@@ -995,16 +775,10 @@
       gap: 0.8rem;
     }
 
-    .alert-warning {
-      background: rgba(255, 193, 7, 0.15);
-      border: 1px solid rgba(255, 193, 7, 0.3);
-      color: var(--warning);
-    }
-
     .alert-success {
-      background: rgba(0, 217, 160, 0.15);
-      border: 1px solid rgba(0, 217, 160, 0.3);
-      color: var(--success);
+      background: rgba(46, 204, 113, 0.15);
+      border: 1px solid rgba(46, 204, 113, 0.3);
+      color: var(--fixed);
     }
 
     .alert-danger {
@@ -1013,18 +787,18 @@
       color: var(--danger);
     }
 
+    .alert-warning {
+      background: rgba(255, 193, 7, 0.15);
+      border: 1px solid rgba(255, 193, 7, 0.3);
+      color: var(--warning);
+    }
+
     .alert-info {
       background: rgba(23, 162, 184, 0.15);
       border: 1px solid rgba(23, 162, 184, 0.3);
       color: var(--info);
     }
 
-    .alert-purple {
-      background: rgba(155, 89, 182, 0.15);
-      border: 1px solid rgba(155, 89, 182, 0.3);
-      color: var(--purple);
-    }
-
     .alert i {
       font-size: 1.2rem;
       margin-top: 0.1rem;
@@ -1044,6 +818,96 @@
       opacity: 0.9;
     }
 
+    /* Security Score */
+    .security-score-container {
+      background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%);
+      border-radius: var(--radius);
+      padding: 2rem;
+      margin-bottom: 2rem;
+      border: 1px solid rgba(46, 204, 113, 0.3);
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: 2rem;
+      align-items: center;
+    }
+
+    @media (max-width: 768px) {
+      .security-score-container {
+        grid-template-columns: 1fr;
+        text-align: center;
+      }
+    }
+
+    .score-circle {
+      width: 140px;
+      height: 140px;
+      border-radius: 50%;
+      background: conic-gradient(var(--fixed) 0deg, var(--fixed) 342deg, rgba(255, 255, 255, 0.1) 342deg);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      margin: 0 auto;
+    }
+
+    .score-circle::before {
+      content: '';
+      position: absolute;
+      width: 110px;
+      height: 110px;
+      background: var(--primary);
+      border-radius: 50%;
+    }
+
+    .score-value {
+      position: relative;
+      z-index: 1;
+      font-size: 2.2rem;
+      font-weight: 700;
+      color: var(--fixed);
+    }
+
+    .score-details {
+      flex: 1;
+    }
+
+    .score-title {
+      font-size: 1.4rem;
+      margin-bottom: 0.5rem;
+      color: var(--light);
+    }
+
+    .score-subtitle {
+      color: rgba(255, 255, 255, 0.7);
+      margin-bottom: 1rem;
+      font-size: 0.9rem;
+    }
+
+    .score-breakdown {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+      gap: 0.8rem;
+    }
+
+    .score-item {
+      background: rgba(255, 255, 255, 0.05);
+      padding: 0.6rem;
+      border-radius: 8px;
+      text-align: center;
+    }
+
+    .score-item-value {
+      font-size: 1.2rem;
+      font-weight: 600;
+      color: var(--fixed);
+    }
+
+    .score-item-label {
+      font-size: 0.7rem;
+      color: rgba(255, 255, 255, 0.6);
+      text-transform: uppercase;
+    }
+
     /* Checklist */
     .checklist {
       list-style: none;
@@ -1072,22 +936,17 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 0.75rem;
+      font-size: 0.7rem;
       flex-shrink: 0;
     }
 
     .checklist-icon.done {
-      background: var(--success);
-      color: white;
-    }
-
-    .checklist-icon.pending {
-      background: var(--warning);
+      background: var(--fixed);
       color: white;
     }
 
-    .checklist-icon.new {
-      background: var(--purple);
+    .checklist-icon.fixed {
+      background: var(--info);
       color: white;
     }
 
@@ -1098,116 +957,224 @@
     .checklist-title {
       font-weight: 600;
       color: var(--light);
-      font-size: 0.9rem;
+      font-size: 0.85rem;
       margin-bottom: 0.2rem;
     }
 
     .checklist-description {
       color: rgba(255, 255, 255, 0.6);
-      font-size: 0.8rem;
+      font-size: 0.75rem;
     }
 
-    /* Modal */
-    .modal {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.8);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 2000;
-      opacity: 0;
-      visibility: hidden;
-      transition: var(--transition);
-      backdrop-filter: blur(5px);
+    /* Footer */
+    footer {
+      background: linear-gradient(135deg, rgba(26, 26, 46, 0.98) 0%, rgba(22, 33, 62, 0.98) 100%);
+      padding: 2rem;
+      text-align: center;
+      border-top: 1px solid rgba(255, 255, 255, 0.1);
     }
 
-    .modal.active {
-      opacity: 1;
-      visibility: visible;
+    .footer-content {
+      max-width: 1200px;
+      margin: 0 auto;
     }
 
-    .modal-content {
-      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
-      border-radius: var(--radius);
-      padding: 1.5rem;
-      width: 90%;
-      max-width: 1000px;
-      max-height: 90vh;
-      overflow-y: auto;
-      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
-      transform: scale(0.9);
-      transition: var(--transition);
-      border: 1px solid rgba(255, 255, 255, 0.1);
+    .footer-text {
+      color: rgba(255, 255, 255, 0.7);
+      font-size: 0.85rem;
+      margin-bottom: 0.5rem;
     }
 
-    .modal.active .modal-content {
-      transform: scale(1);
+    .footer-links {
+      display: flex;
+      justify-content: center;
+      gap: 1.5rem;
+      flex-wrap: wrap;
     }
 
-    .modal-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 1.5rem;
-      padding-bottom: 1rem;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    .footer-links a {
+      color: var(--highlight);
+      text-decoration: none;
+      font-size: 0.85rem;
+      transition: var(--transition);
     }
 
-    .modal-title {
-      font-size: 1.3rem;
-      color: var(--light);
-      font-weight: 600;
+    .footer-links a:hover {
+      text-decoration: underline;
     }
 
-    .close-btn {
-      background: none;
+    /* Responsive */
+    @media (max-width: 768px) {
+      header {
+        padding: 1rem;
+      }
+
+      .header-content {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
+      .logo {
+        font-size: 1.2rem;
+      }
+
+      nav ul {
+        width: 100%;
+        justify-content: flex-start;
+      }
+
+      main {
+        padding: 0 1rem;
+      }
+
+      .section-title-main {
+        font-size: 1.3rem;
+      }
+
+      .dashboard-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    /* Copy Button */
+    .copy-btn {
+      position: absolute;
+      top: 0.5rem;
+      right: 0.5rem;
+      background: rgba(255, 255, 255, 0.1);
       border: none;
-      font-size: 1.3rem;
       color: rgba(255, 255, 255, 0.7);
+      padding: 0.4rem 0.6rem;
+      border-radius: 4px;
       cursor: pointer;
+      font-size: 0.7rem;
       transition: var(--transition);
-      padding: 0.3rem;
     }
 
-    .close-btn:hover {
-      color: var(--danger);
+    .copy-btn:hover {
+      background: rgba(255, 255, 255, 0.2);
+      color: var(--light);
     }
 
-    .modal-body {
-      margin-bottom: 1.5rem;
+    .copy-btn.copied {
+      background: var(--fixed);
+      color: white;
     }
 
-    .detail-section {
-      margin-bottom: 1.5rem;
+    /* Entropy Visualization */
+    .entropy-visual {
+      display: flex;
+      gap: 2px;
+      margin: 1rem 0;
+      flex-wrap: wrap;
     }
 
-    .detail-title {
-      font-weight: 600;
-      color: var(--highlight);
-      margin-bottom: 0.5rem;
-      font-size: 1rem;
+    .entropy-block {
+      width: 8px;
+      height: 20px;
+      border-radius: 2px;
+      transition: var(--transition);
     }
 
-    .detail-content {
-      color: rgba(255, 255, 255, 0.8);
-      line-height: 1.7;
-      font-size: 0.9rem;
+    .entropy-block.high {
+      background: var(--fixed);
     }
 
-    .detail-content ul {
-      margin-left: 1.5rem;
-      margin-top: 0.5rem;
+    .entropy-block.medium {
+      background: var(--warning);
     }
 
-    .detail-content li {
-      margin-bottom: 0.3rem;
+    .entropy-block.low {
+      background: var(--danger);
     }
-
-    .modal-footer {
-      display: flex;
-      justify-content: flex-end;
-      gap:
+  </style>
+</head>
+
+<body>
+  <header>
+    <div class="header-content">
+      <div class="logo-container">
+        <a href="#" class="logo">
+          <span class="logo-icon"><i class="fas fa-shield-halved"></i></span>
+          Gemma 3 Hardened Container
+        </a>
+        <span class="model-badge">gemma-3-12b-it-abliterated-v2.q4_k_m.gguf</span>
+        <span class="version-badge"><i class="fas fa-wrench"></i> v2.0 - Critical Fixes</span>
+        <span class="fixes-badge"><i class="fas fa-bug"></i> 3 Flaws Resolved</span>
+      </div>
+      <div class="built-with">
+        <span>Built with</span>
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
+      </div>
+    </div>
+    <nav>
+      <ul>
+        <li><a href="#fixes"><i class="fas fa-tools"></i> Critical Fixes</a></li>
+        <li><a href="#implementation"><i class="fas fa-code"></i> Implementation</a></li>
+        <li><a href="#scripts"><i class="fas fa-terminal"></i> Scripts</a></li>
+        <li><a href="#verification"><i class="fas fa-check-double"></i> Verification</a></li>
+      </ul>
+    </nav>
+  </header>
+
+  <main>
+    <!-- Critical Fixes Banner -->
+    <section class="critical-fixes-banner" id="fixes">
+      <div class="banner-header">
+        <div class="banner-icon">
+          <i class="fas fa-exclamation-triangle"></i>
+        </div>
+        <div>
+          <h2 class="banner-title">Critical Implementation Flaws - RESOLVED</h2>
+          <p class="banner-subtitle">All identified security and functionality issues have been addressed in this version</p>
+        </div>
+      </div>
+      <div class="fixes-summary">
+        <div class="fix-item">
+          <div class="fix-status fixed"><i class="fas fa-check"></i></div>
+          <div class="fix-content">
+            <h4>Logging Paradox (DoS Fix)</h4>
+            <p>Removed FileHandler, now using stdout/stderr with Docker log driver</p>
+          </div>
+        </div>
+        <div class="fix-item">
+          <div class="fix-status fixed"><i class="fas fa-check"></i></div>
+          <div class="fix-content">
+            <h4>Remount Fallacy Removed</h4>
+            <p>Eliminated privileged mount command that would fail without CAP_SYS_ADMIN</p>
+          </div>
+        </div>
+        <div class="fix-item">
+          <div class="fix-status fixed"><i class="fas fa-check"></i></div>
+          <div class="fix-content">
+            <h4>Entropy Source Hardened</h4>
+            <p>Added hardware RNG verification and /dev/random blocking for crypto operations</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Security Score -->
+    <section class="security-score-container">
+      <div class="score-circle">
+        <span class="score-value">95%</span>
+      </div>
+      <div class="score-details">
+        <h2 class="score-title">Security Posture Score - Post-Fix</h2>
+        <p class="score-subtitle">All critical implementation flaws resolved. Container now production-ready.</p>
+        <div class="score-breakdown">
+          <div class="score-item">
+            <div class="score-item-value">✓</div>
+            <div class="score-item-label">Logging Fixed</div>
+          </div>
+          <div class="score-item">
+            <div class="score-item-value">✓</div>
+            <div class="score-item-label">RO Filesystem</div>
+          </div>
+          <div class="score-item">
+            <div class="score-item-value">✓</div>
+            <div class="score-item-label">Entropy Secure</div>
+          </div>
+          <div class="score-item">
+            <div class="score-item-value">✓</div>
+            <div class="score