{% extends "base.html" %} {% load static %} {% block extraStyles %}
<style>
  #typingText {
    margin: 0 auto;
    padding: 15px;
    text-align: center;
    text-shadow: 1px 5px 3px #00000040;
    font-size: 40px;
  }

  .loader {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .loader-logo {
    overflow: hidden;
    transform: translatey(0px);
    animation: float 3s ease-in-out infinite;
  }
  img {
    width: 100%;
    height: auto;
  }

  @keyframes float {
    0% {
      transform: translatey(0px);
    }
    50% {
      transform: translatey(-20px);
    }
    100% {
      transform: translatey(0px);
    }
  }
</style>
{% endblock %}
{% block containerMainRow %}
<!-- page content -->
<div class="right_col" role="main">
    <div class="">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12" style="text-align: center;margin-top: .5rem;">
                <div class="loader-logo">
                    <img src="{{user_clinic_image}}" style="width: 35%;border: 1px;border-radius: 20%;" alt="..." style="border-radius: 18% !important;" >
                </div>
                <div id="typingText"></div>
            </div>
        </div>
    </div>
</div>
<!-- /page content -->
{% endblock %}
{% block extraScripts %}
<script>
  var myString = "مرحباً {{user.get_full_name}}   فى   برنامج ادارة المراكز  الطبية ";
  var myArray = myString.split("");
    var loopTimer;
    
    function looper() {
      if(myArray.length > 0){
        document.getElementById("typingText").innerHTML += myArray.shift();
      } else {
        clearTimeout(loopTimer);
      }
      loopTimer = setTimeout('looper()', 100);
    }
    looper();
    </script>
{% endblock %}