dudleycu
4 years ago
|
Before Width: | Height: | Size: 9.3 KiB After Width: | Height: | Size: 9.3 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 7.8 KiB After Width: | Height: | Size: 7.8 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 9.3 KiB After Width: | Height: | Size: 9.3 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 357 B |
|
Before Width: | Height: | Size: 346 B After Width: | Height: | Size: 346 B |
|
Before Width: | Height: | Size: 5.9 KiB After Width: | Height: | Size: 413 B |
|
Before Width: | Height: | Size: 5.9 KiB After Width: | Height: | Size: 367 B |
|
Before Width: | Height: | Size: 6.0 KiB After Width: | Height: | Size: 363 B |
|
Before Width: | Height: | Size: 249 B After Width: | Height: | Size: 249 B |
|
Before Width: | Height: | Size: 270 B After Width: | Height: | Size: 270 B |
|
Before Width: | Height: | Size: 268 B After Width: | Height: | Size: 268 B |
|
Before Width: | Height: | Size: 273 B After Width: | Height: | Size: 273 B |
|
Before Width: | Height: | Size: 523 B After Width: | Height: | Size: 523 B |
|
After Width: | Height: | Size: 677 B |
|
After Width: | Height: | Size: 119 B |
|
Before Width: | Height: | Size: 215 B After Width: | Height: | Size: 215 B |
|
After Width: | Height: | Size: 128 B |
|
After Width: | Height: | Size: 116 B |
|
Before Width: | Height: | Size: 118 B After Width: | Height: | Size: 118 B |
|
After Width: | Height: | Size: 197 B |
|
After Width: | Height: | Size: 753 B |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 733 B |
|
Before Width: | Height: | Size: 418 KiB After Width: | Height: | Size: 418 KiB |
|
After Width: | Height: | Size: 215 B |
|
After Width: | Height: | Size: 59 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 53 KiB |
|
After Width: | Height: | Size: 53 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 47 KiB |
|
After Width: | Height: | Size: 69 KiB |
|
After Width: | Height: | Size: 61 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 63 KiB |
|
After Width: | Height: | Size: 57 KiB |
|
After Width: | Height: | Size: 68 KiB |
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 50 KiB |
|
After Width: | Height: | Size: 63 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 6.3 KiB |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 208 KiB After Width: | Height: | Size: 208 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 312 B After Width: | Height: | Size: 312 B |
|
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 67 KiB |
|
After Width: | Height: | Size: 118 B |
|
Before Width: | Height: | Size: 6.9 KiB After Width: | Height: | Size: 6.9 KiB |
|
Before Width: | Height: | Size: 157 B After Width: | Height: | Size: 157 B |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 851 B After Width: | Height: | Size: 851 B |
|
Before Width: | Height: | Size: 662 B After Width: | Height: | Size: 662 B |
|
Before Width: | Height: | Size: 761 B After Width: | Height: | Size: 761 B |
|
Before Width: | Height: | Size: 157 B After Width: | Height: | Size: 157 B |
|
Before Width: | Height: | Size: 653 B After Width: | Height: | Size: 653 B |
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 557 B After Width: | Height: | Size: 557 B |
@ -1,75 +0,0 @@ |
||||
<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="containerX"> |
||||
|
||||
<!-- Item Select Box Start --> |
||||
<div class="box treeSelectBox"> |
||||
<div class="boxTitleBar"> |
||||
<h1>Class Skill Tree</h1> |
||||
<div class="boxExit"></div> |
||||
</div> |
||||
<div class="treeListContainer customScrollbar"> |
||||
<ul class="treeList"> |
||||
<li><img alt="" src="./icons/class/hu.png" />Hunter</li> |
||||
<li><img alt="" src="./icons/class/fi.png" />Fighter</li> |
||||
<li class="treeListMain"><img alt="" src="./icons/class/ra.png" />Ranger</li> |
||||
<li><img alt="" src="./icons/class/gu.png" />Gunner</li> |
||||
<li class="treeListSub"><img alt="" src="./icons/class/fo.png" />Force</li> |
||||
<li><img alt="" src="./icons/class/te.png" />Techter</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<!-- Item Select Box End --> |
||||
|
||||
</div> |
||||
<div class="containerY"> |
||||
|
||||
<!-- Item Select Box Start --> |
||||
<div class="box skillTreeBox"> |
||||
<div class="boxTitleBar"> |
||||
<h1>Ranger01</h1> |
||||
<div class="boxExit"></div> |
||||
</div> |
||||
<div class="skillTreeContainer customScrollbar"> |
||||
<div class="skillTreeGrid"> |
||||
<div class="skillActive" style="grid-area:a1"><img class="skillIcon" alt="" src="./icons/class_skills/ra/Blight_Rounds.png" /><span class="skillAllocated">1/5</span><em class="skillName">Blight Rounds</em></div> |
||||
<div class="skillMaxed" style="grid-area:a2"><span class="skillTreeReqUnlock"> </span><img class="skillIcon" alt="" src="./icons/class_skills/ra/Blight_Rounds_Reinforce.png" /><span class="skillAllocated">1/1</span><em class="skillName">Blight Rounds Reinforce</em></div> |
||||
<div style="grid-area:b1"><img class="skillIcon" alt="" src="./icons/class_skills/ra/Bad_Condition_Ward.png" /><span class="skillAllocated">0/10</span><em class="skillName">Bad Condition Ward</em></div> |
||||
<div style="grid-area:b2"><img class="skillIcon" alt="" src="./icons/class_skills/ra/Spread_Shot.png" /><span class="skillAllocated">0/1</span><em class="skillName">Spread Shot</em></div> |
||||
<div class="skillLocked" style="grid-area:b3"><span class="skillTreeReqLock"> </span><img class="skillIcon" alt="" src="./icons/class_skills/ra/Spread_Shot_Quick_Getaway.png" /><span class="skillAllocated">0/1</span><em class="skillName">Spread Shot Quick Getaway</em></div> |
||||
<div style="grid-area:c1"><img class="skillIcon" alt="" src="./icons/class_skills/ra/Bad_Condition_Reduction.png" /><span class="skillAllocated">0/10</span><em class="skillName">Bad Condition Reduction</em></div> |
||||
<div style="grid-area:c2"><img class="skillIcon" alt="" src="./icons/class_skills/ra/Rifle_Grenadier.png" /><span class="skillAllocated">0/1</span><em class="skillName">Rifle Grenadier</em></div> |
||||
<div style="grid-area:c3"><img class="skillIcon" alt="" src="./icons/class_skills/ra/Slide_Shot_Advance.png" /><span class="skillAllocated">0/1</span><em class="skillName">Slide Shot Advance</em></div> |
||||
<div style="grid-area:d2"><img class="skillIcon" alt="" src="./icons/class_skills/ra/Sticky_Bomb_Quick_Reload.png" /><span class="skillAllocated">0/1</span><em class="skillName">Sticky Bomb Quick Reload</em></div> |
||||
<div style="grid-area:d3"><img class="skillIcon" alt="" src="./icons/class_skills/ra/Launcher_Charge_Grouping.png" /><span class="skillAllocated">0/1</span><em class="skillName">Launcher Charge Grouping</em></div> |
||||
<div style="grid-area:e1"><img class="skillIcon" alt="" src="./icons/class_skills/ra/Slow_Landing_Attack-Ranger.png" /><span class="skillAllocated">0/1</span><em class="skillName">Slow Landing Attack-Ranger</em></div> |
||||
<div style="grid-area:f1"><img class="skillIcon" alt="" src="./icons/class_skills/ra/Slow_Landing_Charge-Ranger.png" /><span class="skillAllocated">0/1</span><em class="skillName">Slow Landing Charge-Ranger</em></div> |
||||
</div> |
||||
</div> |
||||
<div class="skillPoints">Your Skill Points  6   SP    0</div> |
||||
<div class="skillConfirm"><span>Confirm</span><span>Cancel</span></div> |
||||
</div> |
||||
<!-- Item Select Box End --> |
||||
|
||||
</div> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
@ -1,79 +0,0 @@ |
||||
<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="containerB"> |
||||
|
||||
<!-- Item Select Box Start --> |
||||
<div class="box treeSelectBox"> |
||||
<h1>◆ Class Skill Tree<span class="exitBox">✕</span></h1> |
||||
<div class="treeListContainer customScrollbar"> |
||||
<ul class="treeList"> |
||||
<li>Hunter</li> |
||||
<li>Fighter</li> |
||||
<li>Ranger</li> |
||||
<li>Gunner</li> |
||||
<li>Force</li> |
||||
<li>Techter</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<!-- Item Select Box End --> |
||||
|
||||
</div> |
||||
<div class="containerC"> |
||||
|
||||
<!-- Item Select Box Start --> |
||||
<div class="box skillTreeBox"> |
||||
<h1>◆ Class Skill Tree<span class="exitBox">✕</span></h1> |
||||
<div class="skillTreeContainer customScrollbar"> |
||||
<div class="skillTreeColumn"> |
||||
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/5</span><em class="skillName">Blight Rounds</em></div> |
||||
<div class="skillItem"><img class="skillIcon" alt="" src="./icons/Blight_Rounds_Reinforce.png" /><span class="skillAllocated">0/1</span><em class="skillName">Blight Rounds Reinforce</em></div> |
||||
</div> |
||||
<div class="skillTreeColumn"> |
||||
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/10</span><em class="skillName">Bad Condition Ward</em></div> |
||||
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/1</span><em class="skillName">Spread Shot</em></div> |
||||
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/1</span><em class="skillName">Spread Shot Quick Getaway</em></div> |
||||
</div> |
||||
<div class="skillTreeColumn"> |
||||
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/10</span><em class="skillName">Bad Condition Reduction</em></div> |
||||
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/1</span><em class="skillName">Rifle Grenadier</em></div> |
||||
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/1</span><em class="skillName">Slide Shot Advance</em></div> |
||||
</div> |
||||
<div class="skillTreeColumn"> |
||||
<div class="skillBlank"> </div> |
||||
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/1</span><em class="skillName">Sticky Bomb Quick Reload</em></div> |
||||
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/1</span><em class="skillName">Launcher Charge Grouping</em></div> |
||||
</div> |
||||
<div class="skillTreeColumn"> |
||||
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/1</span><em class="skillName">Slow Landing Attack-Ranger</em></div> |
||||
</div> |
||||
<div class="skillTreeColumn"> |
||||
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/1</span><em class="skillName">Slow Landing Charge-Ranger</em></div> |
||||
</div> |
||||
</div> |
||||
<!-- Item Select Box End --> |
||||
<div class="skillPoints">Your Skill Points  6   SP    0</div> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
</body> |
||||
</html> |
||||
@ -1,212 +0,0 @@ |
||||
<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> |
||||
@ -1,143 +0,0 @@ |
||||
<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> |
||||
@ -1,634 +0,0 @@ |
||||
* { |
||||
border: 0; |
||||
margin: 0; |
||||
padding: 0; |
||||
box-sizing: border-box; |
||||
} |
||||
@font-face { |
||||
font-family: "ngs"; |
||||
src: url("4.woff") format("woff"); |
||||
} |
||||
@font-face { |
||||
font-family: "ngs2"; |
||||
src: url("3.woff") format("woff"); |
||||
} |
||||
body { |
||||
background-image: url("./d_global_bg_header.png"),url("./gl_main_bg.jpg"); |
||||
background-size: 1903px,2560px; |
||||
background-color: #e8ecf4; |
||||
background-repeat: no-repeat,repeat-y; |
||||
background-position: center 40px; |
||||
color: black; |
||||
font-family: ngs,Arial,sans-serif; |
||||
font-size: 11pt; |
||||
font-weight: normal; |
||||
text-align: center; |
||||
-webkit-font-smoothing: antialiased; |
||||
} |
||||
ul { |
||||
list-style-type: none; |
||||
padding-inline-start: 0; |
||||
} |
||||
em { |
||||
font-style: normal; |
||||
} |
||||
#header { |
||||
background-color: white; |
||||
min-height: 50px; |
||||
padding: 20px; |
||||
text-align: left; |
||||
margin-bottom: 20px; |
||||
} |
||||
#header a { |
||||
color: #151f25; |
||||
text-decoration: none; |
||||
} |
||||
#header a:hover { |
||||
color: #454f85; |
||||
text-decoration: none; |
||||
} |
||||
#header div { |
||||
margin: 0 auto; |
||||
width: 80%; |
||||
} |
||||
#header ul { |
||||
display: flex; |
||||
flex-flow: row wrap; |
||||
align-items: center; |
||||
margin-left: -40px; |
||||
justify-content: flex-end; |
||||
} |
||||
#header ul li { |
||||
flex: 0 1; |
||||
color: black; |
||||
font-family: "ngs2"; |
||||
text-align: center; |
||||
white-space:nowrap; |
||||
|
||||
} |
||||
.headermenuitem { |
||||
font-size:14pt; |
||||
margin-left: 40px; |
||||
} |
||||
.logo { |
||||
margin-right: auto; |
||||
font-weight:bold; |
||||
font-size:20px; |
||||
} |
||||
.logo img { |
||||
height:28px; |
||||
vertical-align: middle; |
||||
} |
||||
@media screen and (min-width:960px) and (max-width:1280px) { |
||||
#header ul { |
||||
margin-left: -20; |
||||
} |
||||
.headermenuitem { |
||||
font-size:13pt; |
||||
margin-left: 20px; |
||||
} |
||||
} |
||||
@media screen and (min-width:760px) and (max-width:960px) { |
||||
#header ul { |
||||
margin-left: -10px; |
||||
} |
||||
.headermenuitem { |
||||
font-size:12pt; |
||||
margin-left: 10px; |
||||
} |
||||
} |
||||
@media screen and (min-width:380px) and (max-width:760px) { |
||||
.headermenuitem { |
||||
display:none; |
||||
} |
||||
} |
||||
@media screen and (max-width:380px) { |
||||
.headermenuitem { |
||||
display:none; |
||||
} |
||||
} |
||||
|
||||
|
||||
#main { |
||||
display: flex; |
||||
flex-flow: row wrap; |
||||
justify-content: center; |
||||
width:100%; |
||||
} |
||||
.container { |
||||
flex: 1 1 200px; |
||||
max-width: 500px; |
||||
margin: 10px; |
||||
} |
||||
|
||||
.box { |
||||
color: #97e2fc; |
||||
background-clip: padding-box; |
||||
background-color: rgba(38,53,63,0.80); |
||||
border: 1px solid transparent; |
||||
/*background-color: #151f25;*/ |
||||
margin: 10px auto; |
||||
text-align: left; |
||||
text-shadow: -1px -1px 0 rgba(0,0,0,0.66), 1px -1px 0 rgba(0,0,0,0.66), -1px 1px 0 rgba(0,0,0,0.66), 1px 1px 0 rgba(0,0,0,0.66); |
||||
/*min-width: 300px;*/ |
||||
/*max-width: 500px;*/ |
||||
} |
||||
.box:hover { |
||||
border: 1px solid #36ffff; |
||||
} |
||||
.box:hover h1 { |
||||
background: linear-gradient(45deg, rgba(47,153,193,1),rgba(46,94,137,1) 30%,rgba(46,94,137,1) 70%, rgba(47,153,193,1)); |
||||
|
||||
} |
||||
.box table { |
||||
border-spacing: 0; |
||||
color: white; |
||||
margin: 10px auto; |
||||
width: 95%; |
||||
} |
||||
.box tr { |
||||
/* background-image: url("tr_bg.png");*/ |
||||
background-repeat: no-repeat; |
||||
background-position: left bottom; |
||||
border-bottom: 1px solid rgba(128,128,128,0.5); |
||||
} |
||||
.box tr:last-child { |
||||
border-bottom: 0; |
||||
} |
||||
.box td { |
||||
padding: 0 5px; |
||||
|
||||
} |
||||
.box td:first-child { |
||||
color: #97e2fc; |
||||
} |
||||
.box td:last-child { |
||||
text-align: right; |
||||
} |
||||
.statsInfo td:nth-child(2) { |
||||
text-align: right; |
||||
} |
||||
.statsInfo td:last-child { |
||||
width: 45%; |
||||
} |
||||
.statsInfo span { |
||||
background-repeat: no-repeat; |
||||
background-position: left center; |
||||
} |
||||
.statsMelWeaponUp span { |
||||
background-image: url("./mel.png"); |
||||
padding: 0 0 0 21px; |
||||
} |
||||
.statsRngWeaponUp span { |
||||
background-image: url("./rng.png"); |
||||
padding: 0 0 0 21px; |
||||
} |
||||
.statsTecWeaponUp span { |
||||
background-image: url("./tec.png"); |
||||
padding: 0 0 0 21px; |
||||
} |
||||
.box h1 { |
||||
/* background-color: #495a61; */ |
||||
background-color: rgba(128,128,128,0.50); |
||||
color: white; |
||||
font-weight: normal; |
||||
font-size: 13pt; |
||||
margin-bottom: 10px; |
||||
padding: 13px 13px 7px 13px; |
||||
text-align: left; |
||||
} |
||||
.box h2 { |
||||
/* background-color: #495a61; */ |
||||
color: white; |
||||
font-weight: normal; |
||||
font-size: 18px; |
||||
/* margin-bottom: 20px; |
||||
padding: 10px; */ |
||||
margin: 0 auto 10px auto; |
||||
text-align: left; |
||||
width: 95%; |
||||
} |
||||
.box h2 img { |
||||
margin-right: 5px; |
||||
vertical-align: top; |
||||
} |
||||
.box h2:hover { |
||||
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); |
||||
} |
||||
.da { |
||||
color: white; |
||||
text-align: right; |
||||
} |
||||
.da span { |
||||
background-color: rgba(20,29,40,0.66); |
||||
padding: 5px; |
||||
} |
||||
.da span:hover { |
||||
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); |
||||
} |
||||
.basicInfo tr:hover { |
||||
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); |
||||
} |
||||
.infoBuffs { |
||||
margin: 0 auto; |
||||
width: 90%; |
||||
} |
||||
.infoBuffs:last-child { |
||||
margin-bottom: 10px; |
||||
} |
||||
.infobuffs li { |
||||
margin: 5px 0; |
||||
} |
||||
.infoBuffs li:hover { |
||||
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); |
||||
} |
||||
.infoBuffs li ul { |
||||
width: 100%; |
||||
} |
||||
.infoBuffs li ul li { |
||||
width: 100%; |
||||
padding-left: 20px; |
||||
} |
||||
.infoBuffs li ul li:hover { |
||||
background: transparent; |
||||
} |
||||
.box p { |
||||
margin: 10px; |
||||
} |
||||
.box h3 { |
||||
/* background-image: url("tr_bg.png"); |
||||
background-repeat: no-repeat; |
||||
background-position: left bottom;*/ |
||||
font-size: 12pt; |
||||
font-weight: normal; |
||||
margin: 10px; |
||||
padding: 0 5px; |
||||
border-bottom: 1px solid rgba(128,128,128,0.5); |
||||
} |
||||
.we { |
||||
color: white; |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: center; |
||||
flex-wrap: wrap; |
||||
} |
||||
.we div { |
||||
background: linear-gradient(rgba(0,0,0,0) 15%,rgba(128,128,128,0.50) 15%); |
||||
/* background-image: url("we_bg.png"); |
||||
background-repeat:repeat-x; |
||||
background-position: left bottom;*/ |
||||
min-height: 128px; |
||||
max-width: 118px; |
||||
min-width: 100px; |
||||
width: 23%; |
||||
padding: 0 0 10px 0; |
||||
text-align: center; |
||||
} |
||||
.we div img { |
||||
margin-bottom: 10px; |
||||
} |
||||
.we div:hover { |
||||
background: linear-gradient(rgba(0,0,0,0) 15%,rgba(76,113,126,0.66) 15%,rgba(113,169,189,00.66)); |
||||
} |
||||
.we div h3 { |
||||
background-image: none; |
||||
/* background-image: url("tr_bg.png"); |
||||
background-repeat: no-repeat; |
||||
background-position: left bottom;*/ |
||||
color: #97e2fc; |
||||
font-size: 16px; |
||||
font-weight: normal; |
||||
margin: 0 0 10px 0; |
||||
padding: 0; |
||||
} |
||||
.de { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: center; |
||||
flex-wrap: wrap; |
||||
} |
||||
.de div { |
||||
/* background: linear-gradient(rgba(0,0,0,0) 18%,rgba(128,128,128,0.50) 18%); |
||||
background-image: url("we_bg.png"); |
||||
background-repeat:repeat-x; |
||||
background-position: left bottom;*/ |
||||
max-width: 250px; |
||||
min-width: 100px; |
||||
width: 50%; |
||||
padding: 0; |
||||
margin: 0; |
||||
text-align: left; |
||||
} |
||||
.aug li { |
||||
background-color: rgba(128,128,128,0.50); |
||||
color: white; |
||||
margin: 0 0 5px 10px; |
||||
padding: 5px; |
||||
} |
||||
.aug li img { |
||||
vertical-align: middle; |
||||
} |
||||
.aug li:hover { |
||||
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); |
||||
} |
||||
.pr li { |
||||
margin: 0 10px 2px 10px; |
||||
padding: 5px; |
||||
} |
||||
.pr li span { |
||||
color:white |
||||
} |
||||
.pr li:hover { |
||||
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); |
||||
} |
||||
.ye { |
||||
color: #ffb74c; |
||||
} |
||||
.itemlist { |
||||
margin: 0 10px; |
||||
} |
||||
.itemlist li { |
||||
background-color: rgba(128,128,128,0.33); |
||||
color: white; |
||||
margin: 0 0 5px 0; |
||||
padding: 10px; |
||||
background-repeat: no-repeat; |
||||
background-position: right top; |
||||
background-origin: content-box;white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
} |
||||
.itemlist li em { |
||||
/*background-color: rgba(38,53,63,0.33);*/ |
||||
|
||||
background-repeat: no-repeat; |
||||
background-position: left center; |
||||
} |
||||
.itemaug em { |
||||
background-image: url("./UINGSItemSpecialAbility.png"); |
||||
padding: 0 0 0 26px; |
||||
} |
||||
.itemwep { |
||||
font-size: 10pt; |
||||
} |
||||
.itemwep em { |
||||
font-size: 12pt; |
||||
line-height: 28px; |
||||
padding: 0 0 0 21px; |
||||
} |
||||
.rifle { |
||||
background-image: url("./NGSUIItemAssaultRifleMini.png"); |
||||
} |
||||
.gb { |
||||
background-image: url("./NGSUIItemGunbladeMini.png"); |
||||
} |
||||
.itemimg { |
||||
background: radial-gradient(rgb(196,196,196),rgb(128,128,128)); |
||||
border: 4px solid rgba(128,128,128,1); |
||||
float: left; |
||||
margin-right: 10px; |
||||
width: 48px; |
||||
box-sizing: content-box; |
||||
} |
||||
.r1 { |
||||
background-image: url("./NGSUIRarity1Star.png"); |
||||
} |
||||
.r1 .itemimg { |
||||
background: radial-gradient(rgb(64,150,183),rgb(52,123,150)); |
||||
} |
||||
.r2 { |
||||
background-image: url("./NGSUIRarity2Star.png"); |
||||
} |
||||
.r2 .itemimg { |
||||
background: radial-gradient(rgb(64,150,183),rgb(52,123,150)); |
||||
} |
||||
.r3 { |
||||
background-image: url("./NGSUIRarity3Star.png"); |
||||
} |
||||
.r3 .itemimg { |
||||
background: radial-gradient(rgb(64,150,183),rgb(52,123,150)); |
||||
} |
||||
.r4 { |
||||
background-image: url("./NGSUIRarity4Star.png"); |
||||
} |
||||
.r4 .itemimg { |
||||
background: radial-gradient(rgb(101,178,77),rgb(83,146,63)); |
||||
} |
||||
.itemlist li span { |
||||
background-repeat: no-repeat; |
||||
background-position: left center; |
||||
line-height: 28px; |
||||
padding: 0 23px; |
||||
} |
||||
.atk { |
||||
background-image: url("./NGSUIStatATKOutline.png"); |
||||
|
||||
} |
||||
.pot { |
||||
background-image: url("./NGSUIItemPotentialAbility.png"); |
||||
cursor: help; |
||||
} |
||||
.clear { |
||||
clear: both; |
||||
} |
||||
.itemlistcontainer { |
||||
height: 400px; |
||||
overflow-y: scroll; |
||||
margin: 0 5px 10px 0; |
||||
} |
||||
.itemlist li:hover, .treeList li:hover { |
||||
background-color: rgba(113,169,189,0.33); |
||||
} |
||||
.boxmenu { |
||||
font-size: 10pt; |
||||
margin: 10px; |
||||
} |
||||
.boxmenu li { |
||||
background-color: rgba(245, 245, 245,0.66); |
||||
color: white; |
||||
display: inline-block; |
||||
margin: 0; |
||||
min-width: 53px; |
||||
padding: 5px; |
||||
border-bottom: 4px solid rgba(245, 245, 245,0.66); |
||||
text-align: center; |
||||
background-clip: padding-box; |
||||
} |
||||
.boxmenu img { |
||||
vertical-align: middle; |
||||
} |
||||
.boxmenu li:first-child { |
||||
background: linear-gradient(135deg,#60461b,#b0a34e); |
||||
border-bottom: 4px solid #ffd602; |
||||
} |
||||
.boxmenu li:hover { |
||||
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); |
||||
border-bottom: 0; |
||||
padding-bottom: 9px; |
||||
} |
||||
.itembar { |
||||
margin: 10px; |
||||
} |
||||
input { |
||||
background-color: #101317; |
||||
border: 2px solid transparent; |
||||
color: white; |
||||
font-family: ngs,sans-serif; |
||||
font-size: 11pt; |
||||
height: 28px; |
||||
padding: 0 5px; |
||||
text-shadow: -1px -1px 0 rgba(0,0,0,0.66), 1px -1px 0 rgba(0,0,0,0.66), -1px 1px 0 rgba(0,0,0,0.66), 1px 1px 0 rgba(0,0,0,0.66); |
||||
} |
||||
input:hover { |
||||
border: 2px solid #30cdef; |
||||
} |
||||
select{ |
||||
background-color: rgba(128,128,128,0.5); |
||||
color: white; |
||||
font-family: ngs,sans-serif; |
||||
font-size: 11pt; |
||||
height: 28px; |
||||
padding: 5px 10px; |
||||
text-shadow: -1px -1px 0 rgba(0,0,0,0.66), 1px -1px 0 rgba(0,0,0,0.66), -1px 1px 0 rgba(0,0,0,0.66), 1px 1px 0 rgba(0,0,0,0.66); |
||||
} |
||||
select.sortFilter { |
||||
width: 40%; |
||||
margin-right: 10px; |
||||
} |
||||
.sortFilter { |
||||
width: 40%; |
||||
} |
||||
option { |
||||
background-color: rgb(128,128,128); |
||||
} |
||||
.exitBox { |
||||
float: right; |
||||
cursor: pointer; |
||||
} |
||||
.exitBox:after { |
||||
clear: both; |
||||
} |
||||
/*.itembox:hover { |
||||
border: 1px solid #36ffff; |
||||
}*/ |
||||
.exit { |
||||
color: white; |
||||
} |
||||
/* width */ |
||||
.customScrollbar::-webkit-scrollbar { |
||||
width: 4px; |
||||
} |
||||
|
||||
/* Track */ |
||||
.customScrollbar::-webkit-scrollbar-track { |
||||
background: rgba(128,128,128,0.8); |
||||
} |
||||
|
||||
/* Handle */ |
||||
.customScrollbar::-webkit-scrollbar-thumb { |
||||
background-color: rgba(245, 245, 245,0.66); |
||||
} |
||||
.customScrollbar::-webkit-scrollbar-button { |
||||
background-color: rgba(162,162,162,0.8); |
||||
height:4px; |
||||
width:4px; |
||||
} |
||||
/* Handle on hover |
||||
::-webkit-scrollbar-thumb:hover { |
||||
background: #555; |
||||
}*/ |
||||
.containerB { |
||||
flex: 1 1 auto; |
||||
max-width: 250px; |
||||
margin: 10px; |
||||
} |
||||
.containerC { |
||||
flex: 1 1 auto; |
||||
min-width: 370px; |
||||
max-width: 1050px; |
||||
margin: 10px; |
||||
} |
||||
.treeListContainer { |
||||
max-height: 400px; |
||||
overflow-y: auto; |
||||
margin: 0 0 10px 0; |
||||
} |
||||
.treeList { |
||||
margin: 0 10px; |
||||
} |
||||
.treelist li { |
||||
background-color: rgba(128,128,128,0.33); |
||||
color: white; |
||||
margin: 0 0 5px 0; |
||||
padding: 10px; |
||||
background-repeat: no-repeat; |
||||
background-position: right top; |
||||
background-origin: content-box;white-space: nowrap; |
||||
} |
||||
.treeList li em { |
||||
|
||||
} |
||||
.skillTreeBox { |
||||
|
||||
} |
||||
.skillTreeContainer { |
||||
height: 650px; |
||||
overflow-y: scroll; |
||||
margin: 10px 5px 10px 10px; |
||||
display: flex; |
||||
flex-flow: row wrap; |
||||
} |
||||
.skillTreeColumn { |
||||
flex: 0 1 171px; |
||||
} |
||||
.skillItem:hover { |
||||
/*background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));*/ |
||||
background-color: rgba(113,169,189,0.33); |
||||
|
||||
} |
||||
.skillBlank { |
||||
color: white; |
||||
padding: 6px; |
||||
margin-right: 10px; |
||||
margin-bottom: 96px; |
||||
text-align: center; |
||||
min-height: 148px; |
||||
} |
||||
.skillItem { |
||||
background-color: rgba(128,128,128,0.33); |
||||
color: white; |
||||
padding: 6px; |
||||
margin-right: 10px; |
||||
margin-bottom: 96px; |
||||
/*background-repeat: no-repeat; |
||||
background-position: right top; |
||||
background-origin: content-box;*/ |
||||
text-align: center; |
||||
min-height: 148px; |
||||
} |
||||
.skillPushRight { |
||||
margin-left: auto; |
||||
} |
||||
.skillIcon { |
||||
display: block; |
||||
margin: 0 auto; |
||||
width: |
||||
} |
||||
.skillAllocated { |
||||
line-height: 40px; |
||||
} |
||||
.skillName { |
||||
background-color: rgba(64,64,64,0.5); |
||||
display: block; |
||||
padding: 10px; |
||||
height: 48px; |
||||
text-align: left; |
||||
} |
||||
.skillPoints { |
||||
background-color: rgba(64,64,64,0.5); |
||||
text-align: center; |
||||
margin: 10px; |
||||
padding: 16px 0 10px 0; |
||||
color: white; |
||||
font-size: 14pt; |
||||
} |
||||
@ -0,0 +1,19 @@ |
||||
import React from 'react'; |
||||
|
||||
function TestHeader() { |
||||
return (
|
||||
<div id="header"> |
||||
<div> |
||||
<ul> |
||||
<li className="logo"><a href="./test"><img alt="" src={process.env.PUBLIC_URL + '/icons/logo_sm.png'} /> NGSplanner.com</a></li> |
||||
<li className="headermenuitem"><a href="./test">Build Planner</a></li> |
||||
<li className="headermenuitem"><a href="./test">Guides</a></li> |
||||
<li className="headermenuitem"><a href="./test">Blog</a></li> |
||||
<li className="headermenuitem"><a href="./test">About</a></li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
export default TestHeader; |
||||
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 5.9 KiB |