Update artifacts.py

artifacts.py

@@ -27,17 +27,17 @@ class MiddlewareHTMLGenerator:
         body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #1e1e1e; color: #ffffff; }
         .header { height: 40px; background-color: #2d2d2d; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; position: sticky; top: 0; z-index: 1000; }
         .content-wrapper { padding: 20px; }
-        .content-item { width: 100%; margin-bottom: 20px; border: 1px solid #444; background-color: #2d2d2d; }
+        .content-item { width: 100%; margin-bottom: 20px; border: 1px solid #444; background-color: #ffffff; }
         .content-item.code-view { padding: 10px; }
         .render-view .rendered-content { margin: 0; padding: 0; }
         pre { white-space: pre-wrap; word-wrap: break-word; background-color: #1e1e1e; padding: 10px; border-radius: 5px; margin: 0; }
         code { font-family: 'Courier New', Courier, monospace; }
         .hidden { display: none; }
-        h2 { margin: 0; padding: 10px; background-color: #3d3d3d; }
-        .iframe-wrapper { width: 100%; height: 600px; overflow: hidden; position: relative; resize: both; background-color: transparent; }
+        h2 { margin: 0; padding: 10px; background-color: #3d3d3d; border-bottom: 1px solid #cccccc; }
+        .iframe-wrapper { width: 100%; height: 600px; overflow: hidden; position: relative; resize: both; background-color: #ffffff; }
         .content-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; background-color: transparent; }
         .resize-handle { position: absolute; bottom: 0; right: 0; width: 20px; height: 20px; cursor: se-resize; }
-        .responsive-controls { display: flex; justify-content: center; margin-bottom: 10px; margin-top: 15px; }
+        .responsive-controls { background-color: #3d3d3d; display: flex; justify-content: center; margin-top: 0; border-bottom: 10px solid #3d3d3d; border-top: 10px solid #3d3d3d; }
         .device-button { margin: 0 4px; padding: 5px 7px; background-color: transparent; color: #ffffff; border: 1px solid #ffffff; cursor: pointer; border-radius: 4px; transition: background-color 0.3s, color 0.3s; }
         .device-button:hover { background-color: rgba(255, 255, 255, 0.1); }
         .device-button.active { background-color: rgba(255, 255, 255, 0.2); font-weight: bold; }
@@ -408,7 +408,7 @@ class MiddlewareHTMLGenerator:
             <div class='content-item render-view' data-artifact="{i+1}">
                 <h2>HTML Content {i+1}</h2>
                 <div class="responsive-controls">
-                    <button class="device-button" data-width="300px">Mobile</button>
+                    <button class="device-button" data-width="320px">Mobile</button>
                     <button class="device-button" data-width="768px">Tablet</button>
                     <button class="device-button active" data-width="100%">Desktop</button>
                     <!-- CodePen Button -->