itten
72 lines
2.6 KiB
HTML
72 lines
2.6 KiB
HTML
<!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>←</kbd> Prev <kbd>→</kbd> / <kbd>Enter</kbd> Next <kbd>R</kbd> Replay <kbd>H</kbd> Hide <kbd>A</kbd> Autoplay
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html> |