????
Current Path : C:/Windows/System32/oobe/ |
Current File : C:/Windows/System32/oobe/FirstLogonAnim.html |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> var uniqueId=0;function genUniqueKeyframeName(){return"seq-"+uniqueId++}var SceneItem=function(c,b,e,f,d){var a=this;c.style.visibility="visible";a.keyframe_sequence=d;a.element=c;a.animation_name=b;a.animation_duration=f;a.keyframes="@-ms-keyframes "+b+" {"+e+"}"},KeyframeSequencer=function(c){var a=this;a._created_keyframes=[];a.container_element=c;a._sequences=[];var b=document.createElement("style");document.head.appendChild(b);a.stylesheet=b.sheet};KeyframeSequencer.prototype.addSequence=function(h,c,k,i){var a={};a.element=h;a.keyframe_name=genUniqueKeyframeName();a.keyframe_style_str="@-ms-keyframes "+a.keyframe_name+" {";for(var d=0,b=0;b<c.length;b++){var f=c[b].duration;d+=f}for(var e=0,b=0;b<c.length;b++){var f=c[b].duration;e+=f;var j=e/d*100+"%",g=c[b].properties;a.keyframe_style_str+=j+"{"+g+"}"}a.keyframe_style_str+="}";a.delay=k;a.duration=d+"s";a.fill_mode=i||"both";this._sequences.push(a)};KeyframeSequencer.prototype.playSequence=function(){var b=this;for(var e=[],c=0;c<b.container_element.childNodes.length;c++)e.push(b.container_element.childNodes[c]);b.stylesheet.cssText="";for(var c=0;c<b._sequences.length;c++){var a=b._sequences[c],d=a.element;b.stylesheet.insertRule(a.keyframe_style_str,0);b._created_keyframes.push(a.keyframe_name);d.style.msAnimationDuration=a.duration;d.style.msAnimationDelay=a.delay;d.style.msAnimationFillMode=a.fill_mode;d.style.msAnimationName=a.keyframe_name}};var ScenesManager=function(c){var a=this;a._event_element=document.createElement("div");a._canvas=c;a._scenes=[];a._playhead=0;a._repeat=false;a._repeat_from=0;a._iteration_count=0;a._max_iteration=0;a.oncomplete_callback=null;var b=document.createElement("style");document.head.appendChild(b);a.stylesheet=b.sheet};ScenesManager.prototype.addScene=function(a){this._scenes.push(a)};ScenesManager.prototype.playScenes=function(a){var b=this;while(b._canvas.hasChildNodes())b._canvas.removeChild(b._canvas.childNodes[0]);if(a&&a.repeat){b._repeat=a.repeat;if(a&&a.repeat_from)b._repeat_from=a.repeat_from;if(a&&a.repeat_count)b._max_iteration=a.repeat_count}if(a&&a.oncomplete_callback)b.oncomplete_callback=a.oncomplete_callback;b.playCurrentScene()};ScenesManager.prototype._onPlayNext=function(){var a=this,b=false;if(a._playhead+1<a._scenes.length){a._playhead+=1;a.playCurrentScene()}else{a.stylesheet.cssText="";if(a._repeat){a._playhead=a._repeat_from;if(a._max_iteration!=0&&a._iteration_count>=a._max_iteration-1){a.repeat=false;b=true}else{a.playCurrentScene();a._iteration_count+=1}}else b=true}b&&a.oncomplete_callback!=null&&a.oncomplete_callback()};ScenesManager.prototype.playCurrentScene=function(){var c=this,f=c,b=c._scenes[c._playhead],a=b.element;c._canvas.appendChild(a);var e=b.keyframes,d=c.stylesheet;d.insertRule(e,0);if(!a.has_event){a.has_event=true;a.addEventListener("MSAnimationEnd",function(b){b.target===a&&f._onPlayNext()})}a.style.msAnimationName=b.animation_name;a.style.msAnimationDuration=b.animation_duration;a.style.msAnimationFillMode="both";b.keyframe_sequence&&b.keyframe_sequence.playSequence()} var rtl_mode=false,v_offset=40;function setVerticalOffset(a){v_offset=a}function setTextStyle(b,a){_setTextStyle(b,a,".instruction_text, .final_text")}function setSubTextStyle(b,a){_setTextStyle(b,a,".instruction_text_small, .final_text_small")}function _setTextStyle(i,h,e){for(var b=i.split(";"),j=b[0]+"pt",f=b[1],g=b[2],d=document.querySelectorAll(e),c=0;c<d.length;c++){var a=d[c];a.style.fontSize=j;a.style.fontFamily=f;a.style.fontWeight=g;a.style.fontColor=h}}function setRTL(b){rtl_mode=b;var a;if(b){a=document.getElementById("playback_canvas");a.parentElement.removeChild(a)}else{a=document.getElementById("playback_canvas_rtl");a.parentElement.removeChild(a)}}function initTryThisLaterMessageSequence(j,k,i){var h="to{opacity:1}",g="85%{opacity:1}",f="15%{opacity:1}",d=null,e="to{opacity:0}",c="s0",b="trythislater_sequence",l=document.getElementById("trythislater_overlay_canvas"),a=new ScenesManager(l);a.addScene(new SceneItem(document.getElementById(b),c,e,"0s",d));a.addScene(new SceneItem(document.getElementById(b),c,"from{-ms-animation-timing-function:ease;opacity:0;}"+f+g+h,j,d));a.addScene(new SceneItem(document.getElementById(b),c,h,k,d));a.addScene(new SceneItem(document.getElementById(b),c,"from{-ms-animation-timing-function:ease;opacity:1;}"+f+g+e,i,d));a.playScenes({repeat:false})}function initEndSequence(){var c="to{opacity:1}",b="end_sequence_canvas";document.getElementById(b).style.visibility="visible";var a,d=document.getElementById(b);a=new ScenesManager(d);a.addScene(new SceneItem(document.getElementById("pre_end_sequence"),"es",c,"6.2s",setPreEndSequence()));a.addScene(new SceneItem(document.getElementById("end_sequence"),"es",c,"0s",setEndSequence()));a.playScenes({repeat:false,oncomplete_callback:function(){startAnimation()}})}function initEndSequenceMessagesOverlay(){var b="final_messages_overlay_canvas";document.getElementById(b).style.visibility="visible";var a,c=document.getElementById(b);a=new ScenesManager(c);a.addScene(new SceneItem(document.getElementById("message_overlay_sequence"),"mos","to{opacity:1}","300s",setFinalMessagesSequence()));a.playScenes({repeat:false})}var zdpMessageIndex=0,rgZDPMessages=[];function addZDPMessage(a){rgZDPMessages[rgZDPMessages.length]=a}function initZDPEndSequence(){initEndSequence();document.getElementById("zdp_final_messages_overlay_canvas").style.visibility="visible";nextZDPMessage()}function nextZDPMessage(){document.getElementById("zdp_final_message_text").innerHTML=rgZDPMessages[zdpMessageIndex++];var a,b=document.getElementById("zdp_final_messages_overlay_canvas");a=new ScenesManager(b);a.addScene(new SceneItem(document.getElementById("zdp_message_overlay_sequence"),"mos","to{opacity:1}","60s",setZDPFinalMessagesSequence()));a.playScenes({repeat:false,oncomplete_callback:function(){if(zdpMessageIndex>=rgZDPMessages.length)zdpMessageIndex=0;nextZDPMessage()}})}function setFinalMessagesSequence(){var g="s",f="-ms-animation-timing-function:linear;opacity:0;-ms-transform:translate(0px,0px);",c="-ms-transform:translate(0px,0px);opacity:0;",j="-ms-animation-timing-function:linear;-ms-transform:translate(0px,0px);opacity:1;",b="-ms-transform:translate(0px,0px);opacity:1;",i="-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);opacity:0;-ms-transform:translate(0px,0px);",e;e=new KeyframeSequencer(document.getElementById("message_overlay_sequence"));var h=60,a=h-7,d=a;e.addSequence(document.getElementById("final_message_text1"),[{properties:i,duration:0},{properties:b,duration:6},{properties:j,duration:a},{properties:c,duration:1}],"0s");e.addSequence(document.getElementById("sub_final_message_text1"),[{properties:i,duration:0},{properties:b,duration:6},{properties:j,duration:a+2+(h-2)},{properties:"-ms-animation-timing-function:linear;-ms-transform:translate(0px,0px);opacity:0;",duration:1}],"0s");d+=7;a=h-2;e.addSequence(document.getElementById("final_message_text2"),[{properties:f,duration:0},{properties:b,duration:1},{properties:b,duration:a},{properties:c,duration:1}],d+g);e.addSequence(document.getElementById("sub_final_message_text2"),[{properties:f,duration:0},{properties:c,duration:1},{properties:c,duration:a},{properties:c,duration:1}],d+g);d+=a+2;e.addSequence(document.getElementById("final_message_text3"),[{properties:f,duration:0},{properties:b,duration:1},{properties:b,duration:a},{properties:c,duration:1}],d+g);e.addSequence(document.getElementById("sub_final_message_text3"),[{properties:f,duration:0},{properties:b,duration:1},{properties:b,duration:a*3+4},{properties:b,duration:1}],d+g);d+=a+2;e.addSequence(document.getElementById("final_message_text4"),[{properties:f,duration:0},{properties:b,duration:1},{properties:b,duration:a},{properties:c,duration:1}],d+g);e.addSequence(document.getElementById("sub_final_message_text4"),[{properties:f,duration:0},{properties:c,duration:1},{properties:b,duration:a+1},{properties:c,duration:1}],d+(a+2)*2+g);d+=a+2;e.addSequence(document.getElementById("final_message_text5"),[{properties:f,duration:0},{properties:b,duration:1},{properties:b,duration:a},{properties:b,duration:1}],d+g);e.addSequence(document.getElementById("sub_final_message_text5"),[{properties:f,duration:0},{properties:c,duration:1},{properties:c,duration:a+1},{properties:c,duration:1}],d+(a+2)*3+g);return e}function setZDPFinalMessagesSequence(){var a;a=new KeyframeSequencer(document.getElementById("zdp_message_overlay_sequence"));var c=60,b=c-7;a.addSequence(document.getElementById("zdp_final_message_text"),[{properties:"-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);opacity:0;-ms-transform:translate(0px,0px);",duration:0},{properties:"-ms-transform:translate(0px,0px);opacity:1;",duration:6},{properties:"-ms-animation-timing-function:linear;-ms-transform:translate(0px,0px);opacity:1;",duration:b},{properties:"-ms-transform:translate(0px,0px);opacity:0;",duration:1}],"0s");return a}var elm,rCurrent,gCurrent,bCurrent,rIncrement,gIncrement,bIncrement,steps=240,currentStep=240,skipNthFrame=3,framesSinceSkip=0,numberColors=2,currentColor=0,targetColor=1,rValues=[],gValues=[],bValues=[],callback=null;function startAnimation(){elm=document.getElementById("color1");rValues=[0,0],gValues=[114,45],bValues=[201,80],rCurrent=rValues[currentColor];gCurrent=gValues[currentColor];bCurrent=bValues[currentColor];setTargetColor()}function setTargetColor(){rIncrement=(rValues[targetColor]-rCurrent)/steps;gIncrement=(gValues[targetColor]-gCurrent)/steps;bIncrement=(bValues[targetColor]-bCurrent)/steps;currentColor=(currentColor+1)%numberColors;targetColor=(targetColor+1)%numberColors;currentStep=steps;cycleToTargetColor()}function cycleToTargetColor(){currentStep--;rCurrent+=rIncrement;gCurrent+=gIncrement;bCurrent+=bIncrement;framesSinceSkip++;if(framesSinceSkip>=skipNthFrame){framesSinceSkip=0;elm.style.backgroundColor="rgb("+Math.round(rCurrent)+","+Math.round(gCurrent)+","+Math.round(bCurrent)+")"}if(currentStep>0)callback=requestAnimationFrame(cycleToTargetColor);else setTargetColor()}function setPreEndSequence(){var a;a=new KeyframeSequencer(document.getElementById("pre_end_sequence"));a.addSequence(document.getElementById("color0"),[{properties:"-ms-animation-timing-function:linear;opacity:0;",duration:0},{properties:"opacity:1;",duration:4}],"1s");return a}function setEndSequence(){var a;a=new KeyframeSequencer(document.getElementById("end_sequence"));a.addSequence(document.getElementById("color1"),[{properties:"-ms-animation-timing-function:linear;opacity:1;",duration:0}],"0s");return a}function initTouchSequence(j){var h="from{-ms-animation-timing-function:ease;opacity:1;}",g="to{opacity:1}",f="85%{opacity:1}",e="15%{opacity:1}",d="s1",c="touch_sequence",b="7s";if(j){initEndSequence();initEndSequenceMessagesOverlay()}else{initTryThisLaterMessageSequence("6s","21s",b);var a,i;if(rtl_mode)i=document.getElementById("playback_canvas_rtl");else i=document.getElementById("playback_canvas");a=new ScenesManager(i);a.addScene(new SceneItem(document.getElementById(c),d,"from{-ms-animation-timing-function:ease;opacity:0;}"+e+f+g,"6s",setTouchSequence0()));a.addScene(new SceneItem(document.getElementById(c),d,h+e+f+g,b,setTouchSequence1()));a.addScene(new SceneItem(document.getElementById(c),d,h+e+f+g,b,setTouchSequence3()));a.addScene(new SceneItem(document.getElementById(c),d,h+e+f+g,b,setTouchSequence3()));a.addScene(new SceneItem(document.getElementById(c),d,h+e+f+"to{opacity:0}",b,setTouchSequence2()));a.playScenes({repeat:false,oncomplete_callback:function(){initEndSequence();initEndSequenceMessagesOverlay()}})}}function initTouchAndMouseSequence(n){var k="s2",j="mouse_sequence",i="to{opacity:0}",g="from{-ms-animation-timing-function:ease;opacity:1;}",f="to{opacity:1}",c="85%{opacity:1}",b="15%{opacity:1}",h="from{-ms-animation-timing-function:ease;opacity:0;}",e="s1",d="touch_sequence",l="7.8s";if(n){initEndSequence();initEndSequenceMessagesOverlay()}else{initTryThisLaterMessageSequence("6s","57.4s",l);var a,m;if(rtl_mode)m=document.getElementById("playback_canvas_rtl");else m=document.getElementById("playback_canvas");a=new ScenesManager(m);a.addScene(new SceneItem(document.getElementById(d),e,h+b+c+f,"6s",setTouchSequence0()));a.addScene(new SceneItem(document.getElementById(d),e,g+b+c+f,"7s",setTouchSequence1()));a.addScene(new SceneItem(document.getElementById(d),e,g+b+c+i,"7s",setTouchSequence2()));a.addScene(new SceneItem(document.getElementById(j),k,h+b+c+f,"9.8s",setMouseSequence3()));a.addScene(new SceneItem(document.getElementById(j),k,g+b+c+i,l,setMouseSequence2()));a.addScene(new SceneItem(document.getElementById(d),e,h+b+c+f,"9s",setTouchSequence4()));a.addScene(new SceneItem(document.getElementById(d),e,g+b+c+i,"7s",setTouchSequence2()));a.addScene(new SceneItem(document.getElementById(j),k,h+b+c+f,"9.8s",setMouseSequence3()));a.addScene(new SceneItem(document.getElementById(j),k,g+b+c+i,l,setMouseSequence2()));a.playScenes({oncomplete_callback:function(){initEndSequence();initEndSequenceMessagesOverlay()}})}}function initMouseSequence(j){var h="from{-ms-animation-timing-function:ease;opacity:1;}",g="to{opacity:1}",f="85%{opacity:1}",e="15%{opacity:1}",d="s2",c="mouse_sequence",b="7.8s";if(j){initEndSequence();initEndSequenceMessagesOverlay()}else{initTryThisLaterMessageSequence("14.3s","15.6s",b);var a,i;if(rtl_mode)i=document.getElementById("playback_canvas_rtl");else i=document.getElementById("playback_canvas");a=new ScenesManager(i);a.addScene(new SceneItem(document.getElementById(c),d,"from{-ms-animation-timing-function:ease;opacity:0;}"+e+f+g,"14.3s",setMouseSequence1()));a.addScene(new SceneItem(document.getElementById(c),d,h+e+f+g,b,setMouseSequence2()));a.addScene(new SceneItem(document.getElementById(c),d,h+e+f+g,b,setMouseSequence2()));a.addScene(new SceneItem(document.getElementById(c),d,h+e+f+"to{opacity:0}",b,setMouseSequence2()));a.playScenes({repeat:false,oncomplete_callback:function(){initEndSequence();initEndSequenceMessagesOverlay()}})}}function setTouchSequence0(){var m="touch_charms",l="opacity:1;",k="touch_arrow",c="0s",b=.01,d="opacity:0;",j="touch_instruction_text",i="-ms-transform:translate(0px,0px);opacity:0;",e="-ms-transform:translate(0px,0px);opacity:1;",h="-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);opacity:0;-ms-transform:translate(0px,0px);",g="touch_intro_text",f="touch_sequence",a;if(rtl_mode){a=new KeyframeSequencer(document.getElementById(f));a.addSequence(document.getElementById(g),[{properties:h,duration:0},{properties:e,duration:2},{properties:e,duration:1},{properties:i,duration:1}],"2s");a.addSequence(document.getElementById(j),[{properties:d,duration:b}],c);a.addSequence(document.getElementById(k),[{properties:d,duration:b}],c);a.addSequence(document.getElementById("thumbs"),[{properties:l,duration:b}],c);a.addSequence(document.getElementById(m),[{properties:d,duration:b}],c)}else{a=new KeyframeSequencer(document.getElementById(f));a.addSequence(document.getElementById(g),[{properties:h,duration:0},{properties:e,duration:2},{properties:e,duration:1},{properties:i,duration:1}],"2s");a.addSequence(document.getElementById(j),[{properties:d,duration:b}],c);a.addSequence(document.getElementById(k),[{properties:d,duration:b}],c);a.addSequence(document.getElementById("thumbs"),[{properties:l,duration:b}],c);a.addSequence(document.getElementById(m),[{properties:d,duration:b}],c)}return a}function setTouchSequence1(){var d="-ms-transform:translate(0px,0px);opacity:0",m="-ms-transform:translate(0px,0px);opacity:1",l="-ms-transform:translate(0px,0px);",k="touch_charms",j="touch_arrow",c="-ms-transform:translate(0px,0px);opacity:1;",i="-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);opacity:0;-ms-transform:translate(0px,0px);",h="touch_instruction_text",b="0s",g="opacity:0;",f="touch_intro_text",e="touch_sequence",a;if(rtl_mode){a=new KeyframeSequencer(document.getElementById(e));a.addSequence(document.getElementById(f),[{properties:g,duration:.01}],b);a.addSequence(document.getElementById(h),[{properties:i,duration:0},{properties:c,duration:2}],b);a.addSequence(document.getElementById(j),[{properties:"-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);-ms-transform:scale(-1,1) translate(120px,0px);",duration:0},{properties:"-ms-transform:scale(-1,1) translate(0px,0px);opacity:1;",duration:1},{properties:"-ms-transform:scale(-1,1) translate(0px,0px);opacity:0",duration:1.5}],"2s");a.addSequence(document.getElementById("thumbs"),[{properties:"-ms-animation-timing-function:ease;-ms-transform:scale(-1,1) rotate(0deg) translate(0px,0px);",duration:0},{properties:"-ms-animation-timing-function:ease;-ms-transform:scale(-1,1) rotate(-20deg) translate(-3px,11px);",duration:.25},{properties:"-ms-transform:scale(-1,1) rotate(0deg) translate(0px,0px);",duration:.75}],"4s");a.addSequence(document.getElementById(k),[{properties:"-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);-ms-transform:translate(-35px,0px);",duration:0},{properties:l,duration:.5},{properties:m,duration:1},{properties:d,duration:1}],"4.05s")}else{a=new KeyframeSequencer(document.getElementById(e));a.addSequence(document.getElementById(f),[{properties:g,duration:.01}],b);a.addSequence(document.getElementById(h),[{properties:i,duration:0},{properties:c,duration:2}],b);a.addSequence(document.getElementById(j),[{properties:"-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);-ms-transform:translate(120px,0px);",duration:0},{properties:c,duration:1},{properties:d,duration:1.5}],"2s");a.addSequence(document.getElementById("thumbs"),[{properties:"-ms-animation-timing-function:ease;-ms-transform:rotate(0deg) translate(0px,0px);",duration:0},{properties:"-ms-animation-timing-function:ease;-ms-transform:rotate(-20deg) translate(-3px,11px);",duration:.25},{properties:"-ms-transform:rotate(0deg) translate(0px,0px);",duration:.75}],"4s");a.addSequence(document.getElementById(k),[{properties:"-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);-ms-transform:translate(35px,0px);",duration:0},{properties:l,duration:.5},{properties:m,duration:1},{properties:d,duration:1}],"4.05s")}return a}function setTouchSequence2(){var k="-ms-transform:translate(0px,0px);",j="touch_charms",i="touch_arrow",d="-ms-transform:translate(0px,0px);opacity:1;",h="touch_instruction_text",c="0s",b="-ms-transform:translate(0px,0px);opacity:0;",g="-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);opacity:0;-ms-transform:translate(0px,0px);",f="touch_intro_text",e="touch_sequence",a;if(rtl_mode){a=new KeyframeSequencer(document.getElementById(e));a.addSequence(document.getElementById(f),[{properties:g,duration:0},{properties:b,duration:2},{properties:b,duration:1},{properties:b,duration:1}],c);a.addSequence(document.getElementById(h),[{properties:"-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);opacity:1;-ms-transform:translate(0px,0px);",duration:0},{properties:d,duration:2}],c);a.addSequence(document.getElementById(i),[{properties:"-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);-ms-transform:scale(-1,1) translate(120px,0px);",duration:0},{properties:"-ms-transform:scale(-1,1) translate(0px,0px);opacity:1;",duration:1},{properties:"-ms-transform:scale(-1,1) translate(0px,0px);opacity:0",duration:1.5}],"2s");a.addSequence(document.getElementById("thumbs"),[{properties:"-ms-animation-timing-function:ease;-ms-transform:scale(-1,1) rotate(0deg) translate(0px,0px);",duration:0},{properties:"-ms-animation-timing-function:ease;-ms-transform:scale(-1,1) rotate(-20deg) translate(-3px,11px);",duration:.25},{properties:"-ms-transform:scale(-1,1) rotate(0deg) translate(0px,0px);",duration:.75}],"4s");a.addSequence(document.getElementById(j),[{properties:"-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);-ms-transform:translate(-35px,0px);",duration:0},{properties:k,duration:.5},{properties:"-ms-transform:translate(0px,0px);opacity:1",duration:1}],"4.05s")}else{a=new KeyframeSequencer(document.getElementById(e));a.addSequence(document.getElementById(f),[{properties:g,duration:0},{properties:b,duration:2},{properties:b,duration:1},{properties:b,duration:1}],c);a.addSequence(document.getElementById(h),[{properties:d,duration:0},{properties:d,duration:2}],c);a.addSequence(document.getElementById(i),[{properties:"-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);-ms-transform:translate(120px,0px);",duration:0},{properties:d,duration:1},{properties:"-ms-transform:translate(0px,0px);opacity:0",duration:1.5}],"2s");a.addSequence(document.getElementById("thumbs"),[{properties:"-ms-animation-timing-function:ease;-ms-transform:rotate(0deg) translate(0px,0px);",duration:0},{properties:"-ms-animation-timing-function:ease;-ms-transform:rotate(-20deg) translate(-3px,11px);",duration:.25},{properties:"-ms-transform:rotate(0deg) translate(0px,0px);",duration:.75}],"4s");a.addSequence(document.getElementById(j),[{properties:"-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);-ms-transform:translate(35px,0px);",duration:0},{properties:k,duration:1}],"4.05s")}return a}function setTouchSequence3(){var e="-ms-transform:translate(0px,0px);opacity:0",m="-ms-transform:translate(0px,0px);opacity:1",l="-ms-transform:translate(0px,0px);",k="touch_charms",j="touch_arrow",c="-ms-transform:translate(0px,0px);opacity:1;",i="touch_instruction_text",d="0s",b="-ms-transform:translate(0px,0px);opacity:0;",h="-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);opacity:0;-ms-transform:translate(0px,0px);",g="touch_intro_text",f="touch_sequence",a;if(rtl_mode){a=new KeyframeSequencer(document.getElementById(f));a.addSequence(document.getElementById(g),[{properties:h,duration:0},{properties:b,duration:2},{properties:b,duration:1},{properties:b,duration:1}],d);a.addSequence(document.getElementById(i),[{properties:c,duration:0},{properties:c,duration:2}],d);a.addSequence(document.getElementById(j),[{properties:"-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);-ms-transform:scale(-1,1) translate(120px,0px);",duration:0},{properties:"-ms-transform:scale(-1,1) translate(0px,0px);opacity:1;",duration:1},{properties:"-ms-transform:scale(-1,1) translate(0px,0px);opacity:0",duration:1.5}],"2s");a.addSequence(document.getElementById("thumbs"),[{properties:"-ms-animation-timing-function:ease;-ms-transform:scale(-1,1) rotate(0deg) translate(0px,0px);",duration:0},{properties:"-ms-animation-timing-function:ease;-ms-transform:scale(-1,1) rotate(-20deg) translate(-3px,11px);",duration:.25},{properties:"-ms-transform:scale(-1,1) rotate(0deg) translate(0px,0px);",duration:.75}],"4s");a.addSequence(document.getElementById(k),[{properties:"-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);-ms-transform:translate(-35px,0px);",duration:0},{properties:l,duration:.5},{properties:m,duration:1},{properties:e,duration:1}],"4.05s")}else{a=new KeyframeSequencer(document.getElementById(f));a.addSequence(document.getElementById(g),[{properties:h,duration:0},{properties:b,duration:2},{properties:b,duration:1},{properties:b,duration:1}],d);a.addSequence(document.getElementById(i),[{properties:c,duration:0},{properties:c,duration:2}],d);a.addSequence(document.getElementById(j),[{properties:"-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);-ms-transform:translate(120px,0px);",duration:0},{properties:c,duration:1},{properties:e,duration:1.5}],"2s");a.addSequence(document.getElementById("thumbs"),[{properties:"-ms-animation-timing-function:ease;-ms-transform:rotate(0deg) translate(0px,0px);",duration:0},{properties:"-ms-animation-timing-function:ease;-ms-transform:rotate(-20deg) translate(-3px,11px);",duration:.25},{properties:"-ms-transform:rotate(0deg) translate(0px,0px);",duration:.75}],"4s");a.addSequence(document.getElementById(k),[{properties:"-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);-ms-transform:translate(35px,0px);",duration:0},{properties:l,duration:.5},{properties:m,duration:1},{properties:e,duration:1}],"4.05s")}return a}function setTouchSequence4(){var c="-ms-transform:translate(0px,0px);opacity:0",l="-ms-transform:translate(0px,0px);opacity:1",k="-ms-transform:translate(0px,0px);",j="touch_charms",i="touch_arrow",b="-ms-transform:translate(0px,0px);opacity:1;",h="-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);opacity:0;-ms-transform:translate(0px,0px);",g="touch_instruction_text",f="opacity:0;",e="touch_intro_text",d="touch_sequence",a;if(rtl_mode){a=new KeyframeSequencer(document.getElementById(d));a.addSequence(document.getElementById(e),[{properties:f,duration:.01}],"0s");a.addSequence(document.getElementById(g),[{properties:h,duration:0},{properties:b,duration:2}],"2s");a.addSequence(document.getElementById(i),[{properties:"-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);-ms-transform:scale(-1,1) translate(120px,0px);",duration:0},{properties:"-ms-transform:scale(-1,1) translate(0px,0px);opacity:1;",duration:1},{properties:"-ms-transform:scale(-1,1) translate(0px,0px);opacity:0",duration:1.5}],"4s");a.addSequence(document.getElementById("thumbs"),[{properties:"-ms-animation-timing-function:ease;-ms-transform:scale(-1,1) rotate(0deg) translate(0px,0px);",duration:0},{properties:"-ms-animation-timing-function:ease;-ms-transform:scale(-1,1) rotate(-20deg) translate(-3px,11px);",duration:.25},{properties:"-ms-transform:scale(-1,1) rotate(0deg) translate(0px,0px);",duration:.75}],"6s");a.addSequence(document.getElementById(j),[{properties:"-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);-ms-transform:translate(-35px,0px);",duration:0},{properties:k,duration:.5},{properties:l,duration:1},{properties:c,duration:1}],"6.05s")}else{a=new KeyframeSequencer(document.getElementById(d));a.addSequence(document.getElementById(e),[{properties:f,duration:.01}],"0s");a.addSequence(document.getElementById(g),[{properties:h,duration:0},{properties:b,duration:2}],"2s");a.addSequence(document.getElementById(i),[{properties:"-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);-ms-transform:translate(120px,0px);",duration:0},{properties:b,duration:1},{properties:c,duration:1.5}],"4s");a.addSequence(document.getElementById("thumbs"),[{properties:"-ms-animation-timing-function:ease;-ms-transform:rotate(0deg) translate(0px,0px);",duration:0},{properties:"-ms-animation-timing-function:ease;-ms-transform:rotate(-20deg) translate(-3px,11px);",duration:.25},{properties:"-ms-transform:rotate(0deg) translate(0px,0px);",duration:.75}],"6s");a.addSequence(document.getElementById(j),[{properties:"-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);-ms-transform:translate(35px,0px);",duration:0},{properties:k,duration:.5},{properties:l,duration:1},{properties:c,duration:1}],"6.05s")}return a}function setMouseSequence1(){var l="mouse_charms",f="-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);opacity:1;-ms-transform:translate(0px,0px);",k="-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);opacity:0;-ms-transform:translate(0px,0px)",j="mouse_arrow",e="opacity:1;-ms-transform:translate(0px,0px)",d="-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);opacity:0;",i="mouse_instruction_text",h="-ms-transform:translate(0px,0px);opacity:0;",b="-ms-transform:translate(0px,0px);opacity:1;",c="-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);opacity:0;-ms-transform:translate(0px,0px);",g="mouse_intro_text",m="mouse_sequence",a;if(rtl_mode){a=new KeyframeSequencer(document.getElementById(m));a.addSequence(document.getElementById(g),[{properties:c,duration:0},{properties:b,duration:2},{properties:b,duration:1},{properties:h,duration:1}],"2s");a.addSequence(document.getElementById(i),[{properties:c,duration:0},{properties:b,duration:2}],"6s");a.addSequence(document.getElementById("cursor"),[{properties:d,duration:0},{properties:e,duration:2},{properties:e,duration:1},{properties:"opacity:1;-ms-transform:translate(-130px,-130px)",duration:1}],"8s");a.addSequence(document.getElementById(j),[{properties:k,duration:0},{properties:f,duration:1},{properties:f,duration:.8},{properties:d,duration:.7}],"9s");a.addSequence(document.getElementById(l),[{properties:"-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);-ms-transform:translate(-35px,0px);",duration:0},{properties:"-ms-transform:translate(4px,0px);",duration:.5},{properties:"-ms-transform:translate(4px,0px);opacity:1",duration:1},{properties:"-ms-transform:translate(4px,0px);opacity:0",duration:1}],"11.6s")}else{a=new KeyframeSequencer(document.getElementById(m));a.addSequence(document.getElementById(g),[{properties:c,duration:0},{properties:b,duration:2},{properties:b,duration:1},{properties:h,duration:1}],"2s");a.addSequence(document.getElementById(i),[{properties:c,duration:0},{properties:b,duration:2}],"6s");a.addSequence(document.getElementById("cursor"),[{properties:d,duration:0},{properties:e,duration:2},{properties:e,duration:1},{properties:"opacity:1;-ms-transform:translate(100px,-100px)",duration:1}],"8s");a.addSequence(document.getElementById(j),[{properties:k,duration:0},{properties:f,duration:1},{properties:f,duration:.8},{properties:d,duration:.7}],"9s");a.addSequence(document.getElementById(l),[{properties:"-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);-ms-transform:translate(35px,0px);",duration:0},{properties:"-ms-transform:translate(0px,0px);",duration:.5},{properties:"-ms-transform:translate(0px,0px);opacity:1",duration:1},{properties:"-ms-transform:translate(0px,0px);opacity:0",duration:1}],"11.6s")}return a}function setMouseSequence3(){var m="mouse_charms",f="-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);opacity:1;-ms-transform:translate(0px,0px);",l="-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);opacity:0;-ms-transform:translate(0px,0px)",k="mouse_arrow",e="opacity:1;-ms-transform:translate(0px,0px)",d="-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);opacity:0;",j="-ms-transform:translate(0px,0px);opacity:1;",i="mouse_instruction_text",b="-ms-transform:translate(0px,0px);opacity:0;",c="-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);opacity:0;-ms-transform:translate(0px,0px);",h="mouse_intro_text",g="mouse_sequence",a;if(rtl_mode){a=new KeyframeSequencer(document.getElementById(g));a.addSequence(document.getElementById(h),[{properties:c,duration:0},{properties:b,duration:2},{properties:b,duration:1},{properties:b,duration:1}],"0s");a.addSequence(document.getElementById(i),[{properties:c,duration:0},{properties:j,duration:2}],"2s");a.addSequence(document.getElementById("cursor"),[{properties:d,duration:0},{properties:e,duration:2},{properties:e,duration:1},{properties:"opacity:1;-ms-transform:translate(-130px,-130px)",duration:1}],"4s");a.addSequence(document.getElementById(k),[{properties:l,duration:0},{properties:f,duration:1},{properties:f,duration:.8},{properties:d,duration:.7}],"5s");a.addSequence(document.getElementById(m),[{properties:"-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);-ms-transform:translate(-35px,0px);",duration:0},{properties:"-ms-transform:translate(4px,0px);",duration:.5},{properties:"-ms-transform:translate(4px,0px);opacity:1",duration:1},{properties:"-ms-transform:translate(4px,0px);opacity:0",duration:1}],"7.6s")}else{a=new KeyframeSequencer(document.getElementById(g));a.addSequence(document.getElementById(h),[{properties:c,duration:0},{properties:b,duration:2},{properties:b,duration:1},{properties:b,duration:1}],"0s");a.addSequence(document.getElementById(i),[{properties:c,duration:0},{properties:j,duration:2}],"2s");a.addSequence(document.getElementById("cursor"),[{properties:d,duration:0},{properties:e,duration:2},{properties:e,duration:1},{properties:"opacity:1;-ms-transform:translate(100px,-100px)",duration:1}],"4s");a.addSequence(document.getElementById(k),[{properties:l,duration:0},{properties:f,duration:1},{properties:f,duration:.8},{properties:d,duration:.7}],"5s");a.addSequence(document.getElementById(m),[{properties:"-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);-ms-transform:translate(35px,0px);",duration:0},{properties:"-ms-transform:translate(0px,0px);",duration:.5},{properties:"-ms-transform:translate(0px,0px);opacity:1",duration:1},{properties:"-ms-transform:translate(0px,0px);opacity:0",duration:1}],"7.6s")}return a}function setMouseSequence2(){var n="mouse_charms",m="-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);opacity:0;-ms-transform:translate(0px,0px)",l="mouse_arrow",f="opacity:1;-ms-transform:translate(0px,0px)",e="-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);opacity:0;",g="-ms-transform:translate(0px,0px);opacity:1;",c="-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);opacity:1;-ms-transform:translate(0px,0px);",k="mouse_instruction_text",d="0s",b="-ms-transform:translate(0px,0px);opacity:0;",j="-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);opacity:0;-ms-transform:translate(0px,0px);",i="mouse_intro_text",h="mouse_sequence",a;if(rtl_mode){a=new KeyframeSequencer(document.getElementById(h));a.addSequence(document.getElementById(i),[{properties:j,duration:0},{properties:b,duration:2},{properties:b,duration:1},{properties:b,duration:1}],d);a.addSequence(document.getElementById(k),[{properties:c,duration:0},{properties:g,duration:2}],d);a.addSequence(document.getElementById("cursor"),[{properties:e,duration:0},{properties:f,duration:2},{properties:f,duration:1},{properties:"opacity:1;-ms-transform:translate(-130px,-130px)",duration:1}],"2s");a.addSequence(document.getElementById(l),[{properties:m,duration:0},{properties:c,duration:1},{properties:c,duration:.8},{properties:e,duration:.7}],"3s");a.addSequence(document.getElementById(n),[{properties:"-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);-ms-transform:translate(-35px,0px);",duration:0},{properties:"-ms-transform:translate(4px,0px);",duration:.5},{properties:"-ms-transform:translate(4px,0px);opacity:1",duration:1},{properties:"-ms-transform:translate(4px,0px);opacity:0",duration:1}],"5.6s")}else{a=new KeyframeSequencer(document.getElementById(h));a.addSequence(document.getElementById(i),[{properties:j,duration:0},{properties:b,duration:2},{properties:b,duration:1},{properties:b,duration:1}],d);a.addSequence(document.getElementById(k),[{properties:g,duration:0},{properties:g,duration:2}],d);a.addSequence(document.getElementById("cursor"),[{properties:e,duration:0},{properties:f,duration:2},{properties:f,duration:1},{properties:"opacity:1;-ms-transform:translate(100px,-100px)",duration:1}],"2s");a.addSequence(document.getElementById(l),[{properties:m,duration:0},{properties:c,duration:1},{properties:c,duration:.8},{properties:e,duration:.7}],"3s");a.addSequence(document.getElementById(n),[{properties:"-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);-ms-transform:translate(35px,0px);",duration:0},{properties:"-ms-transform:translate(0px,0px);",duration:.5},{properties:"-ms-transform:translate(0px,0px);opacity:1",duration:1},{properties:"-ms-transform:translate(0px,0px);opacity:0",duration:1}],"5.6s")}return a}function init(){document.getElementById("playback_canvas"+(rtl_mode?"_rtl":"")).style.visibility="visible";centerPos();window.onresize=function(){centerPos()}}function adjustInstructionText(){var a="px";for(var c=window.innerWidth,h=564,i=390,g=document.querySelectorAll(".instruction_text"),b=0;b<g.length;b++){var d=g[b];d.style.width=c+a;d.style.left=(h-c)/2+a;d.style.top=-d.clientHeight-40+a}for(var f=document.querySelectorAll(".instruction_text_small"),b=0;b<f.length;b++){var e=f[b];e.style.width=c+a;e.style.left=(h-c)/2+a;e.style.top=i+a}}function centerPos(){var a="px";adjustInstructionText();var j=564,i=390,e=window.innerWidth,d=window.innerHeight,k=document.querySelector("#playback_canvas"+(rtl_mode?"_rtl":""));k.style.left=(e-j)/2+a;k.style.top=(d-i)/2+v_offset+a;var h=document.querySelector("#trythislater_overlay_canvas");h.style.left=(e-j)/2+a;h.style.top=(d-i)/2+v_offset+a;for(var f=document.querySelectorAll(".final_text"),e=window.innerWidth,d=window.innerHeight,b=0;b<f.length;b++){var c=f[b];c.style.width=e+a;c.style.top=(d-c.offsetHeight)/2+a}for(var f=document.querySelectorAll(".final_text_small"),e=window.innerWidth,d=window.innerHeight,b=0;b<f.length;b++){var c=f[b];c.style.width=e+a;c.style.top=Math.floor((d-108)/20)*20-8+a}for(var g=document.querySelectorAll(".fullscreen_color"),b=0;b<g.length;b++){var c=g[b];c.style.width=window.outerWidth+a;c.style.height=window.outerHeight+a}}function endAnimation(){var a,b=document.getElementById("drape");a=new ScenesManager(b);a.addScene(new SceneItem(document.getElementById("wrap_up_sequence"),"ws","to{opacity:1}","5.2s",setWrapUpSequence()));a.playScenes();setTimeout(function(){var b="#container";for(var c=document.querySelector(b).childNodes,a=0;a<c.length;a++){var d=c[a];document.querySelector(b).removeChild(d)}},2e3)}function setWrapUpSequence(){var b="-ms-transform:translate(0px,0px);opacity:1;",a;a=new KeyframeSequencer(document.getElementById("wrap_up_sequence"));a.addSequence(document.getElementById("finish_text"),[{properties:"-ms-animation-timing-function:cubic-bezier(0.1, 0.9, 0.2, 1);opacity:0;-ms-transform:translate(0px,0px);",duration:0},{properties:b,duration:1},{properties:b,duration:2},{properties:"-ms-transform:translate(0px,0px);opacity:0;",duration:1}],"1s");a.addSequence(document.getElementById("black_panel"),[{properties:"-ms-animation-timing-function:linear;opacity:0;",duration:0},{properties:"opacity:1;",duration:1}],"0s");return a}function setUserColor(d,e){for(var c=document.getElementsByClassName("user_color1"),b=0;b<c.length;b++){var a=c[b];if(a.attributes.fill)a.attributes.fill.value=d;else a.style.backgroundColor=d}for(var c=document.getElementsByClassName("user_color2"),b=0;b<c.length;b++){var a=c[b];if(a.attributes.fill)a.attributes.fill.value=e;else a.style.backgroundColor=e}}function setItemText(b,a){document.getElementById(b).innerHTML=a}function setAriaLabel(b,a){document.getElementById(b).setAttribute("aria-label",a)} </script> <style type="text/css"> body { overflow: hidden; -ms-content-zooming: none; -ms-high-contrast-adjust: none; } .instruction_text, .instruction_text_small, .final_text, .final_text_small { font-family: "Segoe UI Light"; font-size: 42pt; text-align: center; position: absolute; top: 0px; left: 0px; } .instruction_text_small { font-size: 20pt; position: absolute; } .final_text_small { font-size: 20pt; position: absolute; } .final_text_small { } #playback_canvas, #playback_canvas_rtl, #trythislater_overlay_canvas, .sequence { visibility: hidden; position: absolute; } #end_sequence_canvas, #pre_end_sequence, #end_sequence, #drape, .fullscreen_color { position: absolute; top: 0px; left: 0px; } .scene { position: absolute; } .scene-part { position: absolute; left: 0px; top: 0px; } .final_text { position: absolute; top: 0px; left: 0px; } body { color: #fff; background-color: #000; } .asset { position: absolute; top: 60px; } </style> </head> <body> <div id="container"> <div id="trythislater_overlay_canvas"> <div id="trythislater_sequence" class="scene sequence"> <div id="trythislater_intro_text" class="scene-part instruction_text_small"> [ ] </div> </div> </div> <div id="playback_canvas"> <div id="touch_sequence" class="scene sequence"> <div id="touch_intro_text" class="scene-part instruction_text"> [After your PC is ready] </div> <div id="touch_instruction_text" class="scene-part instruction_text"> [Swipe in from any edge] </div> <div id="touch_animation_group"> <div id="touch_screen" class="scene-part"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="575px" height="390px" viewbox="-102 -54 575 390" enable-background="new -102 -54 575 390" xml:space="preserve"> <defs></defs> <rect class="user_color1" fill="#011a37" width="378" height="213" /> </svg> </div> <div style="height: 300px; width: 479px; overflow: hidden" class="scene-part"> <div id="touch_charms" class="scene-part"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="575px" height="390px" viewbox="-445 -55 575 390" enable-background="new -445 -55 575 390" xml:space="preserve"> <defs></defs> <rect fill="#1A1A1A" width="35" height="212" /> <path fill="#FFFFFF" d="M19.742,19.162c-3.059,0-5.538,2.479-5.538,5.538c0,1.297,0.45,2.488,1.197,3.432l-0.533,0.533 c-0.375,0.025-0.755,0.185-1.012,0.441l-3.94,3.942c-0.237,0.238-0.405,0.584-0.446,0.929c-0.051,0.405,0.071,0.777,0.343,1.048 c0.231,0.231,0.533,0.354,0.873,0.354c0.399,0,0.822-0.176,1.104-0.458l3.941-3.941c0.248-0.248,0.41-0.599,0.443-0.963 c0.003-0.033-0.001-0.065,0-0.098l0.569-0.569c0.864,0.559,1.892,0.887,2.998,0.887c3.059,0,5.538-2.48,5.538-5.538 C25.28,21.642,22.801,19.162,19.742,19.162z M19.742,28.656c-2.186,0-3.956-1.771-3.956-3.956c0-2.185,1.771-3.956,3.956-3.956 s3.956,1.771,3.956,3.956C23.698,26.885,21.928,28.656,19.742,28.656z" /> <g> <path fill="#FFFFFF" d="M9.458,144.472c0-0.825,0.675-1.5,1.5-1.5h4.119c0.825,0,1.5,0.675,1.5,1.5v2.143 c0,0.825-0.675,1.5-1.5,1.5h-4.119c-0.825,0-1.5-0.675-1.5-1.5V144.472z" /> </g> <path fill="#FFFFFF" d="M21.127,139.411h-5.735c-2.77,0-3.165,1.979-3.165,1.979h8.702c0.981,0,1.978,0.996,1.978,1.978v4.351 c0,0.982-0.996,1.979-1.978,1.979h-8.702c0,0,0.396,1.978,3.165,1.978h5.735c2.175,0,3.758-1.978,3.758-3.956v-4.351 C24.885,141.39,23.302,139.411,21.127,139.411z" /> <path fill="#FFFFFF" d="M24.639,187.013l-1.227-0.508c-0.202-0.084-0.362-0.188-0.355-0.23s0.026-0.256,0.044-0.475l0.002-1.008 c-0.018-0.219-0.037-0.434-0.043-0.476c-0.007-0.043,0.153-0.147,0.355-0.23l1.223-0.507c0.203-0.083,0.301-0.317,0.216-0.521 l-0.609-1.473c-0.084-0.203-0.318-0.3-0.521-0.217l-1.224,0.508c-0.203,0.084-0.389,0.124-0.414,0.089 c-0.026-0.035-0.163-0.199-0.307-0.366l-0.715-0.713c-0.166-0.143-0.331-0.279-0.366-0.305s0.005-0.211,0.089-0.414l0.508-1.227 c0.084-0.202-0.014-0.437-0.216-0.521l-1.473-0.609c-0.202-0.083-0.437,0.013-0.521,0.217l-0.508,1.227 c-0.084,0.201-0.188,0.361-0.23,0.355c-0.043-0.007-0.256-0.034-0.474-0.061c0,0-0.212-0.025-0.515-0.025 c-0.299,0-0.498,0.023-0.498,0.023c-0.217,0.025-0.431,0.053-0.473,0.06c-0.043,0.007-0.146-0.153-0.229-0.356l-0.508-1.223 c-0.084-0.204-0.317-0.3-0.521-0.217l-1.473,0.609c-0.202,0.085-0.3,0.319-0.216,0.521l0.507,1.224 c0.084,0.202,0.124,0.39,0.089,0.414c-0.034,0.026-0.199,0.163-0.366,0.306l-0.713,0.715c-0.142,0.167-0.279,0.332-0.304,0.367 c-0.026,0.035-0.212-0.005-0.415-0.09l-1.226-0.508c-0.202-0.083-0.437,0.014-0.521,0.217l-0.61,1.473 c-0.084,0.202,0.013,0.438,0.216,0.521l1.227,0.508c0.202,0.084,0.361,0.188,0.355,0.23c-0.008,0.042-0.027,0.257-0.045,0.475 l-0.001,1.01c0.017,0.218,0.036,0.433,0.043,0.475c0.007,0.043-0.153,0.146-0.356,0.23l-1.223,0.506 c-0.203,0.085-0.3,0.318-0.216,0.521l0.609,1.473c0.084,0.203,0.318,0.299,0.521,0.216l1.224-0.508 c0.203-0.083,0.389-0.124,0.414-0.089c0.026,0.035,0.163,0.199,0.306,0.366l0.715,0.714c0.167,0.142,0.332,0.278,0.367,0.304 c0.034,0.025-0.005,0.212-0.089,0.415l-0.508,1.226c-0.084,0.203,0.014,0.438,0.216,0.521l1.473,0.609 c0.203,0.085,0.437-0.013,0.521-0.215l0.508-1.227c0.084-0.202,0.188-0.362,0.23-0.355c0.043,0.008,0.256,0.034,0.474,0.06 c0,0,0.212,0.025,0.516,0.025c0.298,0,0.497-0.023,0.497-0.023c0.218-0.025,0.431-0.051,0.474-0.058 c0.042-0.008,0.146,0.152,0.229,0.355l0.507,1.224c0.084,0.202,0.318,0.299,0.521,0.215l1.473-0.61 c0.202-0.083,0.3-0.317,0.216-0.521l-0.507-1.223c-0.083-0.203-0.124-0.39-0.089-0.414c0.035-0.026,0.199-0.163,0.366-0.307 l0.713-0.715c0.142-0.167,0.279-0.332,0.305-0.366c0.025-0.036,0.212,0.004,0.414,0.088l1.227,0.508 c0.202,0.084,0.437-0.012,0.521-0.215l0.61-1.473C24.938,187.331,24.841,187.098,24.639,187.013z M17.369,189.251 c-2.186,0-3.956-1.771-3.956-3.954c0-2.186,1.771-3.956,3.956-3.956c2.184,0,3.955,1.771,3.955,3.956 C21.324,187.48,19.553,189.251,17.369,189.251z" /> <path fill="#FFFFFF" d="M9.443,64.942c-0.921,0.926-0.921,2.432,0,3.358c0.434,0.437,0.996,0.66,1.566,0.685 c0.952,2.925,3.617,5.072,6.803,5.232c-0.267-0.506-0.408-1.073-0.408-1.663c0-0.02,0.002-0.039,0.002-0.059 c-2.266-0.304-4.124-1.908-4.815-4.038c0.063-0.053,0.131-0.098,0.191-0.158c0.92-0.926,0.92-2.432,0-3.358 C11.861,64.017,10.363,64.017,9.443,64.942z" /> <path fill="#FFFFFF" d="M23.446,63.206c-0.087,0.089-0.18,0.171-0.273,0.249c0.578,0.917,0.918,2.002,0.918,3.167 c0,1.596-0.632,3.042-1.654,4.11c-0.926-0.767-2.296-0.726-3.161,0.145c-0.921,0.926-0.921,2.432,0,3.358 c0.92,0.926,2.418,0.926,3.338,0c0.538-0.542,0.752-1.279,0.661-1.984c1.525-1.394,2.487-3.398,2.487-5.629 c0-1.723-0.575-3.311-1.539-4.588C24.047,62.467,23.786,62.865,23.446,63.206z" /> <path fill="#FFFFFF" d="M19.275,59.009c-0.023,0.024-0.04,0.052-0.063,0.077c-0.335-0.046-0.674-0.079-1.021-0.079 c-2.903,0-5.419,1.659-6.686,4.079c0.555,0.062,1.098,0.254,1.578,0.578c1.021-1.776,2.925-2.976,5.107-2.976 c0.133,0,0.265,0.006,0.395,0.017c0.004,0.602,0.233,1.203,0.689,1.662c0.92,0.926,2.418,0.926,3.338,0 c0.921-0.926,0.921-2.432,0-3.358C21.693,58.083,20.195,58.083,19.275,59.009z" /> <path class="user_color2" fill="#038dff" d="M17.119,105.642h9.197v-8.063l-9.197,1.285V105.642z M17.119,106.519v6.783l9.197,1.283v-8.066H17.119z M9.309,105.642v-5.688l6.934-0.969v6.656H9.309z M16.242,106.519H9.309v5.691l6.934,0.969V106.519z" /> </svg> </div> </div> <div id="touch_frame" class="scene-part"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="575px" height="390px" viewbox="-79.759 -33.5 575 390" enable-background="new -79.759 -33.5 575 390" xml:space="preserve"> <defs></defs> <path fill="#FFFFFF" d="M400.241,234.178H21.481V20.52h378.76V234.178z M22.481,233.178h376.76V21.52H22.481V233.178z" /> <rect x="1" y="1" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" stroke-miterlimit="10" width="419.648" height="253.557" /> </svg> </div> <div id="frame_button" class="scene-part"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="575px" height="390px" viewbox="-285 -271.5 575 390" xml:space="preserve"> <defs></defs> <polygon fill="#FFF" points="6,6.338 6,10.84 13,11.676 13,6.338 " /> <polygon fill="#FFF" points="5,6.338 0,6.338 0,10.094 5,10.721 " /> <polygon fill="#FFF" points="6,5.338 6,0.836 13,0 13,5.338 " /> <polygon fill="#FFF" points="5,5.338 0,5.338 0,1.582 5,0.955 " /> </svg> </div> <div style="height: 300px; width: 479px; overflow: hidden" class="scene-part"> <div id="touch_arrow" class="scene-part"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="575px" height="390px" viewbox="-376.504 -143.21 575 390" enable-background="new -376.504 -143.21 575 390" xml:space="preserve"> <defs></defs> <path fill="#FFFFFF" d="M59.763,21.018h-9.956v-7.467h9.956V21.018z M44.387,21.018h-9.956v-7.467h9.956V21.018z" /> <polygon fill="#FFFFFF" points="27.69,0 17.297,0 0,17.29 17.297,34.579 27.69,34.579 14.001,20.896 29.119,20.896 29.119,13.67 14.021,13.67 " /> <path fill="#FFFFFF" d="M90.433,21.018h-9.956v-7.467h9.956V21.018z M75.057,21.018h-9.956v-7.467h9.956V21.018z" /> <path fill="#FFFFFF" d="M121.102,21.018h-9.956v-7.467h9.956V21.018z M105.726,21.018h-9.956v-7.467h9.956V21.018z" /> </svg> </div> </div> <div id="hands" class="scene-part"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="575px" height="390px" viewbox="-4.976 -113.451 575 390" enable-background="new -4.976 -113.451 575 390" xml:space="preserve"> <path d="M496.024,19.549v72.069l-30.102,34.931c-1.407,16-1.682,33.403,1.741,49.602c3.022,14.428,8.02,26.848,13.698,32.742 c6.488,6.748,9.422,39.656,10.488,54.656h74.021c-0.312-12-1.047-35.613-2.039-43.97c-0.259-2.19-2.952-96.882-3.705-121.907 c-0.938-30.604-28.978-52.228-38.013-60.119c0,0-12.9-11.227-24.244-17.514"/> <path fill="#FFFFFF" d="M466.688,176.107c3.197,15.257,8.284,27.384,13.956,33.271c4.412,4.586,8.137,24.296,10.215,54.074 l1.993-0.14c-1.515-21.707-4.61-48.924-10.767-55.322c-5.341-5.54-10.363-17.613-13.44-32.295 c-2.008-9.502-2.729-19.318-2.704-29.146c-0.667,0-1.333,0-2,0C463.912,156.496,464.647,166.449,466.688,176.107z"/> <path fill="#FFFFFF" d="M496.936,20.652l0.456,0.252c11.118,6.163,23.945,17.271,24.073,17.383c0.653,0.571,1.41,1.216,2.248,1.931 c10.343,8.826,34.563,29.495,35.42,57.443c0.193,6.447,0.52,17.518,0.896,30.438c1.381,47.346,2.635,89.971,2.814,91.514 c1.073,9.029,1.828,35.804,2.035,43.795l1.997-0.051c-0.204-8.017-0.963-34.866-2.047-43.979 c-0.188-1.661-1.762-55.626-2.805-91.336c-0.377-12.921-0.699-23.993-0.896-30.441c-0.884-28.833-25.577-49.905-36.121-58.904 c-0.831-0.709-1.581-1.349-2.229-1.917c-0.131-0.113-12.77-11.059-23.963-17.369l-1.779-1.003"/> <path d="M69.476,15.3l-7.231,70.323c0,0-4.301,1.67-6.64,5.47"/> <path d="M75.023,263.383c0,0,1.828-45.699,10.49-54.699c5.679-5.894,10.674-18.354,13.698-32.783 c5.292-25.041,1.767-52.412-1.164-75.972C96.8,89.888,96.096,15.3,96.096,15.3C96.075,7.405,90.156,1,82.791,1 c-7.345,0-13.294,6.405-13.294,14.3l-0.495,4.729c-11.343,6.287-24.245,17.503-24.245,17.503 C35.722,45.423,7.683,67.027,6.746,97.631c-0.753,25.025-3.447,119.674-3.705,121.865C1.644,231.08,1,263.383,1,263.383"/> <path d="M75.023,263.383c1.067-15.297,3.999-47.951,10.49-54.699c5.679-5.894,10.674-18.354,13.698-32.783 c5.292-25.041,1.767-52.412-1.164-75.972C96.8,89.888,96.096,15.3,96.096,15.3C96.075,7.405,90.156,1,82.791,1 c-7.345,0-12.887,6.21-13.294,14.3l-0.495,4.729c-11.343,6.287-24.245,17.503-24.245,17.503 C35.722,45.423,7.683,67.027,6.746,97.631c-0.753,25.025-3.447,119.674-3.705,121.865C2.047,227.852,1.312,251.279,1,263.383"/> <path d="M69.476,15.3l-7.231,70.323c0,0-4.301,1.67-6.64,5.47"/> <path d="M69.476,15.3l-7.231,70.323c0,0-4.301,1.67-6.64,5.47"/> <path fill="#C1272D" d="M56.457,91.618l-1.703-1.049c1.99-3.233,5.241-5.009,6.556-5.627l7.172-69.744l1.989,0.205l-7.294,70.929 l-0.569,0.223C62.568,86.57,58.583,88.163,56.457,91.618z"/> <path d="M75.023,263.383c0,0,1.828-45.699,10.49-54.699c5.679-5.894,10.674-18.354,13.698-32.783 c5.292-25.041,1.767-52.412-1.164-75.972C96.8,89.888,96.096,15.3,96.096,15.3C96.075,7.405,90.156,1,82.791,1 c-7.345,0-13.294,6.405-13.294,14.3l-0.495,4.729c-11.343,6.287-24.245,17.503-24.245,17.503 C35.722,45.423,7.683,67.027,6.746,97.631c-0.753,25.025-3.447,119.674-3.705,121.865C1.644,231.08,1,263.383,1,263.383"/> <path fill="#C1272D" d="M76.022,263.423l-1.998-0.08c0.075-1.882,1.945-46.185,10.77-55.353c5.339-5.54,10.362-17.613,13.439-32.295 c5.185-24.534,1.869-51.17-1.057-74.67l-0.121-0.973c-1.24-9.983-1.93-81.695-1.959-84.743C95.077,7.968,89.557,2,82.791,2 c-6.779,0-12.294,5.966-12.294,13.3l-0.005,0.104l-0.55,5.248l-0.456,0.252c-11.118,6.163-23.944,17.271-24.072,17.383 c-0.654,0.571-1.41,1.216-2.248,1.931C32.822,49.044,8.601,69.713,7.745,97.662c-0.194,6.447-0.518,17.518-0.895,30.438 c-1.381,47.346-2.636,89.97-2.816,91.514C2.658,231.02,2.006,263.08,2,263.402l-2-0.039c0.007-0.324,0.661-32.486,2.048-43.987 c0.188-1.659,1.762-55.624,2.804-91.334c0.377-12.921,0.7-23.993,0.895-30.441c0.883-28.833,25.577-49.905,36.121-58.904 c0.832-0.709,1.58-1.349,2.231-1.917c0.13-0.113,12.768-11.059,23.962-17.369l0.437-4.163C68.523,6.834,74.925,0,82.791,0 s14.283,6.862,14.305,15.298c0.007,0.738,0.718,74.638,1.943,84.508l0.121,0.973c2.944,23.656,6.282,50.468,1.028,75.329 c-3.196,15.257-8.284,27.384-13.956,33.271C77.931,218.004,76.04,262.971,76.022,263.423z"/> <path fill="#FFFFFF" d="M76.021,263.452l-1.995-0.14c1.516-21.707,4.612-48.924,10.768-55.322 c5.339-5.54,10.362-17.613,13.439-32.295c5.185-24.534,1.869-51.17-1.057-74.67l-0.121-0.973c-1.24-9.983-1.93-81.695-1.959-84.743 C95.077,7.968,89.557,2,82.791,2c-6.734,0-11.905,5.615-12.296,13.351l-0.554,5.301l-0.456,0.252 c-11.118,6.163-23.944,17.271-24.072,17.383c-0.654,0.571-1.41,1.216-2.248,1.931C32.822,49.044,8.601,69.713,7.745,97.662 c-0.194,6.447-0.518,17.518-0.895,30.438c-1.381,47.346-2.636,89.97-2.816,91.514C2.96,228.643,2.206,255.417,2,263.408l-2-0.051 c0.206-8.017,0.963-34.866,2.047-43.979c0.188-1.661,1.763-55.626,2.805-91.336c0.377-12.921,0.7-23.993,0.895-30.441 c0.883-28.833,25.577-49.905,36.121-58.904c0.832-0.709,1.58-1.349,2.231-1.917c0.13-0.113,12.768-11.059,23.962-17.369l0.441-4.214 C68.937,6.556,75.082,0,82.791,0c7.866,0,14.283,6.862,14.305,15.298c0.007,0.738,0.718,74.638,1.943,84.508l0.121,0.973 c2.944,23.656,6.282,50.468,1.028,75.329c-3.196,15.257-8.284,27.384-13.956,33.271C81.821,213.964,78.099,233.674,76.021,263.452z" /> <path d="M69.476,15.3l-7.231,70.323c0,0-4.301,1.67-6.64,5.47"/> <path fill="#FFFFFF" d="M61.187,85.053c0,0-8.019,1.297-11.432,7.193c0,0-0.448,0.552-1.066,0.954s-1.311,0.444-1.311,0.444 l1.256,1.435c0,0,0.223-0.162,1.137-0.518s1.714-1.312,1.714-1.312c2.93-5.061,9.87-6.085,9.94-6.095c0,0,1.397-0.471,1.628-0.709 l0.123-0.112l7.294-70.929l-1.989-0.205L61.31,84.942"/> </svg> </div> <div id="thumbs" class="scene-part" style="position: absolute; top: 110px; left: 465px; -ms-transform: rotate(0deg) translate(0px,0px); -ms-transform-origin: 6px 148px;"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="63px" height="169px" viewbox="-3.84 -3.88 63 169" enable-background="new -3.84 -3.88 63 169" xml:space="preserve"> <defs></defs> <g> <path d="M48.75,89.5c0,0,6.433,1.842,8.434,12.515s1.334,6.671-1.833,13.008c0.433-0.276-2.036,2.521-1.638,2.11 c-0.268,12.18-3.443,27.768-14.628,36.416c-18.75,14.5-37.085-7-37.085-7C2.041,131,3.971,115.424,5.763,101.025l0.121-0.973 c1.239-9.984,1.931-81.695,1.959-84.743C7.861,7.968,13.382,2,20.147,2c6.734,0,11.906,5.615,12.298,13.35l0.533,5.116l0.129,1.141 l6.656,64.724l0.567,0.224c0.025,0.009,2.211-0.054,4.367,0.742L48.75,89.5z"/> </g> <path fill="#FFFFFF" d="M51.33,93.136c-2.93-5.061-9.87-6.085-9.94-6.095c0,0-1.397-0.471-1.628-0.709l-6.656-64.724l-0.129-1.141 l-0.533-5.116C32.052,7.615,26.88,2,20.147,2C13.382,2,7.861,7.968,7.843,15.308c-0.028,3.048-0.72,74.76-1.959,84.743l-0.121,0.975 C3.971,115.424,2.041,131,2,146.549c-0.672,0-1.339,0-2,0c0.04-15.658,1.978-31.305,3.779-45.769L3.9,99.807 c1.225-9.871,1.936-83.771,1.943-84.509C5.865,6.862,12.281,0,20.147,0c7.709,0,13.855,6.556,14.291,15.196l0.439,4.214l0.225,2.046 l6.527,63.485l0.038,0.12c0.324,0.045,7.98,1.178,11.394,7.073l2.377,0.397v2.094c0,0-1.185-0.054-2.099-0.41 S51.33,93.136,51.33,93.136z"/> </svg> </div> </div> </div> <div id="mouse_sequence" class="scene sequence"> <div id="mouse_intro_text" class="scene-part instruction_text"> [After your PC is ready] </div> <div id="mouse_instruction_text" class="scene-part instruction_text"> [With mouse, go to corners] </div> <div id="Div1"> <div id="mouse_screen" class="scene-part"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="564px" height="390px" viewbox="-96.322 -53.976 564 390" enable-background="new -96.322 -53.976 564 390" xml:space="preserve"> <defs></defs> <rect class="user_color1" fill="#011a37" width="377.687" height="212.444" /> </svg> </div> <div style="height: 300px; width: 475px; overflow: hidden" class="scene-part"> <div id="mouse_charms" class="scene-part"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="575px" height="390px" viewbox="-438 -55 575 390" enable-background="new -445 -55 575 390" xml:space="preserve"> <defs></defs> <rect fill="#1A1A1A" width="35" height="212" /> <path fill="#FFFFFF" d="M19.742,19.162c-3.059,0-5.538,2.479-5.538,5.538c0,1.297,0.45,2.488,1.197,3.432l-0.533,0.533 c-0.375,0.025-0.755,0.185-1.012,0.441l-3.94,3.942c-0.237,0.238-0.405,0.584-0.446,0.929c-0.051,0.405,0.071,0.777,0.343,1.048 c0.231,0.231,0.533,0.354,0.873,0.354c0.399,0,0.822-0.176,1.104-0.458l3.941-3.941c0.248-0.248,0.41-0.599,0.443-0.963 c0.003-0.033-0.001-0.065,0-0.098l0.569-0.569c0.864,0.559,1.892,0.887,2.998,0.887c3.059,0,5.538-2.48,5.538-5.538 C25.28,21.642,22.801,19.162,19.742,19.162z M19.742,28.656c-2.186,0-3.956-1.771-3.956-3.956c0-2.185,1.771-3.956,3.956-3.956 s3.956,1.771,3.956,3.956C23.698,26.885,21.928,28.656,19.742,28.656z" /> <g> <path fill="#FFFFFF" d="M9.458,144.472c0-0.825,0.675-1.5,1.5-1.5h4.119c0.825,0,1.5,0.675,1.5,1.5v2.143 c0,0.825-0.675,1.5-1.5,1.5h-4.119c-0.825,0-1.5-0.675-1.5-1.5V144.472z" /> </g> <path fill="#FFFFFF" d="M21.127,139.411h-5.735c-2.77,0-3.165,1.979-3.165,1.979h8.702c0.981,0,1.978,0.996,1.978,1.978v4.351 c0,0.982-0.996,1.979-1.978,1.979h-8.702c0,0,0.396,1.978,3.165,1.978h5.735c2.175,0,3.758-1.978,3.758-3.956v-4.351 C24.885,141.39,23.302,139.411,21.127,139.411z" /> <path fill="#FFFFFF" d="M24.639,187.013l-1.227-0.508c-0.202-0.084-0.362-0.188-0.355-0.23s0.026-0.256,0.044-0.475l0.002-1.008 c-0.018-0.219-0.037-0.434-0.043-0.476c-0.007-0.043,0.153-0.147,0.355-0.23l1.223-0.507c0.203-0.083,0.301-0.317,0.216-0.521 l-0.609-1.473c-0.084-0.203-0.318-0.3-0.521-0.217l-1.224,0.508c-0.203,0.084-0.389,0.124-0.414,0.089 c-0.026-0.035-0.163-0.199-0.307-0.366l-0.715-0.713c-0.166-0.143-0.331-0.279-0.366-0.305s0.005-0.211,0.089-0.414l0.508-1.227 c0.084-0.202-0.014-0.437-0.216-0.521l-1.473-0.609c-0.202-0.083-0.437,0.013-0.521,0.217l-0.508,1.227 c-0.084,0.201-0.188,0.361-0.23,0.355c-0.043-0.007-0.256-0.034-0.474-0.061c0,0-0.212-0.025-0.515-0.025 c-0.299,0-0.498,0.023-0.498,0.023c-0.217,0.025-0.431,0.053-0.473,0.06c-0.043,0.007-0.146-0.153-0.229-0.356l-0.508-1.223 c-0.084-0.204-0.317-0.3-0.521-0.217l-1.473,0.609c-0.202,0.085-0.3,0.319-0.216,0.521l0.507,1.224 c0.084,0.202,0.124,0.39,0.089,0.414c-0.034,0.026-0.199,0.163-0.366,0.306l-0.713,0.715c-0.142,0.167-0.279,0.332-0.304,0.367 c-0.026,0.035-0.212-0.005-0.415-0.09l-1.226-0.508c-0.202-0.083-0.437,0.014-0.521,0.217l-0.61,1.473 c-0.084,0.202,0.013,0.438,0.216,0.521l1.227,0.508c0.202,0.084,0.361,0.188,0.355,0.23c-0.008,0.042-0.027,0.257-0.045,0.475 l-0.001,1.01c0.017,0.218,0.036,0.433,0.043,0.475c0.007,0.043-0.153,0.146-0.356,0.23l-1.223,0.506 c-0.203,0.085-0.3,0.318-0.216,0.521l0.609,1.473c0.084,0.203,0.318,0.299,0.521,0.216l1.224-0.508 c0.203-0.083,0.389-0.124,0.414-0.089c0.026,0.035,0.163,0.199,0.306,0.366l0.715,0.714c0.167,0.142,0.332,0.278,0.367,0.304 c0.034,0.025-0.005,0.212-0.089,0.415l-0.508,1.226c-0.084,0.203,0.014,0.438,0.216,0.521l1.473,0.609 c0.203,0.085,0.437-0.013,0.521-0.215l0.508-1.227c0.084-0.202,0.188-0.362,0.23-0.355c0.043,0.008,0.256,0.034,0.474,0.06 c0,0,0.212,0.025,0.516,0.025c0.298,0,0.497-0.023,0.497-0.023c0.218-0.025,0.431-0.051,0.474-0.058 c0.042-0.008,0.146,0.152,0.229,0.355l0.507,1.224c0.084,0.202,0.318,0.299,0.521,0.215l1.473-0.61 c0.202-0.083,0.3-0.317,0.216-0.521l-0.507-1.223c-0.083-0.203-0.124-0.39-0.089-0.414c0.035-0.026,0.199-0.163,0.366-0.307 l0.713-0.715c0.142-0.167,0.279-0.332,0.305-0.366c0.025-0.036,0.212,0.004,0.414,0.088l1.227,0.508 c0.202,0.084,0.437-0.012,0.521-0.215l0.61-1.473C24.938,187.331,24.841,187.098,24.639,187.013z M17.369,189.251 c-2.186,0-3.956-1.771-3.956-3.954c0-2.186,1.771-3.956,3.956-3.956c2.184,0,3.955,1.771,3.955,3.956 C21.324,187.48,19.553,189.251,17.369,189.251z" /> <path fill="#FFFFFF" d="M9.443,64.942c-0.921,0.926-0.921,2.432,0,3.358c0.434,0.437,0.996,0.66,1.566,0.685 c0.952,2.925,3.617,5.072,6.803,5.232c-0.267-0.506-0.408-1.073-0.408-1.663c0-0.02,0.002-0.039,0.002-0.059 c-2.266-0.304-4.124-1.908-4.815-4.038c0.063-0.053,0.131-0.098,0.191-0.158c0.92-0.926,0.92-2.432,0-3.358 C11.861,64.017,10.363,64.017,9.443,64.942z" /> <path fill="#FFFFFF" d="M23.446,63.206c-0.087,0.089-0.18,0.171-0.273,0.249c0.578,0.917,0.918,2.002,0.918,3.167 c0,1.596-0.632,3.042-1.654,4.11c-0.926-0.767-2.296-0.726-3.161,0.145c-0.921,0.926-0.921,2.432,0,3.358 c0.92,0.926,2.418,0.926,3.338,0c0.538-0.542,0.752-1.279,0.661-1.984c1.525-1.394,2.487-3.398,2.487-5.629 c0-1.723-0.575-3.311-1.539-4.588C24.047,62.467,23.786,62.865,23.446,63.206z" /> <path fill="#FFFFFF" d="M19.275,59.009c-0.023,0.024-0.04,0.052-0.063,0.077c-0.335-0.046-0.674-0.079-1.021-0.079 c-2.903,0-5.419,1.659-6.686,4.079c0.555,0.062,1.098,0.254,1.578,0.578c1.021-1.776,2.925-2.976,5.107-2.976 c0.133,0,0.265,0.006,0.395,0.017c0.004,0.602,0.233,1.203,0.689,1.662c0.92,0.926,2.418,0.926,3.338,0 c0.921-0.926,0.921-2.432,0-3.358C21.693,58.083,20.195,58.083,19.275,59.009z" /> <path class="user_color2" fill="#038dff" d="M17.119,105.642h9.197v-8.063l-9.197,1.285V105.642z M17.119,106.519v6.783l9.197,1.283v-8.066H17.119z M9.309,105.642v-5.688l6.934-0.969v6.656H9.309z M16.242,106.519H9.309v5.691l6.934,0.969V106.519z" /> </svg> </div> </div> <div style="height: 300px; width: 476px; overflow: hidden" class="scene-part"> <div id="mouse_arrow" class="scene-part"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="564px" height="390px" viewbox="-415.224 -53.976 564 390" enable-background="new -415.224 -53.976 564 390" xml:space="preserve"> <defs></defs> <polygon fill="#FFFFFF" points="22.982,30.45 28.344,35.818 36.006,28.162 30.643,22.789 " /> <polygon fill="#FFFFFF" points="11.49,41.941 16.854,47.309 24.514,39.653 19.152,34.28 " /> <polygon fill="#FFFFFF" points="0,53.433 5.361,58.801 13.023,51.145 7.66,45.772 " /> <polygon fill="#FFFFFF" points="33.094,0 25.373,7.723 45.709,7.723 34.473,18.954 39.846,24.321 51.063,13.101 51.063,33.412 58.785,25.69 58.785,0 " /> </svg> </div> </div> <div style="height: 300px; width: 475px; overflow: hidden" class="scene-part"> <div id="cursor" class="scene-part"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="564px" height="390px" viewbox="-405.441 -116.311 564 390" enable-background="new -405.441 -116.311 564 390" xml:space="preserve"> <defs></defs> <polyline class="user_color1" fill="#011a37" points="1.001,2.369 48.793,48.86 27.101,48.837 25.598,48.835 26.177,50.222 38.88,80.641 30.311,84.195 17.675,53.85 17.091,52.447 16.034,53.539 1.04,69.023 1.001,2.369 " /> <path fill="#FFFFFF" d="M1.001,2.369L48.793,48.86l-21.692-0.023l-1.503-0.001l0.579,1.387L38.88,80.641l-8.57,3.554L17.675,53.85 l-0.584-1.403l-1.057,1.092L1.04,69.023L1.001,2.369 M0,0l0.041,71.492l16.711-17.258l13.02,31.267l10.418-4.321L27.1,49.837 l24.158,0.026L0,0L0,0z" /> </svg> </div> </div> <div id="mouse_frame" class="scene-part"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="564px" height="390px" viewbox="-74.341 -32 564 390" enable-background="new -74.341 -32 564 390" xml:space="preserve"> <defs></defs> <path fill="#FFFFFF" d="M420.648,256.411H1c-0.552,0-1-0.447-1-1V1c0-0.552,0.448-1,1-1h419.648c0.553,0,1,0.448,1,1v254.411 C421.648,255.964,421.201,256.411,420.648,256.411z M419.648,2H2v252.411h417.648" /> <path fill="#FFFFFF" d="M400.168,234.92H21.481V21.476h378.687V234.92z M399.168,22.476H22.481V233.92h376.687" /> <path fill="#FFFFFF" d="M257.051,255.411h2v42.939l67.524,9.36c0.494,0.068,0.863,0.491,0.862,0.991l-0.01,9.652 c-0.001,0.552-0.448,0.999-1,0.999H95.209c-0.552,0-1-0.447-1-1v-9.652c0-0.499,0.368-0.922,0.863-0.99l67.468-9.36v-42.939h2 v43.811c0,0.499-0.368,0.922-0.863,0.99l-67.468,9.36v7.781h229.219l0.008-7.781l-67.523-9.36c-0.494-0.068-0.862-0.491-0.862-0.99" /> </svg> </div> </div> </div> </div> <div id="playback_canvas_rtl"> <div id="touch_sequence" class="scene sequence"> <div id="touch_intro_text" class="scene-part instruction_text"> [After your PC is ready] </div> <div id="touch_instruction_text" class="scene-part instruction_text"> [With touch, swipe in from any edge] </div> <div id="touch_animation_group"> <div id="touch_screen" class="scene-part"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="575px" height="390px" viewbox="-102 -54 575 390" enable-background="new -102 -54 575 390" xml:space="preserve"> <defs></defs> <rect class="user_color1" fill="#011a37" width="378" height="213" /> </svg> </div> <div style="height: 300px; width: 279px; overflow: hidden; left: 102px" class="scene-part"> <div id="touch_charms" class="scene-part" style="position: absolute; left: -445px"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="575px" height="390px" viewbox="-445 -55 575 390" enable-background="new -445 -55 575 390" xml:space="preserve"> <defs></defs> <rect fill="#1A1A1A" width="35" height="212" /> <path fill="#FFFFFF" d="M19.742,19.162c-3.059,0-5.538,2.479-5.538,5.538c0,1.297,0.45,2.488,1.197,3.432l-0.533,0.533 c-0.375,0.025-0.755,0.185-1.012,0.441l-3.94,3.942c-0.237,0.238-0.405,0.584-0.446,0.929c-0.051,0.405,0.071,0.777,0.343,1.048 c0.231,0.231,0.533,0.354,0.873,0.354c0.399,0,0.822-0.176,1.104-0.458l3.941-3.941c0.248-0.248,0.41-0.599,0.443-0.963 c0.003-0.033-0.001-0.065,0-0.098l0.569-0.569c0.864,0.559,1.892,0.887,2.998,0.887c3.059,0,5.538-2.48,5.538-5.538 C25.28,21.642,22.801,19.162,19.742,19.162z M19.742,28.656c-2.186,0-3.956-1.771-3.956-3.956c0-2.185,1.771-3.956,3.956-3.956 s3.956,1.771,3.956,3.956C23.698,26.885,21.928,28.656,19.742,28.656z" /> <g> <path fill="#FFFFFF" d="M9.458,144.472c0-0.825,0.675-1.5,1.5-1.5h4.119c0.825,0,1.5,0.675,1.5,1.5v2.143 c0,0.825-0.675,1.5-1.5,1.5h-4.119c-0.825,0-1.5-0.675-1.5-1.5V144.472z" /> </g> <path fill="#FFFFFF" d="M21.127,139.411h-5.735c-2.77,0-3.165,1.979-3.165,1.979h8.702c0.981,0,1.978,0.996,1.978,1.978v4.351 c0,0.982-0.996,1.979-1.978,1.979h-8.702c0,0,0.396,1.978,3.165,1.978h5.735c2.175,0,3.758-1.978,3.758-3.956v-4.351 C24.885,141.39,23.302,139.411,21.127,139.411z" /> <path fill="#FFFFFF" d="M24.639,187.013l-1.227-0.508c-0.202-0.084-0.362-0.188-0.355-0.23s0.026-0.256,0.044-0.475l0.002-1.008 c-0.018-0.219-0.037-0.434-0.043-0.476c-0.007-0.043,0.153-0.147,0.355-0.23l1.223-0.507c0.203-0.083,0.301-0.317,0.216-0.521 l-0.609-1.473c-0.084-0.203-0.318-0.3-0.521-0.217l-1.224,0.508c-0.203,0.084-0.389,0.124-0.414,0.089 c-0.026-0.035-0.163-0.199-0.307-0.366l-0.715-0.713c-0.166-0.143-0.331-0.279-0.366-0.305s0.005-0.211,0.089-0.414l0.508-1.227 c0.084-0.202-0.014-0.437-0.216-0.521l-1.473-0.609c-0.202-0.083-0.437,0.013-0.521,0.217l-0.508,1.227 c-0.084,0.201-0.188,0.361-0.23,0.355c-0.043-0.007-0.256-0.034-0.474-0.061c0,0-0.212-0.025-0.515-0.025 c-0.299,0-0.498,0.023-0.498,0.023c-0.217,0.025-0.431,0.053-0.473,0.06c-0.043,0.007-0.146-0.153-0.229-0.356l-0.508-1.223 c-0.084-0.204-0.317-0.3-0.521-0.217l-1.473,0.609c-0.202,0.085-0.3,0.319-0.216,0.521l0.507,1.224 c0.084,0.202,0.124,0.39,0.089,0.414c-0.034,0.026-0.199,0.163-0.366,0.306l-0.713,0.715c-0.142,0.167-0.279,0.332-0.304,0.367 c-0.026,0.035-0.212-0.005-0.415-0.09l-1.226-0.508c-0.202-0.083-0.437,0.014-0.521,0.217l-0.61,1.473 c-0.084,0.202,0.013,0.438,0.216,0.521l1.227,0.508c0.202,0.084,0.361,0.188,0.355,0.23c-0.008,0.042-0.027,0.257-0.045,0.475 l-0.001,1.01c0.017,0.218,0.036,0.433,0.043,0.475c0.007,0.043-0.153,0.146-0.356,0.23l-1.223,0.506 c-0.203,0.085-0.3,0.318-0.216,0.521l0.609,1.473c0.084,0.203,0.318,0.299,0.521,0.216l1.224-0.508 c0.203-0.083,0.389-0.124,0.414-0.089c0.026,0.035,0.163,0.199,0.306,0.366l0.715,0.714c0.167,0.142,0.332,0.278,0.367,0.304 c0.034,0.025-0.005,0.212-0.089,0.415l-0.508,1.226c-0.084,0.203,0.014,0.438,0.216,0.521l1.473,0.609 c0.203,0.085,0.437-0.013,0.521-0.215l0.508-1.227c0.084-0.202,0.188-0.362,0.23-0.355c0.043,0.008,0.256,0.034,0.474,0.06 c0,0,0.212,0.025,0.516,0.025c0.298,0,0.497-0.023,0.497-0.023c0.218-0.025,0.431-0.051,0.474-0.058 c0.042-0.008,0.146,0.152,0.229,0.355l0.507,1.224c0.084,0.202,0.318,0.299,0.521,0.215l1.473-0.61 c0.202-0.083,0.3-0.317,0.216-0.521l-0.507-1.223c-0.083-0.203-0.124-0.39-0.089-0.414c0.035-0.026,0.199-0.163,0.366-0.307 l0.713-0.715c0.142-0.167,0.279-0.332,0.305-0.366c0.025-0.036,0.212,0.004,0.414,0.088l1.227,0.508 c0.202,0.084,0.437-0.012,0.521-0.215l0.61-1.473C24.938,187.331,24.841,187.098,24.639,187.013z M17.369,189.251 c-2.186,0-3.956-1.771-3.956-3.954c0-2.186,1.771-3.956,3.956-3.956c2.184,0,3.955,1.771,3.955,3.956 C21.324,187.48,19.553,189.251,17.369,189.251z" /> <path fill="#FFFFFF" d="M9.443,64.942c-0.921,0.926-0.921,2.432,0,3.358c0.434,0.437,0.996,0.66,1.566,0.685 c0.952,2.925,3.617,5.072,6.803,5.232c-0.267-0.506-0.408-1.073-0.408-1.663c0-0.02,0.002-0.039,0.002-0.059 c-2.266-0.304-4.124-1.908-4.815-4.038c0.063-0.053,0.131-0.098,0.191-0.158c0.92-0.926,0.92-2.432,0-3.358 C11.861,64.017,10.363,64.017,9.443,64.942z" /> <path fill="#FFFFFF" d="M23.446,63.206c-0.087,0.089-0.18,0.171-0.273,0.249c0.578,0.917,0.918,2.002,0.918,3.167 c0,1.596-0.632,3.042-1.654,4.11c-0.926-0.767-2.296-0.726-3.161,0.145c-0.921,0.926-0.921,2.432,0,3.358 c0.92,0.926,2.418,0.926,3.338,0c0.538-0.542,0.752-1.279,0.661-1.984c1.525-1.394,2.487-3.398,2.487-5.629 c0-1.723-0.575-3.311-1.539-4.588C24.047,62.467,23.786,62.865,23.446,63.206z" /> <path fill="#FFFFFF" d="M19.275,59.009c-0.023,0.024-0.04,0.052-0.063,0.077c-0.335-0.046-0.674-0.079-1.021-0.079 c-2.903,0-5.419,1.659-6.686,4.079c0.555,0.062,1.098,0.254,1.578,0.578c1.021-1.776,2.925-2.976,5.107-2.976 c0.133,0,0.265,0.006,0.395,0.017c0.004,0.602,0.233,1.203,0.689,1.662c0.92,0.926,2.418,0.926,3.338,0 c0.921-0.926,0.921-2.432,0-3.358C21.693,58.083,20.195,58.083,19.275,59.009z" /> <path class="user_color2" fill="#038dff" d="M17.119,105.642h9.197v-8.063l-9.197,1.285V105.642z M17.119,106.519v6.783l9.197,1.283v-8.066H17.119z M9.309,105.642v-5.688l6.934-0.969v6.656H9.309z M16.242,106.519H9.309v5.691l6.934,0.969V106.519z" /> </svg> </div> </div> <div id="touch_frame" class="scene-part"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="575px" height="390px" viewbox="-79.759 -33.5 575 390" enable-background="new -79.759 -33.5 575 390" xml:space="preserve"> <defs></defs> <path fill="#FFFFFF" d="M400.241,234.178H21.481V20.52h378.76V234.178z M22.481,233.178h376.76V21.52H22.481V233.178z" /> <rect x="1" y="1" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" stroke-miterlimit="10" width="419.648" height="253.557" /> </svg> </div> <div id="frame_button" class="scene-part"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="575px" height="390px" viewbox="-285 -271.5 575 390" xml:space="preserve"> <defs></defs> <polygon fill="#FFF" points="6,6.338 6,10.84 13,11.676 13,6.338 " /> <polygon fill="#FFF" points="5,6.338 0,6.338 0,10.094 5,10.721 " /> <polygon fill="#FFF" points="6,5.338 6,0.836 13,0 13,5.338 " /> <polygon fill="#FFF" points="5,5.338 0,5.338 0,1.582 5,0.955 " /> </svg> </div> <div style="height: 300px; width: 279px; overflow: hidden; left: 102px" class="scene-part"> <div id="touch_arrow" class="scene-part" style="-ms-transform: scale(-1,1); left: -94px"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="575px" height="390px" viewbox="-376.504 -143.21 575 390" enable-background="new -376.504 -143.21 575 390" xml:space="preserve"> <defs></defs> <path fill="#FFFFFF" d="M59.763,21.018h-9.956v-7.467h9.956V21.018z M44.387,21.018h-9.956v-7.467h9.956V21.018z" /> <polygon fill="#FFFFFF" points="27.69,0 17.297,0 0,17.29 17.297,34.579 27.69,34.579 14.001,20.896 29.119,20.896 29.119,13.67 14.021,13.67 " /> <path fill="#FFFFFF" d="M90.433,21.018h-9.956v-7.467h9.956V21.018z M75.057,21.018h-9.956v-7.467h9.956V21.018z" /> <path fill="#FFFFFF" d="M121.102,21.018h-9.956v-7.467h9.956V21.018z M105.726,21.018h-9.956v-7.467h9.956V21.018z" /> </svg> </div> </div> <div id="hands" class="scene-part" style='left: 5px; -ms-transform: scale(-1,1)'> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="575px" height="390px" viewbox="-4.976 -113.451 575 390" enable-background="new -4.976 -113.451 575 390" xml:space="preserve"> <path d="M496.024,19.549v72.069l-30.102,34.931c-1.407,16-1.682,33.403,1.741,49.602c3.022,14.428,8.02,26.848,13.698,32.742 c6.488,6.748,9.422,39.656,10.488,54.656h74.021c-0.312-12-1.047-35.613-2.039-43.97c-0.259-2.19-2.952-96.882-3.705-121.907 c-0.938-30.604-28.978-52.228-38.013-60.119c0,0-12.9-11.227-24.244-17.514"/> <path fill="#FFFFFF" d="M466.688,176.107c3.197,15.257,8.284,27.384,13.956,33.271c4.412,4.586,8.137,24.296,10.215,54.074 l1.993-0.14c-1.515-21.707-4.61-48.924-10.767-55.322c-5.341-5.54-10.363-17.613-13.44-32.295 c-2.008-9.502-2.729-19.318-2.704-29.146c-0.667,0-1.333,0-2,0C463.912,156.496,464.647,166.449,466.688,176.107z"/> <path fill="#FFFFFF" d="M496.936,20.652l0.456,0.252c11.118,6.163,23.945,17.271,24.073,17.383c0.653,0.571,1.41,1.216,2.248,1.931 c10.343,8.826,34.563,29.495,35.42,57.443c0.193,6.447,0.52,17.518,0.896,30.438c1.381,47.346,2.635,89.971,2.814,91.514 c1.073,9.029,1.828,35.804,2.035,43.795l1.997-0.051c-0.204-8.017-0.963-34.866-2.047-43.979 c-0.188-1.661-1.762-55.626-2.805-91.336c-0.377-12.921-0.699-23.993-0.896-30.441c-0.884-28.833-25.577-49.905-36.121-58.904 c-0.831-0.709-1.581-1.349-2.229-1.917c-0.131-0.113-12.77-11.059-23.963-17.369l-1.779-1.003"/> <path d="M69.476,15.3l-7.231,70.323c0,0-4.301,1.67-6.64,5.47"/> <path d="M75.023,263.383c0,0,1.828-45.699,10.49-54.699c5.679-5.894,10.674-18.354,13.698-32.783 c5.292-25.041,1.767-52.412-1.164-75.972C96.8,89.888,96.096,15.3,96.096,15.3C96.075,7.405,90.156,1,82.791,1 c-7.345,0-13.294,6.405-13.294,14.3l-0.495,4.729c-11.343,6.287-24.245,17.503-24.245,17.503 C35.722,45.423,7.683,67.027,6.746,97.631c-0.753,25.025-3.447,119.674-3.705,121.865C1.644,231.08,1,263.383,1,263.383"/> <path d="M75.023,263.383c1.067-15.297,3.999-47.951,10.49-54.699c5.679-5.894,10.674-18.354,13.698-32.783 c5.292-25.041,1.767-52.412-1.164-75.972C96.8,89.888,96.096,15.3,96.096,15.3C96.075,7.405,90.156,1,82.791,1 c-7.345,0-12.887,6.21-13.294,14.3l-0.495,4.729c-11.343,6.287-24.245,17.503-24.245,17.503 C35.722,45.423,7.683,67.027,6.746,97.631c-0.753,25.025-3.447,119.674-3.705,121.865C2.047,227.852,1.312,251.279,1,263.383"/> <path d="M69.476,15.3l-7.231,70.323c0,0-4.301,1.67-6.64,5.47"/> <path d="M69.476,15.3l-7.231,70.323c0,0-4.301,1.67-6.64,5.47"/> <path fill="#C1272D" d="M56.457,91.618l-1.703-1.049c1.99-3.233,5.241-5.009,6.556-5.627l7.172-69.744l1.989,0.205l-7.294,70.929 l-0.569,0.223C62.568,86.57,58.583,88.163,56.457,91.618z"/> <path d="M75.023,263.383c0,0,1.828-45.699,10.49-54.699c5.679-5.894,10.674-18.354,13.698-32.783 c5.292-25.041,1.767-52.412-1.164-75.972C96.8,89.888,96.096,15.3,96.096,15.3C96.075,7.405,90.156,1,82.791,1 c-7.345,0-13.294,6.405-13.294,14.3l-0.495,4.729c-11.343,6.287-24.245,17.503-24.245,17.503 C35.722,45.423,7.683,67.027,6.746,97.631c-0.753,25.025-3.447,119.674-3.705,121.865C1.644,231.08,1,263.383,1,263.383"/> <path fill="#C1272D" d="M76.022,263.423l-1.998-0.08c0.075-1.882,1.945-46.185,10.77-55.353c5.339-5.54,10.362-17.613,13.439-32.295 c5.185-24.534,1.869-51.17-1.057-74.67l-0.121-0.973c-1.24-9.983-1.93-81.695-1.959-84.743C95.077,7.968,89.557,2,82.791,2 c-6.779,0-12.294,5.966-12.294,13.3l-0.005,0.104l-0.55,5.248l-0.456,0.252c-11.118,6.163-23.944,17.271-24.072,17.383 c-0.654,0.571-1.41,1.216-2.248,1.931C32.822,49.044,8.601,69.713,7.745,97.662c-0.194,6.447-0.518,17.518-0.895,30.438 c-1.381,47.346-2.636,89.97-2.816,91.514C2.658,231.02,2.006,263.08,2,263.402l-2-0.039c0.007-0.324,0.661-32.486,2.048-43.987 c0.188-1.659,1.762-55.624,2.804-91.334c0.377-12.921,0.7-23.993,0.895-30.441c0.883-28.833,25.577-49.905,36.121-58.904 c0.832-0.709,1.58-1.349,2.231-1.917c0.13-0.113,12.768-11.059,23.962-17.369l0.437-4.163C68.523,6.834,74.925,0,82.791,0 s14.283,6.862,14.305,15.298c0.007,0.738,0.718,74.638,1.943,84.508l0.121,0.973c2.944,23.656,6.282,50.468,1.028,75.329 c-3.196,15.257-8.284,27.384-13.956,33.271C77.931,218.004,76.04,262.971,76.022,263.423z"/> <path fill="#FFFFFF" d="M76.021,263.452l-1.995-0.14c1.516-21.707,4.612-48.924,10.768-55.322 c5.339-5.54,10.362-17.613,13.439-32.295c5.185-24.534,1.869-51.17-1.057-74.67l-0.121-0.973c-1.24-9.983-1.93-81.695-1.959-84.743 C95.077,7.968,89.557,2,82.791,2c-6.734,0-11.905,5.615-12.296,13.351l-0.554,5.301l-0.456,0.252 c-11.118,6.163-23.944,17.271-24.072,17.383c-0.654,0.571-1.41,1.216-2.248,1.931C32.822,49.044,8.601,69.713,7.745,97.662 c-0.194,6.447-0.518,17.518-0.895,30.438c-1.381,47.346-2.636,89.97-2.816,91.514C2.96,228.643,2.206,255.417,2,263.408l-2-0.051 c0.206-8.017,0.963-34.866,2.047-43.979c0.188-1.661,1.763-55.626,2.805-91.336c0.377-12.921,0.7-23.993,0.895-30.441 c0.883-28.833,25.577-49.905,36.121-58.904c0.832-0.709,1.58-1.349,2.231-1.917c0.13-0.113,12.768-11.059,23.962-17.369l0.441-4.214 C68.937,6.556,75.082,0,82.791,0c7.866,0,14.283,6.862,14.305,15.298c0.007,0.738,0.718,74.638,1.943,84.508l0.121,0.973 c2.944,23.656,6.282,50.468,1.028,75.329c-3.196,15.257-8.284,27.384-13.956,33.271C81.821,213.964,78.099,233.674,76.021,263.452z" /> <path d="M69.476,15.3l-7.231,70.323c0,0-4.301,1.67-6.64,5.47"/> <path fill="#FFFFFF" d="M61.187,85.053c0,0-8.019,1.297-11.432,7.193c0,0-0.448,0.552-1.066,0.954s-1.311,0.444-1.311,0.444 l1.256,1.435c0,0,0.223-0.162,1.137-0.518s1.714-1.312,1.714-1.312c2.93-5.061,9.87-6.085,9.94-6.095c0,0,1.397-0.471,1.628-0.709 l0.123-0.112l7.294-70.929l-1.989-0.205L61.31,84.942"/> </svg> </div> <div id="thumbs" class="scene-part" style="position: absolute; top: 110px; left: 103px; -ms-transform: rotate(0deg) translate(0px,0px) scale(-1,1); -ms-transform-origin: 6px 148px;"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="63px" height="169px" viewbox="-3.84 -3.88 63 169" enable-background="new -3.84 -3.88 63 169" xml:space="preserve"> <defs></defs> <g> <path d="M48.75,89.5c0,0,6.433,1.842,8.434,12.515s1.334,6.671-1.833,13.008c0.433-0.276-2.036,2.521-1.638,2.11 c-0.268,12.18-3.443,27.768-14.628,36.416c-18.75,14.5-37.085-7-37.085-7C2.041,131,3.971,115.424,5.763,101.025l0.121-0.973 c1.239-9.984,1.931-81.695,1.959-84.743C7.861,7.968,13.382,2,20.147,2c6.734,0,11.906,5.615,12.298,13.35l0.533,5.116l0.129,1.141 l6.656,64.724l0.567,0.224c0.025,0.009,2.211-0.054,4.367,0.742L48.75,89.5z"/> </g> <path fill="#FFFFFF" d="M51.33,93.136c-2.93-5.061-9.87-6.085-9.94-6.095c0,0-1.397-0.471-1.628-0.709l-6.656-64.724l-0.129-1.141 l-0.533-5.116C32.052,7.615,26.88,2,20.147,2C13.382,2,7.861,7.968,7.843,15.308c-0.028,3.048-0.72,74.76-1.959,84.743l-0.121,0.975 C3.971,115.424,2.041,131,2,146.549c-0.672,0-1.339,0-2,0c0.04-15.658,1.978-31.305,3.779-45.769L3.9,99.807 c1.225-9.871,1.936-83.771,1.943-84.509C5.865,6.862,12.281,0,20.147,0c7.709,0,13.855,6.556,14.291,15.196l0.439,4.214l0.225,2.046 l6.527,63.485l0.038,0.12c0.324,0.045,7.98,1.178,11.394,7.073l2.377,0.397v2.094c0,0-1.185-0.054-2.099-0.41 S51.33,93.136,51.33,93.136z"/> </svg> </div> </div> </div> <div id="mouse_sequence" class="scene sequence"> <div id="mouse_intro_text" class="scene-part instruction_text"> [After your PC is ready] </div> <div id="mouse_instruction_text" class="scene-part instruction_text"> [With mouse, go to corners] </div> <div id="touch_animation_group"> <div id="mouse_screen" class="scene-part"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="564px" height="390px" viewbox="-96.322 -53.976 564 390" enable-background="new -96.322 -53.976 564 390" xml:space="preserve"> <defs></defs> <rect class="user_color1" fill="#011a37" width="377.687" height="212.444" /> </svg> </div> <div style="left: 97px; height: 300px; width: 275px; overflow: hidden" class="scene-part"> <div id="mouse_charms" class="scene-part" style="left: -445px"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="575px" height="390px" viewbox="-438 -55 575 390" enable-background="new -445 -55 575 390" xml:space="preserve"> <defs></defs> <rect fill="#1A1A1A" width="35" height="212" /> <path fill="#FFFFFF" d="M19.742,19.162c-3.059,0-5.538,2.479-5.538,5.538c0,1.297,0.45,2.488,1.197,3.432l-0.533,0.533 c-0.375,0.025-0.755,0.185-1.012,0.441l-3.94,3.942c-0.237,0.238-0.405,0.584-0.446,0.929c-0.051,0.405,0.071,0.777,0.343,1.048 c0.231,0.231,0.533,0.354,0.873,0.354c0.399,0,0.822-0.176,1.104-0.458l3.941-3.941c0.248-0.248,0.41-0.599,0.443-0.963 c0.003-0.033-0.001-0.065,0-0.098l0.569-0.569c0.864,0.559,1.892,0.887,2.998,0.887c3.059,0,5.538-2.48,5.538-5.538 C25.28,21.642,22.801,19.162,19.742,19.162z M19.742,28.656c-2.186,0-3.956-1.771-3.956-3.956c0-2.185,1.771-3.956,3.956-3.956 s3.956,1.771,3.956,3.956C23.698,26.885,21.928,28.656,19.742,28.656z" /> <g> <path fill="#FFFFFF" d="M9.458,144.472c0-0.825,0.675-1.5,1.5-1.5h4.119c0.825,0,1.5,0.675,1.5,1.5v2.143 c0,0.825-0.675,1.5-1.5,1.5h-4.119c-0.825,0-1.5-0.675-1.5-1.5V144.472z" /> </g> <path fill="#FFFFFF" d="M21.127,139.411h-5.735c-2.77,0-3.165,1.979-3.165,1.979h8.702c0.981,0,1.978,0.996,1.978,1.978v4.351 c0,0.982-0.996,1.979-1.978,1.979h-8.702c0,0,0.396,1.978,3.165,1.978h5.735c2.175,0,3.758-1.978,3.758-3.956v-4.351 C24.885,141.39,23.302,139.411,21.127,139.411z" /> <path fill="#FFFFFF" d="M24.639,187.013l-1.227-0.508c-0.202-0.084-0.362-0.188-0.355-0.23s0.026-0.256,0.044-0.475l0.002-1.008 c-0.018-0.219-0.037-0.434-0.043-0.476c-0.007-0.043,0.153-0.147,0.355-0.23l1.223-0.507c0.203-0.083,0.301-0.317,0.216-0.521 l-0.609-1.473c-0.084-0.203-0.318-0.3-0.521-0.217l-1.224,0.508c-0.203,0.084-0.389,0.124-0.414,0.089 c-0.026-0.035-0.163-0.199-0.307-0.366l-0.715-0.713c-0.166-0.143-0.331-0.279-0.366-0.305s0.005-0.211,0.089-0.414l0.508-1.227 c0.084-0.202-0.014-0.437-0.216-0.521l-1.473-0.609c-0.202-0.083-0.437,0.013-0.521,0.217l-0.508,1.227 c-0.084,0.201-0.188,0.361-0.23,0.355c-0.043-0.007-0.256-0.034-0.474-0.061c0,0-0.212-0.025-0.515-0.025 c-0.299,0-0.498,0.023-0.498,0.023c-0.217,0.025-0.431,0.053-0.473,0.06c-0.043,0.007-0.146-0.153-0.229-0.356l-0.508-1.223 c-0.084-0.204-0.317-0.3-0.521-0.217l-1.473,0.609c-0.202,0.085-0.3,0.319-0.216,0.521l0.507,1.224 c0.084,0.202,0.124,0.39,0.089,0.414c-0.034,0.026-0.199,0.163-0.366,0.306l-0.713,0.715c-0.142,0.167-0.279,0.332-0.304,0.367 c-0.026,0.035-0.212-0.005-0.415-0.09l-1.226-0.508c-0.202-0.083-0.437,0.014-0.521,0.217l-0.61,1.473 c-0.084,0.202,0.013,0.438,0.216,0.521l1.227,0.508c0.202,0.084,0.361,0.188,0.355,0.23c-0.008,0.042-0.027,0.257-0.045,0.475 l-0.001,1.01c0.017,0.218,0.036,0.433,0.043,0.475c0.007,0.043-0.153,0.146-0.356,0.23l-1.223,0.506 c-0.203,0.085-0.3,0.318-0.216,0.521l0.609,1.473c0.084,0.203,0.318,0.299,0.521,0.216l1.224-0.508 c0.203-0.083,0.389-0.124,0.414-0.089c0.026,0.035,0.163,0.199,0.306,0.366l0.715,0.714c0.167,0.142,0.332,0.278,0.367,0.304 c0.034,0.025-0.005,0.212-0.089,0.415l-0.508,1.226c-0.084,0.203,0.014,0.438,0.216,0.521l1.473,0.609 c0.203,0.085,0.437-0.013,0.521-0.215l0.508-1.227c0.084-0.202,0.188-0.362,0.23-0.355c0.043,0.008,0.256,0.034,0.474,0.06 c0,0,0.212,0.025,0.516,0.025c0.298,0,0.497-0.023,0.497-0.023c0.218-0.025,0.431-0.051,0.474-0.058 c0.042-0.008,0.146,0.152,0.229,0.355l0.507,1.224c0.084,0.202,0.318,0.299,0.521,0.215l1.473-0.61 c0.202-0.083,0.3-0.317,0.216-0.521l-0.507-1.223c-0.083-0.203-0.124-0.39-0.089-0.414c0.035-0.026,0.199-0.163,0.366-0.307 l0.713-0.715c0.142-0.167,0.279-0.332,0.305-0.366c0.025-0.036,0.212,0.004,0.414,0.088l1.227,0.508 c0.202,0.084,0.437-0.012,0.521-0.215l0.61-1.473C24.938,187.331,24.841,187.098,24.639,187.013z M17.369,189.251 c-2.186,0-3.956-1.771-3.956-3.954c0-2.186,1.771-3.956,3.956-3.956c2.184,0,3.955,1.771,3.955,3.956 C21.324,187.48,19.553,189.251,17.369,189.251z" /> <path fill="#FFFFFF" d="M9.443,64.942c-0.921,0.926-0.921,2.432,0,3.358c0.434,0.437,0.996,0.66,1.566,0.685 c0.952,2.925,3.617,5.072,6.803,5.232c-0.267-0.506-0.408-1.073-0.408-1.663c0-0.02,0.002-0.039,0.002-0.059 c-2.266-0.304-4.124-1.908-4.815-4.038c0.063-0.053,0.131-0.098,0.191-0.158c0.92-0.926,0.92-2.432,0-3.358 C11.861,64.017,10.363,64.017,9.443,64.942z" /> <path fill="#FFFFFF" d="M23.446,63.206c-0.087,0.089-0.18,0.171-0.273,0.249c0.578,0.917,0.918,2.002,0.918,3.167 c0,1.596-0.632,3.042-1.654,4.11c-0.926-0.767-2.296-0.726-3.161,0.145c-0.921,0.926-0.921,2.432,0,3.358 c0.92,0.926,2.418,0.926,3.338,0c0.538-0.542,0.752-1.279,0.661-1.984c1.525-1.394,2.487-3.398,2.487-5.629 c0-1.723-0.575-3.311-1.539-4.588C24.047,62.467,23.786,62.865,23.446,63.206z" /> <path fill="#FFFFFF" d="M19.275,59.009c-0.023,0.024-0.04,0.052-0.063,0.077c-0.335-0.046-0.674-0.079-1.021-0.079 c-2.903,0-5.419,1.659-6.686,4.079c0.555,0.062,1.098,0.254,1.578,0.578c1.021-1.776,2.925-2.976,5.107-2.976 c0.133,0,0.265,0.006,0.395,0.017c0.004,0.602,0.233,1.203,0.689,1.662c0.92,0.926,2.418,0.926,3.338,0 c0.921-0.926,0.921-2.432,0-3.358C21.693,58.083,20.195,58.083,19.275,59.009z" /> <path class="user_color2" fill="#038dff" d="M17.119,105.642h9.197v-8.063l-9.197,1.285V105.642z M17.119,106.519v6.783l9.197,1.283v-8.066H17.119z M9.309,105.642v-5.688l6.934-0.969v6.656H9.309z M16.242,106.519H9.309v5.691l6.934,0.969V106.519z" /> </svg> </div> </div> <div style="-ms-transform: scale(-1,1); height: 300px; width: 476px; left: 94px; overflow: hidden" class="scene-part"> <div id="mouse_arrow" class="scene-part"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="564px" height="390px" viewbox="-415.224 -53.976 564 390" enable-background="new -415.224 -53.976 564 390" xml:space="preserve"> <defs></defs> <polygon fill="#FFFFFF" points="22.982,30.45 28.344,35.818 36.006,28.162 30.643,22.789 " /> <polygon fill="#FFFFFF" points="11.49,41.941 16.854,47.309 24.514,39.653 19.152,34.28 " /> <polygon fill="#FFFFFF" points="0,53.433 5.361,58.801 13.023,51.145 7.66,45.772 " /> <polygon fill="#FFFFFF" points="33.094,0 25.373,7.723 45.709,7.723 34.473,18.954 39.846,24.321 51.063,13.101 51.063,33.412 58.785,25.69 58.785,0 " /> </svg> </div> </div> <div style="top: 55px; left: 97px; height: 300px; width: 275px; overflow: hidden" class="scene-part"> <div id="cursor" class="scene-part" style="top: -55px; left: -340px"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="564px" height="390px" viewbox="-405.441 -116.311 564 390" enable-background="new -405.441 -116.311 564 390" xml:space="preserve"> <defs></defs> <polyline class="user_color1" fill="#011a37" points="1.001,2.369 48.793,48.86 27.101,48.837 25.598,48.835 26.177,50.222 38.88,80.641 30.311,84.195 17.675,53.85 17.091,52.447 16.034,53.539 1.04,69.023 1.001,2.369 " /> <path fill="#FFFFFF" d="M1.001,2.369L48.793,48.86l-21.692-0.023l-1.503-0.001l0.579,1.387L38.88,80.641l-8.57,3.554L17.675,53.85 l-0.584-1.403l-1.057,1.092L1.04,69.023L1.001,2.369 M0,0l0.041,71.492l16.711-17.258l13.02,31.267l10.418-4.321L27.1,49.837 l24.158,0.026L0,0L0,0z" /> </svg> </div> </div> <div id="mouse_frame" class="scene-part"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="564px" height="390px" viewbox="-74.341 -32 564 390" enable-background="new -74.341 -32 564 390" xml:space="preserve"> <defs></defs> <path fill="#FFFFFF" d="M420.648,256.411H1c-0.552,0-1-0.447-1-1V1c0-0.552,0.448-1,1-1h419.648c0.553,0,1,0.448,1,1v254.411 C421.648,255.964,421.201,256.411,420.648,256.411z M419.648,2H2v252.411h417.648" /> <path fill="#FFFFFF" d="M400.168,234.92H21.481V21.476h378.687V234.92z M399.168,22.476H22.481V233.92h376.687" /> <path fill="#FFFFFF" d="M257.051,255.411h2v42.939l67.524,9.36c0.494,0.068,0.863,0.491,0.862,0.991l-0.01,9.652 c-0.001,0.552-0.448,0.999-1,0.999H95.209c-0.552,0-1-0.447-1-1v-9.652c0-0.499,0.368-0.922,0.863-0.99l67.468-9.36v-42.939h2 v43.811c0,0.499-0.368,0.922-0.863,0.99l-67.468,9.36v7.781h229.219l0.008-7.781l-67.523-9.36c-0.494-0.068-0.862-0.491-0.862-0.99" /> </svg> </div> </div> </div> </div> <div id="end_sequence_canvas" style="visibility:hidden"> <div id="pre_end_sequence"> <div id="color0" class="fullscreen_color" style="background-color: rgb(0,114,201)"></div> </div> <div id="end_sequence"> <div id="color1" class="fullscreen_color" style="background-color: rgb(0,114,201)"></div> </div> </div> </div> <label id="narrator_voiceover"></label> <div id="final_messages_overlay_canvas" style="visibility: hidden; position: absolute; top: 0px; left: 0px"> <div id="message_overlay_sequence"> <div class="final_text"> <div id="final_message_text1" aria-hidden="true"> [Installing apps] </div> </div> <div id="sub_final_message_text1" class="final_text_small" aria-hidden="true"> [This might take a few minutes] </div> <div class="final_text"> <div id="final_message_text2" aria-hidden="true"> [Getting your apps ready] </div> </div> <div id="sub_final_message_text2" class="final_text_small" aria-hidden="true"> </div> <div class="final_text"> <div id="final_message_text3" aria-hidden="true"> </div> </div> <div id="sub_final_message_text3" class="final_text_small" aria-hidden="true"> [Don't turn off your PC] </div> <div class="final_text"> <div id="final_message_text4" aria-hidden="true">[Getting your PC ready]</div> </div> <div id="sub_final_message_text4" class="final_text_small" aria-hidden="true"> </div> <div class="final_text"> <div id="final_message_text5" aria-hidden="true">[Almost ready]</div> </div> <div id="sub_final_message_text5" class="final_text_small" aria-hidden="true"> </div> </div> </div> <div id="zdp_final_messages_overlay_canvas" style="visibility: hidden; position: absolute; top: 0px; left: 0px"> <div id="zdp_message_overlay_sequence"> <div class="final_text"> <div id="zdp_final_message_text" aria-hidden="true"> [ZDP Installing Updates] </div> </div> <div id="zdp_sub_final_message_text" class="final_text_small" aria-hidden="true"> [ZDP Don't turn off your PC] </div> </div> </div> <div id="drape" style="visibility: hidden"> <div id="wrap_up_sequence"> <div id="black_panel" class="fullscreen_color user_color1" style="background-color: rgb(0,0,0)"></div> <div id="finish_text" class="final_text" aria-hidden="true"> [Let's start] </div> </div> </div> </body> </html>