danilobatistaqueiroz/ionic-tutorial-movie

an example using a startup configuration using slides over the main screen, and a tutorial like a movie, automatic step by step using popovers

digae-tutorial.mp4

digae-screencast.mp4

ionic start whatsclone blank --type=angular --capacitor --project-id=whatsclone --package-id=br.labs.whatsclone

balloons melhor que popovers:
https://kazzkiq.github.io/balloon.css/ tooltip com close button:
http://jsfiddle.net/YM84U/19/

pnpm i @capacitor/preferences

Entrei no site:
https://hotpot.ai/design/

https://fonts.google.com/icons?selected=Material+Icons+Round:task_alt:&icon.query=check&icon.style=Rounded https://feathericons.com/?query=plus.square.fill&s=HotpotDesign

Gerei o design da tela.
Exportei o png
Depois peguei apenas o background e exportei png.
Abri no Gimp, e recortei os textos, logo e gerei layers com transparência.
Exportei cada layer como um png com background transparente.

Removi da tela o scrollbar.
Cada tab que corre da esquerda para a direita muda o z-index.

Adicionei avatars:
https://www.flaticon.com/free-icons/avatar/6

<div class="container">
    <div class="row">
        <div class="col">
            <h1>Some heading</h1>
            <p>This is not a love song</p>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#leftModal">Left</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#rightModal">Right</button>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="rightModal" tabindex="-1" role="dialog" aria-labelledby="rightModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-slideout" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="rightModalLabel">Right On</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        Right Modal
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<!-- Left modal -->
<div class="modal fade" id="leftModal" tabindex="-1" role="dialog" aria-labelledby="leftModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-slideout" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="leftModalLabel">Left On</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        Left Modal
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

#rightModal .modal-dialog-slideout {
  min-height: 100%;
  margin: 0 0 0 auto;
  background: #fff;
}

.modal.fade .modal-dialog.modal-dialog-slideout {
  -webkit-transform: translate(100%, 0)scale(1);
  transform: translate(100%, 0)scale(1);
}

.modal.fade.show .modal-dialog.modal-dialog-slideout {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  display: flex;
  align-items: stretch;
  -webkit-box-align: stretch;
  height: 100%;
}

.modal.fade.show .modal-dialog.modal-dialog-slideout .modal-body {
  overflow-y: auto;
  overflow-x: hidden;
}

.modal-dialog-slideout .modal-content {
  border: 0;
}

.modal-dialog-slideout .modal-header,
.modal-dialog-slideout .modal-footer {
  height: 69px;
  display: block;
}

#rightModal .modal-dialog-slideout .modal-header h5 {
  float: left;
  color: blue;
}

#leftModal .modal-dialog-slideout {
  min-height: 100%;
  margin: 0 auto 0 0;
  background: #fff;
}

#leftModal .modal-dialog-slideout .modal-header h5 {
  float: left;
  color: red;
}

#leftModal.modal.fade:not(.show) .modal-dialog.modal-dialog-slideout {
  -webkit-transform: translate(100%, 0)scale(1);
  transform: translate(-100%, 0)scale(1);
}