Spaces:

SamiKoen
/

BF-Realtime

Running

App Files Files Community

SamiKoen commited on 23 days ago

Commit

b8d7ad6

1 Parent(s): 03bcc8f

Two side-by-side monitors: assistant left, product showcase right

Browse files

Files changed (1) hide show

static/index.html +92 -81

static/index.html CHANGED Viewed

@@ -38,20 +38,28 @@
     align-items: center;
   }
-  /* Monitor cercevesi — saf CSS, gorsel yok */
-  .monitor {
     width: 100%;
-    max-width: 1280px;
     margin: 12px auto 0;
-    position: relative;
   }
   .monitor .bezel {
     background: linear-gradient(180deg, var(--bezel-1) 0%, var(--bezel-2) 100%);
     border-radius: 18px;
-    padding: 18px;
     box-shadow:
-      0 30px 80px rgba(0,0,0,0.25),
-      0 8px 20px rgba(0,0,0,0.15),
       inset 0 1px 0 rgba(255,255,255,0.08),
       inset 0 -1px 0 rgba(0,0,0,0.4);
     position: relative;
@@ -60,11 +68,11 @@
     /* Kamera deligi */
     content: '';
     position: absolute;
-    top: 6px;
     left: 50%;
     transform: translateX(-50%);
-    width: 6px;
-    height: 6px;
     background: #0a0b0d;
     border-radius: 50%;
     box-shadow: inset 0 0 2px rgba(255,255,255,0.2);
@@ -74,53 +82,44 @@
     border-radius: 6px;
     overflow: hidden;
     position: relative;
-    min-height: 720px;
   }
-  /* Stand boynu */
   .monitor .neck {
-    width: 80px;
-    height: 36px;
     margin: -2px auto 0;
     background: linear-gradient(180deg, #b9bdc4 0%, #8c9098 100%);
     border-radius: 0 0 8px 8px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.15);
   }
-  /* Stand tabani */
   .monitor .base {
-    width: 280px;
-    height: 14px;
     margin: 0 auto;
     background: linear-gradient(180deg, #c9ccd2 0%, #9aa0a8 100%);
     border-radius: 50%;
-    box-shadow: 0 12px 24px rgba(0,0,0,0.18);
   }
   @media (max-width: 700px) {
     .monitor .bezel { padding: 10px; border-radius: 12px; }
     .monitor .neck { width: 50px; height: 22px; }
     .monitor .base { width: 180px; height: 10px; }
-    .monitor .screen { min-height: 0; }
   }
-  .app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    min-height: 720px;
-    position: relative;
-    z-index: 1;
-  }
-  .col {
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 28px 24px 36px;
     min-width: 0;
   }
-  .col.left { border-right: 1px solid var(--line); }
-  .col.right { justify-content: center; }
-  @media (max-width: 900px) {
-    .app { grid-template-columns: 1fr; min-height: 0; }
-    .col.left { border-right: none; border-bottom: 1px solid var(--line); }
-  }
   .product-card {
     width: min(90%, 520px);
     background: #ffffff;
@@ -357,60 +356,72 @@
 </style>
 </head>
 <body>
-<div class="monitor">
-  <div class="bezel">
-    <div class="screen">
-<div class="app">
-  <div class="col left">
-    <div class="brand">
-      <svg class="mark" viewBox="0 0 288.1 80" xmlns="http://www.w3.org/2000/svg" aria-label="Trek">
-        <g>
-          <polygon points="238.5,22.9 214.3,22.9 201.9,57.2 226.1,57.2 "/>
-          <polygon points="234.1,38.8 248.4,57.2 276.3,57.2 260.3,39.1 288.1,22.9 259.7,22.9 "/>
-          <path d="M206.6,29.5l2.4-6.6h-61.9l-8.5,23.6c-0.5,1.5-0.6,3.2,0.5,4.5c0.4,0.4,3.1,3.6,3.7,4.2c1,1.1,2.2,2,4.2,2h49.6l2.4-6.5h-34.7c-2.1,0-3.1-1.6-2.6-3.2l1.6-4.3h38.4l2.4-6.6h-38.4l2.6-7.1C168.3,29.4,206.6,29.4,206.6,29.5z"/>
-          <path d="M135.5,22.9H73.9L61.5,57.2h23.6l10-27.7h17.6c1.9,0,2.6,1.4,2.2,2.7c-0.4,1.4-1,3.1-1.5,4.1c-0.6,1.4-2,2.5-4.1,2.5s-16.5,0-16.5,0L107.1,57h27.1L122,43.3c0,0,4.9,0,7.3,0c3.4,0,5.4-1.8,6.3-4.1c1-2.6,3.3-8.9,4-11C140.9,25,138.9,22.9,135.5,22.9"/>
-          <polygon points="69.6,22.9 2.4,22.9 0,29.5 23.2,29.5 13.2,57.2 36,57.2 46,29.5 67.3,29.5 "/>
-        </g>
-      </svg>
-      <span class="label" lang="en">AI Assistant</span>
-    </div>
-    <h1>Sesli <span class="accent">Asistan</span></h1>
-    <div class="subtitle">Bisiklet · Stok · Fiyat · Anlık Yanıt</div>
-    <div class="stage">
-      <img id="avatarImg" src="/static/assistant.png" alt="Trek Asistan" />
-      <div id="ring" class="ring"></div>
-      <span class="corner tl"></span>
-      <span class="corner tr"></span>
-      <span class="corner bl"></span>
-      <span class="corner br"></span>
-    </div>
-    <div class="panel">
-      <div id="status" class="status disconnected">● Bağlantı Yok</div>
-      <div class="controls">
-        <button id="btnConnect">Konuşmaya Başla</button>
-        <button id="btnDisconnect" class="danger" disabled>Bitir</button>
       </div>
     </div>
-    <div class="footer"><span lang="en">Powered by Trek · Realtime AI</span></div>
   </div>
-  <div class="col right">
-    <div class="product-section-title"><span class="accent">●</span> Ürün Vitrini</div>
-    <div class="product-card" id="productCard">
-      <div class="empty" id="productEmpty">
-        Bahsedilen ürün burada gösterilir
       </div>
     </div>
   </div>
-</div>
-    </div><!-- /screen -->
-  </div><!-- /bezel -->
-  <div class="neck"></div>
-  <div class="base"></div>
-</div><!-- /monitor -->
 <script>
 const SAMPLE_RATE = 24000;

     align-items: center;
   }
+  /* Iki monitor yan yana */
+  .desk {
     width: 100%;
+    max-width: 1480px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 32px;
     margin: 12px auto 0;
+    align-items: start;
   }
+  @media (max-width: 1000px) {
+    .desk { grid-template-columns: 1fr; gap: 24px; }
+  }
+  .monitor { position: relative; width: 100%; }
   .monitor .bezel {
     background: linear-gradient(180deg, var(--bezel-1) 0%, var(--bezel-2) 100%);
     border-radius: 18px;
+    padding: 16px;
     box-shadow:
+      0 30px 80px rgba(0,0,0,0.22),
+      0 8px 20px rgba(0,0,0,0.12),
       inset 0 1px 0 rgba(255,255,255,0.08),
       inset 0 -1px 0 rgba(0,0,0,0.4);
     position: relative;
     /* Kamera deligi */
     content: '';
     position: absolute;
+    top: 5px;
     left: 50%;
     transform: translateX(-50%);
+    width: 5px;
+    height: 5px;
     background: #0a0b0d;
     border-radius: 50%;
     box-shadow: inset 0 0 2px rgba(255,255,255,0.2);
     border-radius: 6px;
     overflow: hidden;
     position: relative;
+    min-height: 640px;
+    display: flex;
+    flex-direction: column;
   }
   .monitor .neck {
+    width: 72px;
+    height: 32px;
     margin: -2px auto 0;
     background: linear-gradient(180deg, #b9bdc4 0%, #8c9098 100%);
     border-radius: 0 0 8px 8px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.15);
   }
   .monitor .base {
+    width: 240px;
+    height: 12px;
     margin: 0 auto;
     background: linear-gradient(180deg, #c9ccd2 0%, #9aa0a8 100%);
     border-radius: 50%;
+    box-shadow: 0 12px 24px rgba(0,0,0,0.16);
+  }
+  @media (max-width: 1000px) {
+    .monitor .screen { min-height: 0; }
   }
   @media (max-width: 700px) {
     .monitor .bezel { padding: 10px; border-radius: 12px; }
     .monitor .neck { width: 50px; height: 22px; }
     .monitor .base { width: 180px; height: 10px; }
   }
+  .panel-content {
     display: flex;
     flex-direction: column;
     align-items: center;
+    padding: 24px 22px 28px;
+    flex: 1;
     min-width: 0;
   }
+  .panel-content.center { justify-content: center; }
   .product-card {
     width: min(90%, 520px);
     background: #ffffff;
 </style>
 </head>
 <body>
+<div class="desk">
+  <!-- SOL MONITOR: Asistan -->
+  <div class="monitor">
+    <div class="bezel">
+      <div class="screen">
+        <div class="panel-content">
+          <div class="brand">
+            <svg class="mark" viewBox="0 0 288.1 80" xmlns="http://www.w3.org/2000/svg" aria-label="Trek">
+              <g>
+                <polygon points="238.5,22.9 214.3,22.9 201.9,57.2 226.1,57.2 "/>
+                <polygon points="234.1,38.8 248.4,57.2 276.3,57.2 260.3,39.1 288.1,22.9 259.7,22.9 "/>
+                <path d="M206.6,29.5l2.4-6.6h-61.9l-8.5,23.6c-0.5,1.5-0.6,3.2,0.5,4.5c0.4,0.4,3.1,3.6,3.7,4.2c1,1.1,2.2,2,4.2,2h49.6l2.4-6.5h-34.7c-2.1,0-3.1-1.6-2.6-3.2l1.6-4.3h38.4l2.4-6.6h-38.4l2.6-7.1C168.3,29.4,206.6,29.4,206.6,29.5z"/>
+                <path d="M135.5,22.9H73.9L61.5,57.2h23.6l10-27.7h17.6c1.9,0,2.6,1.4,2.2,2.7c-0.4,1.4-1,3.1-1.5,4.1c-0.6,1.4-2,2.5-4.1,2.5s-16.5,0-16.5,0L107.1,57h27.1L122,43.3c0,0,4.9,0,7.3,0c3.4,0,5.4-1.8,6.3-4.1c1-2.6,3.3-8.9,4-11C140.9,25,138.9,22.9,135.5,22.9"/>
+                <polygon points="69.6,22.9 2.4,22.9 0,29.5 23.2,29.5 13.2,57.2 36,57.2 46,29.5 67.3,29.5 "/>
+              </g>
+            </svg>
+            <span class="label" lang="en">AI Assistant</span>
+          </div>
+          <h1>Sesli <span class="accent">Asistan</span></h1>
+          <div class="subtitle">Bisiklet · Stok · Fiyat · Anlık Yanıt</div>
+          <div class="stage">
+            <img id="avatarImg" src="/static/assistant.png" alt="Trek Asistan" />
+            <div id="ring" class="ring"></div>
+            <span class="corner tl"></span>
+            <span class="corner tr"></span>
+            <span class="corner bl"></span>
+            <span class="corner br"></span>
+          </div>
+          <div class="panel">
+            <div id="status" class="status disconnected">● Bağlantı Yok</div>
+            <div class="controls">
+              <button id="btnConnect">Konuşmaya Başla</button>
+              <button id="btnDisconnect" class="danger" disabled>Bitir</button>
+            </div>
+          </div>
+          <div class="footer"><span lang="en">Powered by Trek · Realtime AI</span></div>
+        </div>
       </div>
     </div>
+    <div class="neck"></div>
+    <div class="base"></div>
   </div>
+  <!-- SAG MONITOR: Urun Vitrini -->
+  <div class="monitor">
+    <div class="bezel">
+      <div class="screen">
+        <div class="panel-content center">
+          <div class="product-section-title"><span class="accent">●</span> Ürün Vitrini</div>
+          <div class="product-card" id="productCard">
+            <div class="empty" id="productEmpty">
+              Bahsedilen ürün burada gösterilir
+            </div>
+          </div>
+        </div>
       </div>
     </div>
+    <div class="neck"></div>
+    <div class="base"></div>
   </div>
+</div><!-- /desk -->
 <script>
 const SAMPLE_RATE = 24000;