Changes to App.js for TestPanel and TestHeader. Uploded more icons and fonts.
dudleycu
|
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 |
BIN
public/icons/aug_plus.png
Normal file
|
After Width: | Height: | Size: 677 B |
BIN
public/icons/class/fi.png
Normal file
|
After Width: | Height: | Size: 119 B |
|
Before Width: | Height: | Size: 215 B After Width: | Height: | Size: 215 B |
BIN
public/icons/class/gu.png
Normal file
|
After Width: | Height: | Size: 128 B |
BIN
public/icons/class/hu.png
Normal file
|
After Width: | Height: | Size: 116 B |
|
Before Width: | Height: | Size: 118 B After Width: | Height: | Size: 118 B |
BIN
public/icons/class/te.png
Normal file
|
After Width: | Height: | Size: 197 B |
BIN
public/icons/class_main.png
Normal file
|
After Width: | Height: | Size: 753 B |
BIN
public/icons/class_skills/ra/Bad_Condition_Reduction.png
Normal file
|
After Width: | Height: | Size: 1.6 KiB |
BIN
public/icons/class_skills/ra/Bad_Condition_Ward.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
BIN
public/icons/class_skills/ra/Blight_Rounds.png
Normal file
|
After Width: | Height: | Size: 2.0 KiB |
BIN
public/icons/class_skills/ra/Blight_Rounds_Reinforce.png
Normal file
|
After Width: | Height: | Size: 2.3 KiB |
BIN
public/icons/class_skills/ra/Launcher_Charge_Grouping.png
Normal file
|
After Width: | Height: | Size: 2.1 KiB |
BIN
public/icons/class_skills/ra/Rifle_Grenadier.png
Normal file
|
After Width: | Height: | Size: 1.9 KiB |
BIN
public/icons/class_skills/ra/Slide_Shot_Advance.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
BIN
public/icons/class_skills/ra/Slow_Landing_Attack-Ranger.png
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
BIN
public/icons/class_skills/ra/Slow_Landing_Charge-Ranger.png
Normal file
|
After Width: | Height: | Size: 2.1 KiB |
BIN
public/icons/class_skills/ra/Spread_Shot.png
Normal file
|
After Width: | Height: | Size: 1.9 KiB |
BIN
public/icons/class_skills/ra/Spread_Shot_Quick_Getaway.png
Normal file
|
After Width: | Height: | Size: 1.9 KiB |
BIN
public/icons/class_skills/ra/Sticky_Bomb_Quick_Reload.png
Normal file
|
After Width: | Height: | Size: 1.8 KiB |
BIN
public/icons/class_sub.png
Normal file
|
After Width: | Height: | Size: 733 B |
|
Before Width: | Height: | Size: 418 KiB After Width: | Height: | Size: 418 KiB |
BIN
public/icons/fo.png
Normal file
|
After Width: | Height: | Size: 215 B |
BIN
public/icons/food/aelio_meat.png
Normal file
|
After Width: | Height: | Size: 59 KiB |
BIN
public/icons/food/crisp_aelio_crab.png
Normal file
|
After Width: | Height: | Size: 42 KiB |
BIN
public/icons/food/crisp_aelio_pear.png
Normal file
|
After Width: | Height: | Size: 53 KiB |
BIN
public/icons/food/crisp_aelio_tomato.png
Normal file
|
After Width: | Height: | Size: 53 KiB |
BIN
public/icons/food/fruit.png
Normal file
|
After Width: | Height: | Size: 6.1 KiB |
BIN
public/icons/food/light_aelio_mushroom.png
Normal file
|
After Width: | Height: | Size: 47 KiB |
BIN
public/icons/food/light_aelio_peach.png
Normal file
|
After Width: | Height: | Size: 69 KiB |
BIN
public/icons/food/light_aelio_turban_shell.png
Normal file
|
After Width: | Height: | Size: 61 KiB |
BIN
public/icons/food/meat.png
Normal file
|
After Width: | Height: | Size: 5.8 KiB |
BIN
public/icons/food/rich_aelio_apple.png
Normal file
|
After Width: | Height: | Size: 63 KiB |
BIN
public/icons/food/rich_aelio_clam.png
Normal file
|
After Width: | Height: | Size: 57 KiB |
BIN
public/icons/food/rich_aelio_herb.png
Normal file
|
After Width: | Height: | Size: 68 KiB |
BIN
public/icons/food/robust_aelio_banana.png
Normal file
|
After Width: | Height: | Size: 40 KiB |
BIN
public/icons/food/robust_aelio_lobster.png
Normal file
|
After Width: | Height: | Size: 50 KiB |
BIN
public/icons/food/robust_aelio_turnip.png
Normal file
|
After Width: | Height: | Size: 63 KiB |
BIN
public/icons/food/seafood.png
Normal file
|
After Width: | Height: | Size: 6.0 KiB |
BIN
public/icons/food/vege.png
Normal file
|
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 |
BIN
public/icons/ra.png
Normal file
|
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 |
@ -3,8 +3,8 @@
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<link rel="stylesheet" href="%PUBLIC_URL%/bootstrap.css"/>
|
||||
<link rel="stylesheet" href="%PUBLIC_URL%/style.css" />
|
||||
<!--<link rel="stylesheet" href="%PUBLIC_URL%/bootstrap.css"/>
|
||||
<link rel="stylesheet" href="%PUBLIC_URL%/style.css" />-->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -321,7 +321,6 @@ input#editBox{
|
||||
margin: 0px;
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
.popup{
|
||||
position:absolute;
|
||||
background-color: rgba(128,128,128,0.9);
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import './App.css';
|
||||
//import './App.css'; Old CSS
|
||||
import './reset.css'; // Generic reset
|
||||
import './style.css'; // The new new
|
||||
import React, {useState,useEffect,useRef} from 'react';
|
||||
import ReactWindow from 'reactjs-windows'
|
||||
import 'reactjs-windows/dist/index.css'
|
||||
@ -11,6 +13,7 @@ import {
|
||||
|
||||
import { HashLink as Link } from 'react-router-hash-link';
|
||||
|
||||
import TestHeader from './TestHeader'; // Test Header!
|
||||
import TestPanel from './TestPanel'; // Dudley's Test Panel
|
||||
|
||||
const axios = require('axios');
|
||||
@ -592,7 +595,8 @@ function App() {
|
||||
<AdminPanel/>
|
||||
</Route>
|
||||
<Route path="/test">
|
||||
<TestPanel/>
|
||||
<TestHeader/>
|
||||
<div id="main"><TestPanel/></div>
|
||||
</Route>
|
||||
<Route path="/">
|
||||
<div id="main">
|
||||
|
||||
19
src/TestHeader.js
Normal file
@ -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;
|
||||
@ -1,9 +1,65 @@
|
||||
import React, { Component } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
function TestPanel() {
|
||||
return ( //Futasuke is a genius
|
||||
|
||||
<div>Twitch prime is a free sub every month. Don't waste it!!</div>
|
||||
<div className="container">
|
||||
<div className="box itembox">
|
||||
<div className="boxTitleBar">
|
||||
<h1>Weapon Select</h1>
|
||||
<div className="boxExit"></div>
|
||||
</div>
|
||||
<ul className="boxmenu">
|
||||
<li>Rifle</li>
|
||||
<li>Launcher</li>
|
||||
<li>Rod</li>
|
||||
<li>Talis</li>
|
||||
</ul>
|
||||
<div className="itemBar">
|
||||
<div className="itemBarSort">
|
||||
<select className="itemBarForm">
|
||||
<option>Standard Sort</option>
|
||||
<option>Rarity</option>
|
||||
<option>Attack</option>
|
||||
<option>Potency</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="itemBarFilter">
|
||||
<input className="itemBarForm" type="text" placeholder="Filter" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="itemlistcontainer customScrollbar">
|
||||
<ul className="itemlist">
|
||||
<li className="itemwep r1"><img className="itemimg" alt="" src={process.env.PUBLIC_URL+"/icons/64px-NGSUIItemPrimmRifle.png"} /><em className="rifle">Primm Rifle</em><br /><span className="atk">177</span> <span className="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 className="itemwep r2"><img className="itemimg" alt="" src={process.env.PUBLIC_URL+"/icons/64px-NGSUIItemTzviaRifle.png"} /><em className="rifle">Tzvia Rifle</em><br /><span className="atk">195</span> <span className="pot tooltip">Indomitable Unit<span>Lv.4: Potency +26%/<br />All Down Resistances +20%</span></span></li>
|
||||
<li className="itemwep r3"><img className="itemimg" alt="" src={process.env.PUBLIC_URL+"/icons/64px-NGSUIItemTheseusRifle.png"} /><em className="rifle">Theseus Rifle</em><br /><span className="atk">223</span> <span className="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 className="itemwep r4"><img className="itemimg" alt="" src={process.env.PUBLIC_URL+"/icons/64px-NGSUIItemResurgirRifle.png"} /><em className="rifle">Resurgir Rifle</em><br /><span className="atk">240</span> <span className="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 className="itemwep r4"><img className="itemimg" alt="" src={process.env.PUBLIC_URL+"/icons/64px-NGSUIItemFoursisRifle.png"} /><em className="rifle">Foursis Rifle</em><br /><span className="atk">242</span> <span className="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 className="itemwep"><img className="itemimg" alt="" src={process.env.PUBLIC_URL+"/icons/logo_test.png"} /><em className="gb">Test</em><br /><span className="atk">999</span> <span className="pot tooltip" title="Test">Test<span>Test</span></span></li>
|
||||
<li className="itemwep"><img className="itemimg" alt="" src={process.env.PUBLIC_URL+"/icons/logo_test.png"} /><em className="gb">Test</em><br /><span className="atk">999</span> <span className="pot tooltip" title="Test">Test<span>Test</span></span></li>
|
||||
<li className="itemwep"><img className="itemimg" alt="" src={process.env.PUBLIC_URL+"/icons/logo_test.png"} /><em className="gb">Test</em><br /><span className="atk">999</span> <span className="pot tooltip" title="Test">Test<span>Test</span></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="box itembox">
|
||||
<div className="boxTitleBar">
|
||||
<h1>Food List</h1>
|
||||
<div className="boxExit"></div>
|
||||
</div>
|
||||
<div className="itemBar">
|
||||
<div className="itemBarSort">
|
||||
</div>
|
||||
<div className="itemBarFilter">
|
||||
<input className="itemBarForm" type="text" placeholder="Filter" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="itemlistcontainer customScrollbar">
|
||||
<ul className="itemlist">
|
||||
<li className="itemwep r1"><img className="itemimg" alt="" src={process.env.PUBLIC_URL+"/icons/food/rich_aelio_herb.png"} /><em className="vege">Rich Aelio Herb</em><br /><span className="atk">177</span> </li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
BIN
src/fonts/1.woff
Normal file
BIN
src/fonts/2.woff
Normal file
BIN
src/fonts/3.woff
Normal file
BIN
src/fonts/4.woff
Normal file
BIN
src/icons/20M6Z7t.png
Normal file
|
After Width: | Height: | Size: 6.1 KiB |
BIN
src/icons/64px-NGSUIItemFoursisRifle.png
Normal file
|
After Width: | Height: | Size: 9.3 KiB |
BIN
src/icons/64px-NGSUIItemPrimmRifle.png
Normal file
|
After Width: | Height: | Size: 10 KiB |
BIN
src/icons/64px-NGSUIItemResurgirRifle.png
Normal file
|
After Width: | Height: | Size: 7.8 KiB |
BIN
src/icons/64px-NGSUIItemTheseusRifle.png
Normal file
|
After Width: | Height: | Size: 10 KiB |
BIN
src/icons/64px-NGSUIItemTzviaRifle.png
Normal file
|
After Width: | Height: | Size: 9.3 KiB |
BIN
src/icons/Blight_Rounds.png
Normal file
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/icons/F0t58xP.png
Normal file
|
After Width: | Height: | Size: 5.9 KiB |