Skip to content

Commit

Permalink
Update sp-perfection.component.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@Purge11
Purge11 committed Sep 7, 2024
1 parent 6891c84 commit 60589bf
Showing 1 changed file with 97 additions and 28 deletions.
125 changes: 97 additions & 28 deletions src/app/sp-perfection/sp-perfection.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,72 +18,141 @@ <h3 class="sp-perfection-title-3">Perfection Points</h3>
<h3 class="sp-perfection-title-3">For <b>SP1</b> to <b>8</b></h3>
<div class="sp1-to-8">
<p class="sp-perfection-text">You can get Perfections from Maru raid boxes or Family Tower NPC</p>
<img src="../../assets/img/specialists/perfection/perfection_item.png" alt="">
<img class="img-responsive" src="../../assets/img/specialists/perfection/perfection_item.png" alt="Perfection Item">
</div>
<div class="sp1-to-8">
<p class="sp-perfection-text">You can fish these boxes</p>
<div class="perf-boxes">
<img src="../../assets/img/specialists/perfection/small_perf_box.png" alt="">
<img src="../../assets/img/specialists/perfection/perf_box.png" alt="">
<div class="perf-boxes d-flex">
<img class="img-box" src="../../assets/img/specialists/perfection/small_perf_box.png" alt="Small Perfection Box">
<img class="img-box" src="../../assets/img/specialists/perfection/perf_box.png" alt="Perfection Box">
</div>
</div>

<div class="sp9">
<h3 class="sp-perfection-title-3">For <b>SP9</b> and <b>5MA</b></h3>
<p class="sp-perfection-text">You can get Jewels Bags on Paimon raid boxes</p>
<img src="../../assets/img/specialists/perfection/jewels_bag.png" alt="">
<img class="img-responsive" src="../../assets/img/specialists/perfection/jewels_bag.png" alt="Jewels Bag">
</div>

<div class="sp9">
<h3 class="sp-perfection-title-3">For <b>SP10</b> and <b>6MA</b></h3>
<p class="sp-perfection-text">You can get Perfection Bags on prestige 5</p>
<img src="../../assets/img/specialists/perfection/perfection10_bag.png" alt="">
<img class="img-responsive" src="../../assets/img/specialists/perfection/perfection10_bag.png" alt="Perfection 10 Bag">
</div>

<h3 class="sp-perfection-title-3">
Once you got some Perfections or Jewels Bags, you can trade them for the stones you want :
</h3>
<div class="perf-trades">
<h3 class="sp-perfection-title-3">Once you got some Perfections or Jewels Bags, you can trade them for the stones you want :</h3>
<div class="perf-trades d-flex">
<div class="perf-trade">
<h3 class="sp-perfection-title-3">For SP1 to 8</h3>
<img src="../../assets/img/specialists/perfection/perfection_exchange_npc.png" alt="">
<img class="img-responsive" src="../../assets/img/specialists/perfection/perfection_exchange_npc.png" alt="Perfection Exchange NPC">
</div>
<div class="perf-trade">
<h3 class="sp-perfection-title-3">For SP9 and 5MA</h3>
<img src="../../assets/img/specialists/perfection/orc_perfection_npc.png" alt="">
<img class="img-responsive" src="../../assets/img/specialists/perfection/orc_perfection_npc.png" alt="Orc Perfection NPC">
</div>
<div class="perf-trade">
<h3 class="sp-perfection-title-3">For SP10 and 6MA</h3>
<img src="../../assets/img/specialists/perfection/perfection10_npc.png" alt="">
<img class="img-responsive" src="../../assets/img/specialists/perfection/perfection10_npc.png" alt="Perfection 10 NPC">
</div>
</div>

<h3 class="sp-perfection-title-3">
You can also trade your stones to Perfections and Jewels Bags :
</h3>
<div class="perf-trades">
<h3 class="sp-perfection-title-3">You can also trade your stones to Perfections and Jewels Bags :</h3>
<div class="perf-trades d-flex">
<div class="perf-trade">
<h3 class="sp-perfection-title-3">For SP1 to 8</h3>
<img src="../../assets/img/specialists/perfection/perfection_exchange_maps.png" alt="">
<img class="img-responsive" src="../../assets/img/specialists/perfection/perfection_exchange_maps.png" alt="Perfection Exchange Maps">
</div>
<div class="perf-trade">
<h3 class="sp-perfection-title-3">For SP9 and 5MA</h3>
<img src="../../assets/img/specialists/perfection/orc_perfection_npc.png" alt="">
<img class="img-responsive" src="../../assets/img/specialists/perfection/orc_perfection_npc.png" alt="Orc Perfection NPC">
</div>
</div>

<h2 class="sp-perfection-title-2">Auto Perfection Item</h2>
<p class="sp-perfection-text">
You can buy this item at auto perf npc for 3.750kk Gold. Let this item in your inventory and everytime
you will perf a SP, it will take all stones available in your inventory to reach the maximum
perfection Lv so you don't have try one by one until +100.
perfection Lv so you don't have to try one by one until +100.
</p>
<div class="auto-perf">
<div class="d-flex justify-content-center">
<img src="../../assets/img/specialists/perfection/auto_perf_npc.png" alt="">
</div>
<div class="d-flex justify-content-center">
<img src="../../assets/img/specialists/perfection/auto_perf_item.png" alt="">
</div>
<div class="auto-perf d-flex justify-content-center">
<img class="img-responsive" src="../../assets/img/specialists/perfection/auto_perf_npc.png" alt="Auto Perfection NPC">
</div>
<div class="auto-perf d-flex justify-content-center">
<img class="img-responsive" src="../../assets/img/specialists/perfection/auto_perf_item.png" alt="Auto Perfection Item">
</div>
</div>
</section>
</div>
</div>

<style>
body {
background: #1f1f1f;
color: #f1f1f1;
font-family: 'Verdana', sans-serif;
}

.sp-perfection-title-1 {
font-size: 2.8em;
color: #ffcc00;
text-align: center;
text-shadow: 1px 1px 5px #000;
margin-bottom: 20px;
}

.sp-perfection-title-2 {
font-size: 2.2em;
color: #ff9933;
margin-top: 30px;
margin-bottom: 20px;
}

.sp-perfection-title-3 {
font-size: 1.8em;
color: #00ccff;
margin-top: 20px;
}

.sp-perfection-text {
font-size: 1.4em;
color: #f0f0f0;
margin-bottom: 15px;
}

.perf-points ul {
list-style: none;
padding-left: 0;
}

.perf-points li {
font-size: 1.3em;
margin-bottom: 10px;
}

.perf-boxes img {
margin-right: 20px;
max-width: 100px;
}

.perf-trades {
margin-top: 20px;
}

.perf-trade {
text-align: center;
margin-right: 20px;
margin-bottom: 20px;
}

.img-responsive {
max-width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 15px;
}

.d-flex {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
</style>

0 comments on commit 60589bf

Please sign in to comment.