188 lines
8.6 KiB
HTML
188 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt-br">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>MMPCreator</title>
|
|
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
|
|
/>
|
|
<link rel="stylesheet" href="assets/css/style.css" />
|
|
</head>
|
|
<body>
|
|
<aside class="sample-browser">
|
|
<div class="browser-header">Navegador de Samples</div>
|
|
<div class="browser-content" id="browser-content"></div>
|
|
</aside>
|
|
|
|
<button id="sidebar-toggle"><i class="fa-solid fa-caret-left"></i></button>
|
|
<div class="app-container">
|
|
<header class="global-toolbar">
|
|
<div class="control-group">
|
|
<i class="fa-solid fa-file" id="new-project-btn" title="Novo Projeto"></i>
|
|
<i class="fa-solid fa-folder-open" id="open-mmp-btn" title="Abrir Projeto do Servidor"></i>
|
|
<i class="fa-solid fa-save" id="save-mmp-btn" title="Salvar Projeto (.mmp)"></i>
|
|
<i class="fa-solid fa-upload" id="upload-sample-btn" title="Carregar Sample do Computador"></i>
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="control-group">
|
|
<i class="fa-solid fa-backward-step" id="rewind-btn" title="Voltar ao Início"></i>
|
|
<i class="fa-solid fa-play" title="Play/Pause Global (Futuro)"></i>
|
|
<i class="fa-solid fa-stop" title="Stop Global (Futuro)"></i>
|
|
<i class="fa-solid fa-circle-dot" title="Gravar"></i>
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="info-display-group">
|
|
<div class="info-display">
|
|
<div class="interactive-input-container">
|
|
<button class="adjust-btn" data-target="bpm" data-step="-1">-</button>
|
|
<input type="text" class="value-input" id="bpm-input" value="140" data-min="20" data-max="400"/>
|
|
<button class="adjust-btn" data-target="bpm" data-step="1">+</button>
|
|
</div>
|
|
<div class="label">ANDAMENTO/BPM</div>
|
|
</div>
|
|
<div class="info-display">
|
|
<div class="interactive-input-container">
|
|
<button class="adjust-btn" data-target="bars" data-step="-1">-</button>
|
|
<input type="text" class="value-input" id="bars-input" value="1" data-min="1" data-max="64"/>
|
|
<button class="adjust-btn" data-target="bars" data-step="1">+</button>
|
|
</div>
|
|
<div class="label">COMPASSOS</div>
|
|
</div>
|
|
<div class="info-display">
|
|
<div class="interactive-input-container">
|
|
<div class="compasso-group">
|
|
<button class="adjust-btn" data-target="compasso-a" data-step="-1">-</button>
|
|
<input type="text" class="value-input compasso-input" id="compasso-a-input" value="4" data-min="1" data-max="16"/>
|
|
<button class="adjust-btn" data-target="compasso-a" data-step="1">+</button>
|
|
</div>
|
|
<span class="compasso-separator">/</span>
|
|
<div class="compasso-group">
|
|
<button class="adjust-btn" data-target="compasso-b" data-step="-1">-</button>
|
|
<input type="text" class="value-input compasso-input" id="compasso-b-input" value="4" data-min="1" data-max="16"/>
|
|
<button class="adjust-btn" data-target="compasso-b" data-step="1">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="label">COMPASSO</div>
|
|
</div>
|
|
<div class="info-display">
|
|
<div id="timer-display" class="interactive-input-container" style="font-size: 0.7rem; color: var(--text-dark)">00:00:00</div>
|
|
<div class="label">MIN:SEC:MSEC</div>
|
|
</div>
|
|
</div>
|
|
<div class="control-group">
|
|
<button id="metronome-btn" title="Metrônomo On/Off">Metrônomo</button>
|
|
</div>
|
|
<div class="spacer"></div>
|
|
<div class="control-group master-controls">
|
|
<div class="knob-container">
|
|
<div class="knob" id="master-volume-knob"><div class="knob-indicator"></div></div>
|
|
<span>VOL MASTER</span>
|
|
</div>
|
|
<div class="knob-container">
|
|
<div class="knob" id="master-pan-knob"><div class="knob-indicator"></div></div>
|
|
<span>PAN MASTER</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="main-content">
|
|
<div class="beat-editor">
|
|
<div class="editor-header">
|
|
Mostrar/esconder Editor de Bases
|
|
<div class="window-controls">
|
|
<i class="fa-solid fa-minus"></i><i class="fa-regular fa-square"></i><i class="fa-solid fa-xmark"></i>
|
|
</div>
|
|
</div>
|
|
<div class="editor-toolbar">
|
|
<div class="playback-controls">
|
|
<i class="fa-solid fa-play" id="play-btn" title="Play/Pause"></i>
|
|
<i class="fa-solid fa-stop" id="stop-btn" title="Stop"></i>
|
|
</div>
|
|
<div class="pattern-manager">
|
|
<h2 id="beat-bassline-title"></h2>
|
|
<select id="global-pattern-selector" class="pattern-selector" disabled>
|
|
<option>Selecione uma faixa</option>
|
|
</select>
|
|
<button id="add-pattern-btn" class="pattern-btn">+</button>
|
|
<button id="remove-pattern-btn" class="pattern-btn">-</button>
|
|
</div>
|
|
<div class="tool-icons">
|
|
<i class="fa-solid fa-table-cells"></i><i class="fa-solid fa-bars-staggered"></i><i class="fa-solid fa-wave-square enabled"></i><i class="fa-solid fa-plus" id="add-bar-btn" title="Adicionar 1 Compasso"></i>
|
|
</div>
|
|
<div class="zoom-controls">
|
|
<i class="fa-solid fa-minus" id="remove-instrument-btn"></i><i class="fa-solid fa-plus" id="add-instrument-btn"></i>
|
|
</div>
|
|
</div>
|
|
<div id="track-container"></div>
|
|
</div>
|
|
<div class="audio-editor">
|
|
<div class="editor-header">
|
|
<span>Editor de Amostras de Áudio</span>
|
|
|
|
<div class="playback-controls">
|
|
<i class="fa-solid fa-play" id="audio-editor-play-btn" title="Play/Pause"></i>
|
|
<i class="fa-solid fa-stop" id="audio-editor-stop-btn" title="Stop"></i>
|
|
<i class="fa-solid fa-repeat" id="audio-editor-loop-btn" title="Ativar/Desativar Loop"></i>
|
|
</div>
|
|
</div>
|
|
<div id="audio-track-container">
|
|
<div class="audio-track-lane">
|
|
<div class="track-info">
|
|
<i class="fa-solid fa-gear"></i>
|
|
<div class="track-mute"></div>
|
|
<span class="track-name">bassslap02.ogg</span>
|
|
</div>
|
|
<div class="track-controls">
|
|
<div class="knob-container">
|
|
<div class="knob" data-control="volume">
|
|
<div class="knob-indicator"></div>
|
|
</div>
|
|
<span>VOL</span>
|
|
</div>
|
|
<div class="knob-container">
|
|
<div class="knob" data-control="pan">
|
|
<div class="knob-indicator"></div>
|
|
</div>
|
|
<span>PAN</span>
|
|
</div>
|
|
<div class="spectrogram-view-wrapper">
|
|
<div class="spectrogram-view-grid"></div>
|
|
</div>
|
|
<div class="spectrogram-view-wrapper">
|
|
<canvas id="spectrogram-canvas-1" width="800" height="100"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<input type="file" id="mmp-file-input" accept=".mmp, .mmpz" style="display: none"/>
|
|
<input type="file" id="sample-file-input" accept=".wav,.flac,.ogg,.mp3" style="display: none"/>
|
|
|
|
<div class="modal-overlay" id="open-project-modal">
|
|
<div class="modal-content">
|
|
<button class="modal-close" id="open-modal-close-btn">×</button>
|
|
<h2 class="modal-title">Abrir Projeto</h2>
|
|
<div class="modal-section">
|
|
<h3>Projetos no Servidor</h3>
|
|
<div id="server-projects-list"><p>Carregando...</p></div>
|
|
</div>
|
|
<div class="modal-section">
|
|
<h3>Carregar do Computador</h3>
|
|
<button class="modal-button" id="load-from-computer-btn">
|
|
<i class="fa-solid fa-desktop"></i> Selecionar arquivo .mmp ou .mmpz
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
|
|
|
|
<script src="assets/js/creations/main.js" type="module"></script>
|
|
</body>
|
|
</html> |