116 lines
4.7 KiB
HTML
116 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="sl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
|
|
<title>Projekcija besedil</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
|
|
<input type="text" id="song-number">
|
|
|
|
<div class="status-bar">
|
|
<span id="page-info" class="page-info"></span>
|
|
<div class="search-container">
|
|
<input type="text" id="search-input" placeholder="Išči po naslovu ..." autocomplete="off">
|
|
<div id="search-results" class="search-results"></div>
|
|
</div>
|
|
<div class="menu-container">
|
|
<button id="menu-toggle" class="menu-toggle" type="button">
|
|
<span class="hamburger-icon"></span>
|
|
</button>
|
|
<div id="menu-dropdown" class="menu-dropdown">
|
|
<button id="toggle-keypad-btn" class="menu-item" type="button">Skrij tipkovnico</button>
|
|
<button id="dark-btn" class="menu-item" type="button">Velike/male črke (AAaa)</button>
|
|
<button id="edit-song-btn" class="menu-item" type="button">Uredi besedilo</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Modal -->
|
|
<div id="edit-modal" class="modal">
|
|
<div class="modal-content">
|
|
<h2 id="edit-modal-title">Uredi besedilo <span id="edit-song-number-display" style="float: right; color: var(--text-muted);"></span></h2>
|
|
<div class="form-group">
|
|
<label for="edit-title">Naslov:</label>
|
|
<input type="text" id="edit-title" class="form-control">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-lyrics">Besedilo:</label>
|
|
<textarea id="edit-lyrics" class="form-control" rows="15"></textarea>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button id="cancel-edit-btn" class="btn-secondary">Prekliči</button>
|
|
<button id="save-edit-btn" class="btn-primary">Posodobi</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Prompt Modal -->
|
|
<div id="prompt-modal" class="modal">
|
|
<div class="modal-content">
|
|
<h2 id="prompt-title">Uredi besedilo</h2>
|
|
<p id="prompt-message">Nobena pesem ni naložena. Vnesite številko pesmi za urejanje ali ustvarite novo.</p>
|
|
<div class="form-group">
|
|
<input type="number" id="prompt-input" class="form-control" placeholder="Številka pesmi">
|
|
</div>
|
|
<div class="modal-footer" style="justify-content: space-between;">
|
|
<button id="prompt-new-btn" class="btn-secondary" style="background-color: #c28b24; color: white; border: none;">Ustvari novo</button>
|
|
<div style="display: flex; gap: 10px;">
|
|
<button id="prompt-cancel-btn" class="btn-secondary">Prekliči</button>
|
|
<button id="prompt-edit-btn" class="btn-primary">Uredi</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Info Modal -->
|
|
<div id="info-modal" class="modal">
|
|
<div class="modal-content">
|
|
<h2 id="info-title">Informacija</h2>
|
|
<p id="info-message"></p>
|
|
<div class="modal-footer">
|
|
<button id="info-ok-btn" class="btn-primary">V redu</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div id="display-area" class="lyrics-display">
|
|
<span class="status-message">Pripravljeno. Vpiši številko pesmi ali drugega besedila.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="keypad-wrapper" class="keypad-wrapper">
|
|
<div class="keypad">
|
|
|
|
<button class="btn-key" data-key="7">7</button>
|
|
<button class="btn-key" data-key="8">8</button>
|
|
<button class="btn-key" data-key="9">9</button>
|
|
<button id="next-btn" class="btn-action">Zastri</button>
|
|
|
|
<button class="btn-key" data-key="4">4</button>
|
|
<button class="btn-key" data-key="5">5</button>
|
|
<button class="btn-key" data-key="6">6</button>
|
|
<button id="prev-btn" class="btn-action">Nazaj</button>
|
|
|
|
<button class="btn-key" data-key="1">1</button>
|
|
<button class="btn-key" data-key="2">2</button>
|
|
<button class="btn-key" data-key="3">3</button>
|
|
<button id="load-btn" class="btn-enter">Enter</button>
|
|
|
|
<div class="keypad-placeholder"></div>
|
|
<button class="btn-key" data-key="0">0</button>
|
|
<button id="clear-btn" class="btn-clear">C</button>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="{{ url_for('static', filename='script.js') }}"></script>
|
|
</body>
|
|
</html> |