<!--HTML-->

<button class="myBtn" data-modal="myModal1" >Open Modal</button>
<div id="myModal1" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <span class="close" data-modal="myModal1">&times;</span>
     
    </div>
    <div class="modal-body">

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'tab-week')" id="defaultOpen"><img src="https://i.imgur.com/qF9qjkt.png" class="modal_img"></button>
  <button class="tablinks" onclick="openCity(event, 'tab-week-2')"><img src="https://i.imgur.com/NdbdA0e.png" class="modal_img"></button>
  <button class="tablinks" onclick="openCity(event, 'tab-week-3')"><img src="https://i.imgur.com/D460aDk.png" class="modal_img"></button>
  <button class="tablinks" onclick="openCity(event, 'tab-week-4')"><img src="https://i.imgur.com/SEZr8z1.png" class="modal_img"></button>
</div>


<div id="tab-week" class="tabcontent">
<div class="vkl_1">

<button class="myBtn" data-modal="myModal2" >Open Modal</button>
<div id="myModal2" class="modal_2">
<div class="modal-content_2">
<div class="modal-header">
<span class="close" data-modal="myModal2"></span></div>
<div class="modal-body">
ЧТОБЫ ОТКРЫТЬ ЭТУ НАГРАДУ, ВАМ НУЖНО:<br>
- набрать 10 сообщений<br>
- завести личную тему
</div>
</div>
</div>


<div class="info_pp">
<img src="https://via.placeholder.com/100x100" class="avatar_pp">

<name_pp>Name Surname</name_pp>
<song_pp>song song song</song_pp>

<fandom_pp>fandom</fandom_pp> 
<fandom_pp_2>fandom name</fandom_pp_2>

<age_pp>age</age_pp>
<age_pp_2>000</age_pp_2>

<couple_pp>couple</couple_pp>
<couple_pp_2>❤</couple_pp_2>

</div>

</div></div>

<div id="tab-week-2" class="tabcontent">
<div class="vkl_2">
<div class="plate_collection">
<table><tr><td>
<img src="https://via.placeholder.com/210x36" class="plate">
<img src="https://via.placeholder.com/210x36" class="plate">
<img src="https://via.placeholder.com/210x36" class="plate">
</td>
<td>
<img src="https://via.placeholder.com/210x36" class="plate">
<img src="https://via.placeholder.com/210x36" class="plate">
<img src="https://via.placeholder.com/210x36" class="plate">
</td>
</tr></table>
</div></div></div>

<div id="tab-week-3" class="tabcontent">
<div class="vkl_3">
<div class="icon_all">

<div class="icon_pp">
<table>
<tr>
<td><img src="https://via.placeholder.com/60x60" class="icon_pp_img"></td>
<td><img src="https://via.placeholder.com/60x60" class="icon_pp_img"></td>
<td><img src="https://via.placeholder.com/60x60" class="icon_pp_img"></td>
<td><img src="https://via.placeholder.com/60x60" class="icon_pp_img"></td>
<td><img src="https://via.placeholder.com/60x60" class="icon_pp_img"></td>
</tr>
<tr>
<td><img src="https://via.placeholder.com/60x60" class="icon_pp_img"></td>
<td><img src="https://via.placeholder.com/60x60" class="icon_pp_img"></td>
<td><img src="https://via.placeholder.com/60x60" class="icon_pp_img"></td>
<td><img src="https://via.placeholder.com/60x60" class="icon_pp_img"></td>
<td><img src="https://via.placeholder.com/60x60" class="icon_pp_img"></td>
</tr>
</table>
</div>

<div class="icon_online">
<table>
<tr>
<td><img src="https://via.placeholder.com/60x60" class="icon_pp_img"></td>
<td><img src="https://via.placeholder.com/60x60" class="icon_pp_img"></td>
<td><img src="https://via.placeholder.com/60x60" class="icon_pp_img"></td>
<td><img src="https://via.placeholder.com/60x60" class="icon_pp_img"></td>
<td><img src="https://via.placeholder.com/60x60" class="icon_pp_img"></td>
</tr>
<tr>
<td><img src="https://via.placeholder.com/60x60" class="icon_pp_img"></td>
<td><img src="https://via.placeholder.com/60x60" class="icon_pp_img"></td>
<td><img src="https://via.placeholder.com/60x60" class="icon_pp_img"></td>
<td><img src="https://via.placeholder.com/60x60" class="icon_pp_img"></td>
<td><img src="https://via.placeholder.com/60x60" class="icon_pp_img"></td>
</tr>
</table>
</div>

</div></div></div>

<div id="tab-week-4" class="tabcontent">
<div class="vkl_4">
<div class="vkl_4_2">
<block_stickers>
<table>
<tr>
<td><img src="https://via.placeholder.com/100x100" class="stickers_img"></td>
<td><img src="https://via.placeholder.com/100x100" class="stickers_img"></td>
<td><img src="https://via.placeholder.com/100x100" class="stickers_img"></td>
<td><img src="https://via.placeholder.com/100x100" class="stickers_img"></td>
<td><img src="https://via.placeholder.com/100x100" class="stickers_img"></td>
</tr>
</table>
</block_stickers>
</div>

<div class="vkl_4_2">
<block_stickers>
<table>
<tr>
<td><img src="https://via.placeholder.com/100x100" class="stickers_img"></td>
<td><img src="https://via.placeholder.com/100x100" class="stickers_img"></td>
<td><img src="https://via.placeholder.com/100x100" class="stickers_img"></td>
<td><img src="https://via.placeholder.com/100x100" class="stickers_img"></td>
<td><img src="https://via.placeholder.com/100x100" class="stickers_img"></td>
</tr>
</table>
</block_stickers>
</div>

</div></div>


    </div>
  </div>
</div>


<style>

.modal_2 {
    display: none;
    position: absolute;
    z-index: 100000;
    padding-top: 172px;
    left: 0;
    top: 0;
    background-color: rgb(54 20 24 / 70%);
    border-radius: 30px;
    width: 792.5px;
    height: 277px;
    margin-left: -66.5px;
    margin-top: -15px;
}

.modal-content_2 {
width: 350px;
    height: auto;
    background: #ecaeb6;
    border-radius: 40px;
    position: relative;
    left: 210px;
    top: -20px;
    color: #fff;
    padding-left: 60px;
    padding-top: 40px;
    font-size: 12px;
    font-family: arial;
    line-height: 1.7;
    text-shadow: 0 0 2px #fff1f1;
    padding-bottom: 40px;
}

.info_pp {
    width: 170px;
    position: relative;
    float: right;
    display: flex;
    flex-direction: column;
    margin-right: 30px;
    margin-top: 30px;
    height: 310px;
    overflow: auto;
    padding-right: 13px;
}

.avatar_pp {
width: 100px;
    height: 100px;
    background-size: 100%;
    border-radius: 50px;
    margin-left: 30px;
    margin-bottom: 10px;
    margin-top: 10px;
    border: 2px #ffc6cd solid!important;
}

name_pp {
    text-align: center;
    font-size: 14px;
    font-family: arial;
    margin-bottom: 5px!important;
    color: #eb5667;
}

song_pp {
    text-align: center;
    font-size: 10px;
    font-family: arial;
    margin-bottom: 10px!important;
    color: #f58f9b;
    width: 167px;
}

fandom_pp {
font-size: 11px;
    font-family: arial;
    margin-bottom: 5px!important;
    color: #eb5667;
    text-transform: uppercase;
    font-weight: bold;
}

fandom_pp_2 {
    background: #eb566754;
    margin-right: 5px!important;
    color: white;
    padding: 5px;
    font-family: arial;
}

age_pp {
font-size: 11px;
    font-family: arial;
    margin-bottom: 5px!important;
    color: #eb5667;
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 10px!important;
}

age_pp_2 {
    background: #eb566754;
    margin-right: 5px!important;
    color: white;
    padding: 5px;
    font-family: arial;
}

couple_pp {
font-size: 11px;
    font-family: arial;
    margin-bottom: 5px!important;
    color: #eb5667;
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 10px!important;
}

couple_pp_2 {
    background: #eb566754;
    margin-right: 5px!important;
    color: white;
    padding: 5px;
    font-family: arial; 
}

.plate {    
background-size: 100%;
    width: 210px;
margin: 10px;
}

.plate_collection {
    width: 500px;
    height: 200px;
    position: relative;
    left: 94px;
    top: 60px;
    overflow: auto;
}

.icon_all {
    width: 420px;
    margin-left: 50px;
    position: relative;
    top: 55px;
    display: flex;
    flex-direction: column;
}

.icon_pp {
    width: 385px;
    height: 110px;
    margin-left: 20px;
    overflow: auto;
}

.icon_pp_img {
    margin-bottom: 5px;
}

.icon_online {
    width: 385px;
    height: 110px;
    margin-left: 20px;
    overflow: auto;
    margin-top: 88px;
}


.modal {
    display: none; 
    position: fixed; 
    z-index: 100000; 
    padding-top: 172px; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
background-color: rgb(0 0 0 / 77%);
}

.modal-content {
position: fixed;
    margin: auto;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
    background: url(https://i.imgur.com/EgTD9hJ.png);
    background-size: 100%;
    width: 950px;
    height: 534px;
    top: -80px;
    left: 150px;
    margin-top: 90px;
}

@-webkit-keyframes animatetop {
    from { opacity:0} 
    to { opacity:1}
}

@keyframes animatetop {
    from { opacity:0}
    to { opacity:1}
}

.close {
    margin-top: -11px;
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.tab {
    position: relative;
    top: 60px;
    left: 90px;
    width: 70px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
}

.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
    line-height: 2.5;
    margin-top: 10px;
}

.tab button:hover {

}

.tab button.active {
    background-image: url(https://i.imgur.com/iZOsFAC.png);
    background-size: 100%;
    width: 60px;
    padding-top: 5px;
    background-repeat: no-repeat;
}

.tabcontent {

}

.modal_img {
    background-size: 100%;
    width: 50px;
    display: block;
    margin-bottom: 10px;
}

.vkl_1 {
    background: url(https://i.imgur.com/B5nEXOG.png);
    background-size: 100%;
    width: 700px;
    height: 417px;
    position: relative;
    left: 145px;
    top: -214px;
}

.vkl_2 {
background: url(https://i.imgur.com/ICYG4XR.png);
    background-size: 100%;
    width: 700px;
    height: 417px;
    position: relative;
    left: 140px;
    top: -210px;
    background-repeat: no-repeat;
}

.vkl_3 {
background: url(https://i.imgur.com/jrDmgfw.png);
    background-size: 100%;
    width: 700px;
    height: 417px;
    position: relative;
    left: 153px;
    top: -214px;
    background-repeat: no-repeat;
}

.vkl_4 {
background: url(https://i.imgur.com/8ru5BNf.png);
    background-size: 100%;
    width: 700px;
    height: 417px;
    position: relative;
    left: 153px;
    top: -214px;
    background-repeat: no-repeat;
    overflow: auto;
    overflow-x: hidden;
}

.vkl_4_2 {
    background: url(https://i.imgur.com/UbRHTf3.png);
    background-size: 100%;
    width: 685px;
    height: 200px;
    background-repeat: no-repeat;
    margin-left: 20px;
    top: 35px;
    position: relative;
    margin-bottom: -15px;
}

block_stickers {
display: block;
    width: 630px;
    top: 40px;
    position: relative;
    left: 35px;
    height: 100px;
}

.stickers_img {
    background-size: 100%;
    width: 100px;
}

.info_pp::-webkit-scrollbar              { width: 2px;  }
.info_pp::-webkit-scrollbar-track        {         background-color: #ffc6cd00; }
.info_pp::-webkit-scrollbar-thumb        {     background: linear-gradient(45deg, #ef85a200, #de6b869e, #ef85a200);}

.icon_online::-webkit-scrollbar              { width: 2px;  }
.icon_online::-webkit-scrollbar-track        {         background-color: #ffc6cd00; }
.icon_online::-webkit-scrollbar-thumb        {     background: linear-gradient(45deg, #ef85a200, #de6b869e, #ef85a200);}

.icon_pp::-webkit-scrollbar              { width: 2px;  }
.icon_pp::-webkit-scrollbar-track        {         background-color: #ffc6cd00; }
.icon_pp::-webkit-scrollbar-thumb        {     background: linear-gradient(45deg, #ef85a200, #de6b869e, #ef85a200);}

.vkl_4::-webkit-scrollbar              { width: 2px;  }
.vkl_4::-webkit-scrollbar-track        {         background-color: #ffc6cd00; }
.vkl_4::-webkit-scrollbar-thumb        {     background: linear-gradient(45deg, #ef85a200, #de6b869e, #ef85a200);}

</style>

<script>
var modal = document.getElementById('myModal');
var buttons = document.getElementsByClassName("myBtn")
var span = document.getElementsByClassName("close");

for (var i = 0; i < buttons.length; i++) {
	buttons[i].onclick = function() {
    var id = this.getAttribute('data-modal');
    var modal = document.getElementById(id);
    modal.style.display = 'block';
   document.body.style.overflow = 'hidden'; 
  }
}

for (var i = 0; i < span.length; i++) {
  span[i].onclick = function() {
    var id = this.getAttribute('data-modal');
    var modal = document.getElementById(id);
    modal.style.display = 'none';
   document.body.style.overflow = 'auto'; 
  }
}

window.onclick = function(event) {
  var isModal = (' ' + event.target.className + ' ').indexOf(' modal ') > -1;
  if (isModal) {
    event.target.style.display = "none";
   document.body.style.overflow = 'auto'; 
  }
}

window.onclick = function(event) {
  var isModal = (' ' + event.target.className + ' ').indexOf(' modal_2 ') > -1;
  if (isModal) {
    event.target.style.display = "none"; 
  }
}


function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

document.getElementById("defaultOpen").click();
</script>