Skip to content

Instantly share code, notes, and snippets.

@Antar74

Antar74/animal-bootstrap-nexusui-v0.markdown

Last active April 22, 2020 04:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Antar74/a0bb1489f5fce95d1ef5265a6e360828 to your computer and use it in GitHub Desktop.
Save Antar74/a0bb1489f5fce95d1ef5265a6e360828 to your computer and use it in GitHub Desktop.
Download ZIP
Animal - Bootstrap NexusUI
Raw
index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Animal - bootstrap nexus - v0</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<!-- HEADER -->
<div id="Header" class="row">
<div class="col-md-12 d-flex flex-row justify-content-between">
<div id="Animal_logo">Animal</div>
<div id="MoM_logo">[MoM]</div>
</div>
</div>
<!-- header end -->
<!-- MAIN-UP -->
<div id="Main-up" class="row">
<!-- INSTRUMENTOS -->
<div id="instrumentos" class="col-md-12 d-flex flex-row justify-content-between color-fondo-1-animal text-white">
<div class="instrumento-animal p-4 d-flex flex-row corners1 gris-animal">
<div class="opacity-4"><span class="ins-name">Buh</span><br/>Base drum</div>
<div id="dial-ins1" class="mom_dial"></div>
</div>
<div class="instrumento-animal corners1 p-4 chocolate-animal">Os
<div id="dial-ins2" class="mom_dial"></div>
</div>
<div class="instrumento-animal corners1 p-4 mostaza-animal">Gat
<div id="dial-ins3" class="mom_dial"></div>
</div>
<div class="instrumento-animal corners1 p-4 verde-animal">Sap
<div id="dial-ins4" class="mom_dial"></div>
</div>
<div class="instrumento-animal corners1 p-4 gris-animal">Pat
<div id="dial-ins5" class="mom_dial"></div>
</div>
<div class="instrumento-animal corners1 p-4 marron-animal">Mon
<div id="dial-ins6" class="mom_dial"></div>
</div>
<div class="instrumento-animal corners1 p-4 rosa-animal">Cerd
<div id="dial-ins7" class="mom_dial"></div>
</div>
<div class="instrumento-animal corners1 p-4 verde-animal">Lor
<div id="dial-ins8" class="mom_dial"></div>
</div>
</div>
<!-- instrumentos end -->
<div id="cables" class=col-md-12>
Cables
</div>
</div>
<!-- main-up end -->
<!-- MAIN-DOWN -->
<div id="Main-down" class="row">
<div id="izq" class="col-2">
<div class="row pr-1">
<!-- CHAT -->
<div id="chat-animal" class="col-12 mb-2 corners1 figura-1-animal">Chat</div>
<!-- chat end -->
<!-- CONTROLES -->
<div id="controles" class="col-12 corners1 fondo-1-animal">
<div id="row" class="m-2 corners1 blanco-ui-animal">
<div class="col-12 d-flex flex-row border-bottom">
<div class="border-right">+/-</div>
<div><span class="numero-animal">120</span>BPM</div>
</div>
<div class="col-12 d-flex flex-row border-bottom">
<div class="border-right">+/-</div>
<div><span class="numero-animal">55</span>Swing</div>
</div>
<div class="col-12 d-flex flex-row">
<div class="border-right">Invitar</div>
<div>Mute</div>
</div>
</div>
</div>
<!-- controles end -->
</div>
</div>
<div id="der" class="col-10">
<div class="row">
<!-- CHANNEL CONTROL (#ch_control) -->
<div id="ch_control" class="col p-4 corners-l fondo-1-animal">
<div class="row">
<div id="ch1" class="col-12">
<div class="row">
<div id="icono" class="col-6">
Icono
</div>
<div id="volumen" class="col-6">
<div id="dial-ch1" class="mom_dial"></div>
</div>
</div>
</div>
<div id="ch2" class="col-12">
<div class="row">
<div id="icono" class="col-6">icono</div>
<div id="volumen" class="col-6">
<div id="dial-ch2" class="mom_dial"></div>
</div>
</div>
</div>
<div id="ch3" class="col-12">
<div class="row">
<div id="icono" class="col-6">icono</div>
<div id="volumen" class="col-6">
<div id="dial-ch3" class="mom_dial"></div>
</div>
</div>
</div>
<div id="ch4" class="col-12">
<div class="row">
<div id="icono" class="col-6">icono</div>
<div id="volumen" class="col-6">
<div id="dial-ch4" class="mom_dial"></div>
</div>
</div></div>
<div id="ch5" class="col-12">
<div class="row">
<div id="icono" class="col-6">icono</div>
<div id="volumen" class="col-6">
<div id="dial-ch5" class="mom_dial"></div>
</div>
</div></div>
<div id="ch6" class="col-12">
<div class="row">
<div id="icono" class="col-6">icono</div>
<div id="volumen" class="col-6">
<div id="dial-ch6" class="mom_dial"></div>
</div>
</div></div>
<div id="ch7" class="col-12">
<div class="row">
<div id="icono" class="col-6">icono</div>
<div id="volumen" class="col-6">
<div id="dial-ch7" class="mom_dial"></div>
</div>
</div></div>
<div id="ch8" class="col-12">
<div class="row">
<div id="icono" class="col-6">icono</div>
<div id="volumen" class="col-6">
<div id="dial-ch8" class="mom_dial"></div>
</div>
</div>
</div>
</div>
</div>
<!-- channel control end -->
<!-- SECUENCIADOR (#secuenciador) -->
<div id="secuenciador" class="col p-4 corners-r fondo-1-animal">
<div id="seq-animal"></div>
</div>
<!-- secuenciador end -->
<!-- REGISTRO COMPARTIR (#registro-compartir) -->
<div id="registro-compartir" class="col-md-1 p-4 d-flex justify-content-between flex-column fondo-1-animal corners1">
<div id="rec-sesion">
<div class="rec-icon btn-animal"></div>
Rec
</div>
<div id="combo-botones">
<div id="download-rec">
<div class="mb-2 download-icon btn-animal">Download</div>
</div>
<div id="share-rec">
<div class="mb-2 share-icon btn-animal">Compartir</div>
</div>
<div id="email-rec">
<div class="mb-2 email-icon btn-animal">Email</div>
</div>
</div>
<div id="help" class="align-self-baseline">
<div class="help-icon btn-animal">?</div>
</div>
</div>
<!-- registro compartir end -->
</div>
</div>
</div>
<!-- main-down end -->
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.3.3/umd/popper.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/nexusui@2.0.13/dist/NexusUI.js'></script><script src="./script.js"></script>
</body>
</html>
Raw
script.js
//---------------------------------------
// SEQUENCER - secuenciador de 8 canales y 16 pasos
var sequencer = new Nexus.Sequencer('#seq-animal',{
'size': [700,356],
'mode': 'toggle',
'rows': 8,
'columns': 16
})
sequencer.on('change',function(v) {
console.log(v);
})
sequencer.on('step',function(v) {
console.log(v);
})
//---------------------------------------
// DIALES - instrumentos
var dialins1 = new Nexus.Dial('#dial-ins1',{
'interaction': 'vertical', // "radial", "vertical", or "horizontal"
'mode': 'relative', // "absolute" or "relative"
'min': 0,
'max': 1,
'step': 0,
'value': 0
})
dialins1.on('change',function(v) {
console.log(v);
})
var dialins2 = new Nexus.Dial('#dial-ins2',{
'interaction': 'vertical', // "radial", "vertical", or "horizontal"
'mode': 'relative', // "absolute" or "relative"
'min': 0,
'max': 1,
'step': 0,
'value': 0
})
dialins2.on('change',function(v) {
console.log(v);
})
var dialins3 = new Nexus.Dial('#dial-ins3',{
'interaction': 'vertical', // "radial", "vertical", or "horizontal"
'mode': 'relative', // "absolute" or "relative"
'min': 0,
'max': 1,
'step': 0,
'value': 0
})
dialins3.on('change',function(v) {
console.log(v);
})
var dialins4 = new Nexus.Dial('#dial-ins4',{
'interaction': 'vertical', // "radial", "vertical", or "horizontal"
'mode': 'relative', // "absolute" or "relative"
'min': 0,
'max': 1,
'step': 0,
'value': 0
})
dialins4.on('change',function(v) {
console.log(v);
})
var dialins5 = new Nexus.Dial('#dial-ins5',{
'interaction': 'vertical', // "radial", "vertical", or "horizontal"
'mode': 'relative', // "absolute" or "relative"
'min': 0,
'max': 1,
'step': 0,
'value': 0
})
dialins5.on('change',function(v) {
console.log(v);
})
var dialins6 = new Nexus.Dial('#dial-ins6',{
'interaction': 'vertical', // "radial", "vertical", or "horizontal"
'mode': 'relative', // "absolute" or "relative"
'min': 0,
'max': 1,
'step': 0,
'value': 0
})
dialins6.on('change',function(v) {
console.log(v);
})
var dialins7 = new Nexus.Dial('#dial-ins7',{
'interaction': 'vertical', // "radial", "vertical", or "horizontal"
'mode': 'relative', // "absolute" or "relative"
'min': 0,
'max': 1,
'step': 0,
'value': 0
})
dialins7.on('change',function(v) {
console.log(v);
})
var dialins8 = new Nexus.Dial('#dial-ins8',{
'interaction': 'vertical', // "radial", "vertical", or "horizontal"
'mode': 'relative', // "absolute" or "relative"
'min': 0,
'max': 1,
'step': 0,
'value': 0
})
dialins8.on('change',function(v) {
console.log(v);
})
//---------------------------------------
// DIALES - volumen
var dialch1 = new Nexus.Dial('#dial-ch1',{
'interaction': 'vertical', // "radial", "vertical", or "horizontal"
'mode': 'relative', // "absolute" or "relative"
'min': 0,
'max': 1,
'step': 0,
'value': 0
})
dialch1.on('change',function(v) {
console.log(v);
})
var dialch2 = new Nexus.Dial('#dial-ch2',{
'interaction': 'vertical', // "radial", "vertical", or "horizontal"
'mode': 'relative', // "absolute" or "relative"
'min': 0,
'max': 1,
'step': 0,
'value': 0
})
dialch2.on('change',function(v) {
console.log(v);
})
var dialch3 = new Nexus.Dial('#dial-ch3',{
'interaction': 'vertical', // "radial", "vertical", or "horizontal"
'mode': 'relative', // "absolute" or "relative"
'min': 0,
'max': 1,
'step': 0,
'value': 0
})
dialch3.on('change',function(v) {
console.log(v);
})
var dialch4 = new Nexus.Dial('#dial-ch4',{
'interaction': 'vertical', // "radial", "vertical", or "horizontal"
'mode': 'relative', // "absolute" or "relative"
'min': 0,
'max': 1,
'step': 0,
'value': 0
})
dialch4.on('change',function(v) {
console.log(v);
})
var dialch5 = new Nexus.Dial('#dial-ch5',{
'interaction': 'vertical', // "radial", "vertical", or "horizontal"
'mode': 'relative', // "absolute" or "relative"
'min': 0,
'max': 1,
'step': 0,
'value': 0
})
dialch5.on('change',function(v) {
console.log(v);
})
var dialch6 = new Nexus.Dial('#dial-ch6',{
'interaction': 'vertical', // "radial", "vertical", or "horizontal"
'mode': 'relative', // "absolute" or "relative"
'min': 0,
'max': 1,
'step': 0,
'value': 0
})
dialch6.on('change',function(v) {
console.log(v);
})
var dialch7 = new Nexus.Dial('#dial-ch7',{
'interaction': 'vertical', // "radial", "vertical", or "horizontal"
'mode': 'relative', // "absolute" or "relative"
'min': 0,
'max': 1,
'step': 0,
'value': 0
})
dialch7.on('change',function(v) {
console.log(v);
})
var dialch8 = new Nexus.Dial('#dial-ch8',{
'interaction': 'vertical', // "radial", "vertical", or "horizontal"
'mode': 'relative', // "absolute" or "relative"
'min': 0,
'max': 1,
'step': 0,
'value': 0
})
dialch8.on('change',function(v) {
console.log(v);
})
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.3.3/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/nexusui@2.0.13/dist/NexusUI.js"></script>
Raw
style.css
:root {
--color-verde-animal: rgba(59,140,39,1);
--color-marron-animal: rgba(97,50,8,1);
--color-chocolate-animal: rgba(55,41,41,1);
--color-mostaza-animal: rgba(177,149,2,1);
--color-rosa-animal: rgba(228,180,160,1);
--color-gris-animal: rgba(177,166,144,1);
--color-fondo-1-animal: rgba(222,231,238,1);
--color-figura-1-animal: rgba(184,197,208,1);
--color-destaque-animal: rgba(109,119,126,1);
--color-mensaje-ui-animal: rgba(186,218,242,1);
--color-naranja-ui-animal: rgba(255,120,9,1);
--color-verde-ui-animal: rgba(94,194,10,1);
--color-blanco-ui-animal: rgba(255,255,255,1);
--color-rojo-ui-animal: rgba(229,76,76,1);
}
/* ---------------------------------------------- */
/* Color & opacity */
.verde-animal {
background-color: var(--color-verde-animal);
}
.marron-animal {
background-color: var(--color-marron-animal);
}
.chocolate-animal {
background-color: var(--color-chocolate-animal);
}
.mostaza-animal {
background-color: var(--color-mostaza-animal);
}
.rosa-animal {
background-color: var(--color-rosa-animal);
}
.gris-animal {
background-color: var(--color-gris-animal);
}
.fondo-1-animal {
background-color: var(--color-fondo-1-animal);
}
.figura-1-animal {
background-color: var(--color-figura-1-animal);
}
.destaque-animal {
background-color: var(--color-destaque-animal);
}
.naranja-ui-animal {
background-color: var(--color-naranja-ui-animal);
}
.verde-ui-animal {
background-color: var(--color-verde-ui-animal);
}
.blanco-ui-animal {
background-color: var(--color-blanco-ui-animal);
}
.rojo-ui-animal {
background-color: var(--color-rojo-ui-animal);
}
.opacity-0 {
opacity:0!important;
}
.opacity-1 {
opacity:0.2!important;
}
.opacity-2 {
opacity:0.4!important;
}
.opacity-3 {
opacity:0.6!important;
}
.opacity-4 {
opacity:.8!important;
}
.opacity-5 {
opacity:1!important;
}
/* --------------------------------------------- */
/* Buttons & icons */
.btn-animal{
width:38px;
height:38px;
border-radius: 50px;
background-color: var(--color-figura-1-animal)
}
.rec-icon{}
.download-btn{}
.share-btn{}
.email-btn{}
.help-btn{}
/* --------------------------------------------- */
/* Corners & special margins */
.corners1{
border-radius: 15px;
}
.corners-l{
border-radius: 15px 0 0 15px;
}
.corners-r{
border-radius: 0 15px 15px 0;
}
#ch1, #ch2, #ch3, #ch4, #ch5, #ch6, #ch7, #ch8{
margin:3px;
}
/* --------------------------------------------- */
/* Display */
.numero-animal{
font-size: 1.875em;
}
/* --------------------------------------------- */
/* Extra NexusUI */
.mom_dial {
width:38px;
height:38px;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment