Spaces:
Running
Running
<template> | |
<div class="shortcuts-view"> | |
<div class="shortcuts-header"> | |
<h3>Raccourcis Clavier</h3> | |
</div> | |
<div class="shortcuts-content"> | |
<div class="shortcuts-section"> | |
<h4>Labellisation</h4> | |
<div class="shortcut-list"> | |
<div class="shortcut-item"> | |
<div class="shortcut-key">1</div> | |
<div class="shortcut-description">Player Team 1</div> | |
</div> | |
<div class="shortcut-item"> | |
<div class="shortcut-key">2</div> | |
<div class="shortcut-description">Player Team 2</div> | |
</div> | |
<div class="shortcut-item"> | |
<div class="shortcut-key">3</div> | |
<div class="shortcut-description">Ball</div> | |
</div> | |
</div> | |
</div> | |
<div class="shortcuts-section"> | |
<h4>Objets</h4> | |
<div class="shortcut-list"> | |
<div class="shortcut-item"> | |
<div class="shortcut-key">N</div> | |
<div class="shortcut-description">Créer un nouvel objet</div> | |
</div> | |
<div class="shortcut-item"> | |
<div class="shortcut-key">Ctrl + Suppr</div> | |
<div class="shortcut-description">Supprimer l'objet sélectionné</div> | |
</div> | |
</div> | |
</div> | |
<div class="shortcuts-section"> | |
<h4>Navigation</h4> | |
<div class="shortcut-list"> | |
<div class="shortcut-item"> | |
<div class="shortcut-key">Espace</div> | |
<div class="shortcut-description">Lecture/Pause vidéo</div> | |
</div> | |
<div class="shortcut-item"> | |
<div class="shortcut-key">←/→</div> | |
<div class="shortcut-description">Avancer/Reculer dans la vidéo</div> | |
</div> | |
<div class="shortcut-item"> | |
<div class="shortcut-key">Échap</div> | |
<div class="shortcut-description">Fermer les popups</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</template> | |
<script> | |
export default { | |
name: 'ShortcutsView' | |
} | |
</script> | |
<style scoped> | |
.shortcuts-view { | |
height: 100%; | |
padding: 16px; | |
color: white; | |
overflow-y: auto; | |
} | |
.shortcuts-header { | |
margin-bottom: 20px; | |
text-align: center; | |
} | |
.shortcuts-header h3 { | |
margin: 0; | |
font-size: 1.2rem; | |
color: #fff; | |
} | |
.shortcuts-content { | |
display: flex; | |
flex-direction: column; | |
gap: 24px; | |
} | |
.shortcuts-section h4 { | |
margin: 0 0 12px 0; | |
font-size: 1rem; | |
border-bottom: 1px solid #4a4a4a; | |
padding-bottom: 4px; | |
} | |
.shortcut-list { | |
display: flex; | |
flex-direction: column; | |
gap: 8px; | |
} | |
.shortcut-item { | |
display: flex; | |
align-items: center; | |
gap: 12px; | |
padding: 8px 12px; | |
background: #3c3c3c; | |
border-radius: 6px; | |
transition: background 0.2s; | |
} | |
.shortcut-item:hover { | |
background: #4a4a4a; | |
} | |
.shortcut-key { | |
background: #555; | |
color: white; | |
padding: 4px 8px; | |
border-radius: 4px; | |
font-family: 'Courier New', monospace; | |
font-size: 0.8rem; | |
font-weight: bold; | |
min-width: 60px; | |
text-align: center; | |
border: 1px solid #666; | |
} | |
.shortcut-description { | |
flex: 1; | |
color: #e2e8f0; | |
font-size: 0.9rem; | |
} | |
</style> |