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

  • Select an option

    Learn more about clone URLs
  • Save Antar74/a0bb1489f5fce95d1ef5265a6e360828 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Antar74/a0bb1489f5fce95d1ef5265a6e360828 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Antar74 revised this gist Apr 22, 2020. 1 changed file with 18 additions and 2 deletions.
    20 changes: 18 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,13 @@
    <!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 -->
    @@ -205,11 +214,18 @@
    </div>
    </div>

    <!-- registro copartir end -->
    <!-- registro compartir end -->

    </div>
    </div>

    </div>

    <!-- main-down end -->
    <!-- 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/[email protected]/dist/NexusUI.js'></script><script src="./script.js"></script>

    </body>
    </html>
  2. Antar74 revised this gist Apr 22, 2020. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions animal-bootstrap-nexusui-v0.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    Animal - Bootstrap NexusUI - v0
    -------------------------------
    Animal - Bootstrap NexusUI
    --------------------------


    A [Pen](https://codepen.io/Antar74/pen/QWjKYjr) by [Antar](https://codepen.io/Antar74) on [CodePen](https://codepen.io).
  3. Antar74 revised this gist Apr 22, 2020. 1 changed file with 3 additions and 2 deletions.
    5 changes: 3 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -18,8 +18,9 @@

    <!-- INSTRUMENTOS -->

    <div id="instrumentos" class="col-md-12 d-flex flex-row justify-content-between color-fondo-1-animal">
    <div class="instrumento-animal corners1 p-4 gris-animal"> Buh
    <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
  4. Antar74 revised this gist Apr 22, 2020. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions animal-bootstrap-nexusui-v0.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    Animal - Bootstrap NexusUI - v0
    -------------------------------
    Animal - Bootstrap NexusUI
    --------------------------


    A [Pen](https://codepen.io/Antar74/pen/QWjKYjr) by [Antar](https://codepen.io/Antar74) on [CodePen](https://codepen.io).
  5. Antar74 revised this gist Apr 22, 2020. 1 changed file with 59 additions and 14 deletions.
    73 changes: 59 additions & 14 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -15,6 +15,10 @@
    --color-rojo-ui-animal: rgba(229,76,76,1);
    }

    /* ---------------------------------------------- */
    /* Color & opacity */


    .verde-animal {
    background-color: var(--color-verde-animal);
    }
    @@ -55,6 +59,48 @@
    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;
    }
    @@ -68,23 +114,22 @@
    margin:3px;
    }

    .mom_dial {
    width:38px;
    height:38px;

    /* --------------------------------------------- */
    /* Display */


    .numero-animal{
    font-size: 1.875em;
    }

    .rec-icon{}
    .download-btn{}
    .share-btn{}
    .email-btn{}
    .help-btn{}

    .btn-animal{
    /* --------------------------------------------- */
    /* Extra NexusUI */


    .mom_dial {
    width:38px;
    height:38px;
    border-radius: 50px;
    background-color: var(--color-figura-1-animal)
    }
    .numero-animal{
    font-size: 1.875em;
    }

  6. Antar74 created this gist Apr 22, 2020.
    7 changes: 7 additions & 0 deletions animal-bootstrap-nexusui-v0.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Animal - Bootstrap NexusUI - v0
    -------------------------------


    A [Pen](https://codepen.io/Antar74/pen/QWjKYjr) by [Antar](https://codepen.io/Antar74) on [CodePen](https://codepen.io).

    [License](https://codepen.io/Antar74/pen/QWjKYjr/license).
    214 changes: 214 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,214 @@

    <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">
    <div class="instrumento-animal corners1 p-4 gris-animal"> Buh
    <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 copartir end -->

    </div>
    </div>

    </div>

    <!-- main-down end -->
    232 changes: 232 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,232 @@
    //---------------------------------------
    // 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);
    })
    3 changes: 3 additions & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    <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/[email protected]/dist/NexusUI.js"></script>
    90 changes: 90 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,90 @@
    :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);
    }

    .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);
    }

    .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;
    }

    .mom_dial {
    width:38px;
    height:38px;
    }

    .rec-icon{}
    .download-btn{}
    .share-btn{}
    .email-btn{}
    .help-btn{}

    .btn-animal{
    width:38px;
    height:38px;
    border-radius: 50px;
    background-color: var(--color-figura-1-animal)
    }
    .numero-animal{
    font-size: 1.875em;
    }
    1 change: 1 addition & 0 deletions styles
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />