Skip to content

Instantly share code, notes, and snippets.

@danillonunes

danillonunes/index.html

Forked from darwin/index.html
Last active December 29, 2015 19:59
Show Gist options
  • Save danillonunes/7721285 to your computer and use it in GitHub Desktop.
Save danillonunes/7721285 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cmx.io/v/0.1/cmx.css">
<script src="http://cmx.io/v/0.1/cmx.js" charset="utf-8"></script>
<style>
h1 {
font-family: "xkcd", "comic sans", sans-serif;
text-align: center;
text-transform: uppercase;
}
div {
margin: 0 auto;
}
#tangerina {
position: absolute;
z-index: 100;
top: 425px;
left: 310px;
}
</style>
<body>
<h1>Como as pessoas usam comandos de voz</h1>
<div style="max-width:900px; -webkit-transform:rotate(0deg)">
<scene id="scene1">
<drawing t="translate(0,31)">
<line stroke="silver">
<point x="0" y="5"></point>
<point x="250" y="15"></point>
</line>
</drawing>
<label t="translate(0,346)">
<tspan x="0" y="0em">Nos comerciais...</tspan>
</label>
<actor t="translate(141,23) rotate(-2)" pose="-11,9|-1,114|-11,99|-11,89|-11,79|-11,59|-16,34|-21,9|-6,34|-1,9|-18,79|-18,59|-6,79|13,83">
<bubble t="translate(9,4) rotate(2)" pose="-18,-4|-38,6|-86,56|-21,111|-39,141|-88,111">
<tspan x="-0.5em" y="-3em">ok, Google now</tspan>
<tspan x="-3.5em" y="0em">no próximo dia 23</tspan>
<tspan x="-3.5em" y="1em">eu tenho uma consulta médica</tspan>
<tspan x="-3.5em" y="2em">e uma reunião marcadas</tspan>
<tspan x="-3.5em" y="3em">no mesmo horário...</tspan>
</bubble>
</actor>
<drawing t="translate(151,101) scale(0.6)">
<line stroke="black" t="translate(0,0)" stroke-width="0.25em">
<point x="0" y="0"></point>
<point x="12" y="20"></point>
</line>
<line stroke="black" t="translate(0,0)" stroke-width="0.25em">
<point x="5" y="-3"></point>
<point x="17" y="17"></point>
</line>
<line stroke="black" t="translate(0,0)" stroke-width="0.25em">
<point x="0" y="0"></point>
<point x="5" y="-3"></point>
</line>
<line stroke="black" t="translate(0,0)" stroke-width="0.25em">
<point x="12" y="20"></point>
<point x="17" y="17"></point>
</line>
</drawing>
</scene>
<scene id="scene2">
<drawing t="translate(0,31)">
<line stroke="silver">
<point x="0" y="5"></point>
<point x="250" y="15"></point>
</line>
</drawing>
<actor t="translate(141,23) rotate(-2)" pose="-11,9|-1,114|-11,99|-11,89|-11,79|-11,59|-16,34|-21,9|-6,34|-1,9|-18,79|-18,59|-6,79|13,83">
<bubble t="translate(-3,0) rotate(2)" pose="0,0|-10,28|-11,113|-108,59|-36,136|-130,181">
<tspan x="0" y="0em">reagende a reunião para</tspan>
<tspan x="0" y="1em">após o fim da consulta,</tspan>
<tspan x="0" y="2em">não se esqueça do tempo de</tspan>
<tspan x="0" y="3em">deslocamento até o escritório</tspan>
<tspan x="2em" y="5em">e envie um email</tspan>
<tspan x="2em" y="6em">para os participantes</tspan>
<tspan x="2em" y="7em">avisando da mudança</tspan>
<tspan x="2em" y="8em">de horário</tspan>
</bubble>
</actor>
<drawing t="translate(151,101) scale(0.6)">
<line stroke="black" t="translate(0,0)" stroke-width="0.25em">
<point x="0" y="0"></point>
<point x="12" y="20"></point>
</line>
<line stroke="black" t="translate(0,0)" stroke-width="0.25em">
<point x="5" y="-3"></point>
<point x="17" y="17"></point>
</line>
<line stroke="black" t="translate(0,0)" stroke-width="0.25em">
<point x="0" y="0"></point>
<point x="5" y="-3"></point>
</line>
<line stroke="black" t="translate(0,0)" stroke-width="0.25em">
<point x="12" y="20"></point>
<point x="17" y="17"></point>
</line>
</drawing>
</scene>
<scene id="scene3">
<drawing t="translate(0,31)">
<line stroke="silver">
<point x="0" y="5"></point>
<point x="250" y="15"></point>
</line>
</drawing>
<actor t="translate(141,23) rotate(-2)" pose="-11,9|-5,117|-11,99|-11,89|-11,79|-11,59|-16,34|-21,9|-6,34|-1,9|-18,79|-18,59|-6,79|13,83">
<bubble t="translate(-3,0) rotate(2)" pose="0,0|-28,9|-69,85|-104,65|-84,106|-121,114">
<tspan x="1em" y="0em">oh, ok</tspan>
<tspan x="0" y="6em">obrigado, Google</tspan>
</bubble>
<bubble t="translate(-3,0) rotate(2)" pose="0,0|31,-24|127,50|-9,112|-1,159|-42,181">
<tspan x="0" y="0em" font-style="italic" font-size="0.85em">anotado!</tspan>
<tspan x="0" y="2em" font-style="italic" font-size="0.85em">a propósito,</tspan>
<tspan x="0" y="3em" font-style="italic" font-size="0.85em">seu táxi o aguarda</tspan>
<tspan x="0" y="4em" font-style="italic" font-size="0.85em">na saída da recepção</tspan>
<tspan x="0" y="7em" font-style="italic" font-size="0.85em">eu pedi um veículo</tspan>
<tspan x="0" y="8em" font-style="italic" font-size="0.85em">com bancos de couro,</tspan>
<tspan x="0" y="9em" font-style="italic" font-size="0.85em">de acordo com suas</tspan>
<tspan x="0" y="10em" font-style="italic" font-size="0.85em">preferências pessoais</tspan>
</bubble>
</actor>
<drawing t="translate(151,101) scale(0.6)">
<line stroke="black" t="translate(0,0)" stroke-width="0.25em">
<point x="0" y="0"></point>
<point x="12" y="20"></point>
</line>
<line stroke="black" t="translate(0,0)" stroke-width="0.25em">
<point x="5" y="-3"></point>
<point x="17" y="17"></point>
</line>
<line stroke="black" t="translate(0,0)" stroke-width="0.25em">
<point x="0" y="0"></point>
<point x="5" y="-3"></point>
</line>
<line stroke="black" t="translate(0,0)" stroke-width="0.25em">
<point x="12" y="20"></point>
<point x="17" y="17"></point>
</line>
</drawing>
</scene>
</div>
<div style="max-width:900px; -webkit-transform:rotate(0deg)">
<img src="http://gist.github.com/danillonunes/7721285/raw/ba59748db5b2b7556107739aaa5f0e0120bcd8bb/tangerina.png" width="200px" id="tangerina" />
<scene id="scene4">
<drawing t="translate(0,31)">
<line stroke="silver">
<point x="0" y="5"></point>
<point x="250" y="15"></point>
</line>
</drawing>
<label t="translate(0,346)">
<tspan x="0" y="0em">No mundo real...</tspan>
</label>
<actor t="translate(141,23) rotate(-2)" pose="-11,9|-1,114|-11,99|-11,89|-11,79|-11,59|-16,34|-21,9|-6,34|-1,9|-18,79|-18,59|-6,79|13,83">
<bubble t="translate(9,4) rotate(2)" pose="-18,-4|-38,6|-80,96|6,67|-39,141|-88,111">
<tspan x="-0.5em" y="-3em">ok, Google now</tspan>
<tspan x="3.25em" y="1.5em">hmm...</tspan>
<tspan x="0em" y="4.5em" font-size="1.25em">tangerina!</tspan>
</bubble>
</actor>
<drawing t="translate(151,101) scale(0.6)">
<line stroke="black" t="translate(0,0)" stroke-width="0.25em">
<point x="0" y="0"></point>
<point x="12" y="20"></point>
</line>
<line stroke="black" t="translate(0,0)" stroke-width="0.25em">
<point x="5" y="-3"></point>
<point x="17" y="17"></point>
</line>
<line stroke="black" t="translate(0,0)" stroke-width="0.25em">
<point x="0" y="0"></point>
<point x="5" y="-3"></point>
</line>
<line stroke="black" t="translate(0,0)" stroke-width="0.25em">
<point x="12" y="20"></point>
<point x="17" y="17"></point>
</line>
</drawing>
</scene>
<scene id="scene5">
</scene>
<scene id="scene6">
<drawing t="translate(0,31)">
<line stroke="silver">
<point x="0" y="5"></point>
<point x="250" y="15"></point>
</line>
</drawing>
<actor t="translate(141,23) rotate(-2)" pose="-11,9|-11,119|-11,99|-11,89|-11,79|-11,59|-16,34|-21,9|-6,34|-1,9|-13,92|-40,116|-11,91|20,119">
</actor>
<drawing t="translate(149,109) rotate(13)scale(0.6,0.6)" pose="37,47">
<line stroke="black" t="translate(0,0)" stroke-width="0.25em">
<point x="0" y="0"></point>
<point x="12" y="20"></point>
</line>
<line stroke="black" t="translate(0,0)" stroke-width="0.25em">
<point x="5" y="-3"></point>
<point x="17" y="17"></point>
</line>
<line stroke="black" t="translate(0,0)" stroke-width="0.25em">
<point x="0" y="0"></point>
<point x="5" y="-3"></point>
</line>
<line stroke="black" t="translate(0,0)" stroke-width="0.25em">
<point x="12" y="20"></point>
<point x="17" y="17"></point>
</line>
</drawing>
</scene>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment