|
|
(40 intermediate revisions by the same user not shown) |
Line 1: |
Line 1: |
− | Hello, this is just a preview.
| + | <html> |
− | | + | <!-- TEXT --> |
− | - Jplayer | + | <p style="font-weight: bold;">Text</p> |
− | | + | <input type="text" maxlength="30" value="Usertitle" id="text" class="update"> |
− | <div id="index"> | + | <br> |
− | <div class="index-title">Index</div> | + | <br> |
− | <div class="index-item"> | + | <!-- COLOR --> |
− | https://i.imgur.com/e3lPRWS.png | + | <p style="font-weight: bold;">Color</p> |
− | <p>[[User:Jplayer/Subpage]]<br>Last modified by {{REVISIONUSER: User:Jplayer/Subpage }}.</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> | | </div> |
− | <div class="index-item"> | + | <br> |
− | https://i.imgur.com/ciQoyyC.png
| + | <!-- PREVIEW --> |
− | <p>[[User:Jplayer/Subpage]]<br>Last modified by {{REVISIONUSER: User:Jplayer/Subpage }}.</p> | + | <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> | | </div> |
− | <div class="index-item"> | + | <br> |
− | https://i.imgur.com/WMnpjp9.png
| + | <!-- HTML CODE --> |
− | <p>[[User:Jplayer/Subpage]]<br>Last modified by {{REVISIONUSER: User:Jplayer/Subpage }}.</p>
| + | <p style="font-weight: bold;">HTML Code</p> |
− | </div> | + | <input type="text" id="code"> |
− | <div class="index-item"> | + | |
− | https://i.imgur.com/v7CM3yV.png
| + | |
− | <p>[[User:Jplayer/Subpage]]<br>Last modified by {{REVISIONUSER: User:Jplayer/Subpage }}.</p>
| + | |
− | </div> | + | |
− | <div class="index-item">
| + | |
− | https://i.imgur.com/C118Zx0.png
| + | |
− | <p>[[User:Jplayer/Subpage]]<br>Last modified by {{REVISIONUSER: User:Jplayer/Subpage }}.</p>
| + | |
− | </div>
| + | |
− | <div class="index-item">
| + | |
− | https://i.imgur.com/rAX78mz.png
| + | |
− | <p>[[User:Jplayer/Subpage]]<br>Last modified by {{REVISIONUSER: User:Jplayer/Subpage }}.</p>
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | <html>
| + | |
| | | |
− | <script>
| |
− | window.onload = function() {
| |
| | | |
− | $( "div#mw-page-base, div#mw-head-base" ).remove();
| |
− | $( "body" ).prepend( "<nav></nav>" );
| |
− | $( "div#p-Menu > div > ul" ).appendTo( "nav" );
| |
− | $( "div#p-Menu" ).remove();
| |
− | $( "div#content, div#mw-navigation" ).wrapAll( "<div id='wrap'></div>" );
| |
− | $( "div#mw-navigation" ).insertBefore( "div#content" );
| |
− | // $( "<div id='notice'><p>Announcement message goes here.</p></div>" ).insertAfter( "div#mw-navigation" );
| |
− | $( "div#content" ).wrap( "<div id='content-sidebar-wrap'></div>" );
| |
− | $( "div#mw-panel" ).insertBefore( "div#content" );
| |
− | $( "div#content" ).wrap( "<div id='content-wrap'></div>" );
| |
− | $( "div#contentSub" ).insertBefore( "div#content" );
| |
− | $( "<div id='navigation'></div>" ).insertBefore( "div#contentSub" );
| |
− | $( "div#right-navigation" ).appendTo( "div#navigation" );
| |
− | $( "div#left-navigation" ).appendTo( "div#navigation" );
| |
− | $( "div#contentSub, div#content" ).wrapAll( "<div id='content-contentSub-wrap'></div>" );
| |
− | $( "div#siteNotice" ).insertAfter( "div#mw-navigation" );
| |
− | if ( $( "span.subpages" ).length ) {
| |
− | $( "span.subpages" ).html( $( "span.subpages" ).children() );
| |
− | var title = $( "h1#firstHeading" ).html().split('/');
| |
− | $( "<span>" + title[ title.length - 1 ] + "</span>" ).appendTo( "span.subpages" );
| |
− | } else {
| |
− | $( "div#contentSub" ).prepend( "<span class='subpages'></span>" );
| |
− | var title = $( "h1#firstHeading" ).html().split('/');
| |
− | $( "<span>" + title[ title.length - 1 ] + "</span>" ).appendTo( "span.subpages" );
| |
− | }
| |
| | | |
| | | |
− | $( "div#index" ).insertAfter( "div#content-contentSub-wrap" );
| |
| | | |
− | $.each( $( "div#index a" ), function() {
| + | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> |
| + | <script type="text/javascript"> |
| | | |
− | var split = $( this ).html().split('/');
| + | update(); |
− | $( this ).html( split[ split.length - 1 ] ).removeAttr( "title" );
| + | |
| | | |
| + | $( "input.update" ).change( function() { |
| + | update(); |
| }); | | }); |
| | | |
− | $.each( $( "div.index-item" ), function() {
| + | function update() { |
− | $( this ).click( function() {
| + | |
− | window.location = $( this ).find( "a" ).attr( "href" );
| + | |
− | return false;
| + | |
− | });
| + | |
− | });
| + | |
| | | |
− | $.each( $( "div#index img" ), function() { | + | var text = $( "input#text" ).val(); |
| + | var color = $( "input#color" ).val(); |
| + | var glowColor = $( "input#glowColor" ).val(); |
| + | var glowRadius = $( "input#glowRadius" ).val() / 100; |
| | | |
− | $( this ).attr( "draggable", "false" ); | + | // 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" ) ) { |
− | </script>
| + | var fontStyle = "italic;"; |
| + | } else { |
| + | var fontStyle = "initial;"; |
| + | } |
| | | |
| + | if ( $( "input#strikethrough" ).is( ":checked" ) ) { |
| + | var textDecoration = "line-through;"; |
| + | } else { |
| + | var textDecoration = "initial;"; |
| + | } |
| | | |
| + | if ( $( "input#glitter" ).is( ":checked" ) ) { |
| + | var background = "url(http://forum.grinderscape.org/images/Crowns/Glitter.gif);"; |
| + | } else { |
| + | var background = "none;"; |
| + | } |
| | | |
− | <style>
| + | var textFormatting = "font-weight:" + fontWeight + "font-style:" + fontStyle + "text-decoration:" + textDecoration + "background:" + background; |
| | | |
− | @import url(https://fonts.googleapis.com/css?family=Open+Sans:600);
| + | var style = "color:" + color + ";" + textShadow + textFormatting; |
| + | $( "span#preview" ).html( text ).attr( "style", style ); |
| | | |
− | body {
| + | $( "input#code" ).val( "<span style='" + style + "'>" + text + "</span>" ); |
− | background: #151515 url(https://www.grinderscape.org/assets/images/background.png);
| + | |
− | font-family: Open Sans, sans-serif;
| + | |
− | font-size: 13px;
| + | |
− | line-height: 20px;
| + | |
− | color: #909090;
| + | |
− | }
| + | |
| | | |
− | p {
| |
− | line-height: 20px;
| |
− | font-size: 13px;
| |
− | margin: 0px;
| |
− | color: #909090;
| |
| } | | } |
| | | |
− | b {
| + | </script> |
− | color: #CBCBCB;
| + | |
− | }
| + | |
− | | + | |
− | a {
| + | |
− | color: #4D984E!important;
| + | |
− | text-decoration: none!important;
| + | |
− | }
| + | |
− | | + | |
− | a:hover {
| + | |
− | color: #909090!important;
| + | |
− | }
| + | |
− | | + | |
− | div#index {
| + | |
− | margin-bottom: 30px;
| + | |
− | background: linear-gradient(rgba(43,55,64,0.5),rgba(43,55,64,0.5)),url(https://www.grinderscape.org/assets/images/background.png)!important;
| + | |
− | box-shadow: 0 0 5px rgba(0,0,0,0.7);
| + | |
− | }
| + | |
− | | + | |
− | .index-title {
| + | |
− | background: linear-gradient(rgba(31,42,53,0.5),rgba(31,42,53,0.5)),url(https://www.grinderscape.org/assets/images/background.png);
| + | |
− | padding: 10px;
| + | |
− | }
| + | |
− | | + | |
− | .index-item {
| + | |
− | display: flex;
| + | |
− | padding: 10px;
| + | |
− | border-top: 1px solid #0E1215;
| + | |
− | cursor: pointer;
| + | |
− | }
| + | |
− | | + | |
− | .index-item:hover {
| + | |
− | background: linear-gradient(rgba(31,42,53,0.5),rgba(31,42,53,0.5)),url(https://www.grinderscape.org/assets/images/background.png);
| + | |
− | }
| + | |
− | | + | |
− | .index-item:hover a {
| + | |
− | color: #909090!important;
| + | |
− | }
| + | |
− | | + | |
− | .index-item img {
| + | |
− | max-width: 40px;
| + | |
− | max-height: 40px;
| + | |
− | margin-right: 10px;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | nav {
| + | |
− | height: 40px;
| + | |
− | background: linear-gradient( rgba( 31, 42, 53, 0.5 ), rgba( 31, 42, 53, 0.5 ) ), url(https://www.grinderscape.org/assets/images/background.png );
| + | |
− | box-shadow: 0 0 5px rgba(0,0,0,0.7);
| + | |
− | }
| + | |
− | | + | |
− | nav ul {
| + | |
− | list-style-type: none;
| + | |
− | list-style-image: none;
| + | |
− | margin: 0;
| + | |
− | text-align: center;
| + | |
− | }
| + | |
− | | + | |
− | nav ul li {
| + | |
− | line-height: 20px;
| + | |
− | font-size: 13px;
| + | |
− | margin: 10px;
| + | |
− | text-transform: capitalize;
| + | |
− | display: inline-block;
| + | |
− | }
| + | |
− | | + | |
− | div#wrap {
| + | |
− | background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1)),url(https://www.grinderscape.org/assets/images/background.png);
| + | |
− | box-shadow: 0 0 5px rgba(0,0,0,0.7);
| + | |
− | width: 1200px;
| + | |
− | width: 1200px;
| + | |
− | margin: 30px auto;
| + | |
− | padding: 30px 30px 0 30px;
| + | |
− | }
| + | |
− | | + | |
− | div#mw-head {
| + | |
− | position: initial;
| + | |
− | }
| + | |
− | | + | |
− | div#p-personal {
| + | |
− | position: initial;
| + | |
− | text-align: right;
| + | |
− | padding-bottom: 30px;
| + | |
− | }
| + | |
− | | + | |
− | #p-personal ul {
| + | |
− | padding: 0;
| + | |
− | display: inline-block;
| + | |
− | background: linear-gradient( rgba( 31, 42, 53, 0.5 ), rgba( 31, 42, 53, 0.5 ) ), url(https://www.grinderscape.org/assets/images/background.png );
| + | |
− | box-shadow: 0 0 5px rgba(0,0,0,0.7);
| + | |
− | }
| + | |
− | | + | |
− | #p-personal ul li {
| + | |
− | float: initial;
| + | |
− | margin: 0;
| + | |
− | font-size: 13px;
| + | |
− | line-height: 20px;
| + | |
− | display: inline-block;
| + | |
− | padding: 10px!important;
| + | |
− | background: none;
| + | |
− | }
| + | |
− | | + | |
− | div#siteNotice {
| + | |
− | background: linear-gradient( rgba( 31, 42, 53, 0.5 ), rgba( 31, 42, 53, 0.5 ) ), url(https://www.grinderscape.org/assets/images/background.png );
| + | |
− | box-shadow: 0 0 5px rgba(0,0,0,0.7);
| + | |
− | padding: 10px;
| + | |
− | margin-bottom: 30px;
| + | |
− | text-align: center;
| + | |
− | }
| + | |
− | | + | |
− | div#localNotice {
| + | |
− | margin-bottom: 0;
| + | |
− | }
| + | |
− | | + | |
− | div#content-sidebar-wrap {
| + | |
− | display: flex;
| + | |
− | }
| + | |
− | | + | |
− | div#mw-panel {
| + | |
− | position: initial;
| + | |
− | width: 20%;
| + | |
− | padding: 0px 30px 0px 0px;
| + | |
− | box-sizing: border-box;
| + | |
− | }
| + | |
− | | + | |
− | div#p-logo {
| + | |
− | display: none;
| + | |
− | }
| + | |
− | | + | |
− | div#mw-panel div.portal {
| + | |
− | background: linear-gradient( rgba( 43, 55, 64, 0.5 ), rgba( 43, 55, 64, 0.5 ) ), url(https://www.grinderscape.org/assets/images/background.png )!important;
| + | |
− | box-shadow: 0 0 5px rgba(0,0,0,0.7);
| + | |
− | margin: 0;
| + | |
− | padding: 0;
| + | |
− | margin-bottom: 30px;
| + | |
− | }
| + | |
− | | + | |
− | div#mw-panel div.portal h3 {
| + | |
− | font-size: 13px;
| + | |
− | line-height: 20px;
| + | |
− | background: linear-gradient( rgba( 31, 42, 53, 0.5 ), rgba( 31, 42, 53, 0.5 ) ), url(https://www.grinderscape.org/assets/images/background.png );
| + | |
− | padding: 10px;
| + | |
− | cursor: initial;
| + | |
− | display: block!important;
| + | |
− | color: #909090;
| + | |
− | }
| + | |
− | | + | |
− | div#mw-panel div.portal div.body {
| + | |
− | margin: 0!important;
| + | |
− | }
| + | |
− | | + | |
− | div#mw-panel div.portal div.body ul li {
| + | |
− | line-height: 20px;
| + | |
− | font-size: 13px;
| + | |
− | padding: 10px;
| + | |
− | }
| + | |
− | | + | |
− | div#content-wrap {
| + | |
− | width: 80%;
| + | |
− | box-sizing: border-box;
| + | |
− | }
| + | |
− | | + | |
− | #contentSub, #contentSub2 {
| + | |
− | background: linear-gradient( rgba( 31, 42, 53, 0.5 ), rgba( 31, 42, 53, 0.5 ) ), url(https://www.grinderscape.org/assets/images/background.png );
| + | |
− | padding: 10px;
| + | |
− | font-size: 13px;
| + | |
− | line-height: 20px;
| + | |
− | margin: 0;
| + | |
− | color: #909090;
| + | |
− | }
| + | |
− | | + | |
− | div#content-contentSub-wrap {
| + | |
− | box-shadow: 0 0 5px rgba(0,0,0,0.7);
| + | |
− | }
| + | |
− | | + | |
− | div#navigation {
| + | |
− | display: flex;
| + | |
− | position: relative;
| + | |
− | margin-bottom: 30px;
| + | |
− | background: linear-gradient( rgba( 31, 42, 53, 0.5 ), rgba( 31, 42, 53, 0.5 ) ), url(https://www.grinderscape.org/assets/images/background.png );
| + | |
− | box-shadow: 0 0 5px rgba(0,0,0,0.7);
| + | |
− | }
| + | |
− | | + | |
− | div#left-navigation {
| + | |
− | margin: 0;
| + | |
− | }
| + | |
− | | + | |
− | div#right-navigation {
| + | |
− | position: absolute;
| + | |
− | right: 0;
| + | |
− | margin: 0;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | div.vectorTabs {
| + | |
− | background: none;
| + | |
− | padding: 0;
| + | |
− | height: initial;
| + | |
− | }
| + | |
− | | + | |
− | div.vectorTabs ul {
| + | |
− | background: none;
| + | |
− | }
| + | |
− | | + | |
− | div.vectorTabs ul li {
| + | |
− | background: none;
| + | |
− | font-size: 0;
| + | |
− | }
| + | |
− | | + | |
− | div.vectorTabs li.selected {
| + | |
− | background: linear-gradient( rgba( 43, 55, 64, 0.5 ), rgba( 43, 55, 64, 0.5 ) ), url(https://www.grinderscape.org/assets/images/background.png );
| + | |
− | }
| + | |
− | | + | |
− | div.vectorTabs span {
| + | |
− | background: none;
| + | |
− | }
| + | |
− | | + | |
− | div.vectorTabs li a {
| + | |
− | font-size: 13px;
| + | |
− | line-height: 20px;
| + | |
− | padding: 10px;
| + | |
− | height: initial;
| + | |
− | }
| + | |
− | | + | |
− | div#content {
| + | |
− | margin: 0;
| + | |
− | border: 0;
| + | |
− | background: linear-gradient( rgba( 43, 55, 64, 0.5 ), rgba( 43, 55, 64, 0.5 ) ), url(https://www.grinderscape.org/assets/images/background.png );
| + | |
− | margin-bottom: 30px;
| + | |
− | }
| + | |
− | | + | |
− | h1#firstHeading {
| + | |
− | display: none;
| + | |
− | }
| + | |
− | | + | |
− | div#footer {
| + | |
− | margin: 0;
| + | |
− | background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1)),url(https://www.grinderscape.org/assets/images/background.png);
| + | |
− | box-shadow: 0 0 5px rgba(0,0,0,0.7);
| + | |
− | padding: 30px;
| + | |
− | }
| + | |
− | | + | |
− | div#footer #footer-info li {
| + | |
− | padding: 0;
| + | |
− | font-size: 13px;
| + | |
− | line-height: 20px;
| + | |
− | text-align: center;
| + | |
− | color: #909090;
| + | |
− | }
| + | |
− | | + | |
− | ul#footer-places {
| + | |
− | display: none;
| + | |
− | }
| + | |
− | | + | |
− | ul#footer-icons {
| + | |
− | display: none;
| + | |
− | }
| + | |
− | | + | |
− | </style> | + | |
− | | + | |
| </html> | | </html> |