Publish Vulpes Preview 15 sources for desktop, Android and Tundra

Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.

gaia/distros/spark/apps/mozspeechcollect/img/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512"><path d="M503.5 256c0 136.69-110.81 247.5-247.5 247.5S8.5 392.69 8.5 256 119.31 8.5 256 8.5 503.5 119.31 503.5 256z" fill="#ee353d"/><path d="M256 296.254c27.372 0 48.304-20.932 48.304-48.305v-96.61c0-27.38-20.932-48.31-48.304-48.31-27.372 0-48.304 20.93-48.304 48.3v96.61c0 27.37 20.932 48.3 48.304 48.3zm85.337-48.305c0 48.3-40.253 82.11-85.337 82.11s-85.337-33.81-85.337-82.12H143.29c0 54.74 43.474 99.83 96.61 107.88v53.13h32.2v-53.13c53.136-8.06 96.61-53.14 96.61-107.88h-27.373z" fill="#fff"/></svg>

gaia/distros/spark/apps/mozspeechcollect/index.html

@@ -0,0 +1,54 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Title of the document</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <meta name="viewport" content="width=device-width, user-scalable=no">
+  <link rel="stylesheet" type="text/css" href="style.css">
+  <script src="js/binary.js"></script>
+  <script src="js/recorder.js"></script>
+  <script src="js/recorderWorker.js"></script>
+</head>
+<body>
+
+<div id="optincard" class="optincard">
+  <p> <br> This is an internal app for the Mozilla engineering team. It is intended to collect speech from users to improve our speech recognition engine. <br> <br> <br>  By using it, you agree to donate your speech captures to a server run by Mozilla for this purpose.</p> <br>
+  <center><input type="button" id="agreebtn" value="I agree" class="agreebtn"/></center>
+</div>
+
+<div id="maindiv" class='maindiv'>
+  <div id="listening" style="display:none">
+    <div style="width:400px;background-color:#1BA1E2;margin:auto;position:relative;display:block" id="ringdiv1" >
+    <div id="r1" class="ring"></div>
+    <div id="r2" class="ring"></div>
+    <div id="r3" class="ring"></div>
+    <div id="r4" class="ring"></div>
+    </div>
+
+    <div style="width:400px;background-color:#1BA1E2;margin:auto;position:relative;display:block" id="ringdiv2">
+    <div class="sbringr"></div>
+    <div id="r1" class="ringr"></div>
+    <div id="r2r" class="ringr"></div>
+    <div id="r3r" class="ringr"></div>
+    <div id="r4r" class="ringr"></div>
+    </div>
+  </div>
+
+   <div id="fox" style="display:block">
+      <br>
+      <img src="img/ff.png" width="30%" height="30%"/>
+  </div>
+
+
+  <div style="left:30px; display:block;font-style: italic ; font-weight: normal; font-size: 1.6rem; text-align:center; width:80%; position:absolute;bottom:200px;" id="lblstatus">Please, wait. We're connecting...</div>
+  <br>
+    <div id="divsendbtn"> <center> <p><h2>If you spoke correctly, press submit to send to the server. </h2></p>  <input type="button" id="sendbtn" style="width:350px" value="Touch this button if you spoke correctly" class="agreebtn"/><br><br><input type="button" id="cancelbtn" style="width:350px" value="Or touch here to speak again" class="agreebtn"/></center> <br><div style="font-size: medium" id="msgsamples"></div></div><br>
+  <div id="mic" style="width:100%;display:block">
+     <img id="speak" class="speak" src="img/mic.png"/>
+  </div>
+</div>
+  <script src="recorder.js"></script>
+  <script src="js/vdialer.js" type="text/javascript" >  </script>
+</body>
+</html>

gaia/distros/spark/apps/mozspeechcollect/js/recorder.js

@@ -0,0 +1,92 @@
+(function(window){
+
+  var WORKER_PATH = 'js/recorderWorker.js';
+
+  var Recorder = function(source, cfg){
+    var config = cfg || {};
+    var bufferLen = config.bufferLen || 4096;
+    var numChannels = config.numChannels || 2;
+    this.context = source.context;
+    this.node = (this.context.createScriptProcessor ||
+                 this.context.createJavaScriptNode).call(this.context,
+                 bufferLen, numChannels, numChannels);
+    var worker = new Worker(config.workerPath || WORKER_PATH);
+    worker.postMessage({
+      command: 'init',
+      config: {
+        sampleRate: this.context.sampleRate,
+        numChannels: numChannels
+      }
+    });
+    var recording = false,
+      currCallback;
+
+    this.node.onaudioprocess = function(e){
+      if (!recording) return;
+      var buffer = [];
+      for (var channel = 0; channel < numChannels; channel++){
+          buffer.push(e.inputBuffer.getChannelData(channel));
+      }
+      worker.postMessage({
+        command: 'record',
+        buffer: buffer
+      });
+    }
+
+    this.configure = function(cfg){
+      for (var prop in cfg){
+        if (cfg.hasOwnProperty(prop)){
+          config[prop] = cfg[prop];
+        }
+      }
+    }
+
+    this.record = function(){
+      recording = true;
+    }
+
+    this.stop = function(){
+      recording = false;
+    }
+
+    this.clear = function(){
+      worker.postMessage({ command: 'clear' });
+    }
+
+    this.getBuffer = function(cb) {
+      currCallback = cb || config.callback;
+      worker.postMessage({ command: 'getBuffer' })
+    }
+
+    this.exportWAV = function(cb, type){
+      currCallback = cb || config.callback;
+      type = type || config.type || 'audio/wav';
+      if (!currCallback) throw new Error('Callback not set');
+      worker.postMessage({
+        command: 'exportWAV',
+        type: type
+      });
+    }
+
+    worker.onmessage = function(e){
+      var blob = e.data;
+      currCallback(blob);
+    }
+
+    source.connect(this.node);
+    this.node.connect(this.context.destination);    //this should not be necessary
+  };
+
+  Recorder.forceDownload = function(blob, filename){
+    var url = (window.URL || window.webkitURL).createObjectURL(blob);
+    var link = window.document.createElement('a');
+    link.href = url;
+    link.download = filename || 'output.wav';
+    var click = document.createEvent("Event");
+    click.initEvent("click", true, true);
+    link.dispatchEvent(click);
+  }
+
+  window.Recorder = Recorder;
+
+})(window);

gaia/distros/spark/apps/mozspeechcollect/js/recorderWorker.js

@@ -0,0 +1,147 @@
+var recLength = 0,
+  recBuffers = [],
+  sampleRate,
+  numChannels;
+
+this.onmessage = function(e){
+  switch(e.data.command){
+    case 'init':
+      init(e.data.config);
+      break;
+    case 'record':
+      record(e.data.buffer);
+      break;
+    case 'exportWAV':
+      exportWAV(e.data.type);
+      break;
+    case 'getBuffer':
+      getBuffer();
+      break;
+    case 'clear':
+      clear();
+      break;
+  }
+};
+
+function init(config){
+  sampleRate = config.sampleRate;
+  numChannels = config.numChannels;
+  initBuffers();
+}
+
+function record(inputBuffer){
+  for (var channel = 0; channel < numChannels; channel++){
+    recBuffers[channel].push(inputBuffer[channel]);
+  }
+  recLength += inputBuffer[0].length;
+}
+
+function exportWAV(type){
+  var buffers = [];
+  for (var channel = 0; channel < numChannels; channel++){
+    buffers.push(mergeBuffers(recBuffers[channel], recLength));
+  }
+  if (numChannels === 2){
+      var interleaved = interleave(buffers[0], buffers[1]);
+  } else {
+      var interleaved = buffers[0];
+  }
+  var dataview = encodeWAV(interleaved);
+  var audioBlob = new Blob([dataview], { type: type });
+
+  this.postMessage(audioBlob);
+}
+
+function getBuffer(){
+  var buffers = [];
+  for (var channel = 0; channel < numChannels; channel++){
+    buffers.push(mergeBuffers(recBuffers[channel], recLength));
+  }
+  this.postMessage(buffers);
+}
+
+function clear(){
+  recLength = 0;
+  recBuffers = [];
+  initBuffers();
+}
+
+function initBuffers(){
+  for (var channel = 0; channel < numChannels; channel++){
+    recBuffers[channel] = [];
+  }
+}
+
+function mergeBuffers(recBuffers, recLength){
+  var result = new Float32Array(recLength);
+  var offset = 0;
+  for (var i = 0; i < recBuffers.length; i++){
+    result.set(recBuffers[i], offset);
+    offset += recBuffers[i].length;
+  }
+  return result;
+}
+
+function interleave(inputL, inputR){
+  var length = inputL.length + inputR.length;
+  var result = new Float32Array(length);
+
+  var index = 0,
+    inputIndex = 0;
+
+  while (index < length){
+    result[index++] = inputL[inputIndex];
+    result[index++] = inputR[inputIndex];
+    inputIndex++;
+  }
+  return result;
+}
+
+function floatTo16BitPCM(output, offset, input){
+  for (var i = 0; i < input.length; i++, offset+=2){
+    var s = Math.max(-1, Math.min(1, input[i]));
+    output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
+  }
+}
+
+function writeString(view, offset, string){
+  for (var i = 0; i < string.length; i++){
+    view.setUint8(offset + i, string.charCodeAt(i));
+  }
+}
+
+function encodeWAV(samples){
+  var buffer = new ArrayBuffer(44 + samples.length * 2);
+  var view = new DataView(buffer);
+
+  /* RIFF identifier */
+  writeString(view, 0, 'RIFF');
+  /* RIFF chunk length */
+  view.setUint32(4, 36 + samples.length * 2, true);
+  /* RIFF type */
+  writeString(view, 8, 'WAVE');
+  /* format chunk identifier */
+  writeString(view, 12, 'fmt ');
+  /* format chunk length */
+  view.setUint32(16, 16, true);
+  /* sample format (raw) */
+  view.setUint16(20, 1, true);
+  /* channel count */
+  view.setUint16(22, numChannels, true);
+  /* sample rate */
+  view.setUint32(24, sampleRate, true);
+  /* byte rate (sample rate * block align) */
+  view.setUint32(28, sampleRate * 4, true);
+  /* block align (channel count * bytes per sample) */
+  view.setUint16(32, numChannels * 2, true);
+  /* bits per sample */
+  view.setUint16(34, 16, true);
+  /* data chunk identifier */
+  writeString(view, 36, 'data');
+  /* data chunk length */
+  view.setUint32(40, samples.length * 2, true);
+
+  floatTo16BitPCM(view, 44, samples);
+
+  return view;
+}

gaia/distros/spark/apps/mozspeechcollect/js/user.js

@@ -0,0 +1,43 @@
+pref('browser.manifestURL', "app://system.gaiamobile.org/manifest.webapp");
+pref('b2g.system_manifest_url', "app://system.gaiamobile.org/manifest.webapp");
+pref('b2g.neterror.url', "app://system.gaiamobile.org/net_error.html");
+pref('browser.homescreenURL', "app://system.gaiamobile.org/index.html");
+pref('b2g.system_startup_url', "app://system.gaiamobile.org/index.html");
+pref('network.http.max-connections-per-server', 15);
+pref('dom.mozInputMethod.enabled', true);
+pref('layout.css.sticky.enabled', true);
+pref('intl.uidirection.ar-x-psbidi', "rtl");
+pref('dom.webcomponents.enabled', true);
+pref('ril.debugging.enabled', false);
+pref('dom.mms.version', 17);
+pref('b2g.wifi.allow_unsafe_wpa_eap', true);
+pref('network.dns.localDomains', "gaiamobile.org,email.gaiamobile.org,gallery.gaiamobile.org,search.gaiamobile.org,video.gaiamobile.org,music.gaiamobile.org,fl.gaiamobile.org,collection.gaiamobile.org,ftu.gaiamobile.org,wappush.gaiamobile.org,communications.gaiamobile.org,camera.gaiamobile.org,fm.gaiamobile.org,bluetooth.gaiamobile.org,marketplace.firefox.com.gaiamobile.org,sms.gaiamobile.org,findmydevice.gaiamobile.org,verticalhome.gaiamobile.org,sharedtest.gaiamobile.org,keyboard.gaiamobile.org,browser.gaiamobile.org,wallpaper.gaiamobile.org,emergency-call.gaiamobile.org,costcontrol.gaiamobile.org,bookmark.gaiamobile.org,settings.gaiamobile.org,operatorvariant.gaiamobile.org,clock.gaiamobile.org,system.gaiamobile.org,callscreen.gaiamobile.org,homescreen.gaiamobile.org,pdfjs.gaiamobile.org,calendar.gaiamobile.org,ringtones.gaiamobile.org,feedback.gaiamobile.org,sheet-app-1.gaiamobile.org,uitest.gaiamobile.org,test-container.gaiamobile.org,contacts-manager.gaiamobile.org,test-sensors.gaiamobile.org,test-receiver-2.gaiamobile.org,test-otasp.gaiamobile.org,contacts-ds-provider2.gaiamobile.org,marketplace-dev.allizom.org.gaiamobile.org,template.gaiamobile.org,test-ime.gaiamobile.org,demo-keyboard.gaiamobile.org,test-fxa-client.gaiamobile.org,test-receiver-1.gaiamobile.org,music2.gaiamobile.org,marketplace.allizom.org.gaiamobile.org,test-findmydevice.gaiamobile.org,ds-test.gaiamobile.org,sheet-app-3.gaiamobile.org,test-iac-subscriber.gaiamobile.org,image-uploader.gaiamobile.org,test-iac-publisher.gaiamobile.org,homescreen-stingray.gaiamobile.org,uitest-privileged.gaiamobile.org,test-agent.gaiamobile.org,test-keyboard-app.gaiamobile.org,test-receiver-inline.gaiamobile.org,bookmarks-reader.gaiamobile.org,sheet-app-2.gaiamobile.org,in_app_pay_test.gaiamobile.org,share-receiver.gaiamobile.org,contacts-ds-provider1.gaiamobile.org,mochitest.gaiamobile.org,testpermission.gaiamobile.org,crystalskull.gaiamobile.org,test-wappush.gaiamobile.org,membuster.gaiamobile.org,cubevid.gaiamobile.org,geoloc.gaiamobile.org");
+
+pref("geo.gps.supl_server", "supl.izatcloud.net");
+pref("geo.gps.supl_port", 22024);
+pref("dom.payment.provider.0.name", "firefoxmarket");
+pref("dom.payment.provider.0.description", "marketplace.firefox.com");
+pref("dom.payment.provider.0.uri", "https://marketplace.firefox.com/mozpay/?req=");
+pref("dom.payment.provider.0.type", "mozilla/payments/pay/v1");
+pref("dom.payment.provider.0.requestMethod", "GET");
+pref("dom.payment.skipHTTPSCheck", true);
+pref("dom.payment.debug", true);
+
+pref("dom.payment.provider.1.name", "firefoxmarketdev");
+pref("dom.payment.provider.1.description", "marketplace-dev.allizom.org");
+pref("dom.payment.provider.1.uri", "https://marketplace-dev.allizom.org/mozpay/?req=");
+pref("dom.payment.provider.1.type", "mozilla-dev/payments/pay/v1");
+pref("dom.payment.provider.1.requestMethod", "GET");
+
+pref("dom.payment.provider.2.name", "firefoxmarketstage");
+pref("dom.payment.provider.2.description", "marketplace.allizom.org");
+pref("dom.payment.provider.2.uri", "https://marketplace.allizom.org/mozpay/?req=");
+pref("dom.payment.provider.2.type", "mozilla-stage/payments/pay/v1");
+pref("dom.payment.provider.2.requestMethod", "GET");
+
+pref("dom.payment.provider.3.name", "mockpayprovider");
+pref("dom.payment.provider.3.description", "Mock Payment Provider");
+pref("dom.payment.provider.3.uri", "http://ferjm.github.io/gaia-mock-payment-provider/index.html?req=");
+pref("dom.payment.provider.3.type", "tests/payments/pay/v1");
+pref("dom.payment.provider.3.requestMethod", "GET");
+

gaia/distros/spark/apps/mozspeechcollect/js/vdialer.js

@@ -0,0 +1,220 @@
+var client = new BinaryClient('ws://speechan.cloudapp.net:9000');
+var speakbtn = document.querySelector("#speak");
+var sayaudio = document.querySelector("#say");
+var recognizing = false;
+var final_transcript = "";
+var _stream;
+var sr;
+var offline = true;
+var global_phrase;
+var audio_context = new AudioContext;
+var recorder;
+var str_grm = "#JSGF V1.0; grammar test;  <numeros> =  0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 ; public <numbers> = <numeros>+;"
+var blob = null;
+localStorage.setItem("totalsamples", 0 );
+
+// Wait for connection to BinaryJS server
+client.on('open', function(){
+    offline = false;
+    changelabel("You are connected. Please, push the microphone to start testing.");
+});
+
+// Wait for connection to BinaryJS server
+client.on('error', function(){
+    offline = true;
+    changelabel("Sorry, you are offline. Please, restart the application.");
+    alert("You have disconnected. Please, restart the appplication.");
+});
+
+navigator.mozGetUserMedia({audio: true},
+    function(stream){
+        // if everything ok
+        var options = {};
+        _stream = stream;
+        success_gum(_stream) ;
+        nomike = false;
+    } ,
+    function(_error){
+        if (error) error(_error)
+        nomike = true;
+    } 
+);
+
+function success_gum(stream){
+    var input = audio_context.createMediaStreamSource(stream);
+    console.log('Media stream created.');
+    recorder = new Recorder(input);
+}
+
+function sendVoice(){
+    try {
+        randomnumber= +new Date();
+        var stream = client.send(blob, {name:  randomnumber + "audio.wav" , size: blob.size});
+        stream = client.send(final_transcript, {name: randomnumber + "asr.txt", size: final_transcript.length});
+        stream = client.send(global_phrase, {name: randomnumber + "word.txt", size: global_phrase.length});
+        stream = client.send(str_grm, {name: randomnumber + "grm.txt", size: str_grm.length});
+
+        console.log("streaming");
+
+        document.querySelector("#sendbtn").value = "Thanks for the contribution!";
+        blob = null;
+        localStorage.setItem("totalsamples" , (+localStorage.getItem("totalsamples"))+1 );
+
+    } 
+    catch (err) {
+        alert("You have disconnected. Please, restart the appplication.");
+        return;
+    }
+
+
+    window.setTimeout(
+        function(){  
+            document.querySelector("#divsendbtn").style.display = 'none';
+            document.querySelector("#lblstatus").style.display = 'block';
+            document.querySelector("#fox").style.display = 'block';
+            document.querySelector("#mic").style.display = 'block';
+          }, 
+        1000);
+}
+
+function startRecording() {
+    recorder && recorder.record();
+    console.log('Recording...');
+}
+
+function stopRecording(button) {
+    recorder && recorder.stop();
+    console.log('Stopped recording.');
+    // create WAV download link using audio data blob
+    createUploadLink();
+    recorder.clear();
+}
+
+
+function createUploadLink() {
+    recorder && recorder.exportWAV(function(_blob) {
+      blob  = _blob;
+      document.querySelector("#divsendbtn").style.display = 'block';
+      document.querySelector("#sendbtn").value = "Submit";
+
+      // hide mic and thanks text
+      document.querySelector("#mic").style.display = 'none';
+      document.querySelector("#lblstatus").style.display = 'none';
+      console.log('mediarecorder stopped');
+      document.querySelector("#msgsamples").innerHTML = "You contributed with "+localStorage.getItem("totalsamples") +" samples so far!";
+
+    });
+}
+
+
+function onendspeak(number)
+{
+    console.log('starting')
+    sr.start(); // Validation of sr.grammars occurs here
+    startRecording();
+    sr.onresult = function(event){
+        recognizing = false;
+        stopRecording();
+        document.querySelector("#listening").style.display = 'none';
+        document.querySelector("#fox").style.display = 'block';
+
+        final_transcript = '';
+        // Assemble the transcript from the array of results
+        for (var i = event.resultIndex; i < event.results.length; ++i) {
+            if (event.results[i].isFinal) {
+                console.log("recognition.onresult : isFinal");
+                final_transcript += event.results[i][0].transcript;
+            } 
+        }
+
+        var e = document.createElement("audio");
+        e.src = "camcorder_end.opus";
+        e.setAttribute("autoplay", "true");
+        changelabel("Thank you! <br> Tap the microphone to say the next sequence.");
+    };
+}
+
+function say(phrase,file){
+   
+    if (recognizing){
+        return;
+    }
+    
+    document.querySelector("#divsendbtn").style.display = 'none';
+
+    var number = "(";
+    for (i = 0; i<=9; i++){
+        
+        if (i == 3)
+            number = number.concat(") ")
+        
+        var rnd = Math.random().toString().substring(2,3);
+        var number = number.concat( rnd );
+
+    }
+    phrase = phrase.concat(number);
+    global_phrase = number;
+
+    recognizing = true;
+    var e = document.createElement("audio");
+    e.src = "camcorder_start.opus";
+    e.setAttribute("autoplay", "true");
+    e.addEventListener("ended", function(){
+        changelabel(phrase);
+        document.querySelector("#listening").style.display = 'block';
+        document.querySelector("#fox").style.display = 'none';
+        onendspeak(number);
+    });
+}
+
+function changelabel(str){
+    document.querySelector("#lblstatus").style.display = 'block';
+    document.querySelector("#lblstatus").innerHTML = str;
+}
+
+function load(){
+    checkoptin();
+
+    speakbtn.onclick = function (){
+
+        if (offline)
+            alert("You have disconnected. Please, restart the appplication.");
+        else
+            say("Say this phone number:<br>");
+    }
+
+    agreebtn.onclick = function (){
+      localStorage.setItem("optin" , "1");;
+      checkoptin();
+    }
+
+    cancelbtn.onclick = function (){
+      document.querySelector("#divsendbtn").style.display = 'none';
+      document.querySelector("#mic").style.display = 'block';
+      document.querySelector("#lblstatus").style.display = 'block';
+    }
+
+    sendbtn.onclick = function (){
+        if (blob != null)
+         sendVoice();
+    }
+
+    sr = new SpeechRecognition();
+    sr.lang ="en-US";
+    var sgl = new SpeechGrammarList();
+    sgl.addFromString(str_grm ,1);
+    sr. grammars = sgl;
+}
+
+function checkoptin(){
+    if (localStorage.getItem("optin") == "1"){
+        document.querySelector("#optincard").style.display = 'none';
+        document.querySelector("#maindiv").style.display = 'block';
+    }
+}
+
+document.body.onload = function () {
+    load();
+}
+
+

gaia/distros/spark/apps/mozspeechcollect/manifest.webapp

@@ -0,0 +1,20 @@
+{
+  "name": "MozSpeech",
+  "description": "Mozspeech Benchmark",
+  "type": "certified",
+  "launch_path": "/index.html",
+  "icons": {
+    "128": "/img/128.png",
+    "512": "/img/512.png"
+  },
+  "developer": {
+    "name": "Mozilla Speech Team",
+    "url": "http://www.mozilla.com"
+  },
+  "default_locale": "en",
+  "permissions": {
+    "audio-capture": {
+      "description": "Audio capture"
+    }
+  }
+}

gaia/distros/spark/apps/mozspeechcollect/style.css

@@ -0,0 +1,147 @@
+.ring {
+  width: 300px;
+  height: 300px;
+  border-radius: 50%;
+  position: absolute;
+  background-color: transparent;
+  -webkit-animation-name: ani; 
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-timing-function: linear;
+  -webkit-animation-duration: 3s;
+  -webkit-animation-direction: normal;
+  animation-name: ani; 
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  animation-duration: 3s;
+  animation-direction: normal;
+  border-top: 15px solid transparent;
+  border-left: 15px solid blue;
+  border-bottom: 15px solid transparent;
+
+}
+
+
+@-webkit-keyframes ani {
+0% {-webkit-transform: scale(0.01); opacity: 0} 
+1% {-webkit-transform: scale(0.01); opacity: 0.8} 
+95% {-webkit-transform: scale(1); opacity: 0.8;}
+100% {-webkit-transform: scale(1); opacity: 0;}
+}
+
+@keyframes ani {
+0% {transform: scale(0.01); opacity: 0} 
+1% {transform: scale(0.01); opacity: 0.8} 
+95% {transform: scale(1); opacity: 0.8;}
+100% {transform: scale(1); opacity: 0;}
+}
+
+#r2 { -webkit-animation-delay: -1s;animation-delay: -1s;}
+#r3 { -webkit-animation-delay: -2s;animation-delay: -2s;}
+#r4 { -webkit-animation-delay: -3s;animation-delay: -3s;}
+
+.ringr {
+  width: 300px;
+  height: 300px;
+  border-radius: 50%;
+  position: absolute;
+  background-color: transparent;
+  -webkit-animation-name: anir; 
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-timing-function: linear;
+  -webkit-animation-duration: 3s;
+  -webkit-animation-direction: normal;
+  animation-name: anir; 
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  animation-duration: 3s;
+  animation-direction: normal;
+  border-top: 15px solid transparent;
+  border-right: 15px solid blue;
+  border-bottom: 15px solid transparent;
+
+}
+
+.sbringr {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  position: absolute;
+  background-color: blue;
+  top:161px;
+  left:206px;
+  margin-left: -50px;
+}
+
+@-webkit-keyframes anir {
+  0% {-webkit-transform: scale(0.01); opacity: 0} 
+  1% {-webkit-transform: scale(0.01); opacity: 0.8} 
+  95% {-webkit-transform: scale(1); opacity: 0.8;}
+  100% {-webkit-transform: scale(1); opacity: 0;}
+}
+
+@keyframes anir {
+  0% {transform: scale(0.01); opacity: 0} 
+  1% {transform: scale(0.01); opacity: 0.8} 
+  95% {transform: scale(1); opacity: 0.8;}
+  100% {transform: scale(1); opacity: 0;}
+}
+
+#r2r { -webkit-animation-delay: -1s;animation-delay: -1s;}
+#r3r { -webkit-animation-delay: -2s;animation-delay: -2s;}
+#r4r { -webkit-animation-delay: -3s;animation-delay: -3s;}
+
+html{
+  overflow:hidden
+}
+
+body{
+  margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;
+  padding: 0;
+  color: black; font-size: 10pt; font-family: "Trebuchet MS", sans-serif;
+  background-color: #E2E2E2;
+  overflow:hidden;
+}
+
+.maindiv {
+  text-align:center;
+  width:100vw;
+  height:100vh;   
+  position:relative;
+  display:none;
+}
+
+.speak {
+  position: absolute; 
+  bottom: 0;  
+  margin-left: -45px;
+}
+
+.optincard {
+  position: relative;
+  float: left;
+  margin-right: 10%;
+  width: 80%;
+  height: 50%;
+  margin-left: 10%;
+  border-radius: 10px;
+  margin-top: 10%;
+  background: #fff;
+  -webkit-box-shadow: 3px 3px 7px rgba(0,0,0,0.3);
+  box-shadow: 3px 3px 7px rgba(0,0,0,0.3);
+  padding: 10px;
+  font-size: medium;
+}
+
+.agreebtn {
+   border: 1px green;
+   background-color: lightGreen;
+   height:50px;
+   width:150px;
+   font-size: large;
+}
+
+#divsendbtn{
+  display: none;
+}
+
+