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.
143 lines
7.9 KiB
143 lines
7.9 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="#">About</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="main">
|
||
|
|
<div class="container">
|
||
|
|
|
||
|
|
<!-- Item Select Box Start -->
|
||
|
|
<div class="box itembox">
|
||
|
|
<div class="boxTitleBar">
|
||
|
|
<h1>Weapon Select</h1>
|
||
|
|
<div class="boxExit"></div>
|
||
|
|
</div>
|
||
|
|
<ul class="boxmenu">
|
||
|
|
<li>Rifle</li>
|
||
|
|
<li>Launcher</li>
|
||
|
|
<li>Rod</li>
|
||
|
|
<li>Talis</li>
|
||
|
|
</ul>
|
||
|
|
<div class="itemBar">
|
||
|
|
<div class="itemBarSort">
|
||
|
|
<select class="itemBarForm">
|
||
|
|
<option>Standard Sort</option>
|
||
|
|
<option>Rarity</option>
|
||
|
|
<option>Attack</option>
|
||
|
|
<option>Potency</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="itemBarFilter">
|
||
|
|
<input class="itemBarForm" type="text" placeholder="Filter" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="itemlistcontainer customScrollbar">
|
||
|
|
<ul class="itemlist">
|
||
|
|
<li class="itemwep r1"><img class="itemimg" alt="" src="64px-NGSUIItemPrimmRifle.png" /><em class="rifle">Primm Rifle</em><br /><span class="atk">177</span> <span class="pot tooltip">Recycler Unit<span>Lv.4: Potency +24%/<br />20% chance of Restasigne not being consumed on use. Effect starts 10 sec after equip</span></span></li>
|
||
|
|
<li class="itemwep r2"><img class="itemimg" alt="" src="64px-NGSUIItemTzviaRifle.png" /><em class="rifle">Tzvia Rifle</em><br /><span class="atk">195</span> <span class="pot tooltip">Indomitable Unit<span>Lv.4: Potency +26%/<br />All Down Resistances +20%</span></li>
|
||
|
|
<li class="itemwep r3"><img class="itemimg" alt="" src="64px-NGSUIItemTheseusRifle.png" /><em class="rifle">Theseus Rifle</em><br /><span class="atk">223</span> <span class="pot tooltip">Defensive Formation<span>Lv.4: Potency +22%/<br />Critical Hit Rate increases based on Defense, up to a maximum of +18% at 1,000 Defense.</span></span></li>
|
||
|
|
<li class="itemwep r4"><img class="itemimg" alt="" src="64px-NGSUIItemResurgirRifle.png" /><em class="rifle">Resurgir Rifle</em><br /><span class="atk">240</span> <span class="pot tooltip">Dynamo Unit<span>Lv.4: Potency +21%/<br />Critical Hit Rate +18% for 30 seconds after a successful Sidestep.</span></span></li>
|
||
|
|
<li class="itemwep r4"><img class="itemimg" alt="" src="64px-NGSUIItemFoursisRifle.png" /><em class="rifle">Foursis Rifle</em><br /><span class="atk">242</span> <span class="pot tooltip">Bastion Unit<span>Lv.4: Potency +24%/<br />Creates a barrier that provides Damage Resistance +50% when at Max HP.</span></span></li>
|
||
|
|
<li class="itemwep"><img class="itemimg" alt="" src="logo_test.png" /><em class="gb">Test</em><br /><span class="atk">999</span> <span class="pot tooltip" title="Test">Test<span>Test</span></span></li>
|
||
|
|
<li class="itemwep"><img class="itemimg" alt="" src="logo_test.png" /><em class="gb">Test</em><br /><span class="atk">999</span> <span class="pot tooltip" title="Test">Test<span>Test</span></span></li>
|
||
|
|
<li class="itemwep"><img class="itemimg" alt="" src="logo_test.png" /><em class="gb">Test</em><br /><span class="atk">999</span> <span class="pot tooltip" title="Test">Test<span>Test</span></span></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Item Select Box End -->
|
||
|
|
|
||
|
|
<!-- Item Select Box Start -->
|
||
|
|
<div class="box itembox">
|
||
|
|
<div class="boxTitleBar">
|
||
|
|
<h1>Food List</h1>
|
||
|
|
<div class="boxExit"></div>
|
||
|
|
</div>
|
||
|
|
<div class="itemBar">
|
||
|
|
<div class="itemBarSort">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="itemBarFilter">
|
||
|
|
<input class="itemBarForm" type="text" placeholder="Filter" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="itemlistcontainer customScrollbar">
|
||
|
|
<ul class="itemlist">
|
||
|
|
<li class="itemwep r1"><img class="itemimg" alt="" src="./icons/food/rich_aelio_herb.png" style="" /><em class="vege">Rich Aelio Herb</em><br /><span class="atk">177</span> </li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Item Select Box End -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="container">
|
||
|
|
|
||
|
|
<!-- Item Select Box Start -->
|
||
|
|
<div class="box itembox">
|
||
|
|
<div class="boxTitleBar">
|
||
|
|
<h1>Augment Select</h1>
|
||
|
|
<div class="boxExit"></div>
|
||
|
|
</div>
|
||
|
|
<ul class="boxmenu">
|
||
|
|
<li>Potential</li>
|
||
|
|
<li>Preset Skill</li>
|
||
|
|
<li>Augment</li>
|
||
|
|
</ul>
|
||
|
|
<div class="itemBar">
|
||
|
|
<div class="itemBarSort">
|
||
|
|
<select class="itemBarForm">
|
||
|
|
<option>Standard Sort</option>
|
||
|
|
<option>MEL Potency</option>
|
||
|
|
<option>RNG Potency</option>
|
||
|
|
<option>TEC Potency</option>
|
||
|
|
<option>Potency Floor</option>
|
||
|
|
<option>HP</option>
|
||
|
|
<option>PP</option>
|
||
|
|
<option>DMG Resistance</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="itemBarFilter">
|
||
|
|
<input class="itemBarForm" type="text" placeholder="Filter" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="itemListContainer customScrollbar">
|
||
|
|
<ul class="itemList">
|
||
|
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Potency +XX%/<br />Critical Hit Rage +XX% for 30 seconds after a successful sidestep</span></div><span class="pot">Dynamo Unit Lv.1</span></li>
|
||
|
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Potency +XX%/<br />Critical Hit Rage +XX% for 30 seconds after a successful sidestep</span></div><span class="pot">Dynamo Unit Lv.2</span></li>
|
||
|
|
<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 +XX%/<br />Critical Hit Rage +XX% for 30 seconds after a successful sidestep</span></div><span class="pot">Dynamo Unit Lv.4</span></li>
|
||
|
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Potency +2%</span></div><span class="fixa">Fixa Attack Lv.1</span></li>
|
||
|
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Potency +3%</span></div><span class="fixa">Fixa Attack Lv.2</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>Potency +4.5%</span></div><span class="fixa">Fixa Attack Lv.4</span></li>
|
||
|
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Potency +5%</span></div><span class="fixa">Fixa Attack Lv.5</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>Testing</span></div><span class="aug">Test</span></li>
|
||
|
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Testing</span></div><span class="aug">Test</span></li>
|
||
|
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Testing</span></div><span class="aug">Test</span></li>
|
||
|
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Testing</span></div><span class="aug">Test</span></li>
|
||
|
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Testing</span></div><span class="aug">Test</span></li>
|
||
|
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Testing</span></div><span class="aug">Test</span></li>
|
||
|
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Testing</span></div><span class="aug">Test</span></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Item Select Box End -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|