You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
212 lines
6.0 KiB
212 lines
6.0 KiB
3 years ago
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>NGS Planner UI Mock-Up</title>
|
||
|
|
<link rel="stylesheet" href="reset.css">
|
||
|
|
<link rel="stylesheet" href="style.css">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="header">
|
||
|
|
<div>
|
||
|
|
<ul>
|
||
|
|
<li class="logo"><a href="#"><img alt="" src="logo_sm.png" /> NGSplanner.com</a></li>
|
||
|
|
<li class="headermenuitem"><a href="#">Build Planner</a></li>
|
||
|
|
<li class="headermenuitem"><a href="#">Guides</a></li>
|
||
|
|
<li class="headermenuitem"><a href="#">Blog</a></li>
|
||
|
|
<li class="headermenuitem"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Grid Ref</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="main">
|
||
|
|
<div class="containerA">
|
||
|
|
<div class="box">
|
||
|
|
<div class="boxTitleBar">
|
||
|
|
<h1>Basic Information</h1>
|
||
|
|
<div class="boxExit"></div>
|
||
|
|
</div>
|
||
|
|
<table class="basicInfo">
|
||
|
|
<tr>
|
||
|
|
<td>Author</td>
|
||
|
|
<td> </td>
|
||
|
|
<td>Dudley</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Build Name</td>
|
||
|
|
<td> </td>
|
||
|
|
<td>Fatimah</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Class</td>
|
||
|
|
<td><img alt="" src="Ra.png" /> Ranger</td>
|
||
|
|
<td><span class="ye">Lv.20</span></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td> </td>
|
||
|
|
<td><img alt="" src="Fo.png" /> Force</td>
|
||
|
|
<td>Lv.15</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div class="box">
|
||
|
|
<div class="boxTitleBar">
|
||
|
|
<h1>Current Effects</h1>
|
||
|
|
<div class="boxExit"></div>
|
||
|
|
</div>
|
||
|
|
<ul class="boxmenu">
|
||
|
|
<li>1</li>
|
||
|
|
<li>2</li>
|
||
|
|
</ul>
|
||
|
|
<h3>Effect Name</h3>
|
||
|
|
<ul class="infoBuffs">
|
||
|
|
<li>Food Bost Effect
|
||
|
|
<ul>
|
||
|
|
<li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" /> [Meat] Potency +10.0%</li>
|
||
|
|
<li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" /> [Crisp] Potency to Weak Point +5.0%</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>Shifta / Deband
|
||
|
|
<ul>
|
||
|
|
<li><img alt="" src="https://i.imgur.com/VIYYNIm.png" /> Potency +5.0%</li>
|
||
|
|
<li><img alt="" src="https://i.imgur.com/VIYYNIm.png" /> Damage Resistance +10.0%</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>Region Mag Boost
|
||
|
|
<ul>
|
||
|
|
<li><img alt="" src="https://i.imgur.com/N6M74Qr.png" /> Potency +5.0%</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="containerB">
|
||
|
|
<div class="box">
|
||
|
|
<div class="boxTitleBar">
|
||
|
|
<h1>Equip</h1>
|
||
|
|
<div class="boxExit"></div>
|
||
|
|
</div>
|
||
|
|
<div class="equipPalette">
|
||
|
|
<div class="equipPaletteSlot"><h3>Weapons</h3><div class="equipPaletteSlotWrapper"><span>1</span><img class="r4" alt="" src="./64px-NGSUIItemResurgirRifle.png" /></div></div>
|
||
|
|
<div class="equipPaletteSlot"><h3>Armor 1</h3><div class="equipPaletteSlotWrapper"><img class="r3" alt="" src="./photon_barrier.png" /></div></div>
|
||
|
|
<div class="equipPaletteSlot"><h3>Armor 2</h3><div class="equipPaletteSlotWrapper"><img class="r3" alt="" src="./photon_barrier.png" /></div></div>
|
||
|
|
<div class="equipPaletteSlot"><h3>Armor 3</h3><div class="equipPaletteSlotWrapper"><img class="r3" alt="" src="./photon_barrier.png" /></div></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="box">
|
||
|
|
<div class="boxTitleBar">
|
||
|
|
<h1>Equipped Weapon</h1>
|
||
|
|
<div class="boxExit"></div>
|
||
|
|
</div>
|
||
|
|
<h2 class="rifle">Resurgir Rifle+40</h2>
|
||
|
|
<ul class="boxmenu">
|
||
|
|
<li>1</li>
|
||
|
|
<li>2</li>
|
||
|
|
<li>3</li>
|
||
|
|
<li>4</li>
|
||
|
|
<li>5</li>
|
||
|
|
<li>6</li>
|
||
|
|
</ul>
|
||
|
|
<div class="equipDetails">
|
||
|
|
<div class="equipAugs">
|
||
|
|
<h3>Abilitiy Details</h3>
|
||
|
|
<ul>
|
||
|
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Potency +20%/<br />Critical Hit Rage +15% for 30 seconds after a successful sidestep</span></div><span class="pot">Dynamo Unit Lv.3</span></li>
|
||
|
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Potency +4%</span></div><span class="fixa">Fixa Attack Lv.3</span></li>
|
||
|
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>PP +5<br />Ranged Weapon Potency +2.0%</span></div><span class="aug">Pettas Soul II</span></li>
|
||
|
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>HP -10, Potency +1.5%,<br />Potency Floor Increase +1.5%<br />Damage Resistance -1.5%</span></div><span class="aug">Alts Secreta II</span></li>
|
||
|
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>HP +10<br />Ranged Weapon Potency +2.0%</span></div><span class="aug">Gigas Precision II</span></li>
|
||
|
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Ranged Weapon Potency +2.0%</span></div><span class="aug">Precision III</span></li>
|
||
|
|
<li><img alt="" src="./icons/aug_plus.png" /></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="pr">
|
||
|
|
<h3>Properties</h3>
|
||
|
|
<ul>
|
||
|
|
<li>Enhancement Lv. <span>+35</span></li>
|
||
|
|
<li>Multi-Weapon <span>-</span></li>
|
||
|
|
<li>Element <span>-</span></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="containerC">
|
||
|
|
<div class="box">
|
||
|
|
<div class="boxTitleBar">
|
||
|
|
<h1>Basic Stats</h1>
|
||
|
|
<div class="boxExit"></div>
|
||
|
|
</div>
|
||
|
|
<table class="statsInfo">
|
||
|
|
<tr>
|
||
|
|
<td>Battle Power</td>
|
||
|
|
<td class="ri">1344</td>
|
||
|
|
<td> </td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>HP</td>
|
||
|
|
<td>289</td>
|
||
|
|
<td> </td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>PP</td>
|
||
|
|
<td>100</td>
|
||
|
|
<td> </td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Defense</td>
|
||
|
|
<td>402</td>
|
||
|
|
<td> </td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Weapon Up</td>
|
||
|
|
<td class="statsMelWeaponUp"><span class="ye">+34%</span></td>
|
||
|
|
<td class="statsRngWeaponUp"><span class="ye">+34%</span></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td></td>
|
||
|
|
<td class="statsTecWeaponUp"><span class="ye">+34%</span></td>
|
||
|
|
<td> </td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Damage Resist.</td>
|
||
|
|
<td>18%</td>
|
||
|
|
<td> </td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div class="box">
|
||
|
|
<div class="boxTitleBar">
|
||
|
|
<h1>Damage Stats</h1>
|
||
|
|
<div class="boxExit"></div>
|
||
|
|
</div>
|
||
|
|
<ul class="boxmenu">
|
||
|
|
<li>1</li>
|
||
|
|
<li>2</li>
|
||
|
|
<li>3</li>
|
||
|
|
</ul>
|
||
|
|
<table class="basicInfo">
|
||
|
|
<tr>
|
||
|
|
<td>Critical Hit Rate</td>
|
||
|
|
<td>5%</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Critical Multiplier</td>
|
||
|
|
<td>120%</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Midrange</td>
|
||
|
|
<td>126</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Critcal</td>
|
||
|
|
<td>152</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Effective</td>
|
||
|
|
<td><span class="ye">127</span></td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|