|
|
(2 intermediate revisions by the same user not shown) |
Line 1: |
Line 1: |
| <html> | | <html> |
− | <p>Lorem ipsum dolor sit amet, per in omnium deleniti, usu amet bonorum insolens ei, no menandri inciderint quo. Ex usu iusto legere patrioque, vel magna maiorum at. Vim essent blandit te, ei omnes scripta facilis nam, est et tation contentiones consequuntur. Ea assum nemore habemus mei, pri eruditi officiis te. Est ea alii essent delectus, cu quo nonumy periculis, has aliquid denique perpetua ad. Ipsum disputationi id eum.</p> | + | <!-- TEXT --> |
− | <div style="display: flex;"> | + | <p style="font-weight: bold;">Text</p> |
− | <input id="database_input" type="text" list="item_datalist"> | + | <input type="text" maxlength="30" value="Usertitle" id="text" class="update"> |
− | <button id="database_button">Search</button> | + | <br> |
− | </div> | + | <br> |
− | <div id="search_results" hidden> | + | <!-- COLOR --> |
| + | <p style="font-weight: bold;">Color</p> |
| + | <input id="color" type="color" value="#C0C0C0" class="update"> |
| + | <br> |
| + | <br> |
| + | <!-- GLOW COLOR --> |
| + | <p style="font-weight: bold;">Glow Color</p> |
| + | <input id="glowColor" type="color" value="#C0C0C0" class="update"> |
| + | <br> |
| + | <br> |
| + | <!-- GLOW RADIUS --> |
| + | <p style="font-weight: bold;">Glow Radius</p> |
| + | <div class="itemBackground"><input id="glowRadius" type="range" min="0" max="1000" value="1000" class="update"></div> |
| + | <br> |
| + | <!-- TEXT FORMATTING --> |
| + | <p style="font-weight: bold;">Text Formatting</p> |
| + | <div class="itemBackground" style="padding: 10px;"> |
| + | <label><input type="checkbox" id="bold" class="update" checked=""><div style="line-height: 20px;">Bold</div></label> |
| + | <label><input type="checkbox" id="italic" class="update"><div style="line-height: 20px;">Italic</div></label> |
| + | <label><input type="checkbox" id="strikethrough" class="update"><div style="line-height: 20px;">Strikethrough</div></label> |
| + | <label><input type="checkbox" id="glitter" class="update"><div style="line-height: 20px;">Glitter</div></label> |
| + | </div> |
| + | <br> |
| + | <!-- PREVIEW --> |
| + | <p style="font-weight: bold;">Preview</p> |
| + | <div style="padding: 30px; background-color: #1D1D1D; text-align: center; border: 1px solid #A2A2A2; font-size: 12px;"> |
| + | <span id="preview"></span> |
| + | </div> |
| + | <br> |
| + | <!-- HTML CODE --> |
| + | <p style="font-weight: bold;">HTML Code</p> |
| + | <input type="text" id="code"> |
| | | |
| | | |
Line 11: |
Line 42: |
| | | |
| | | |
| + | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> |
| + | <script type="text/javascript"> |
| | | |
| + | update(); |
| | | |
− | <table style="width: 425px; table-layout: fixed; text-align: center;">
| + | $( "input.update" ).change( function() { |
− | <tr>
| + | update(); |
− | <td id="picture" rowspan="2" colspan="2"></th>
| + | }); |
− | <th style="text-align: center!important;">Min price</th>
| |
− | <td id="min_price" colspan="2"></td>
| |
− | </tr>
| |
− | <tr>
| |
− | <th style="text-align: center!important;">Max price</th>
| |
− | <td id="max_price" colspan="2"></td>
| |
− | </tr>
| |
− | <tr>
| |
− | <th style="text-align: center!important;">Uses</th>
| |
− | <td id="uses" colspan="4"></td>
| |
− | </tr>
| |
− | <tr>
| |
− | <th style="text-align: center!important;">Notes</th>
| |
− | <td id="notes" colspan="4"></td>
| |
− | </tr>
| |
− | <tr> | |
− | <th style="text-align: center!important;">Sources</th>
| |
− | <td id="sources" colspan="4"></td>
| |
− | </tr>
| |
− | <tr>
| |
− | <th style="text-align: center!important;">Donator</th>
| |
− | <th style="text-align: center!important;">Tradeable</th>
| |
− | <th style="text-align: center!important;">Noteable</th>
| |
− | <th style="text-align: center!important;">Stackable</th>
| |
− | <th style="text-align: center!important;">Equipable</th>
| |
− | </tr>
| |
− | <tr>
| |
− | <td id="donator"></td>
| |
− | <td id="tradeable"></td>
| |
− | <td id="noteable"></td>
| |
− | <td id="stackable"></td>
| |
− | <td id="equipable"></td>
| |
− | </tr>
| |
− | </table>
| |
| | | |
| + | function update() { |
| | | |
| + | var text = $( "input#text" ).val(); |
| + | var color = $( "input#color" ).val(); |
| + | var glowColor = $( "input#glowColor" ).val(); |
| + | var glowRadius = $( "input#glowRadius" ).val() / 100; |
| | | |
| + | // TEXT SHADOW |
| | | |
| + | if ( glowRadius == 0 ) { |
| + | var textShadow = "text-shadow: none;"; |
| + | } else { |
| + | var textShadow = "text-shadow: 0 0 " + glowRadius + "px " + glowColor + ";"; |
| + | } |
| | | |
| + | // TEXT FORMATTING |
| | | |
| + | if ( $( "input#bold" ).is( ":checked" ) ) { |
| + | var fontWeight = "bold;"; |
| + | } else { |
| + | var fontWeight = "normal;"; |
| + | } |
| | | |
| + | if ( $( "input#italic" ).is( ":checked" ) ) { |
| + | var fontStyle = "italic;"; |
| + | } else { |
| + | var fontStyle = "initial;"; |
| + | } |
| | | |
| + | if ( $( "input#strikethrough" ).is( ":checked" ) ) { |
| + | var textDecoration = "line-through;"; |
| + | } else { |
| + | var textDecoration = "initial;"; |
| + | } |
| | | |
− | <table style="width: 425px; table-layout: fixed; text-align: center;">
| + | if ( $( "input#glitter" ).is( ":checked" ) ) { |
− | <tr> | + | var background = "url(http://forum.grinderscape.org/images/Crowns/Glitter.gif);"; |
− | <th style="text-align: center!important;">Type</th>
| + | } else { |
− | <th style="text-align: center!important;">Att bonus</th>
| + | var background = "none;"; |
− | <th style="text-align: center!important;">Def bonus</th>
| + | } |
− | <th style="text-align: center!important;" colspan="2">Skill requirements</th>
| |
− | </tr>
| |
− | <tr>
| |
− | <th style="text-align: center!important;"><img src="https://i.imgur.com/XveJinC.png" style="height: 25px;"></th>
| |
− | <td id="ab_stab"></td> | |
− | <td id="db_stab"></td>
| |
− | <th style="text-align: center!important;"><img src="https://i.imgur.com/5ZxA3wR.png" style="height: 25px;"></th>
| |
− | <td id="sr_defence"></td>
| |
− | </tr>
| |
− | <tr>
| |
− | <th style="text-align: center!important;"><img src="https://i.imgur.com/aTbTRxt.png" style="height: 25px;"></th>
| |
− | <td id="ab_slash"></td>
| |
− | <td id="db_slash"></td>
| |
− | <th style="text-align: center!important;"><img src="https://i.imgur.com/lFeARW8.png" style="height: 25px;"></th>
| |
− | <td id="sr_attack"></td>
| |
− | </tr>
| |
− | <tr>
| |
− | <th style="text-align: center!important;"><img src="https://i.imgur.com/tI6aZWK.png" style="height: 25px;"></th>
| |
− | <td id="ab_crush"></td>
| |
− | <td id="db_crush"></td>
| |
− | <th style="text-align: center!important;"><img src="https://i.imgur.com/v7CM3yV.png" style="height: 25px;"></th>
| |
− | <td id="sr_strenght"></td>
| |
− | </tr>
| |
− | <tr>
| |
− | <th style="text-align: center!important;"><img src="https://i.imgur.com/80TPEPp.png" style="height: 25px;"></th>
| |
− | <td id="ab_magic"></td>
| |
− | <td id="db_magic"></td>
| |
− | <th style="text-align: center!important;"><img src="https://i.imgur.com/Yh28JyT.png" style="height: 25px;"></th>
| |
− | <td id="sr_ranged"></td>
| |
− | </tr>
| |
− | <tr>
| |
− | <th style="text-align: center!important;"><img src="https://i.imgur.com/xACgS5I.png" style="height: 25px;"></th>
| |
− | <td id="ab_range"></td>
| |
− | <td id="db_range"></td>
| |
− | <th style="text-align: center!important;"><img src="https://i.imgur.com/54JcLkG.png" style="height: 25px;"></th>
| |
− | <td id="sr_magic"></td>
| |
− | </tr>
| |
− | <tr>
| |
− | <th style="text-align: center!important;" colspan="3">Other bonuses</th>
| |
− | <th style="text-align: center!important;"><img src="https://i.imgur.com/SwPB2vN.png" style="height: 25px;"></th>
| |
− | <td id="sr_hitpoints"></td>
| |
− | </tr>
| |
− | <tr>
| |
− | <th style="text-align: center!important;"><img src="https://i.imgur.com/v7CM3yV.png" style="height: 25px;"></th>
| |
− | <td id="ob_strenght" colspan="2"></td>
| |
− | <th style="text-align: center!important;"><img src="https://i.imgur.com/CpPlErx.png" style="height: 25px;"></th>
| |
− | <td id="sr_prayer"></td>
| |
− | </tr>
| |
− | <tr> | |
− | <th style="text-align: center!important;"><img src="https://i.imgur.com/CpPlErx.png" style="height: 25px;"></th> | |
− | <td id="ob_prayer" colspan="2"></td>
| |
− | <th style="text-align: center!important;"><img src="https://i.imgur.com/jgAlsxq.png" style="height: 25px;"></th>
| |
− | <td id="sr_slayer"></td>
| |
− | </tr>
| |
− | <tr> | |
− | <th style="text-align: center!important;">Class</th>
| |
− | <th style="text-align: center!important;" colspan="2">Degradable</th>
| |
− | <th style="text-align: center!important;" colspan="2">Slot</th>
| |
− | </tr>
| |
− | <tr>
| |
− | <td id="class"></td>
| |
− | <td id="degradable" colspan="2"></td>
| |
− | <td id="slot" colspan="2"></td>
| |
− | </tr>
| |
− | </table>
| |
− | </div>
| |
− | <div id="no_results" hidden>
| |
− | <h1>Item not found</h1>
| |
− | <p>Your search didn't match any listings. This may be due to one of the following reasons:</p>
| |
− | <ul>
| |
− | <li>Your input contains spelling errors.</li>
| |
− | <li>The item you're looking for is not in the database.</li>
| |
− | </ul>
| |
− | <p>If you have information about an item we are missing, please contact a member of the <a href="https://newwiki.grinderscape.org/Main_Page/Wiki_team">wiki team</a>!</p>
| |
− | </div>
| |
− | | |
− | | |
− | | |
− | | |
− | | |
− | <!------------------------ COPY THE DATABASE CODE HERE ------------------------>
| |
− | | |
− | <div id='item_database' hidden><div item='abyssal vine whip'>Abyssal vine whip;21371;12000000000;12000000000;No;Yes;No;No;Yes;+15;+95;+15;+15;+0;+10;+10;+10;+10;+10;+105;+7;Mainhand;Melee;No;1;75;1;1;1;1;1;80;part, pkp;Wield for combat.;</div><div item='torva platebody'>Torva platebody;20139;4000000000;4000000000;No;Yes;No;No;Yes;+10;+10;+12;-31;-11;+156;+140;+120;-10;+160;+7;+1;Torso;Melee;No;80;1;1;1;1;80;1;1;prem;Worn for protection.;</div></div><datalist id='item_datalist'><option value='Abyssal vine whip'>Abyssal vine whip</option><option value='Torva platebody'>Torva platebody</option></datalist>
| |
− | | |
− | <!------------------------ COPY THE DATABASE CODE HERE ------------------------>
| |
| | | |
| + | var textFormatting = "font-weight:" + fontWeight + "font-style:" + fontStyle + "text-decoration:" + textDecoration + "background:" + background; |
| | | |
| + | var style = "color:" + color + ";" + textShadow + textFormatting; |
| + | $( "span#preview" ).html( text ).attr( "style", style ); |
| | | |
| + | $( "input#code" ).val( "<span style='" + style + "'>" + text + "</span>" ); |
| | | |
| + | } |
| | | |
| + | </script> |
| </html> | | </html> |