/* Import the Material icons font */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');



/* Use the Material color palette */
:root {
  --md-primary-color: #6200ee;
  --md-secondary-color: #018786;
  --md-background-color: #f5f5f5;
  --md-text-color: #212121;
}

.mic_class
{
width:60px;
height:60px;
margin:20px;
padding:20px}

.keyform
{max-width:500px;
margin: auto;}

.container h1
{font-weight:700 !important;
text-align:center;
font-size:2.5em}

/* Apply the Material design to the whole page */
html {
  font-family: 'Poppins';
  font-size: 16px;
  color: var(--md-text-color);
  background-color: var(--md-background-color);
}

/* Center the content within a max-width container */



.container {
  max-width:500px;
  margin: 0 auto;
  padding: 10px;
}

button{
height:40px;
font-size:1.15em !important;}

p
{text-align:center;
font-size:0.75em;}

#keyconfirm
{text-align:center}

/* Style the form area */
#form_area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
}

/* Style the text area */
textarea {
  padding: 16px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.12);
  background-color: white;
  font-size: 13px;
  resize: none;
  width: 100%;
}

input{
 padding: 16px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.12);
  background-color: white;
  font-size: 16px;
  resize: none;
  width: 100%;
}

/* Style the button */
button {
  margin-top: 16px;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background-color: var(--md-primary-color);
  color: white;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
  width: 100%;
}

/* Add Material icons to the button */
button .material-icons {
  margin-right: 8px;
}

/* Style the button on hover */
button:hover {
  background-color: var(--md-secondary-color);
}


#result
{font-size:1.25em;
max-width:480px;
margin: 0 auto;
padding: 10px;}

@media only screen and (max-width: 768px) {
  .container {
    width: 90%;
  }
}
.hidden
{display: none !important;}

.small_btn
{font-size:0.75em}



});

var colors = [
  [0xb8d000, 0x2175d9, 0xed1b24, 0x35b4d6, 0xff9900, 0xe30074],
  [0x99eeff, 0x3399cc, 0x5bb4cc, 0x2175d9, 0x00aedb, 0xa200ff],
  [0xbf0000, 0xed1b24, 0xff3232, 0xe30074, 0xbf0060, 0xf47835],
  [0x22C41A, 0x17e88d, 0xb6ff26, 0x8EFF21, 0x4DD712, 0x0F884A],
  [0xb51bff, 0x8B0C99, 0xff1cea, 0xFF1488, 0xc210e8, 0xff1996]
];

var x = width  / 2;
var y = height / 2;

var shock = new PIXI.filters.ShockwaveFilter();
var stage = new PIXI.Container();

shock.params = { x: 10.5,  y: 0.4, z: 0.1 };
shock.center = { x: 0.5, y: 0.5 };
shock.time   = 0;

stage.width   = width;
stage.height  = height;
//stage.filters = [shock];

stage.filterArea = new PIXI.Rectangle(0, 0, width, height);

var queue  = null;
var active = null;
var stars  = [];
var total  = 350;
var index  = 0;

colors.forEach(createStars);

window.addEventListener("resize", resize);
blowup.addEventListener("click", _.throttle(queueAnimation, 750));
TweenLite.ticker.addEventListener("tick", render);

queueAnimation();

//
// QUEUE ANIMATION
// ===========================================================================
function queueAnimation() {

  active = stars[index++ % colors.length];
  createExplosion(active);

  if (queue) clearTimeout(queue);

  queue = setTimeout(() => {
    active.particles.visible = true;
  }, 250);
}

//
// CREATE EXPLOSION
// ===========================================================================
function createExplosion(boom) {

  var tl = new TimelineMax({ onComplete: () => (boom.particles.visible = false) });

  boom.sprites.reduce((tl, star, i) => {

    resetStar(star);

    var angle = _.random(360);
    var delay = _.random(0.1) + 0.25;
    var time  = _.random(0.5, 2.75);

    var scaleX1 = _.random(0.25, 0.75);
    var scaleY1 = _.random(0.25, 0.75);
    var scaleX2 = _.random(0.25, 0.75);
    var scaleY2 = _.random(0.25, 0.75);

    var gravity  = _.random( 300, 800);
    var velocity = _.random( 100, 700);
    var rotation = _.random(-720, 720) * rad;

    var physics2D = { angle, velocity, gravity };

    tl.set(star, { alpha: 1 }, delay)
      .to(star.scale, time/2, { x: scaleX1, y: scaleY1 }, delay)
      .to(star.scale, time/2, { x: scaleX2, y: scaleY2 }, delay + time / 2)
      .to(star, time, { physics2D, rotation, alpha: 0  }, delay)

    return tl;
  }, tl);
}

//
// STAR TEXTURE
// ===========================================================================
function starTexture(r1, r2, points, colors) {

  var count = colors.length;
  var size  = r1 * 2 + 2;
  var width = size * count;

  var frames = [];
  var coords = [];

  var graphics = new PIXI.Graphics();

  _.forEach(colors, (color, index) => {

    var cy = size / 2;
    var cx = size * index + cy;

    for (let i = 0; i < points * 2; i++) {
      var radius = i % 2 ? r2 : r1;
      var x = cx + radius * Math.sin(i * Math.PI / points);
      var y = cy - radius * Math.cos(i * Math.PI / points);
      coords[i] = new PIXI.Point(x, y);
    }

    graphics.beginFill(color);
    graphics.drawPolygon(coords);
    graphics.endFill();
  });

  graphics.lineStyle(1, 0xFF00BB, 0);
  graphics.drawRect(0, 0, width, size);

  var texture = graphics.generateTexture(1, 1);

  for (let i = 0; i < texture.width - size; i += size) {
    var rect  = new PIXI.Rectangle(i, 0, size, size);
    var frame = new PIXI.Texture(texture.baseTexture, rect);
    frames.push(frame);
  }

  return { texture, frames };
}

//
// CREATE STARS
// ===========================================================================
function createStars(color) {

  var particles = new PIXI.ParticleContainer(1000, {
    position  : true,
    rotation  : true,
    alpha     : true,
    scale     : true,
    uvs       : true
  });

  var texture = starTexture(32, 16, 5, color);
  var frames  = texture.frames;
  var sprites = [];

  _.times(total, i => {
    var frame  = _.sample(frames);
    var sprite = new PIXI.Sprite(frame);

    sprites.push(sprite);
    particles.addChild(sprite);
  });

  particles.visible = false;
  stage.addChild(particles);
  stars.push({ particles, sprites });
}

//
// RESET STAR
// ===========================================================================
function resetStar(star) {
  star.position.set(x, y);
  star.scale.set(1);
  star.anchor.set(0.5);
  star.pivot.set(0.5);
}

//
// RESIZE
// ===========================================================================
function resize() {

  width  = window.innerWidth;
  height = window.innerHeight;

  x = width  / 2;
  y = height / 2;

  stage.filterArea = new PIXI.Rectangle(0, 0, width, height);
  renderer.resize(width, height);
}

//
// RENDER
// ===========================================================================
function render() {
  renderer.render(stage);
}

//
// CHANCE
// ===========================================================================
function chance(prop = 50) {
  return prop > 0 && Math.random() * 100 <= prop;
}