Skip to content

Instantly share code, notes, and snippets.

@forestbelton

forestbelton/star-levels.html

Last active February 8, 2023 11:51
Show Gist options
  • Save forestbelton/5590ae191e6d3f60d68f7a6deb1cc4e6 to your computer and use it in GitHub Desktop.
Save forestbelton/5590ae191e6d3f60d68f7a6deb1cc4e6 to your computer and use it in GitHub Desktop.
Download ZIP
Shrine of the Spirits: Star levels
Raw
star-levels.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Shrine of the Spirits: Star levels</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<style>
* {
font-family: Roboto, Helvetica, Arial, sans-serif;
}
body, html {
margin: 0;
padding: 0;
}
body {
background: #2c3e50;
color: #CED4d9;
}
#root {
margin: 50px auto 100px;
max-width: 960px;
}
@media (max-width: 960px) {
#root {
margin: 50px 25px 100px;
max-width: auto;
}
}
.star:after {
content: "\2605";
}
.star {
color: #FFBF03;
}
.star.purple {
color: #CD50FF;
}
h2 {
margin-top: 5rem;
}
table {
border-collapse: collapse;
}
tr {
border-bottom: 2px solid #7f8c8d;
}
tr > th {
text-align: left;
padding-right: 0.75rem;
padding-bottom: 0.2rem;
}
tr > td {
padding: 0.25rem 1rem 0.25rem 0;
vertical-align: top;
}
td > ul {
font-size: 0.75rem;
list-style-type: none;
margin: 0;
padding-left: 0;
}
</style>
</head>
<body>
<div id="root">
<h1 id="shrine-of-the-spirits-star-levels">Shrine of the Spirits: Star levels</h1>
<h2 id="star-level-information">Star level information</h2>
<table>
<thead>
<tr>
<th>Star level</th>
<th>Level limit</th>
<th>Basic bonus</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="star">5</span></td>
<td>100</td>
<td>0%</td>
</tr>
<tr>
<td><span class="star purple">6</span></td>
<td>145</td>
<td>40%</td>
</tr>
<tr>
<td><span class="star purple">7</span></td>
<td>165</td>
<td>80%</td>
</tr>
<tr>
<td><span class="star purple">8</span></td>
<td>185</td>
<td>120%</td>
</tr>
<tr>
<td><span class="star purple">9</span></td>
<td>205</td>
<td>160%</td>
</tr>
<tr>
<td><span class="star purple">10</span></td>
<td>255</td>
<td>220%</td>
</tr>
<tr>
<td><span class="star purple">11</span></td>
<td>???</td>
<td>???</td>
</tr>
<tr>
<td><span class="star purple">12</span></td>
<td>???</td>
<td>???</td>
</tr>
</tbody>
</table>
<h2 id="individual-level-upgrade-cost">Individual level upgrade cost</h2>
<table>
<thead>
<tr>
<th>Star level</th>
<th>Progress Stones</th>
<th>Heroes</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="star">5</span></td>
<td></td>
<td><ul><li>2x self (<span class="star">4</span>)</li><li>5x element (<span class="star">4</span>)</li></ul></td>
</tr>
<tr>
<td><span class="star purple">6</span></td>
<td></td>
<td><ul><li>1x self (<span class="star">5</span>)</li><li>2x element (<span class="star">5</span>)</li></ul></td>
</tr>
<tr>
<td><span class="star purple">7</span></td>
<td>1,000</td>
<td><ul><li>4x element (<span class="star">5</span>)</li></ul></td>
</tr>
<tr>
<td><span class="star purple">8</span></td>
<td>2,000</td>
<td><ul><li>3x element (<span class="star">5</span>)</li><li>1x element (<span class="star purple">6</span>)</li></ul></td>
</tr>
<tr>
<td><span class="star purple">9</span></td>
<td>4,000</td>
<td><ul><li>1x self (<span class="star">5</span>)</li><li>2x element (<span class="star">5</span>)</li><li>1x element (<span class="star purple">6</span>)</li></ul></td>
</tr>
<tr>
<td><span class="star purple">10</span></td>
<td>10,000</td>
<td><ul><li>2x self (<span class="star">5</span>)</li><li>1x element (<span class="star purple">6</span>)</li><li>1x any (<span class="star purple">9</span>)</li></ul></td>
</tr>
<tr>
<td><span class="star purple">11</span></td>
<td>???</td>
<td>???</td>
</tr>
<tr>
<td><span class="star purple">12</span></td>
<td>???</td>
<td>???</td>
</tr>
</tbody>
</table>
<h2 id="cumulative-progress-stone-upgrade-cost">Cumulative progress stone upgrade cost</h2>
<table>
<thead>
<tr>
<th></th>
<th><span class="star">5</span></th>
<th><span class="star purple">6</span></th>
<th><span class="star purple">7</span></th>
<th><span class="star purple">8</span></th>
<th><span class="star purple">9</span></th>
<th><span class="star purple">10</span></th>
<th><span class="star purple">11</span></th>
<th><span class="star purple">12</span></th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="star">4</span></td>
<td>0</td>
<td>0</td>
<td>1,000</td>
<td>3,000</td>
<td>7,000</td>
<td>17,000</td>
<td>???</td>
<td>???</td>
</tr>
<tr>
<td><span class="star">5</span></td>
<td></td>
<td>0</td>
<td>1,000</td>
<td>3,000</td>
<td>7,000</td>
<td>17,000</td>
<td>???</td>
<td>???</td>
</tr>
<tr>
<td><span class="star purple">6</span></td>
<td></td>
<td></td>
<td>1,000</td>
<td>3,000</td>
<td>7,000</td>
<td>17,000</td>
<td>???</td>
<td>???</td>
</tr>
<tr>
<td><span class="star purple">7</span></td>
<td></td>
<td></td>
<td></td>
<td>2,000</td>
<td>6,000</td>
<td>16,000</td>
<td>???</td>
<td>???</td>
</tr>
<tr>
<td><span class="star purple">8</span></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>4,000</td>
<td>14,000</td>
<td>???</td>
<td>???</td>
</tr>
<tr>
<td><span class="star purple">9</span></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>10,000</td>
<td>???</td>
<td>???</td>
</tr>
<tr>
<td><span class="star purple">10</span></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>???</td>
<td>???</td>
</tr>
<tr>
<td><span class="star purple">11</span></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>???</td>
</tr>
<tr>
<td><span class="star purple">12</span></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="cumulative-hero-upgrade-cost">Cumulative hero upgrade cost</h2>
<table>
<thead>
<tr>
<th></th>
<th><span class="star">5</span></th>
<th><span class="star purple">6</span></th>
<th><span class="star purple">7</span></th>
<th><span class="star purple">8</span></th>
<th><span class="star purple">9</span></th>
<th><span class="star purple">10</span></th>
<th><span class="star purple">11</span></th>
<th><span class="star purple">12</span></th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="star">4</span></td>
<td><ul><li>2x self (<span class="star">4</span>)</li><li>5x element (<span class="star">4</span>)</li></ul></td>
<td><ul><li>2x self (<span class="star">4</span>)</li><li>1x self (<span class="star">5</span>)</li><li>5x element (<span class="star">4</span>)</li><li>2x element (<span class="star">5</span>)</li></ul></td>
<td><ul><li>2x self (<span class="star">4</span>)</li><li>1x self (<span class="star">5</span>)</li><li>5x element (<span class="star">4</span>)</li><li>6x element (<span class="star">5</span>)</li></ul></td>
<td><ul><li>2x self (<span class="star">4</span>)</li><li>1x self (<span class="star">5</span>)</li><li>5x element (<span class="star">4</span>)</li><li>9x element (<span class="star">5</span>)</li><li>1x element (<span class="star purple">6</span>)</li></ul></td>
<td><ul><li>2x self (<span class="star">4</span>)</li><li>2x self (<span class="star">5</span>)</li><li>5x element (<span class="star">4</span>)</li><li>11x element (<span class="star">5</span>)</li><li>2x element (<span class="star purple">6</span>)</li></ul></td>
<td><ul><li>2x self (<span class="star">4</span>)</li><li>4x self (<span class="star">5</span>)</li><li>5x element (<span class="star">4</span>)</li><li>11x element (<span class="star">5</span>)</li><li>3x element (<span class="star purple">6</span>)</li><li>1x any (<span class="star purple">9</span>)</li></ul></td>
<td>???</td>
<td>???</td>
</tr>
<tr>
<td><span class="star">5</span></td>
<td></td>
<td><ul><li>1x self (<span class="star">5</span>)</li><li>2x element (<span class="star">5</span>)</li></ul></td>
<td><ul><li>1x self (<span class="star">5</span>)</li><li>6x element (<span class="star">5</span>)</li></ul></td>
<td><ul><li>1x self (<span class="star">5</span>)</li><li>9x element (<span class="star">5</span>)</li><li>1x element (<span class="star purple">6</span>)</li></ul></td>
<td><ul><li>2x self (<span class="star">5</span>)</li><li>11x element (<span class="star">5</span>)</li><li>2x element (<span class="star purple">6</span>)</li></ul></td>
<td><ul><li>4x self (<span class="star">5</span>)</li><li>11x element (<span class="star">5</span>)</li><li>3x element (<span class="star purple">6</span>)</li><li>1x any (<span class="star purple">9</span>)</li></ul></td>
<td>???</td>
<td>???</td>
</tr>
<tr>
<td><span class="star purple">6</span></td>
<td></td>
<td></td>
<td><ul><li>4x element (<span class="star">5</span>)</li></ul></td>
<td><ul><li>7x element (<span class="star">5</span>)</li><li>1x element (<span class="star purple">6</span>)</li></ul></td>
<td><ul><li>1x self (<span class="star">5</span>)</li><li>9x element (<span class="star">5</span>)</li><li>2x element (<span class="star purple">6</span>)</li></ul></td>
<td><ul><li>3x self (<span class="star">5</span>)</li><li>9x element (<span class="star">5</span>)</li><li>3x element (<span class="star purple">6</span>)</li><li>1x any (<span class="star purple">9</span>)</li></ul></td>
<td>???</td>
<td>???</td>
</tr>
<tr>
<td><span class="star purple">7</span></td>
<td></td>
<td></td>
<td></td>
<td><ul><li>3x element (<span class="star">5</span>)</li><li>1x element (<span class="star purple">6</span>)</li></ul></td>
<td><ul><li>1x self (<span class="star">5</span>)</li><li>5x element (<span class="star">5</span>)</li><li>2x element (<span class="star purple">6</span>)</li></ul></td>
<td><ul><li>3x self (<span class="star">5</span>)</li><li>5x element (<span class="star">5</span>)</li><li>3x element (<span class="star purple">6</span>)</li><li>1x any (<span class="star purple">9</span>)</li></ul></td>
<td>???</td>
<td>???</td>
</tr>
<tr>
<td><span class="star purple">8</span></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><ul><li>1x self (<span class="star">5</span>)</li><li>2x element (<span class="star">5</span>)</li><li>1x element (<span class="star purple">6</span>)</li></ul></td>
<td><ul><li>3x self (<span class="star">5</span>)</li><li>2x element (<span class="star">5</span>)</li><li>2x element (<span class="star purple">6</span>)</li><li>1x any (<span class="star purple">9</span>)</li></ul></td>
<td>???</td>
<td>???</td>
</tr>
<tr>
<td><span class="star purple">9</span></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><ul><li>2x self (<span class="star">5</span>)</li><li>1x element (<span class="star purple">6</span>)</li><li>1x any (<span class="star purple">9</span>)</li></ul></td>
<td>???</td>
<td>???</td>
</tr>
<tr>
<td><span class="star purple">10</span></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>???</td>
<td>???</td>
</tr>
<tr>
<td><span class="star purple">11</span></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>???</td>
</tr>
<tr>
<td><span class="star purple">12</span></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment