Files
Myrient-Search-Engine/views/pages/emulators.ejs
Alexandra 2cc3168025 - Moves most script js in ejs to its own js file under public
- Moves most css to css under public
- Improves code maintainability
2025-05-20 22:38:30 -06:00

75 lines
3.1 KiB
Plaintext

<script src='https://code.jquery.com/jquery-3.7.1.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="/public/css/emulatorlist.css">
<div class="emulators-container">
<pre style="font: 20px / 19px monospace; color: white; text-align: center; overflow: hidden;">
<%= generateAsciiArt() %>
<%= __('nav.emulators') %>
</pre>
<div class="container mt-4">
<div class="row" id="consoleCards">
<% if (typeof emulators !== 'undefined' && emulators) { %>
<% Object.entries(emulators).forEach(([consoleName, consoleData]) => { %>
<div class="col-md-4 col-sm-6 mb-4">
<div class="card console-card h-100" data-console="<%= consoleName %>">
<div class="text-center pt-3">
<img src="/proxy-image?url=<%= encodeURIComponent(consoleData.icon) %>" alt="<%= consoleName %>" class="console-icon mb-2">
<div class="console-card-title"><%= consoleName %></div>
</div>
</div>
</div>
<% }); %>
<% } else { %>
<div class="col-12 text-center">
<div class="alert alert-warning">
<%= __('emulator.warning.no_data') %>
</div>
</div>
<% } %>
</div>
</div>
</div>
<!-- Modal for displaying emulator details -->
<div class="modal fade" id="emulatorModal" tabindex="-1" role="dialog" aria-labelledby="emulatorModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content bg-dark text-white">
<div class="modal-header border-bottom border-secondary">
<h5 class="modal-title" id="emulatorModalLabel">
<i class="fas fa-gamepad mr-2 text-warning"></i><%= __('emulator.recommended') %>
</h5>
<button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body" id="emulatorList">
<!-- Emulator content will be dynamically inserted here -->
</div>
</div>
</div>
</div>
<script>
const recommended = "<%= __('emulator.recommended') %>"
const download = "<%= __('emulator.download') %>"
const emulators = <%- JSON.stringify(emulators) %>
document.addEventListener('DOMContentLoaded', function() {
// Add click handlers to all console cards
const consoleCards = document.querySelectorAll('.console-card');
consoleCards.forEach(card => {
card.addEventListener('click', function() {
const consoleName = this.getAttribute('data-console');
<% if (typeof emulators !== 'undefined' && emulators) { %>
showEmulators(consoleName);
<% } %>
});
});
});
</script>
<% if (typeof emulators !== 'undefined' && emulators) { %>
<script src="/public/js/emulatorlist.js"></script>
<% } %>