Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <section class="iphoneMock">
  <div class="container">
    <div class="iphone initAnimation">
      <div class="bordeColor">
        <div class="botones">
          <div class="switch"></div>
          <div class="vol up"></div>
          <div class="vol down"></div>
          <div class="touchID"></div>
        </div>
        <div class="backSide">
          <div class="camaras">
            <div class="cam">
              <div class="lente"></div>
            </div>
            <div class="cam">
              <div class="lente"></div>
            </div>
            <div class="cam">
              <div class="lente"></div>
            </div>
            <div class="flash"></div>
            <div class="sensor"></div>
          </div>
          <div class="logo">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
              <path d="M48.334 33.875c-.093-7.593 6.169-11.249 6.45-11.436a13.669 13.669 0 0 0-10.936-5.906c-4.674-.469-9.067 2.718-11.5 2.718-2.337 0-5.982-2.718-9.908-2.625a14.765 14.765 0 0 0-12.339 7.5C4.868 33.313 8.794 47 13.935 54.4c2.524 3.656 5.515 7.78 9.441 7.593 3.832-.187 5.235-2.437 9.815-2.437S39.08 62 43.1 61.9c4.113-.094 6.637-3.75 9.16-7.405a29.782 29.782 0 0 0 4.113-8.53 13.082 13.082 0 0 1-8.039-12.09z"></path>
              <path d="M40.762 11.565A13.423 13.423 0 0 0 43.847 2a13.194 13.194 0 0 0-8.787 4.5c-1.963 2.25-3.645 5.812-3.178 9.28 3.365.284 6.824-1.68 8.88-4.215z"></path>
            </svg>
          </div>
        </div>
        <div class="bordeNegro">
          <div class="notch">
            <div class="bocina"></div>
            <div class="camara"></div>
          </div>
          <div class="logo">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
              <path d="M48.334 33.875c-.093-7.593 6.169-11.249 6.45-11.436a13.669 13.669 0 0 0-10.936-5.906c-4.674-.469-9.067 2.718-11.5 2.718-2.337 0-5.982-2.718-9.908-2.625a14.765 14.765 0 0 0-12.339 7.5C4.868 33.313 8.794 47 13.935 54.4c2.524 3.656 5.515 7.78 9.441 7.593 3.832-.187 5.235-2.437 9.815-2.437S39.08 62 43.1 61.9c4.113-.094 6.637-3.75 9.16-7.405a29.782 29.782 0 0 0 4.113-8.53 13.082 13.082 0 0 1-8.039-12.09z"></path>
              <path d="M40.762 11.565A13.423 13.423 0 0 0 43.847 2a13.194 13.194 0 0 0-8.787 4.5c-1.963 2.25-3.645 5.812-3.178 9.28 3.365.284 6.824-1.68 8.88-4.215z"></path>
            </svg>
          </div>
          <div class="mainScreen bloqueado">
            <div class="statusBar">
              <div class="leftSide">
                <div class="operador">Telcel</div>
                <div class="hora hidden"></div>
                <div class="widgetPlus"></div>
              </div>
              <div class="rightSide">
                <div class="signal mid"><i class="bar"></i></div>
                <div class="datos">5G</div>
                <div class="bateria mid"></div>
                <div class="exitShake">Listo</div>
              </div>
            </div>
            <div class="lockScreen">
              <div class="up">
                <div class="lockIcon"></div>
                <div class="hora"></div>
                <div class="fecha">Miércoles, 16 de Septiembre</div>
              </div>
              <div class="down">
                <div class="sysIcon flash">
                  <svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 400 400">
                    <path d="M117,62.85v13.72c0,32.45,10.64,61.49,27.43,81.57v206.43h109.71V158.14c16.79-20.08,27.43-49.12,27.43-81.57 V62.85H117z M203.37,246.86c0,6.45-10,6.43-10,0v-41.88c0-6.45,10-6.43,10,0V246.86z M259.35,73.33H136.65c-6.45,0-6.43-10,0-10 h122.69C265.79,63.33,265.78,73.33,259.35,73.33z" />
                    <path d="M144.43,364.57v13.71c0,7.57,6.14,13.72,13.71,13.72h82.29c7.57,0,13.71-6.15,13.71-13.72v-13.71H144.43z M144.43,364.57" />
                    <path d="M267.86,8H130.71C123.14,8,117,14.14,117,21.71v41.14h164.57V21.71C281.57,14.14,275.43,8,267.86,8L267.86,8z M267.86,8" />
                    <path d="M267.86,8h-68.57v54.85h-82.07v13.72h164.35V21.71C281.57,14.14,275.43,8,267.86,8z M259.35,73.33H136.65 c-6.45,0-6.43-10,0-10h122.69C265.79,63.33,265.78,73.33,259.35,73.33z" />
                    <path d="M199.29,364.57v13.71h-54.86c0,7.57,6.14,13.72,13.71,13.72h82.29c7.57,0,13.71-6.15,13.71-13.72v-13.71 H199.29z M199.29,364.57" />
                    <path d="M257.68,153.45c5.97-8.05,11-17.29,14.9-27.46C268.35,136.16,263.34,145.37,257.68,153.45L257.68,153.45z M257.68,153.45" />
                    <path d="M199.29,158.85c-15.13,0-27.43,12.29-27.43,27.43c0,13.11,9.22,24.07,21.51,26.78v-8.09c0-6.45,10-6.43,10,0 v8.43c13.2-1.98,23.35-13.37,23.35-27.13C226.72,171.15,214.41,158.85,199.29,158.85z" />
                    <path d="M218.68,166.9l-9.7,9.69c-2.48-2.48-5.91-4.02-9.7-4.02c-7.55,0-13.72,6.14-13.72,13.71 c0,3.79,1.54,7.22,4.02,9.7l-9.7,9.7c3.84,3.84,8.53,6.29,13.47,7.37v-8.07c0-6.45,10-6.43,10,0v8.41 c5.61-0.84,11-3.41,15.31-7.72C229.39,194.98,229.38,177.58,218.68,166.9z" />
                  </svg>
                </div>
                <div class="sysIcon camara">
                  <svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 512 512">
                    <circle cx="256" cy="296" r="81" />
                    <path d="m374.297 91-5.177-25.883c-2.794-13.974-15.166-24.117-29.417-24.117h-167.406c-14.25 0-26.623 10.143-29.417 24.117l-5.177 25.883z" />
                    <path d="m467 121c-35.223 0-405.516 0-422 0-24.813 0-45 20.187-45 45v260c0 24.813 20.187 45 45 45h422c24.813 0 45-20.187 45-45v-260c0-24.813-20.187-45-45-45zm-339 94h-48c-8.284 0-15-6.716-15-15s6.716-15 15-15h48c8.284 0 15 6.716 15 15s-6.716 15-15 15zm128 192c-61.206 0-111-49.794-111-111s49.794-111 111-111 111 49.794 111 111-49.794 111-111 111z" />
                  </svg>
                </div>
              </div>
              <div class="unlockBar" data-msj="Desliza hacia arriba para desbloquear"></div>
            </div>
            <div class="appScreen hidden">
              <div class="mainApps">
                <div class="wrapperApps"></div>
              </div>
              <div class="wrapperDots"></div>
              <div class="deckApps">
                <div class="app" data-indeck="1">
                  <div class="icono" style="background-image: url(https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Fllamadas.png?alt=media&token=24b6d8a0-d111-4e85-bf53-39f23de9145a);"></div>
                </div>
                <div class="app" data-indeck="2">
                  <div class="icono" style="background-image: url(https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Fsafari.png?alt=media&token=aec77205-ccfe-4b77-ae66-272843db2abe);"></div>
                </div>
                <div class="app" data-indeck="3">
                  <div class="icono" style="background-image: url(https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Fwhatsapp.png?alt=media&token=b3416a44-56fc-4991-a10b-e4a34944bf3c);"></div>
                </div>
                <div class="app" data-indeck="4">
                  <div class="icono" style="background-image: url(https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Ffacebook.png?alt=media&token=f383d17e-32a7-49ef-8ebb-c723d556baa2);"></div>
                </div>
              </div>
            </div>
            <div class="widgetCenter hidden">
              <div class="buscador"><div class="icono"></div>Buscar</div>
              <div class="contenido">
                <div class="block actions">
                  <div class="action">
                    <div class="icono" style="background-image: url(https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Ffacetime.png?alt=media&token=4c66d073-d44e-4671-878e-6a8dd1dc7956);"></div>
                    <div class="textos">
                      <p class="actionName">Iniciar FaceTime con Jorge Aguilar</p>
                      <p class="actionApp">FaceTime</p>
                    </div>
                  </div>
                  <div class="action">
                    <div class="icono" style="background-image: url(https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Fllamadas.png?alt=media&token=24b6d8a0-d111-4e85-bf53-39f23de9145a);"></div>
                    <div class="textos">
                      <p class="actionName">Llamar a Jorge Aguilar</p>
                      <p class="actionApp">Teléfono</p>
                    </div>
                  </div>
                </div>
                <div class="block midd eventos">
                  <p class="txt">Sin más eventos para hoy</p>
                </div>
                <div class="block midd bateriaInfo" data-carga="59">
                  <div class="iconoWrapper">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
                      <path d="M14 59a3 3 0 0 0 3 3h30a3 3 0 0 0 3-3v-9H14zM50 5a3 3 0 0 0-3-3H17a3 3 0 0 0-3 3v5h36zm0 45V10m-36 0v40"></path>
                      <circle cx="32" cy="56" r="2"></circle>
                    </svg>
                  </div>
                </div>
                <div class="block tiempoPantalla">
                  <p class="timepo">3h 27min</p>
                  <div class="app">
                    <div class="icono"
                         style="background-image: url(https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Fwhatsapp.png?alt=media&token=b3416a44-56fc-4991-a10b-e4a34944bf3c);">
                    </div>
                    <div class="textos">
                      <p class="actionName">WhatsApp</p>
                      <p class="actionApp">38min</p>
                    </div>
                  </div>
                  <div class="app">
                    <div class="icono"
                         style="background-image: url(https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Ffacebook.png?alt=media&token=f383d17e-32a7-49ef-8ebb-c723d556baa2);">
                    </div>
                    <div class="textos">
                      <p class="actionName">Facebook</p>
                      <p class="actionApp">1h 49min</p>
                    </div>
                  </div>
                  <div class="app">
                    <div class="icono"
                         style="background-image: url(https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Fsafari.png?alt=media&token=aec77205-ccfe-4b77-ae66-272843db2abe);">
                    </div>
                    <div class="textos">
                      <p class="actionName">Safari</p>
                      <p class="actionApp">22min</p>
                    </div>
                  </div>
                  <div class="app">
                    <div class="icono"
                         style="background-image: url(https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Ftwitter.png?alt=media&token=4360a8ea-afce-4f20-9057-bb2d4d5a9e41);">
                    </div>
                    <div class="textos">
                      <p class="actionName">Twitter</p>
                      <p class="actionApp">59min</p>
                    </div>
                  </div>
                  <div class="app">
                    <div class="icono"
                         style="background-image: url(https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Ffotos.png?alt=media&token=86d712fd-aab1-48a3-a6d0-f2b5b7f9a2ab);">
                    </div>
                    <div class="textos">
                      <p class="actionName">Fotos</p>
                      <p class="actionApp">3min</p>
                    </div>
                  </div>
                </div>
                <div class="editButton">Editar</div>
              </div>
            </div>
            <div class="widgetScreen hidden">
              <div class="wrapper">
                <div class="buscador"><div class="icono"></div>Buscar widgets</div>
                <div class="widgetWrapper">
                  <div class="widget full">
                    <div class="preview"></div>
                    <p class="nombre">Pila inteligente</p>
                  </div>
                  <div class="widget">
                    <div class="preview"></div>
                    <p class="nombre">Notas</p>
                  </div>
                  <div class="widget">
                    <div class="preview"></div>
                    <p class="nombre">Mapas</p>
                  </div>
                  <div class="widget">
                    <div class="preview"></div>
                    <p class="nombre">Música</p>
                  </div>
                  <div class="widget">
                    <div class="preview"></div>
                    <p class="nombre">Podcast</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="controlCenter hidden">
              <div class="content">
                <div class="iconsGroup iconWrapper-wX2 padding">
                  <div class="actionIcon icon modoVuelo">
                    <div class="ico">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 510 510" style="transform: rotate(90deg);">
                        <path d="M497.25,357v-51l-204-127.5V38.25C293.25,17.85,275.4,0,255,0c-20.4,0-38.25,17.85-38.25,38.25V178.5L12.75,306v51 l204-63.75V433.5l-51,38.25V510L255,484.5l89.25,25.5v-38.25l-51-38.25V293.25L497.25,357z"></path>
                      </svg>
                    </div>
                    <div class="txt">
                      <p class="name">Modo de vuelo</p>
                      <p class="val">No</p>
                    </div>
                  </div>
                  <div class="actionIcon icon datosCelulares activo">
                    <div class="ico">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 510 510">
                        <path d="m255.991 169.039c-30.327 0-55 24.673-55 55 0 25.127 16.943 46.356 40 52.904v171.096c0 8.284 6.716 15 15 15s15-6.716 15-15v-171.096c23.057-6.547 40-27.777 40-52.904 0-30.327-24.673-55-55-55z"></path>
                        <path d="m186.597 143.845c-5.857-5.858-15.354-5.858-21.213 0-46.505 46.503-46.512 121.781 0 168.291 5.859 5.858 15.355 5.858 21.213 0 5.858-5.857 5.858-15.355 0-21.213-34.78-34.779-34.786-91.08 0-125.865 5.858-5.858 5.858-15.356 0-21.213z"></path>
                        <path d="m346.597 143.845c-5.857-5.857-15.355-5.857-21.213 0s-5.858 15.355 0 21.213c34.701 34.701 34.701 91.164 0 125.865-5.858 5.857-5.858 15.355 0 21.213 5.859 5.858 15.355 5.858 21.213 0 46.399-46.397 46.399-121.894 0-168.291z"></path>
                        <path d="m141.342 119.803c5.858-5.857 5.858-15.355 0-21.213-5.857-5.857-15.355-5.857-21.213 0-71.352 71.352-71.352 187.449 0 258.801 5.856 5.857 15.354 5.86 21.213 0 5.858-5.857 5.858-15.355 0-21.213-59.654-59.655-59.654-156.72 0-216.375z"></path>
                        <path d="m391.852 98.59c-5.857-5.857-15.355-5.857-21.213 0s-5.858 15.355 0 21.213c59.654 59.655 59.654 156.72 0 216.375-5.858 5.857-5.858 15.355 0 21.213 5.859 5.858 15.355 5.858 21.213 0 71.352-71.352 71.352-187.449 0-258.801z"></path>
                        <path d="m96.087 74.548c5.858-5.857 5.858-15.355 0-21.213-5.857-5.857-15.355-5.857-21.213 0-99.941 99.94-99.724 249.587 0 349.311 5.856 5.857 15.354 5.86 21.213 0 5.858-5.857 5.858-15.355 0-21.213-87.475-87.477-87.475-219.408 0-306.885z"></path>
                        <path d="m437.107 53.335c-5.857-5.857-15.355-5.857-21.213 0s-5.858 15.355 0 21.213c87.477 87.477 87.477 219.408 0 306.885-5.858 5.857-5.858 15.355 0 21.213 5.859 5.858 15.355 5.858 21.213 0 99.94-99.939 99.725-249.587 0-349.311z"></path>
                      </svg>
                    </div>
                    <div class="txt">
                      <p class="name">Datos celulares</p>
                      <p class="val">No</p>
                    </div>
                  </div>
                  <div class="actionIcon icon wifi">
                    <div class="ico">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 470 470">
                        <path d="M170.667,336.6l64,64l64-64C263.36,301.293,205.973,301.293,170.667,336.6z"></path>
                        <path d="M85.333,251.267L128,293.933c58.88-58.88,154.453-58.88,213.333,0L384,251.267 C301.547,168.813,167.787,168.813,85.333,251.267z"></path>
                        <path d="M0,165.933L42.667,208.6c106.027-106.027,277.973-106.027,384,0l42.667-42.667C339.733,36.333,129.6,36.333,0,165.933z"></path>
                      </svg>
                    </div>
                    <div class="txt">
                      <p class="name">Wi-Fi</p>
                      <p class="val">CODEPEN-1234</p>
                    </div>
                  </div>
                  <div class="actionIcon icon bluetooth">
                    <div class="ico">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                        <path d="M413.913,148.622L234.447,0v211.397L123.846,118.51l-25.759,30.672l126.44,106.189L98.087,361.56l25.759,30.672    l110.601-92.887V512l179.381-149.95L286.806,255.371L413.913,148.622z M274.501,85.175l76.876,63.663l-76.876,64.563V85.175z M351.463,361.978l-76.962,64.336V297.342L351.463,361.978z"></path>
                      </svg>
                    </div>
                    <div class="txt">
                      <p class="name">Bluetooth</p>
                      <p class="val">No</p>
                    </div>
                  </div>
                  <div class="actionIcon icon airDrop" style="display: none;">
                    <div class="ico"></div>
                    <div class="txt">
                      <p class="name">AirDrop</p>
                      <p class="val">No recibir</p>
                    </div>
                  </div>
                  <div class="actionIcon icon compartirInternet" style="display: none;">
                    <div class="ico"></div>
                    <div class="txt">
                      <p class="name">Compartir internet</p>
                      <p class="val">No</p>
                    </div>
                  </div>
                </div>
                <div class="musicWdg iconWrapper-wX2 padding">
                  <p class="songName">Summertime</p>
                  <p class="artistName">Orville Peck</p>
                  <div class="icons">
                    <div class="icon rew">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
                        <path d="M5 32l32-22v13.8L57 10v44L37 40.2V54L5 32z"></path>
                      </svg>
                    </div>
                    <div class="icon play">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
                        <path d="M6 2l52 30L6 62V2z">
                        </path>
                      </svg>
                    </div>
                    <div class="icon nex">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" style="transform: rotate(180deg);">
                        <path d="M5 32l32-22v13.8L57 10v44L37 40.2V54L5 32z"></path>
                      </svg>
                    </div>
                  </div>
                </div>
                <div class="displayOptions iconWrapper-wX2">
                  <div class="actionIcon iconItem lockOrientacion">
                    <div class="lockIcon"></div>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
                      <path d="M53.832 34.947a26.016 26.016 0 1 0-7.45 15.432"></path>
                      <path d="M62 23l-8.168 11.947L43.014 25"></path>
                    </svg>
                  </div>
                  <div class="actionIcon iconItem moon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" style="transform: rotate(90deg);">
                      <path d="M35 2a25 25 0 0 1-22 36.8 24.9 24.9 0 0 1-10.6-2.3A30 30 0 1 0 35 2z"></path>
                    </svg>
                  </div>
                  <div class="iconItem duplicate full">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
                      <path d="M20 26V8h42v32H44"></path>
                      <path d="M2 26h42v32H2z"></path>
                    </svg>
                    <p>Duplicar pantalla</p>
                  </div>
                </div>
                <div class="fullBars iconWrapper-wX2">
                  <div class="iconItem fullBar brillo">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
                      <circle class="filled" cx="32" cy="32" r="14"></circle>
                      <path d="M32 2v8m0 44v8m30-30h-8m-44 0H2m8.8-21.2l5.6 5.6m31.2 31.2l5.6 5.6m0-42.4l-5.6 5.6M16.4 47.6l-5.6 5.6"></path>
                    </svg>
                  </div>
                  <div class="iconItem fullBar volumen">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
                      <path d="M44.2 21.8a12 12 0 0 1 0 20.5M50 16a20 20 0 0 1 0 32"></path>
                      <path class="filled" d="M38 6L20 24H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12l18 18z"></path>
                    </svg>
                  </div>
                </div>
                <div class="textGroup">
                  <div class="icono">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
                      <path d="M54 22.6V8h-9v7.445M40 62h14V29.769M10 30v32h14"></path>
                      <circle cx="32" cy="29" r="5"></circle>
                      <path d="M24 42h16v20H24zm8-37L2.436 28.651a.5.5 0 0 0-.036.749l3.287 3.287a.5.5 0 0 0 .668.035L32 12l25.65 20.718a.5.5 0 0 0 .668-.035l3.287-3.283a.5.5 0 0 0-.041-.744z"></path>
                    </svg>
                  </div>
                  <p>Aquí se mostrarán los accesorios y ambientaciones que agregues a la app Casa.</p>
                  <p class="link">Abrir app Casa</p>
                </div>
                <div class="actionIcon iconItem lampara">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
                    <path class="filled" d="M117,62.85v13.72c0,32.45,10.64,61.49,27.43,81.57v206.43h109.71V158.14c16.79-20.08,27.43-49.12,27.43-81.57 V62.85H117z M203.37,246.86c0,6.45-10,6.43-10,0v-41.88c0-6.45,10-6.43,10,0V246.86z M259.35,73.33H136.65c-6.45,0-6.43-10,0-10 h122.69C265.79,63.33,265.78,73.33,259.35,73.33z"></path>
                    <path class="filled" d="M144.43,364.57v13.71c0,7.57,6.14,13.72,13.71,13.72h82.29c7.57,0,13.71-6.15,13.71-13.72v-13.71H144.43z M144.43,364.57"></path>
                    <path class="filled" d="M267.86,8H130.71C123.14,8,117,14.14,117,21.71v41.14h164.57V21.71C281.57,14.14,275.43,8,267.86,8L267.86,8z M267.86,8"></path>
                    <path d="M267.86,8h-68.57v54.85h-82.07v13.72h164.35V21.71C281.57,14.14,275.43,8,267.86,8z M259.35,73.33H136.65 c-6.45,0-6.43-10,0-10h122.69C265.79,63.33,265.78,73.33,259.35,73.33z"></path>
                    <path d="M199.29,364.57v13.71h-54.86c0,7.57,6.14,13.72,13.71,13.72h82.29c7.57,0,13.71-6.15,13.71-13.72v-13.71 H199.29z M199.29,364.57"></path>
                    <path d="M257.68,153.45c5.97-8.05,11-17.29,14.9-27.46C268.35,136.16,263.34,145.37,257.68,153.45L257.68,153.45z M257.68,153.45"></path>
                    <path d="M199.29,158.85c-15.13,0-27.43,12.29-27.43,27.43c0,13.11,9.22,24.07,21.51,26.78v-8.09c0-6.45,10-6.43,10,0 v8.43c13.2-1.98,23.35-13.37,23.35-27.13C226.72,171.15,214.41,158.85,199.29,158.85z"></path>
                    <path d="M218.68,166.9l-9.7,9.69c-2.48-2.48-5.91-4.02-9.7-4.02c-7.55,0-13.72,6.14-13.72,13.71 c0,3.79,1.54,7.22,4.02,9.7l-9.7,9.7c3.84,3.84,8.53,6.29,13.47,7.37v-8.07c0-6.45,10-6.43,10,0v8.41 c5.61-0.84,11-3.41,15.31-7.72C229.39,194.98,229.38,177.58,218.68,166.9z"></path>
                  </svg>
                </div>
                <div class="actionIcon iconItem">
                  <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
                    <path class="filled" d="M29.375 35.625L16.293 18.707a1.007 1.007 0 0 1 1.414-1.414l16.918 13.082A3.739 3.739 0 0 1 30 36.254a3.914 3.914 0 0 1-.625-.629z"></path>
                    <path d="M10.787 10.787A30 30 0 1 0 32 2v13"></path>
                  </svg>
                </div>
                <div class="actionIcon iconItem">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
                    <rect x="10" y="2" width="44" height="60" rx="2" ry="2"></rect>
                    <circle cx="21.5" cy="53.5" r="1.5"></circle>
                    <circle cx="32" cy="53.5" r="1.5"></circle>
                    <circle cx="42.5" cy="53.5" r="1.5"></circle>
                    <circle cx="21.5" cy="42.5" r="1.5"></circle>
                    <circle cx="32" cy="42.5" r="1.5"></circle>
                    <circle cx="42.5" cy="42.5" r="1.5"></circle>
                    <circle cx="21.5" cy="31.5" r="1.5"></circle>
                    <circle cx="32" cy="31.5" r="1.5"></circle>
                    <circle cx="42.5" cy="31.5" r="1.5"></circle>
                    <path d="M16 8h32v14H16zm26 4v4"></path>
                  </svg>
                </div>
                <div class="actionIcon iconItem">
                  <svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 512 512">
                    <circle class="filled" cx="256" cy="296" r="81"></circle>
                    <path class="filled" d="m374.297 91-5.177-25.883c-2.794-13.974-15.166-24.117-29.417-24.117h-167.406c-14.25 0-26.623 10.143-29.417 24.117l-5.177 25.883z"></path>
                    <path class="filled" d="m467 121c-35.223 0-405.516 0-422 0-24.813 0-45 20.187-45 45v260c0 24.813 20.187 45 45 45h422c24.813 0 45-20.187 45-45v-260c0-24.813-20.187-45-45-45zm-339 94h-48c-8.284 0-15-6.716-15-15s6.716-15 15-15h48c8.284 0 15 6.716 15 15s-6.716 15-15 15zm128 192c-61.206 0-111-49.794-111-111s49.794-111 111-111 111 49.794 111 111-49.794 111-111 111z"></path>
                  </svg>
                </div>
                <div class="actionIcon iconItem grabarPantalla">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
                    <circle cx="32" cy="32" r="30" ></circle>
                    <circle class="filled" cx="32" cy="32" r="15" ></circle>
                  </svg>
                </div>
              </div>
              <div class="hiddenCC"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="interactionInfo hidden">
      <h1>iPhone 12. iOS 14</h1>
      <p>Interfaz interactiva del <b>iPhone 12</b> con el nuevo <b>iOS 14.</b></p>
      <p>Algunas funciones son interactivas, se agregaron eventos para simular los gestos touch de los celulares, por lo pronto solo funciona en PC.</p>
      <p class="importante">La app de camara muestra su interfaz y muestra el nuevo led indicador de uso de camara y microfono.</p>
      <div class="botones">
        <div class="boton botonGirar" data-front="Ver parte trasera" data-back="Ver parte frontal"></div>
        <div class="boton botonBloquear" data-front="Bloquear pantalla" data-back="Desbloquear pantalla"></div>
      </div>
      <p>Entre las principales caracteristicas presentadas son:</p>
      <ul>
        <li>Las horas mostradas son en tiempo real.</li>
        <li>La fecha es la actual.</li>
        <li>El widget del calendario tambien muestra la fecha actual.</li>
        <li>Se agregaron las notificaciones de iOS</li>
        <li>Se agrego una animación que muestra la notificación de bateria baja xD</li>
        <li>Se pueden eliminar las apps (presionar una app o cualquier parte de la appScreen por 1 segundo)</li>
        <li>Al presionar cualquier parte de la appScreen (que no sea una app) se pasara directo a la edicion de la pantalla de inicio</li>
        <li>Al presionar una app directamente se muestra el menu de acciones</li>
        <li>Se agrego la pantalla para añadir widgets. Aunque no funciona la parte de añadir xD si muestra la animación al mostrar la pantalla</li>
        <li>Los drags de las pantallas si funcionan, la <b>appScreen</b> tiene activado el drag a la izquierda y derecha, la <b>adminBar</b> el drag hacia abajo para mostrar el controlCenter, la <b>lockScreen</b> el drag hacia arriba para desbloquear el dispositivo</li>
      </ul>
    </div>
  </div>
</section>
              
            
!

CSS

              
                @mixin flex ($dir: row, $wrap: wrap, $ai: center, $jc: center, $ac: center){
  display: flex;
  flex-direction: $dir;
  flex-wrap: $wrap;
  align-items: $ai;
  justify-content: $jc;
  align-content: $ac;
}
@mixin imagen ($url: '', $size: cover, $posicion: center, $repeat: no-repeat, $parallax: false) {
  @if  $url != '' {
    background-image: url($url);
  }
  background-size: $size;
  background-position: $posicion;
  background-repeat: $repeat;
  @if $parallax == true {
    background-attachment: fixed;
  }
}
$negro: #000;
$blanco: #fff;
$mainColor: #152839;
$grayDark: #1b1b1b;

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');

@keyframes relojAnalogico{
  to{transform: rotate(360deg)}
}
@keyframes shake{
  0%{transform: rotate(-2deg);}
  100%{transform: rotate(2deg);}
}
@keyframes shake-2{
  0%{transform: rotate(-1deg);}
  100%{transform: rotate(1deg);}
}
@keyframes grabarPantalla{
  0%{
    opacity: 1;
    transform: scale(1);
  }
  100%{
    opacity: 0;
    transform: scale(.9);
  }
}

body{
  overflow-x: hidden;
  color: #666;
  margin: 0 auto;
  *{
    font-family: 'Roboto', sans-serif;
  }
  p, h1, h2, h3, h4, h5, h6{
    margin: 0;
  }
  a {
    color: #666;
    text-decoration: none;
  }
  // ul, li{
  //   padding: 0;
  //   margin: 0;
  //   list-style-type: none;
  // }
}

#fixedApp{
  position: fixed;
  &.widgetFull{
    height: calc(76px * 2);
    .icono{
      width: 236px;
      height: calc(100% - 26px);
    }
  }
  &[data-app="widgetFullCalendario"]{
    .icono{
      @include flex;
      padding: 10px;
      box-sizing: border-box;
      .eventos{
        width: calc(100% - 112px);
        font-size: 12px;
      }
      .calendarioWrapper{
        width: 112px;
        .mes{
          .mesName{
            color: #d24f54;
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
          }
          .calendarioTabla{
            .tablaHeader, .tablaContent{
              @include flex($jc: flex-start);
              >*{
                width: 16px;
                text-align: center;
                font-size: 8px;
                font-weight: 600;
              }
            }
            .tablaHeader{
              margin: 5px auto;
            }
            .tablaContent{
              .diaNum{
                @include flex;
                height: 16px;
                &.activo{
                  color: $blanco;
                  background-color: #d24f54;
                  border-radius: 50%;
                }
              }
            }
          }
        }
      }
    }
  }
  &.calendarioDinamico{
    .fechaWrapper{
      @include flex(column);
      width: 100%;
      height: 100%;
      padding: 5px;
      box-sizing: border-box;
      .diaNom{
        color: #d24f54;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
      }
      .diaNum{
        color: $negro;
        font-size: 22px;
        font-weight: 300;
      }
    }
  }
  &.relojDinamico{
    .relojWrapper{
      @include flex;
      width: 100%;
      height: 100%;
      padding: 3px;
      background-color: $negro;
      box-sizing: border-box;
      .reloj{
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: $blanco;
        position: relative;
        overflow: hidden;
        .numeros{
          .numero{
            position: absolute;
            bottom: 50%;
            left: 0;
            right: 0;
            margin: auto;
            width: 10px;
            height: calc(50% - 1px);
            color: $negro;
            font-size: 5px;
            font-weight: 600;
            text-align: center;
            transform-origin: bottom;
            @for $i from 1 through 12{
              &:nth-child(#{$i}){
                transform: rotate((360deg / 12) * $i);
                &:before{
                  transform: rotate((360deg / 12) * -$i);
                }
              }
            }
            &:before{
              content: attr(data-num);
              display: block;
            }
          }
        }
        .manecillas{
          &:before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background-color: $negro;
          }
          .manecilla{
            position: absolute;
            width: 100%;
            height: 100%;
            &.hora{
              .barra{
                animation-duration: 21600s;
                &:before{
                  height: calc(50% - 10px);
                }
              }
            }
            &.minutos{
              .barra{
                animation-duration: 3600s;
              }
            }
            &.segundos{
              .barra{
                &:before{
                  background-color: #d24f54;
                  bottom: 40%;
                  height: calc(60% - 4px);
                  animation-duration: 60s;
                  animation-timing-function: steps(60);
                }
              }
            }
            .barra{
              position: absolute;
              width: 100%;
              height: 100%;
              animation: relojAnalogico 60s infinite linear;
              &:before{
                content: "";
                position: absolute;
                bottom: 50%;
                left: 0;
                right: 0;
                margin: auto;
                width: 1px;
                height: calc(50% - 4px);
                background-color: $negro;
              }
            }
          }
        }
      }
    }
  }
  .icono{
    @include imagen;
    width: 50px;
    height: 50px;
    margin: 3px auto;
    border-radius: 10px;
    background-color: $blanco;
    overflow: hidden;
  }
  .nombre, .notificacion{
    display: none;
  }
}
.fixedMenuFixedApp{
  position: fixed;
  width: 190px;
  top: 413px;
  left: 300px;
  border-radius: 15px;
  background-color: rgba($blanco,.8);
  .menuOption{
    @include flex($jc: space-between);
    padding: 7px 15px;
    font-size: 12px;
    color: $negro;
    cursor: pointer;
    box-sizing: border-box;
    &.eliminar{
      color: red;
    }
    &:not(:last-child){
      border-bottom: 1px solid rgba($negro,.1);
    }
    .icono{
      width: 18px;
      height: 18px;
      margin-left: 10px;
      svg{
        width: 100%;
        height: 100%;
        path, circle{
          fill: none;
          stroke: currentColor;
          stroke-width: 2;
          stroke-linecap: round;
          stroke-linejoin: round;
        }
      }
    }
  }
}
#iOSAlert{
  @include flex;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba($negro,.3);
  backdrop-filter: blur(2px);
  z-index: 10;
  .contenedor{
    max-width: 70%;
    padding-top: 10px;
    border-radius: 10px;
    text-align: center;
    background-color: rgba($blanco,.95);
    box-shadow: 0 0 10px 0 rgba($negro,.1);
    box-sizing: border-box;
    transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) all 0.3s;
    &.hidAnim{
      opacity: 0;
      transform: scale(1.1);
    }
    p{
      color: $negro;
      font-size: 12px;
      padding: 0 10px;
      &.encabezado{
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 5px;
      }
      &.mensaje{
        padding-bottom: 10px;
      }
    }
    .acciones{
      margin-top: 10px;
      .accion{
        padding: 10px;
        font-size: 12px;
        color: #6da7ff;
        border-top: 1px solid rgba($negro,.1);
        cursor: pointer;
        &.warning{
          color: red;
        }
      }
    }
  }
}



.iphoneMock{
  @include flex;
  width: 100%;
  min-height: 100vh;
  .container{
    @include flex;
    width: 90%;
    margin: 0 auto;
    padding: 50px 0;
    overflow: hidden;
    .interactionInfo{
      width: 600px;
      margin: 50px;
      &.hidden{
        >*{
          opacity: 0;
          transform: translateY(-10px);
        }
      }
      >*{
        margin-bottom: 10px;
        transition: ease all .5s;
        @for $i from 1 through 10 {
          &:nth-child(#{$i}){
            transition-delay: #{$i * .1s};
          }
        }
      }
      h1{
        font-size: 30px;
        margin-bottom: 20px;
      }
      .importante{
        &:before{
          content: "*";
          margin-right: 5px;
          color: red;
        }
      }
      .botones{
        @include flex($jc: flex-start);
        margin: 20px auto;
        .boton{
          padding: 10px 20px;
          margin-right: 20px;
          min-width: 225px;
          color: $blanco;
          font-size: 12px;
          text-align: center;
          letter-spacing: 2px;
          text-transform: uppercase;
          background-color: $grayDark;
          box-sizing: border-box;
          cursor: pointer;
          &.activo{
            &:before{
              content: attr(data-back);
            }
          }
          &:before{
            content: attr(data-front);
          }
        }
      }
    }
    .iphone{
      width: 320px;
      height: 640px;
      border-radius: 45px;
      position: relative;
      user-select: none;
      transition: ease all 1s;
      &.initAnimation{
        transform: translateY(200px);
        opacity: 0;
        .bordeColor{
          transform: rotateY(180deg);
          box-shadow: inset 0 0 7px 1px $blanco;
          .backSide{
            opacity: 1;
            visibility: visible;
            pointer-events: all;
          }
        }
      }
      &.powerOn{
        .bordeColor{
          .bordeNegro{
            .logo{
              opacity: 1;
              transition-delay: 1s;
            }
          }
        }
      }
      &.arrhe{
        .bordeColor{
          .bordeNegro{
            .logo{
              transform: scale(25);
              transition-duration: .5s;
            }
          }
        }
      }
      &.showBackSide{
        transform: translateY(-10px);
        .bordeColor{
          transform: rotateY(180deg);
          box-shadow: inset 0 0 7px 1px $blanco;
          .backSide{
            opacity: 1;
            visibility: visible;
            pointer-events: all;
          }
        }
      }
      &:before, &:after{
        content: "";
        position: absolute;
        background-color: rgba($blanco,.1);
        width: 6px;
        height: 7px;
        z-index: 1;
      }
      &:before{
        top: 1px;
        right: 70px;
      }
      &:after{
        bottom: -1px;
        left: 70px;
      }
      .bordeColor{
        @include flex;
        height: 100%;
        width: 100%;
        background-color: $mainColor;
        border: 1px solid rgba($blanco,.6);
        box-shadow: inset 0 0 3px 1px $blanco;
        border-radius: 45px;
        position: relative;
        transition: ease all .5s;
        &:before, &:after{
          content: "";
          position: absolute;
          top: 65px;
          background-color: rgba($blanco,.1);
          width: 7px;
          height: 6px;
          z-index: 1;
        }
        &:before{
          left: 0px;
        }
        &:after{
          right: 0px;
        }
        .botones{
          &:before, &:after{
            content: "";
            position: absolute;
            bottom: 65px;
            background-color: rgba($blanco,.1);
            width: 7px;
            height: 6px;
            z-index: 1;
          }
          &:before{
            left: 0px;
          }
          &:after{
            right: 0px;
          }
          >*{
            position: absolute;
            left: -3px;
            width: 3px;
            background: linear-gradient(90deg, transparent, $mainColor);
            border-radius: 20px 10px 10px 20px;
          }
          .touchID{
            top: 160px;
            right: -3px;
            left: auto;
            height: 80px;
            background: linear-gradient(90deg, $mainColor, transparent);
            border-radius: 10px 20px 20px 10px;
          }
          .switch{
            top: 100px;
            height: 25px;
          }
          .vol{
            top: 150px;
            height: 45px;
            &.down{
              top: 210px;
            }
          }
        }
        .backSide{
          @include flex;
          position: absolute;
          width: calc(100% - 12px);
          height: calc(100% - 12px);
          border-radius: 40px;
          background-color: $mainColor;
          transform: rotateY(180deg);
          opacity: 0;
          visibility: hidden;
          pointer-events: none;
          overflow: hidden;
          transition: ease all .3s;
          z-index: 1000;
          &:before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle farthest-corner at 245px 0px , rgba($blanco,.1), transparent);
          }
          .camaras{
            @include flex(column, $jc: space-between, $ac: space-between);
            position: absolute;
            top: 20px;
            left: 20px;
            width: 120px;
            height: 120px;
            padding: 10px;
            border-radius: 25px;
            box-sizing: border-box;
            background: linear-gradient(45deg, rgba($negro,.3), transparent);
            box-shadow: 1px 1px 10px 0 rgba($negro,.4);
            &:before{
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              border-radius: 25px;
              box-shadow: -10px 0 10px -10px rgba($blanco,.4);
            }
            .cam{
              @include flex;
              width: 42px;
              height: 42px;
              border-radius: 50%;
              position: relative;
              &:nth-child(3){
                margin: auto 0;
              }
              &:before, &:after{
                content: "";
                position: absolute;
              }
              &:before{
                width: calc(100% + 10px);
                height: calc(100% + 10px);
                border-radius: 50%;
                box-shadow: -2px 2px 8px 0 $negro;
                background: linear-gradient(45deg, $mainColor 65%, rgba($blanco,.5));
              }
              &:after{
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color: $grayDark;
                border: 9px solid rgba($negro,.2);
                position: relative;
                box-sizing: border-box;
              }
              .lente{
                position: absolute;
                width: 25%;
                height: 25%;
                border-radius: 50%;
                box-shadow: inset 2px 0px 4px -4px $blanco;
                background: radial-gradient(ellipse farthest-corner at 8px 2px, $mainColor, $negro);
                z-index: 1;
              }
            }
            .flash, .sensor{
              position: absolute;
              right: 20px;
              width: 22px;
              height: 22px;
              border-radius: 50%;
              &:before{
                content: "";
                position: absolute;
                border-radius: 50%;
              }
            }
            .flash{
              top: 5px;
              background-color: $blanco;
              &:before{
                width: 100%;
                height: 100%;
                background: radial-gradient(#fff291, #ffd5fe);
              }
            }
            .sensor{
              bottom: 5px;
              background-color: $negro;
              &:before{
                top: -3px;
                right: -7px;
                width: 3px;
                height: 3px;
                background-color: $negro;
              }
            }
          }
        }
        .bordeNegro{
          @include flex;
          width: calc(100% - 14px);
          height: calc(100% - 14px);
          border-radius: 40px;
          background-color: $negro;
          position: relative;
          overflow: hidden;
          &:after{
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 40px;
            border: 7px solid $negro;
            box-sizing: border-box;
            pointer-events: none;
            z-index: 100;
          }
          .notch{
            @include flex;
            position: absolute;
            top: 0;
            width: 150px;
            height: 32px;
            border-bottom-left-radius: 17px;
            border-bottom-right-radius: 17px;
            background-color: $negro;
            z-index: 100;
            &:before, &:after{
              content: "";
              position: absolute;
              top: 0;
              width: 10px;
              height: 10px;
              border-radius: 50%;
              border: 7px solid transparent;
            }
            &:before{
              left: -17px;
              border-right-color: $negro;
              transform: rotate(-50deg);
            }
            &:after{
              right: -17px;
              border-left-color: $negro;
              transform: rotate(50deg);
            }
            .bocina{
              @include flex($jc: flex-start);
              width: 40px;
              height: 4px;
              border-radius: 20px;
              background-color: $grayDark;
              border: 0.7px solid #171717;
              box-shadow: inset 0px -0.3px 1px 0px #8c8c8c;
              position: relative;
              overflow: hidden;
              &:before, &:after{
                content: "";
                position: absolute;
              }
              &:before{
                width: 0;
                height: 60%;
                transform: skew(-10deg);
                box-shadow: 1px 0 0px 0.2px #313131, 2px 0 0px 0.2px #313131, 3px 0 0px 0.2px #313131, 4px 0 0px 0.2px #313131, 5px 0 0px 0.2px #313131, 6px 0 0px 0.2px #313131, 7px 0 0px 0.2px #313131, 8px 0 0px 0.2px #313131, 9px 0 0px 0.2px #313131, 10px 0 0px 0.2px #313131, 11px 0 0px 0.2px #313131, 12px 0 0px 0.2px #313131, 13px 0 0px 0.2px #313131, 14px 0 0px 0.2px #313131, 15px 0 0px 0.2px #313131, 16px 0 0px 0.2px #313131, 17px 0 0px 0.2px #313131, 18px 0 0px 0.2px #313131, 19px 0 0px 0.2px #313131, 20px 0 0px 0.2px #313131, 21px 0 0px 0.2px #313131, 22px 0 0px 0.2px #313131, 23px 0 0px 0.2px #313131, 24px 0 0px 0.2px #313131, 25px 0 0px 0.2px #313131, 26px 0 0px 0.2px #313131, 27px 0 0px 0.2px #313131, 28px 0 0px 0.2px #313131, 29px 0 0px 0.2px #313131, 30px 0 0px 0.2px #313131, 31px 0 0px 0.2px #313131, 32px 0 0px 0.2px #313131, 33px 0 0px 0.2px #313131, 34px 0 0px 0.2px #313131, 35px 0 0px 0.2px #313131, 36px 0 0px 0.2px #313131, 37px 0 0px 0.2px #313131, 38px 0 0px 0.2px #313131, 39px 0 0px 0.2px #313131;
              }
              &:after{
                width: 95%;
                height: 0;
                box-shadow: 1px -0.8px 0px 0.2px #313131, 1px 0px 0px 0.2px #313131, 1px 0.8px 0px 0.2px #313131;
              }
            }
            .camara{
              @include flex;
              position: absolute;
              right: 35px;
              width: 14px;
              height: 14px;
              border-radius: 50%;
              background-color: $grayDark;
              &:before, &:after{
                content: "";
                position: absolute;
                border-radius: 50%;
              }
              &:before{
                width: calc(100% - 4px);
                height: calc(100% - 4px);
                background: radial-gradient($negro, $mainColor 60%);
              }
              &:after{
                width: 4px;
                height: 4px;
                margin-top: 2px;
                margin-right: 2px;
                background-color: rgba($blanco,.1);
              }
            }
          }
          .logo{
            position: absolute;
            width: 70px;
            height: 70px;
            opacity: 0;
            transition: ease all .3s;
            svg{
              color: $blanco;
            }
          }
          .mainScreen{
            @include imagen('https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/wallpaper.jpg?alt=media&token=059229cc-3823-4d27-834a-7b62cabd69d2');
            width: calc(100% - 14px);
            height: calc(100% - 14px);
            border-radius: 32px;
            background-color: $blanco;
            background-color: transparent;
            background-blend-mode: soft-light;
            position: relative;
            overflow: hidden;
            transition: ease all 1s;
            &.bloqueado{
              opacity: 0;
              pointer-events: none;
              transition: ease all .2s;
            }
            &.blur{
              background-image: url(https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/wallpaperBlur.jpg?alt=media&token=22c91194-dfa0-4ebb-870e-9f585bf35b01);
              transition-duration: .5s;
            }
            &.filterBlur{
              background-color: rgba($negro,.2);
              filter: blur(5px);
              pointer-events: none;
              transition-duration: .2s;
              .appScreen{
                transform: scale(.9);
                transition-duration: .2s;
              }
            }
            &.shakingApps{
              .appScreen{
                .app{
                  animation: shake .1s linear alternate infinite;
                  &.widgetFull{
                    animation: shake-2 .1s linear alternate infinite;
                  }
                }
              }
              .statusBar{
                .leftSide, .rightSide{
                  .operador, .hora, .signal, .datos, .bateria{
                    opacity: 0;
                  }
                  .widgetPlus, .exitShake{
                    transform: scale(1);
                  }
                }
              }
              .appScreen{
                .wrapperDots{
                  padding: 3px 10px;
                  border-radius: 20px;
                  background-color: rgba($blanco,.5);
                  .dot{
                    background-color: rgba($negro,.3);
                  }
                }
              }
            }
            &.widgetScreenOpen{
              background-color: rgba($negro, .5);
              .statusBar{
                opacity: 0;
              }
            }
            .buscador{
              @include flex;
              width: 100%;
              height: 35px;
              color: $blanco;
              font-size: 14px;
              border-radius: 10px;
              margin: 10px auto 30px auto;
              background-color: rgba($blanco,.5);
              cursor: not-allowed;
              .icono{
                width: 15px;
                height: 15px;
                margin-right: 7px;
                position: relative;
                &:before, &:after{
                  content: "";
                  position: absolute;
                }
                &:before{
                  top: 0;
                  left: 0;
                  width: 13px;
                  height: 13px;
                  border-radius: 50%;
                  border: 1px solid currentColor;
                  box-sizing: border-box;
                }
                &:after{
                  bottom: 0;
                  right: 0;
                  width: 1px;
                  height: 5px;
                  background-color: currentColor;
                  transform: rotate(-45deg);
                  transform-origin: bottom left;
                }
              }
            }
            .statusBar{
              @include flex($jc: space-between);
              height: 20px;
              padding: 5px 20px 0px 20px;
              padding-right: 12px;
              transition: ease all .1s;
              position: relative;
              z-index: 1;
              cursor: grab;
              &.onlyLed{
                .leftSide, .rightSide{
                  display: none;
                }
              }
              &.camActiv, &.micActiv{
                &:after{
                  content: "";
                  position: absolute;
                  top: 7px;
                  right: 60px;
                  width: 5px;
                  height: 5px;
                  border-radius: 50%;
                  background-color: #00dc54;
                }
              }
              &.micActiv{
                &:after{
                  background-color: #ff8e00;
                }
              }
              &.mov{
                transform: translateY(-100%);
              }
              .leftSide{
                color: $blanco;
                font-size: 10px;
                text-transform: uppercase;
                position: relative;
                >*{
                  &.hidden{
                    display: none;
                  }
                }
                .widgetPlus{
                  @include flex;
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 40px;
                  height: 17px;
                  border-radius: 20px;
                  background-color: rgba($blanco,.5);
                  transform: scale(0);
                  overflow: hidden;
                  cursor: pointer;
                  transition: ease all .2s;
                  &:before, &:after{
                    position: absolute;
                    content: "";
                    width: 8px;
                    height: 1px;
                    background-color: rgba($negro, .5);
                  }
                  &:after{
                    transform: rotate(90deg);
                  }
                }
              }
              .rightSide{
                @include flex($jc: flex-end);
                position: relative;
                .signal{
                  @include flex;
                  width: 18px;
                  height: 10px;
                  position: relative;
                  overflow: hidden;
                  &.mid{
                    &:before{
                      opacity: .4;
                    }
                  }
                  &.low{
                    &:before, &:after, .bar::before{
                      opacity: .4;
                    }
                  }
                  &:before, &:after{
                    content: "";
                    position: absolute;
                    bottom: 0;
                    width: 3px;
                    border-radius: 5px;
                    background-color: $blanco;
                  }
                  &:before{
                    right: 0;
                    height: 100%;
                  }
                  &:after{
                    right: 4px;
                    height: 80%;
                  }
                  .bar{
                    &:before, &:after{
                      content: "";
                      position: absolute;
                      bottom: 0;
                      width: 3px;
                      border-radius: 5px;
                      background-color: $blanco;
                    }
                    &:before{
                      right: 8px;
                      height: 60%;
                    }
                    &:after{
                      right: 12px;
                      height: 40%;
                    }
                  }
                }
                .datos{
                  margin: 0 3px;
                  color: $blanco;
                  font-size: 10px;
                }
                .wifi{
                  @include flex;
                  width: 18px;
                  height: 12px;
                  margin: 0 3px;
                  position: relative;
                  overflow: hidden;
                  &.mid{
                    &:before{
                      opacity: .4;
                    }
                  }
                  &.low{
                    &:before, &:after{
                      opacity: .4;
                    }
                  }
                  .dot{
                    position: absolute;
                    bottom: -2px;
                    width: 4px;
                    height: 2px;
                    border-radius: 50%;
                    border: 2px solid transparent;
                    border-top-color: $blanco;
                  }
                  &:before, &:after{
                    content: "";
                    position: absolute;
                    border: 2px solid transparent;
                    border-radius: 50%;
                    border-top-color: $blanco;
                  }
                  &:before{
                    top: 0;
                    width: 100%;
                    height: 8px;
                  }
                  &:after{
                    top: 4px;
                    width: 10px;
                    height: 3px;
                  }
                }
                .bateria{
                  @include flex;
                  width: 15px;
                  height: 8px;
                  border-radius: 2px;
                  border: 1px solid rgba($blanco,.5);
                  position: relative;
                  &.mid{
                    &:after{
                      width: 50%;
                    }
                  }
                  &.low{
                    &:after{
                      width: 20%;
                      background-color: #ffe600;
                    }
                  }
                  &:before, &:after{
                    content: "";
                    position: absolute;
                    background-color: $blanco;
                  }
                  &:before{
                    right: -2px;
                    width: 2px;
                    height: 50%;
                    border-top-right-radius: 1px;
                    border-bottom-right-radius: 1px;
                  }
                  &:after{
                    left: 1px;
                    width: 100%;
                    height: 6px;
                    border-radius: 1px;
                    max-width: calc(100% - 2px);
                  }
                }
                .exitShake{
                  @include flex;
                  position: absolute;
                  top: 0;
                  right: 0;
                  width: 40px;
                  height: 17px;
                  font-size: 10px;
                  font-weight: 600;
                  border-radius: 20px;
                  background-color: rgba($blanco,.5);
                  transform: scale(0);
                  overflow: hidden;
                  cursor: pointer;
                  transition: ease all .2s;
                }
              }
            }
            .lockScreen{
              @include flex(column, $jc: space-between);
              position: absolute;
              width: 100%;
              height: calc(100% - 25px);
              padding: 30px;
              box-sizing: border-box;
              cursor: grab;
              transition: ease all .4s;
              &.hidden{
                opacity: 0;
                visibility: hidden;
                transform: translateY(-50%);
              }
              &:hover{
                .unlockBar{
                  opacity: 1;
                }
              }
              .up{
                color: $blanco;
                text-align: center;
                .lockIcon{
                  width: 18px;
                  height: 14px;
                  margin: 10px auto 5px auto;
                  border-radius: 2px;
                  background-color: $blanco;
                  position: relative;
                  &:before{
                    content: "";
                    position: absolute;
                    top: -10px;
                    left: 0;
                    right: 0;
                    margin: auto;
                    width: 10px;
                    height: 20px;
                    border-radius: 10px;
                    border: 2px solid $blanco;
                  }
                }
                .hora{
                  font-size: 60px;
                  font-weight: 300;
                }
                .fecha{
                  font-size: 14px;
                }
              }
              .down{
                @include flex($jc: space-between);
                width: 100%;
                .sysIcon{
                  width: 20px;
                  height: 20px;
                  padding: 10px;
                  border-radius: 50%;
                  background-color: rgba($negro,.5);
                  color: $blanco;
                  cursor: pointer;
                  svg{
                    width: 100%;
                    height: 100%;
                    path, circle{
                      fill: currentColor;
                    }
                  }
                }
              }
              .unlockBar{
                position: absolute;
                bottom: 8px;
                width: 40%;
                height: 4px;
                border-radius: 20px;
                background-color: rgba($blanco,.7);
                opacity: 0;
                transition: ease all .2s;
                &:hover{
                  &:before{
                    opacity: 1;
                    transform: none;
                  }
                }
                &:before{
                  content: attr(data-msj);
                  position: absolute;
                  bottom: 100%;
                  left: 0;
                  right: 0;
                  max-width: 100px;
                  margin: 0 auto;
                  padding-bottom: 5px;
                  color: $blanco;
                  font-size: 10px;
                  text-align: center;
                  opacity: 0;
                  transform: translateY(5px);
                  transition: ease all .1s;
                }
              }
            }
            .appScreen{
              @include flex(column, $jc: space-between);
              position: absolute;
              width: 100%;
              height: calc(100% - 25px);
              padding: 10px;
              box-sizing: border-box;
              cursor: grab;
              transition: ease all .4s;
              &.moveOut{
                transition-duration: .2s;
                transform: translateX(100%);
              }
              &.hidden{
                opacity: 0;
                visibility: hidden;
                transform: scale(1.5);
              }
              .app{
                width: 64px;
                position: relative;
                cursor: pointer;
                .notificacion, .removeApp{
                  @include flex;
                  position: absolute;
                  top: 0;
                  right: 0;
                  width: 18px;
                  height: 18px;
                  color: $blanco;
                  font-size: 10px;
                  border-radius: 50%;
                  background-color: #de4046;
                }
                .removeApp{
                  left: 0;
                  right: auto;
                  background-color: #e6f2ff;
                  cursor: pointer;
                  &:after{
                    content: "";
                    position: absolute;
                    width: 50%;
                    height: 1px;
                    background-color: rgba($negro,.5);
                  }
                }
                .icono{
                  @include imagen;
                  width: 50px;
                  height: 50px;
                  margin: 3px auto;
                  border-radius: 10px;
                  background-color: $blanco;
                  overflow: hidden;
                }
                .nombre{
                  height: 13px;
                  color: $blanco;
                  font-size: 10px;
                  text-align: center;
                  margin-bottom: 7px;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  overflow: hidden;
                }
              }
              .mainApps{
                width: 100%;
                max-width: 256px;
                height: calc(100% - 25px - 85px);
                margin: 0 auto;
                overflow: hidden;
              }
              .wrapperApps{
                @include flex(row, nowrap, center, flex-start);
                width: 100%;
                height: 100%;
                transition: ease all 0.2s;
                .grupo{
                  @include flex(row, wrap, flex-start, flex-start, flex-start);
                  width: 100%;
                  height: 100%;
                  min-width: 100%;
                  .app{
                    height: 76px;
                    &.widgetFull{
                      width: 100%;
                      height: calc(76px * 2);
                      .icono{
                        width: 236px;
                        height: calc(100% - 26px);
                      }
                    }
                    &[data-app="widgetFullCalendario"]{
                      .icono{
                        @include flex;
                        padding: 10px;
                        box-sizing: border-box;
                        .eventos{
                          width: calc(100% - 112px);
                          font-size: 12px;
                        }
                        .calendarioWrapper{
                          width: 112px;
                          .mes{
                            .mesName{
                              color: #d24f54;
                              font-size: 10px;
                              font-weight: 600;
                              letter-spacing: 1px;
                              text-transform: uppercase;
                            }
                            .calendarioTabla{
                              .tablaHeader, .tablaContent{
                                @include flex($jc: flex-start);
                                >*{
                                  width: 16px;
                                  text-align: center;
                                  font-size: 8px;
                                  font-weight: 600;
                                }
                              }
                              .tablaHeader{
                                margin: 5px auto;
                              }
                              .tablaContent{
                                .diaNum{
                                  @include flex;
                                  height: 16px;
                                  &.activo{
                                    color: $blanco;
                                    background-color: #d24f54;
                                    border-radius: 50%;
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                    }
                    &.calendarioDinamico{
                      .fechaWrapper{
                        @include flex(column);
                        width: 100%;
                        height: 100%;
                        padding: 5px;
                        box-sizing: border-box;
                        .diaNom{
                          color: #d24f54;
                          font-size: 10px;
                          font-weight: 600;
                          letter-spacing: 1px;
                          text-transform: uppercase;
                        }
                        .diaNum{
                          color: $negro;
                          font-size: 22px;
                          font-weight: 300;
                        }
                      }
                    }
                    &.relojDinamico{
                      .relojWrapper{
                        @include flex;
                        width: 100%;
                        height: 100%;
                        padding: 3px;
                        background-color: $negro;
                        box-sizing: border-box;
                        .reloj{
                          width: 100%;
                          height: 100%;
                          border-radius: 50%;
                          background-color: $blanco;
                          position: relative;
                          overflow: hidden;
                          .numeros{
                            .numero{
                              position: absolute;
                              bottom: 50%;
                              left: 0;
                              right: 0;
                              margin: auto;
                              width: 10px;
                              height: calc(50% - 1px);
                              color: $negro;
                              font-size: 5px;
                              font-weight: 600;
                              text-align: center;
                              transform-origin: bottom;
                              @for $i from 1 through 12{
                                &:nth-child(#{$i}){
                                  transform: rotate((360deg / 12) * $i);
                                  &:before{
                                    transform: rotate((360deg / 12) * -$i);
                                  }
                                }
                              }
                              &:before{
                                content: attr(data-num);
                                display: block;
                              }
                            }
                          }
                          .manecillas{
                            &:before{
                              content: "";
                              position: absolute;
                              top: 0;
                              left: 0;
                              right: 0;
                              bottom: 0;
                              margin: auto;
                              width: 3px;
                              height: 3px;
                              border-radius: 50%;
                              background-color: $negro;
                            }
                            .manecilla{
                              position: absolute;
                              width: 100%;
                              height: 100%;
                              &.hora{
                                .barra{
                                  animation-duration: 21600s;
                                  &:before{
                                    height: calc(50% - 10px);
                                  }
                                }
                              }
                              &.minutos{
                                .barra{
                                  animation-duration: 3600s;
                                }
                              }
                              &.segundos{
                                .barra{
                                  &:before{
                                    background-color: #d24f54;
                                    bottom: 40%;
                                    height: calc(60% - 4px);
                                    animation-duration: 60s;
                                    animation-timing-function: steps(60);
                                  }
                                }
                              }
                              .barra{
                                position: absolute;
                                width: 100%;
                                height: 100%;
                                animation: relojAnalogico 60s infinite linear;
                                &:before{
                                  content: "";
                                  position: absolute;
                                  bottom: 50%;
                                  left: 0;
                                  right: 0;
                                  margin: auto;
                                  width: 1px;
                                  height: calc(50% - 4px);
                                  background-color: $negro;
                                }
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
              .wrapperDots{
                @include flex;
                .dot{
                  width: 8px;
                  height: 8px;
                  margin: 5px;
                  border-radius: 50%;
                  background-color: rgba($blanco,.5);
                  &.activo{
                    background-color: $blanco;
                  }
                }
              }
              .deckApps{
                @include flex;
                width: 100%;
                padding: 10px 5px;
                border-radius: 25px;
                background-color: rgba($blanco,.3);
                box-sizing: border-box;
              }
            }
            .widgetCenter{
              @include flex(column, $jc: flex-start);
              position: absolute;
              width: 100%;
              height: calc(100% - 25px);
              padding: 10px;
              box-sizing: border-box;
              cursor: grab;
              transition: ease all .2s;
              &.hidden{
                transform: translateX(-100%);
              }
              .contenido{
                @include flex($ai: stretch, $jc: space-between);
                width: 100%;
                .block{
                  @include flex;
                  width: 100%;
                  padding: 10px;
                  border-radius: 15px;
                  box-sizing: border-box;
                  background-color: rgba($blanco,.5);
                  &:not(:first-child){
                    margin-top: 15px;
                  }
                  &.midd{
                    width: 48%;
                  }
                }
                .actions{
                  .action{
                    @include flex;
                    width: 100%;
                    padding: 10px 0;
                    border-bottom: 1px solid rgba($negro,.1);
                    &:first-child{
                      padding-top: 0;
                    }
                    &:last-child{
                      padding-bottom: 0;
                      border: 0;
                    }
                    .icono{
                      @include imagen;
                      width: 40px;
                      height: 40px;
                      margin-right: 5px;
                      border-radius: 10px;
                      background-color: $blanco;
                    }
                    .textos{
                      width: calc(100% - 45px);
                      p{
                        font-size: 10px;
                        &.actionName{
                          color: $negro;
                          font-size: 11px;
                          font-weight: 600;
                        }
                      }
                    }
                  }
                }
                .eventos{
                  flex-direction: column-reverse;
                  align-items: flex-start;
                  background-color: $blanco;
                  .txt{
                    padding: 15px 0;
                    font-size: 12px;
                  }
                  .fechaWrapper{
                    .diaNom{
                      color: #d24f54;
                      font-size: 10px;
                      font-weight: 600;
                      letter-spacing: 1px;
                      text-transform: uppercase;
                    }
                    .diaNum{
                      color: $negro;
                      font-size: 22px;
                      font-weight: 300;
                    }
                  }
                }
                .bateriaInfo{
                  flex-direction: column;
                  align-items: flex-start;
                  align-content: flex-start;
                  &:after{
                    content: attr(data-carga)'%';
                    color: $negro;
                    font-size: 30px;
                  }
                  .iconoWrapper{
                    @include flex;
                    width: 35px;
                    height: 35px;
                    border-radius: 50%;
                    margin-bottom: 20px;
                    border: 3px solid rgba($negro, .3);
                    position: relative;
                    &:after{
                      content: "";
                      position: absolute;
                      width: 100%;
                      height: 100%;
                      border-radius: 50%;
                      border: 3px solid #67ba6e;
                      border-left-color: transparent;
                      border-top-color: transparent;
                      transform: rotate(-35deg);
                    }
                    svg{
                      width: 20px;
                      height: 20px;
                      path, circle{
                        fill: none;
                        stroke: $grayDark;
                        stroke-width: 2;
                        stroke-linecap: round;
                        stroke-linejoin: round;
                      }
                    }
                  }
                }
                .tiempoPantalla{
                  justify-content: space-between;
                  background-color: $blanco;
                  .timepo{
                    width: 100%;
                    color: $negro;
                    font-size: 20px;
                    text-align: left;
                  }
                  .app{
                    @include flex;
                    width: 48%;
                    margin-top: 10px;
                    .icono{
                      @include imagen;
                      width: 30px;
                      height: 30px;
                      margin-right: 5px;
                      border-radius: 7px;
                      background-color: $blanco;
                    }
                    .textos{
                      width: calc(100% - 35px);
                      p{
                        font-size: 10px;
                        color: rgba($negro,.3);
                        &.actionName{
                          color: $negro;
                          font-size: 11px;
                        }
                      }
                    }
                  }
                }
                .editButton{
                  margin: 20px auto 0 auto;
                  padding: 4px 12px;
                  color: $negro;
                  font-size: 12px;
                  border-radius: 20px;
                  background-color: rgba($blanco,.5);
                  cursor: not-allowed;
                }
              }
            }
            .widgetScreen{
              @include flex($ac: flex-end);
              position: absolute;
              bottom: 0;
              width: 100%;
              height: 100%;
              background-color: rgba($negro,.3);
              transition: ease transform .2s, ease background-color .3s .2s;
              &.hidden{
                transform: translateY(100%);
                background-color: transparent;
                .wrapper{
                  &:before{
                    opacity: 0;
                  }
                }
              }
              .wrapper{
                background-color: #eeeeee;
                width: 100%;
                height: 90%;
                padding: 10px 20px;
                border-radius: 25px;
                position: relative;
                box-sizing: border-box;
                &:before{
                  content: "";
                  position: absolute;
                  left: 50%;
                  width: 30px;
                  height: 4px;
                  border-radius: 20px;
                  background-color: #b2b2b2;
                  transform: translateX(-50%);
                  transition: ease all .5s .5s;
                }
                .buscador{
                  color: #666;
                  background-color: #e2e2e2;
                }
                .widgetWrapper{
                  @include flex($jc: space-between);
                  width: 100%;
                  .widget{
                    width: 48%;
                    margin-bottom: 15px;
                    &.full{
                      width: 100%;
                    }
                    .preview{
                      @include flex;
                      width: 100%;
                      min-height: 110px;
                      padding: 10px;
                      border-radius: 20px;
                      background-color: $blanco;
                      box-shadow: 0 2px 10px 0 rgba($negro,.1);
                      box-sizing: border-box;
                      &:before{
                        content: "Aquí iría un widget pero no lo termine xD";
                        display: block;
                        width: 100%;
                        font-size: 10px;
                        text-align: center;
                      }
                    }
                    .nombre{
                      margin-top: 5px;
                      color: $negro;
                      font-size: 10px;
                      text-align: center;
                    }
                  }
                }
              }
            }
            .controlCenter{
              @include flex;
              position: absolute;
              top: 0;
              width: 100%;
              height: 100%;
              backdrop-filter: blur(15px);
              cursor: grab;
              transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) all .5s;
              &.hidden{
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                transform: translateY(-100px);
              }
              .content{
                @include flex($jc: space-between);
                width: 100%;
                padding: 10px 20px;
                box-sizing: border-box;
                .iconWrapper-wX2{
                  @include flex($jc: space-between, $ac: space-between);
                  width: 120px;
                  height: 120px;
                  margin-bottom: 20px;
                  border-radius: 20px;
                  color: $blanco;
                  box-sizing: border-box;
                  &.padding{
                    padding: 10px;
                  }
                }
                .iconItem{
                  @include flex;
                  width: 25px;
                  height: 25px;
                  padding: 15px;
                  margin-bottom: 10px;
                  border-radius: 15px;
                  background-color: rgba($negro,.5);
                  position: relative;
                  cursor: pointer;
                  &.full{
                    width: 100%;
                  }
                  &.lampara{
                    &.activo{
                      background-color: rgba($blanco,.9);
                      svg{
                        color: #3777e4;
                      }
                    }
                  }
                  &.grabarPantalla{
                    &.activo{
                      background-color: rgba($blanco,.9);
                      svg{
                        color: red;
                        circle{
                          &.filled{
                            transform-origin: center;
                            animation: grabarPantalla 1s linear infinite;
                          }
                        }
                      }
                    }
                  }
                  svg{
                    width: 25px;
                    height: 25px;
                    min-width: 25px;
                    color: $blanco;
                    path, circle, rect{
                      stroke: currentColor;
                      fill: none;
                      stroke-width: 2;
                      stroke-miterlimit: 10;
                      &.filled{
                        stroke: none;
                        fill: currentColor;
                      }
                    }
                  }
                }
                .iconsGroup{
                  background-color: rgba($negro,.5);
                  .icon{
                    cursor: pointer;
                    margin: 5px;
                    &.activo{
                      .ico{
                        background-color: #3777e4;
                      }
                    }
                    &.modoVuelo{
                      &.activo{
                        .ico{
                          background-color: #ff8e00;
                        }
                      }
                    }
                    &.datosCelulares{
                      &.activo{
                        .ico{
                          background-color: #00dc54;
                        }
                      }
                    }
                    .ico{
                      width: 16px;
                      height: 16px;
                      padding: 12px;
                      border-radius: 50%;
                      background-color: rgba($blanco,.5);
                      transition: ease all .3s;
                      svg{
                        width: 100%;
                        height: 100%;
                        color: $blanco;
                        path{
                          fill: currentColor;
                        }
                      }
                    }
                    .txt{
                      display: none;
                    }
                  }
                }
                .musicWdg{
                  align-content: center;
                  justify-content: center;
                  background-color: rgba($negro,.5);
                  p{
                    text-align: center;
                    font-size: 14px;
                    &.artistName{
                      font-size: 12px;
                      color: rgba($blanco,.5);
                    }
                  }
                  .icons{
                    @include flex($jc: space-between);
                    width: 100%;
                    margin-top: 20px;
                    .icon{
                      width: 20px;
                      height: 20px;
                      svg{
                        width: 100%;
                        height: 100%;
                        path{
                          fill: currentColor;
                        }
                      }
                    }
                  }
                }
                .displayOptions{
                  .actionIcon{
                    transition: ease all .3s;
                    &.activo{
                      background-color: rgba($blanco,.9);
                      &.lockOrientacion{
                        .lockIcon{
                          background-color: #d24f54;
                          &:before{
                            border-color: #d24f54;
                          }
                        }
                        svg{
                          color: #d24f54;
                        }
                      }
                    }
                  }
                  .lockIcon{
                    position: absolute;
                    width: 8px;
                    height: 6px;
                    border-radius: 2px;
                    background-color: $blanco;
                    margin-right: 2px;
                    margin-top: 4px;
                    &:before{
                      content: "";
                      position: absolute;
                      top: -4px;
                      left: 0;
                      right: 0;
                      margin: auto;
                      width: 2px;
                      height: 6px;
                      border-radius: 10px;
                      border: 2px solid $blanco;
                    }
                  }
                  .moon{
                    &.activo{
                      svg{
                        path{
                          fill: #7c517c;
                        }
                      }
                    }
                    svg{
                      path{
                        fill: $blanco;
                      }
                    }
                  }
                  .duplicate{
                    flex-wrap: nowrap;
                    p{
                      font-size: 10px;
                      margin-left: 10px;
                    }
                  }
                }
                .fullBars{
                  .fullBar{
                    align-content: flex-end;
                    height: calc(100% - 30px);
                    overflow: hidden;
                    cursor: default;
                    &.volumen{
                      &:before{
                        height: 45%;
                      }
                    }
                    &:before{
                      content: "";
                      position: absolute;
                      bottom: 0;
                      width: 100%;
                      height: 100%;
                      background-color: rgba($blanco,.9);
                    }
                    svg{
                      color: rgba($negro,.4);
                      position: relative;
                    }
                  }
                }
                .textGroup{
                  color: $blanco;
                  font-size: 12px;
                  text-align: center;
                  margin-bottom: 20px;
                  .icono{
                    width: 25px;
                    height: 25px;
                    margin: 10px auto;
                    color: $blanco;
                    svg{
                      width: 100%;
                      height: 100%;
                      path, circle{
                        fill: none;
                        stroke-width: 2;
                        stroke: currentColor;
                        stroke-linecap: round;
                        stroke-miterlimit: 10;
                      }
                    }
                  }
                  .link{
                    display: inline-block;
                    margin-top: 5px;
                    color: #3777e4;
                    cursor: pointer;
                  }
                }
              }
              .hiddenCC{
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 25px;
                text-align: center;
                &:before{
                  content: "";
                  display: inline-block;
                  width: 150px;
                  height: 4px;
                  border-radius: 20px;
                  background-color: rgba($blanco,.7);
                }
              }
            }
            .camaraApp{
              background-color: #000;
              position: absolute;
              top: 0;
              left: 0;
              bottom: 0;
              right: 0;
              margin: auto;
              padding-top: 25px;
              width: 100%;
              height: 100%;
              overflow: hidden;
              box-sizing: border-box;
              transition: ease all .2s;
              cursor: grab;
              &:hover{
                &:after{
                  background-color: $blanco;
                }
              }
              &:after{
                content: "";
                position: absolute;
                bottom: 10px;
                left: 50%;
                width: 120px;
                height: 4px;
                border-radius: 20px;
                background-color: rgba($blanco,.1);
                transform: translateX(-50%);
                transition: ease all .5s;
              }
              &.hidden{
                width: 0;
                height: 0;
                opacity: 0;
                border-radius: 50%;
                pointer-events: none;
                transition-duration: .3s;
              }
              .camIco{
                @include flex;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-color: rgba($blanco,.1);
                svg{
                  width: 50%;
                  height: 50%;
                  path{
                    fill: none;
                    stroke: $blanco;
                    stroke-width: 4;
                    stroke-miterlimit: 10;
                  }
                }
              }
              .topBar{
                @include flex($jc: space-between, $ac: flex-start);
                width: 100%;
                height: 50px;
                padding: 0 20px;
                box-sizing: border-box;
                .chevronUp, .flash, .circles{
                  svg{
                    width: 80%;
                    height: 80%;
                  }
                }
                .flash, .circles{
                  background-color: transparent;
                }
              }
              .camaraArea{
                @include flex;
                width: 100%;
                height: 400px;
                position: relative;
                &:before, &:after{
                  content: "";
                  position: absolute;
                  z-index: 1;
                }
                &:before{
                  width: calc(100% / 3);
                  height: 100%;
                  border-left: 1px solid rgba($blanco,.3);
                  border-right: 1px solid rgba($blanco,.3);
                }
                &:after{
                  width: 100%;
                  height: calc(100% / 3);
                  border-top: 1px solid rgba($blanco,.3);
                  border-bottom: 1px solid rgba($blanco,.3);
                }
                video{
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                }
              }
              .modosCamara{
                @include flex($wrap: nowrap);
                width: 100%;
                height: 30px;
                overflow: hidden;
                position: relative;
                &:before, &:after{
                  content: "";
                  position: absolute;
                  top: 0;
                  width: 50px;
                  height: 100%;
                  z-index: 1;
                }
                &:before{
                  left: 0;
                  background: linear-gradient(90deg, $negro, transparent);
                }
                &:after{
                  right: 0;
                  background: linear-gradient(90deg, transparent, $negro);
                }
                .modo{
                  min-width: max-content;
                  margin: 0 10px;
                  color: $blanco;
                  font-size: 10px;
                  text-transform: uppercase;
                  &.activo{
                    color: #a69c5e;
                  }
                }
              }
              .obturadorArea{
                @include flex($jc: space-between);
                width: 100%;
                padding: 10px 20px;
                box-sizing: border-box;
                .imgPreview{
                  @include imagen;
                  background-color: red;
                  width: 40px;
                  height: 40px;
                  border-radius: 3px;
                }
                .obturador{
                  @include flex;
                  width: 50px;
                  height: 50px;
                  border-radius: 50%;
                  background-color: $blanco;
                  &:before{
                    content: "";
                    width: calc(100% - 8px);
                    height: calc(100% - 8px);
                    border: 1px solid $negro;
                    border-radius: 50%;
                  }
                }
                .camIco{
                  width: 30px;
                  height: 30px;
                }
              }
            }
          }
        }
      }
      .logo{
        width: 80px;
        height: 80px;
        position: relative;
        svg{
          width: 100%;
          height: 100%;
          color: rgba($negro,.3);
          path{
            fill: currentColor;
          }
        }
      }
    }
    @media only screen and (max-width: 700px){
      .interactionInfo{
        p, h1{
          text-align: center;
        }
        .botones{
          flex-direction: column;
          justify-content: center;
          .boton{
            margin-right: 0;
            margin-bottom: 20px;
          }
        }
      }
    }
  }
}
              
            
!

JS

              
                $(function(){
  //Global Vars
  const globalState = {
    apps: [
      {
        nombre: 'Calendario',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Fcalendario.png?alt=media&token=ae918b56-05c3-40a1-be64-1abcdb291c6f',
        type: 'widgetFull',
        dinamico: true
      },
      {
        nombre: 'Clima',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Fclima.png?alt=media&token=02edb357-5775-4bf1-91c0-8e3f4908ddea',
        type: 'app',
        dinamico: false
      },
      {
        nombre: 'FaceTime',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Ffacetime.png?alt=media&token=4c66d073-d44e-4671-878e-6a8dd1dc7956',
        type: 'app',
        dinamico: false
      },
      {
        nombre: 'Calendario',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Fcalendario.png?alt=media&token=ae918b56-05c3-40a1-be64-1abcdb291c6f',
        type: 'app',
        dinamico: true
      },
      {
        nombre: 'Reloj',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Freloj.png?alt=media&token=d0d76558-79c6-4d21-8fe7-1d13de3a6a3e',
        type: 'app',
        dinamico: true
      },
      {
        nombre: 'Fotos',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Ffotos.png?alt=media&token=86d712fd-aab1-48a3-a6d0-f2b5b7f9a2ab',
        type: 'app',
        dinamico: false
      },
      {
        nombre: 'Mapas',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Fmaps.png?alt=media&token=309018b2-981a-44fd-bf97-8da765fef711',
        type: 'app',
        dinamico: false
      },
      {
        nombre: 'Cámara',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Fcamara.png?alt=media&token=bd81cee7-b011-4773-a053-a7cd935e34c3',
        type: 'app',
        dinamico: false
      },
      {
        nombre: 'Recordatorios',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Frecordatorios.png?alt=media&token=2dbccbc3-374b-4eed-aa00-68db99217b7d',
        type: 'app',
        dinamico: false
      },
      {
        nombre: 'Facebook',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Ffacebook.png?alt=media&token=f383d17e-32a7-49ef-8ebb-c723d556baa2',
        type: 'app',
        notificaciones: 5,
        dinamico: false
      },
      {
        nombre: 'Notas',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Fnotas.png?alt=media&token=7a25ae1c-9010-48e4-81e8-e04a904024e9',
        type: 'app',
        dinamico: false
      },
      {
        nombre: 'App Store',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Fappstore.png?alt=media&token=fe121a13-738f-43cd-936b-45ee7fb90cec',
        type: 'app',
        dinamico: false
      },
      {
        nombre: 'Salud',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Fsalud.png?alt=media&token=fee7445d-600c-4146-a590-1adc1d40001b',
        type: 'app',
        dinamico: false
      },
      {
        nombre: 'Mensajes',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Fmensajes.png?alt=media&token=e389ae38-bbeb-4ca9-aa46-4be8a5b6ca90',
        notificaciones: 123,
        type: 'app',
        dinamico: false
      },
      {
        nombre: 'Configuración',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Fconfiguracion.png?alt=media&token=dfe6b4dd-0b50-4a78-8ef1-22728ed9840c',
        type: 'app',
        notificaciones: 3,
        dinamico: false
      },
      {
        nombre: 'BBVA',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Fbbva.png?alt=media&token=840b9fa7-c765-4147-9138-8234eabfeb9e',
        type: 'app',
        dinamico: false
      },
      {
        nombre: 'WhatsApp',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Fwhatsapp.png?alt=media&token=b3416a44-56fc-4991-a10b-e4a34944bf3c',
        type: 'app',
        notificaciones: 22,
        dinamico: false
      },
      {
        nombre: 'Calculadora',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Fcalculadora.png?alt=media&token=0ce89e65-2e11-408c-8467-39637f0f19f8',
        type: 'app',
        dinamico: false
      },
      {
        nombre: 'Twitter',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Ftwitter.png?alt=media&token=4360a8ea-afce-4f20-9057-bb2d4d5a9e41',
        type: 'app',
        notificaciones: 2,
        dinamico: false
      },
      {
        nombre: 'Messenger',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Fmessenger.png?alt=media&token=5de5ef16-9bbf-4d79-b9d2-2e416106b21c',
        notificaciones: 3,
        type: 'app',
        dinamico: false
      },
      {
        nombre: 'Brújula',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Fbrujula.png?alt=media&token=b4e4b1bb-1048-427d-836e-7d8b599d71e0',
        type: 'app',
        dinamico: false
      },
      {
        nombre: 'Spotify',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Fspotify.png?alt=media&token=f538e504-a8d7-4707-a308-8d4bc2b6f7f6',
        type: 'app',
        dinamico: false
      },
      {
        nombre: 'Pinterest',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Fpinterest.png?alt=media&token=4ad25035-0875-4000-ba39-5541234494c1',
        type: 'app',
        dinamico: false
      },
      {
        nombre: 'Google Home',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Fhome.png?alt=media&token=b6f455b0-7333-4c4a-b866-56e900beb41e',
        type: 'app',
        dinamico: false
      },
      {
        nombre: 'Liverpool',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Fliverpool.png?alt=media&token=42dfbbba-2149-4fe0-b503-419513082039',
        type: 'app',
        dinamico: false
      },
      {
        nombre: 'Musica',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Fmusica.png?alt=media&token=4ee18c65-11d5-46bb-8c4f-3536e49e33b0',
        type: 'app',
        dinamico: false
      },
      {
        nombre: 'Netflix',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Fnetflix.png?alt=media&token=88ddda95-de2f-44e6-b8a1-d5016f801e1c',
        type: 'app',
        dinamico: false
      },
      {
        nombre: 'Notas de voz',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Fnotasvoz.png?alt=media&token=dddc5de3-e91f-41da-8670-26ccddf54471',
        type: 'app',
        dinamico: false
      },
      {
        nombre: 'Wallet',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Fwallet.png?alt=media&token=96369c3a-d6f4-434f-9049-7b934c35af60',
        type: 'app',
        dinamico: false
      },
      {
        nombre: 'Podcasts',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Fpodcast.png?alt=media&token=166e653d-d060-46e6-9274-3a4d368d7ec4',
        type: 'app',
        dinamico: false
      },
      {
        nombre: 'Archivos',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Farchivos.png?alt=media&token=b4ce6b1b-9877-41ca-a0f3-b05526591495',
        type: 'app',
        dinamico: false
      },
      {
        nombre: 'Contactos',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Fcontactos.png?alt=media&token=fe1b3525-ef43-4a68-91ec-82b3f7b6b979',
        type: 'app',
        dinamico: false
      },
      {
        nombre: 'YouTube',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Fyoutube.png?alt=media&token=180f2d4c-32bf-4d40-855c-c70148d727e9',
        notificaciones: 1,
        type: 'app',
        dinamico: false
      },
      {
        nombre: 'Buscar iPhone',
        icono: 'https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/ios14%2Ffindphone.png?alt=media&token=9b0106d2-b151-49af-a3d9-dfbd64bc4421',
        type: 'app',
        dinamico: false
      }
    ],
    wrapperApps: {
      appsGrupo: 24,
      grupoActivo: 1,
      medida: $('.wrapperApps').outerWidth(true),
      transform: 0
    },
    dateTime: {
      meses: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
      dias: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado']
    },
    bateriaBaja: false,
    draggScreen: false
  }
  //EXtended Functions
  $.fn.extend({
    touchMov: function(config){
      config = jQuery.extend({
        mov: 'x',
        movIzq: function(){},
        movDer: function(){},
        movUp: function(){},
        movDown: function(){},
        updateMovX: function(){},
        updateMovY: function(){},
        finishMov: function(){}
      }, config);
      let el = this;
      let initCoords = { x: 0, y: 0 };
      let movCoords = { x: 0, y: 0 };
      let downCoords = { x: 0, y: 0 };
      el.mousedown(function (e) {
        initCoords = { x: e.pageX, y: e.pageY };
        downCoords = { x: movCoords.x, y: movCoords.y };
        el.mousemove(function (e2) {
          globalState.draggScreen = true;
          movCoords = { x: e2.pageX, y: e2.pageY };
          if (config.mov === 'x') {
            config.updateMovX(e2, (movCoords.x - initCoords.x))
          } else if (config.mov === 'y') {
            config.updateMovY(e2, (movCoords.y - initCoords.y))
          }
        })
        el.mouseup(function (ex) {
          if (config.mov === 'x') {
            if (movCoords.x - downCoords.x != 0) {
              (movCoords.x - initCoords.x) > 0 ? config.movDer(ex) : config.movIzq(ex);
            }
          } else if (config.mov === 'y') {
            if (movCoords.y - downCoords.y != 0) {
              (movCoords.y - initCoords.y) > 0 ? config.movDown(ex) : config.movUp(ex);
            }
          }
          globalState.draggScreen = false;
          config.finishMov(ex);
          el.off('mousemove');
          el.off('mouseup');
          el.off('mouseleave');
        })
        el.mouseleave(function (a) {
          if (config.mov === 'x') {
            if (movCoords.x - downCoords.x != 0) {
              (movCoords.x - initCoords.x) > 0 ? config.movDer(a) : config.movIzq(a);
            }
          } else if (config.mov === 'y') {
            if (movCoords.y - downCoords.y != 0) {
              (movCoords.y - initCoords.y) > 0 ? config.movDown(a) : config.movUp(a);
            }
          }
          globalState.draggScreen = false;
          config.finishMov(a);
          el.off('mousemove');
          el.off('mouseup');
          el.off('mouseleave');
        })
      })
      return this;
    },
    calendario: function(config){
      config = jQuery.extend({
        fecha: new Date(),
        diaCompleto: false
      }, config);
      let mes = globalState.dateTime.meses[config.fecha.getMonth()];
      let diasMes = new Date(config.fecha.getFullYear(), (config.fecha.getMonth() + 1), 0).getDate();
      let hoy = config.fecha.getDate();
      let primerDia = new Date(config.fecha.getFullYear(), config.fecha.getMonth(), 0).getDay();
      this.append(`
<div class="mes">
<p class="mesName">${mes}</p>
<div class="calendarioTabla">
<div class="tablaHeader"></div>
<div class="tablaContent"></div>
</div>
</div>`
                 );
      let header = this.find('.mes .tablaHeader');
      let content = this.find('.mes .tablaContent');
      globalState.dateTime.dias.map(dia => header.append(`<div class="diaName">${config.diaCompleto ? dia : dia.charAt(0)}</div>`))
      for (var k = 0; k <= primerDia; k++) {
        content.prepend('<div></div>');
      }
      for (let index = 1; index <= diasMes; index++) {
        content.append(`<div class="diaNum ${hoy == index ? 'activo':''}">${index}</div>`);
      }
      return this;
    },
    fechaIcono: function(config){
      config = jQuery.extend({
        fecha: new Date(),
        diaCompleto: false
      }, config);
      let hoy = config.fecha.getDate();
      let dia = globalState.dateTime.dias[config.fecha.getDay()];
      this.append(`<div class="fechaWrapper"><p class="diaNom">${config.diaCompleto ? dia : dia.substring(0, 3)}</p><p class="diaNum">${hoy}</p></div>`);
      return this;
    },
    reloj: function(){
      let tiempo = new Date();
      let numeros = '';
      for (let index = 1; index <= 12; index++) {
        numeros += `<div class="numero" data-num="${index}"></div>`;
      }
      let transformHora = `calc(${(360 / 12 - 360) * tiempo.getHours()}deg + ${(30 / 60) * tiempo.getMinutes()}deg)`;
      let transformMinutos = `calc(6deg * ${tiempo.getMinutes()} + ${(6 / 60) * tiempo.getSeconds()}deg)`;
      let transformSegundos = `calc(6deg * ${tiempo.getSeconds()})`;
      this.append(
        `<div class="relojWrapper">
<div class="reloj">
<div class="numeros">${numeros}</div>
<div class="manecillas">
<div class="manecilla hora" style="transform: rotate(${transformHora});"><div class="barra"></div></div>
<div class="manecilla minutos" style="transform: rotate(${transformMinutos});"><div class="barra"></div></div>
<div class="manecilla segundos" style="transform: rotate(${transformSegundos});"><div class="barra"></div></div>
</div>
</div>
</div>`
      );
      return this;
    },
    hora: function(config) {
      config = jQuery.extend({
        realtime: true
      }, config);
      var hoy = new Date();
      var hora = hoy.getHours();
      if (hora < 10) hora = '0' + hora;
      var minutos = hoy.getMinutes();
      if (minutos < 10) minutos = '0' + minutos;
      if (config.realtime) {
        setInterval(() => {
          hoy = new Date();
          hora = hoy.getHours();
          if (hora < 10) hora = '0' + hora;
          minutos = hoy.getMinutes();
          if (minutos < 10) minutos = '0' + minutos;
          this.empty();
          this.text(`${hora}:${minutos}`);
        }, 1000);
      }
      this.text(`${hora}:${minutos}`);
      return this;
    },
    fecha: function (config) {
      config = jQuery.extend({
        fecha: new Date(),
        diaCompleto: true
      }, config);
      let hoy = config.fecha.getDate();
      let dia = globalState.dateTime.dias[config.fecha.getDay()];
      let mes = globalState.dateTime.meses[config.fecha.getMonth()];
      this.text(`${config.diaCompleto ? dia : dia.substring(0, 3)}, ${hoy} de ${mes}`);
      return this;
    },
  })

  //Functions
  function sanearString(string){
    return string.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
  }
  function pintarApps(apps, container, containerDots){
    container.empty();
    containerDots.empty();
    globalState.wrapperApps.grupos = Math.ceil(apps.length / globalState.wrapperApps.appsGrupo);
    let appCount = 1;
    let html = '';
    apps.map((app, idArr) => {
      if (appCount == 1) html += '<div class="grupo">';
      let clases = 'app';
      if (app.type == 'widgetFull') clases = clases + ' widgetFull';
      if (app.dinamico && app.type == 'app') clases = `${clases} ${sanearString(app.nombre).toLowerCase()}Dinamico`;
      html += `<div class="${clases}" data-app="${app.type + sanearString(app.nombre)}" data-id="${idArr}">
${app.notificaciones ? `<div class="notificacion">${app.notificaciones}</div>` : ''}
<div class="icono" style="${!app.dinamico ? `background-image:url(${app.icono});` : 'background-color:#fff;'}"></div>
<p class="nombre">${app.nombre}</p>
</div>`;
      if (appCount == globalState.wrapperApps.appsGrupo) {
        html += '</div>';
        appCount = 1;
        return false;
      }
      app.type == 'widgetFull' ? appCount = appCount + 8 : appCount++;
    })
    if (globalState.wrapperApps.grupos > 1) {
      for (let index = 0; index < globalState.wrapperApps.grupos; index++) {
        containerDots.append(`<div class="dot ${index == 0 ? 'activo':''}"></div>`);
      }
    }
    container.append(html);
  }
  function alertaiOS(config) {
    if ($('#iOSAlert').length || $('.mainScreen').hasClass('bloqueado')) return false;
    config = jQuery.extend({
      wrapper: $('.iphone .bordeNegro'),
      acciones: [
        {
          texto: 'Aceptar',
          warning: true,
          // callback: function(){console.log('callback aceptar')}
        },
        {
          texto: 'Cancelar',
          warning: false,
          // callback: function () { console.log('callback cancelar') }
        }
      ],
      closable: false,
      closeOnActions: true,
      encabezado: 'Encabezado de la modal',
      mensaje: 'Mensaje de la modal...',
      ocultar: false
    }, config);
    var acciones = '';
    if (config.acciones) {
      $.each(config.acciones, function (k, accion) {
        acciones += `<div class="accion ${accion.warning ? 'warning':''}">${accion.texto}</div>`;
      })
    }
    if (config.ocultar) {
      $(document).off('click', '#iOSAlert .accion');
      $('#iOSAlert').fadeOut(function () { $(this).remove() });
      return false;
    }
    config.wrapper.append(`
<div id="iOSAlert">
<div class="contenedor hidAnim">
<p class="encabezado">${config.encabezado}</p>
<p class="mensaje">${config.mensaje}</p>
<div class="acciones">${acciones}</div>
</div>
</div>
`);
    if (config.closable) $('#iOSAlert').prepend('<div class="closable"></div>');
    $('#iOSAlert').fadeIn('fast', function () {
      $(this).children('.contenedor').removeClass('hidAnim');
    }).css('display', 'flex');
    $(document).on('click', '#iOSAlert .accion', function (e) {
      let accion = config.acciones[$(e.currentTarget).index()];
      if (accion.callback && (typeof accion.callback == 'function')) {
        accion.callback(e);
      }
      if (config.closeOnActions) {
        $(document).off('click', '#iOSAlert .accion');
        $('#iOSAlert').fadeOut('fast', function () { $(this).remove() });
      }
    })
    if (config.hasOwnProperty('autoclose')) {
      setTimeout(function () {
        $(document).off('click', '#iOSAlert .accion');
        $('#iOSAlert').fadeOut('fast', function () { $(this).remove() });
      }, config.autoclose)
    }
    $(document).on('click', '#iOSAlert .closable', function () {
      $(document).off('click', '#iOSAlert .accion');
      $('#iOSAlert').fadeOut('fast', function () { $(this).remove() });
    })
  }
  function camara(){
    if (!$('.camaraApp').length) {
      $('.mainScreen').append(`
<div class="camaraApp hidden">
<div class="topBar">
<div class="camIco flash">
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<path d="M41 6L13 34h14.187L23 58l27.998-29.999H37L41 6z"></path>
</svg>
</div>
<div class="camIco chevronUp">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path d="M20 40l11.994-14L44 40"></path>
</svg>
</div>
<div class="camIco circles">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path d="M45 32a17 17 0 0 1-9.8 5.7M22 34.8a17 17 0 1 1 26.2-8.5"></path>
<path d="M15.8 26.3a17 17 0 1 1-5.8 2.3"></path>
<path d="M32 54a17 17 0 0 1-3.3-16m3.3-6a17 17 0 1 1 6 26.5"></path>
</svg>
</div>
</div>
<div class="camaraArea">
<video src="https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/videos%2Fvideo1.mp4?alt=media&token=ec9e8e82-e2b9-456a-86a3-feb04eb4ac21" autoplay="true" loop="true"></video>
</div>
<div class="modosCamara">
<div class="modo">Cámara lenta</div>
<div class="modo">Video</div>
<div class="modo activo">Foto</div>
<div class="modo">Retrato</div>
<div class="modo">Panorámica</div>
</div>
<div class="obturadorArea">
<div class="imgPreview" style="background-image: url(https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/selfie.jpg?alt=media&token=9b87b717-798c-4f37-88f7-b8442bf6655b);"></div>
<div class="obturador"></div>
<div class="toggleCam">
<div class="camIco">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path d="M54.741 28.14a23.002 23.002 0 0 1-39.088 19.124"></path>
<path d="M9.065 33.62A23.008 23.008 0 0 1 31.917 8a22.934 22.934 0 0 1 16.262 6.732"></path>
<path d="M2 24l7.065 9.619L18 26"></path>
<path d="M62 38l-7.259-9.86L46 36"></path>
</svg>
</div>
</div>
</div>
</div>`
                             );
      $('.camaraApp').touchMov({
        mov: 'y',
        movUp: function (e) {
          $(e.currentTarget).addClass('hidden');
          $('.statusBar').removeClass('onlyLed camActiv');
        }
      });
    }
    setTimeout(function(){
      $('.statusBar').addClass('onlyLed camActiv');
      $('.camaraApp').removeClass('hidden');
    }, 100)
  }
  function renderizarUI(){
    //Pintamos todas las apps en el contenedor principal
    pintarApps(globalState.apps, $('.wrapperApps'), $('.wrapperDots'));
    //Si existe el widget del calendario
    if ($('.wrapperApps .app[data-app="widgetFullCalendario"]').length) {
      //Preparamos el widget del calendario
      $('.wrapperApps .app[data-app="widgetFullCalendario"] .icono').append('<div class="eventos"><p>Sin más eventos para hoy</p></div><div class="calendarioWrapper"></div>');
      //Creamos el calendario del widget
      $('.wrapperApps .app[data-app="widgetFullCalendario"] .icono .calendarioWrapper').calendario();
    }
    //Si existe el icono dinamico del calendario
    if ($('.wrapperApps .app.calendarioDinamico').length) {
      //Icono dinamico del calendario
      $('.wrapperApps .app.calendarioDinamico .icono').fechaIcono();
    }
    //Si existe el reloj analogico dinamico
    if ($('.wrapperApps .app.relojDinamico').length) {
      //Reloj analogico dinamico
      $('.wrapperApps .app.relojDinamico .icono').reloj();
    }
  }
  function encendido(){
    renderizarUI();
    setTimeout(() => {
      $('.interactionInfo').removeClass('hidden');
      $('.iphone').removeClass('initAnimation').addClass('powerOn');
      setTimeout(() => {
        $('.iphone').removeClass('powerOn').addClass('arrhe');
        $('.mainScreen').removeClass('bloqueado');
      }, 2000);
    }, 1000);
  }

  encendido();
  //Hora de la statusBar
  $('.statusBar .hora').hora();
  //Hora de la pantalla de bloqueo
  $('.lockScreen .hora').hora();
  //Fecha de la pantalla de bloqueo
  $('.lockScreen .fecha').fecha();
  //Eventos del dia en la pantalla de widgetsCenter
  $('.widgetCenter .block.eventos').fechaIcono({diaCompleto: true});

  //Touch actions
  $('.lockScreen').touchMov({
    mov: 'y',
    movUp: function(e){
      $(e.currentTarget).siblings('.statusBar').addClass('mov');
      $(e.currentTarget).addClass('hidden');
      $(e.currentTarget).siblings('.appScreen.hidden').removeClass('hidden');
      setTimeout(() => {
        $(e.currentTarget).siblings('.statusBar').removeClass('mov');
        $(e.currentTarget).siblings('.statusBar').find('.operador').addClass('hidden');
        $(e.currentTarget).siblings('.statusBar').find('.hora').removeClass('hidden');
      }, 300)
      //Timeout para simular el agotamiento de la bateria
      if (!globalState.bateriaBaja) {
        setTimeout(() => {
          alertaiOS({
            encabezado: 'La batería se está agotando',
            mensaje: 'Batería restante: 10%',
            acciones: [
              {
                texto: 'Ok'
              }
            ]
          });
          $('.mainScreen .statusBar .bateria').removeClass('mid').addClass('low');
          globalState.bateriaBaja = true;
        }, 3000);
      }
    }
  });
  $('.wrapperApps').touchMov({
    updateMovX: function(e, mov){
      $(e.currentTarget).css({
        transform: `translateX(${globalState.wrapperApps.transform + mov}px)`,
        transition: 'none'
      });
    },
    movIzq: function (e) {
      if (globalState.wrapperApps.grupoActivo != globalState.wrapperApps.grupos) {
        globalState.wrapperApps.grupoActivo++;
      }
      $(e.currentTarget).css({
        transform: `translateX(-${globalState.wrapperApps.medida * (globalState.wrapperApps.grupoActivo - 1)}px)`,
        transition: 'ease all 0.2s'
      });
      $('.wrapperDots .dot').removeClass('activo');
      $('.wrapperDots .dot').eq(globalState.wrapperApps.grupoActivo - 1).addClass('activo');
    },
    movDer: function (e) {
      if (globalState.wrapperApps.grupoActivo != 1) {
        globalState.wrapperApps.grupoActivo--;
        $(e.currentTarget).css({
          transform: `translateX(${globalState.wrapperApps.transform + globalState.wrapperApps.medida}px)`,
          transition: 'ease all 0.2s'
        });
      } else {
        $(e.currentTarget).parents('.mainScreen').addClass('blur');
        $(e.currentTarget).parents('.appScreen').addClass('moveOut');
        $(e.currentTarget).parents('.appScreen').siblings('.widgetCenter').removeClass('hidden');
        $(e.currentTarget).css({
          transform: `translateX(${globalState.wrapperApps.medida * (globalState.wrapperApps.grupoActivo - 1)}px)`,
          transition: 'ease all 0.2s'
        });
      }
      $('.wrapperDots .dot').removeClass('activo');
      $('.wrapperDots .dot').eq(globalState.wrapperApps.grupoActivo - 1).addClass('activo');
    },
    finishMov: function(e){
      transform = e.currentTarget.style.transform;
      if (transform.length) {
        transform = transform.split('(');
        transform = transform[1].split('px');
        transform = parseInt(transform[0]);
      } else {
        transform = 0;
      }
      globalState.wrapperApps.transform = transform;
    }
  });
  $('.widgetCenter .contenido').touchMov({
    mov: 'x',
    movIzq: function (e) {
      $(e.currentTarget).parents('.mainScreen').removeClass('blur');
      $(e.currentTarget).parent().addClass('hidden').removeAttr('style');
      $(e.currentTarget).parent().siblings('.appScreen.moveOut').removeClass('moveOut');
    },
    updateMovX: function (e, mov) {
      if (Math.sign(mov) == 1) {
        $(e.currentTarget).parent().css({
          transform: `translateX(${mov}px)`,
          transition: 'none'
        });
      }
    },
    movDer: function(e){
      $(e.currentTarget).parent().css({
        transform: 'none',
        transition: 'ease all .2s'
      });
      setTimeout(() => {
        $(e.currentTarget).parent().removeAttr('style');
      }, 200)
    }
  });
  $('.widgetScreen .wrapper').touchMov({
    mov: 'y',
    movDown: function(e) {
      $(e.currentTarget).parents('.mainScreen').removeClass('widgetScreenOpen');
      $(e.currentTarget).parent().addClass('hidden');
      setTimeout(() => {
        $(e.currentTarget).removeAttr('style');
      }, 200)
    },
    updateMovY: function (e, mov) {
      if (Math.sign(mov) == 1) {
        $(e.currentTarget).css({
          transform: `translateY(${mov}px)`,
          transition: 'none'
        });
      }
    }
  });
  $('.statusBar').touchMov({
    mov: 'y',
    movDown: function (e) {
      $(e.currentTarget).parent().addClass('blur');
      $(e.currentTarget).siblings('.controlCenter.hidden').removeClass('hidden');
    }
  });
  $('.controlCenter').touchMov({
    mov: 'y',
    movUp: function (e) {
      $(e.currentTarget).addClass('hidden');
      $(e.currentTarget).parent().removeClass('blur');
    }
  });

  //Menu flotante al presionar app por 1 segundo
  $('.mainScreen .appScreen').mousedown(function(e){
    if ($(this).parent().hasClass('shakingApps')) return false;
    let timeout = setTimeout(() => {
      console.log('a');
      if (!globalState.draggScreen) {
        if ($(e.target).hasClass('app') || $(e.target).parents('.app').length) {
          //Dio click en una app. Ok, le mostraremos el menu flotante
          $(this).parent().addClass('filterBlur');
          let app;
          if ($(e.target).hasClass('app')) {
            app = $(e.target);
          } else {
            app = $(e.target).parents('.app');
          }
          let appClon = app.clone();
          appClon.attr('id', 'fixedApp');
          appClon.css({
            top: app[0].getBoundingClientRect().top,
            left: app[0].getBoundingClientRect().left,
            width: app[0].getBoundingClientRect().width
          })
          $('body').append(appClon);
          let rectsIphone = $('.iphone .bordeNegro')[0].getBoundingClientRect();
          let rectsApp = appClon.children('.icono')[0].getBoundingClientRect();
          let cssMenu = `left: ${((rectsIphone.x + rectsIphone.width) - rectsApp.x) >= 190 ? rectsApp.x : (rectsApp.x + rectsApp.width) - 190}px;`;
          if ((rectsIphone.top + (65 * 2)) >= rectsApp.top) {
            cssMenu += `top : ${rectsApp.y + rectsApp.height}px; transform: translateY(10px)`;
          } else {
            cssMenu += `top: ${rectsApp.y}px; transform: translateY(calc(-100% - 10px));`;
          }
          $('body').append(`
<div class="fixedMenuFixedApp" style="${cssMenu}">
<div class="menuOption eliminar">Eliminar app
<div class="icono">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<circle cx="32" cy="32" r="30"></circle>
<path d="M48 32H16"></path>
</svg>
</div>
</div>
<div class="menuOption shaking">Editar pantalla de inicio
<div class="icono">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path d="M14 59a3 3 0 0 0 3 3h30a3 3 0 0 0 3-3v-9H14zM50 5a3 3 0 0 0-3-3H17a3 3 0 0 0-3 3v5h36zm0 45V10m-36 0v40"></path>
<circle cx="32" cy="56" r="2"></circle>
</svg>
</div>
</div>
</div>
`);
        } else {
          //Dio click en cualquier parte del appScreen. Ok, es hora del shaking apps
          $(this).parent().addClass('shakingApps');
          $('.appScreen .app').append('<div class="removeApp"></div>');
        }
      }
    }, 1000);
    $(this).mouseup(function(){
      clearTimeout(timeout);
    })
    $(this).mouseleave(function () {
      clearTimeout(timeout);
    })
  })
  //Shaking apps desde el menu flotante de la app
  $('body').on('click', '.fixedMenuFixedApp .menuOption.shaking', function(){
    $(this).parent().remove();
    $('#fixedApp').remove();
    $('.mainScreen').removeClass('filterBlur').addClass('shakingApps');
    $('.appScreen .app').append('<div class="removeApp"></div>');
  })
  //Salir del eliminador de apps (shaking apps)
  $('.exitShake').click(function(){
    $('.mainScreen').removeClass('shakingApps');
    $('.appScreen .app .removeApp').remove();
  })
  //Mostrar la widgetScreen
  $('.widgetPlus').click(function(){
    $('.widgetScreen').removeClass('hidden');
    $('.appScreen .app .removeApp').remove();
    $('.mainScreen').removeClass('shakingApps').addClass('widgetScreenOpen');
  })
  //Eliminar app
  $('body').on('click', '.fixedMenuFixedApp .menuOption.eliminar', function () {
    let idApp = $('#fixedApp').data('id');
    if (idApp == undefined) {
      var idDeck = $('#fixedApp').data('indeck');
    }
    $(this).parent().remove();
    $('#fixedApp').remove();
    $('.mainScreen').removeClass('filterBlur');
    alertaiOS({
      encabezado: `¿Transferir ${idApp !== undefined ? globalState.apps[idApp].nombre : 'app'} a la biblioteca de apps o eliminar la app?`,
      mensaje: 'Transferir la app la quitará de tu pantalla de inicio conservando todos los datos',
      acciones: [
        {
          texto: 'Eliminar app',
          warning: true,
          callback: function(){
            if (idApp !== undefined) {
              globalState.apps.splice(idApp, 1);
              renderizarUI();
            } else if (idDeck) {
              $('.deckApps .app[data-indeck="'+ idDeck +'"]').remove();
            }
          }
        },
        {
          texto: 'Transferir a la biblioteca de apps',
          callback: function () { console.log('Biblioteca de apps pendiente') }
        },
        {
          texto: 'Cancelar'
        },
      ]
    });
  })
  $('.appScreen').on('click', '.app .removeApp', function () {
    let idApp = $(this).parent('.app').data('id');
    if (idApp == 'undefined') {
      var idDeck = $(this).parent('.app').data('indeck');
    }
    $('.appScreen .app .removeApp').remove();
    $('.mainScreen').removeClass('shakingApps');
    alertaiOS({
      encabezado: `¿Transferir ${idApp !== undefined ? globalState.apps[idApp].nombre : 'app'} a la biblioteca de apps o eliminar la app?`,
      mensaje: 'Transferir la app la quitará de tu pantalla de inicio conservando todos los datos',
      acciones: [
        {
          texto: 'Eliminar app',
          warning: true,
          callback: function () {
            if (idApp !== undefined) {
              globalState.apps.splice(idApp, 1);
              renderizarUI();
            } else if (idDeck) {
              $('.deckApps .app[data-indeck="' + idDeck + '"]').remove();
            }
          }
        },
        {
          texto: 'Transferir a la biblioteca de apps',
          callback: function () { console.log('Biblioteca de apps pendiente') }
        },
        {
          texto: 'Cancelar'
        },
      ]
    });
  })
  //Toggles de los iconos del controlCenter
  $('.controlCenter .actionIcon').click(function(){
    $(this).toggleClass('activo');
    if ($(this).hasClass('modoVuelo')) {
      $(this).siblings('.datosCelulares, .wifi').removeClass('activo');
    } else if ($(this).hasClass('datosCelulares') || $(this).hasClass('wifi')) {
      $(this).siblings('.modoVuelo').removeClass('activo');
    }
  })

  //UI de algunas apps
  $('body').on('click', '.app[data-app="appCamara"]', function(){
    camara();
  })
  $('.botonGirar').click(function(){
    $(this).toggleClass('activo');
    $('.iphone').toggleClass('showBackSide');
  })
  $('.botonBloquear').click(function () {
    if (!$(this).hasClass('activo')) {
      let sonido = new Audio('https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/sonidos%2FiphoneLockScreen.mp3?alt=media&token=e2a00013-3c33-429b-866b-b2d6399b343f');
      sonido.play();
    }
    $('#iOSAlert').remove();
    $(this).toggleClass('activo');
    $('.mainScreen').toggleClass('bloqueado');
  })
})

              
            
!
999px

Console