init

2026-08-02 11:32:45 +03:00
commit cf7b8e1a5d
44 changed files with 1347 additions and 0 deletions
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=1920, initial-scale=1">
+  <title>TRANSFER | Broadcast Graphics</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <style>
+    @font-face { font-family: 'ONY One'; src: local('ONY One Regular'), url('file:///home/itten/.local/share/fonts/ONYOne-Regular.otf') format('opentype'); font-weight: 400; }
+    @font-face { font-family: 'ONY One'; src: local('ONY One Medium'),  url('file:///home/itten/.local/share/fonts/ONYOne-Medium.otf')  format('opentype'); font-weight: 500; }
+    @font-face { font-family: 'ONY One'; src: local('ONY One Bold'),    url('file:///home/itten/.local/share/fonts/ONYOne-Bold.otf')    format('opentype'); font-weight: 700; }
+  </style>
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+  <!-- 1920x1080 broadcast frame (transparent overlay) -->
+  <div class="frame" id="frame">
+
+    <!-- Graphics overlay: 1920x758 -> 641x758 (centered after 5s) -->
+    <div class="graphics-container" id="graphicsContainer">
+
+      <div class="transfer-card" id="transferCard">
+
+        <!-- Photo section (source image: 641x758 PNG) -->
+        <div class="photo-section">
+          <img class="player-photo" id="playerPhoto" src="" alt="">
+          <div class="photo-overlay"></div>
+        </div>
+
+        <!-- Info section -->
+        <div class="info-section">
+
+          <!-- Player name -->
+          <div class="info-mid">
+            <div class="player-name" id="playerName"></div>
+          </div>
+
+          <!-- Destination club -->
+          <div class="team-block" id="teamBlock">
+            <img class="team-logo" id="teamLogo" src="" alt="">
+            <div class="team-text">
+              <div class="team-direction" id="teamDirection">КЛУБ</div>
+              <div class="team-name" id="teamName"></div>
+            </div>
+          </div>
+
+          <!-- Price -->
+          <div class="price-badge" id="priceBadge">
+            <span class="price-label" id="priceLabel">СУММА</span>
+            <span class="price-value" id="priceValue"></span>
+          </div>
+
+        </div>
+
+      </div>
+
+      </div>
+
+    <!-- Operator panel (dev overlay) -->
+    <div class="operator-panel" id="operatorPanel">
+      <div class="op-counter" id="currentTransfer">- / -</div>
+      <div class="op-controls">
+        <kbd>&#8592;</kbd> Prev &nbsp; <kbd>&#8594;</kbd> / <kbd>Enter</kbd> Next &nbsp; <kbd>R</kbd> Replay &nbsp; <kbd>H</kbd> Hide &nbsp; <kbd>A</kbd> Autoplay
+      </div>
+    </div>
+
+  </div>
+
+  <script src="js/app.js"></script>
+</body>
+</html>