API tools faq
paste
Advertisement
Tyler_Elric

page.html

Tyler_Elric
Dec 8th, 2011
124
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 12.51 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <title>Page Name</title>
  6. <style type="text/css">
  7. html{
  8.     padding:0;
  9.     margin:0;
  10. }
  11. body{
  12.     background:#EEE;
  13.     margin:0;
  14.     padding:0;
  15.     background:url('animus-mix.gif') fixed;
  16. }
  17. header#Footer{
  18.     padding:1em;
  19.     color:#DDD;
  20.     background:rgba(0,0,0,.7)
  21. }
  22. header > *{
  23.     width: 1000px;
  24. }
  25. #Logo{
  26.     -webkit-box-flex: 2;
  27.     -moz-box-flex: 2;
  28.     box-flex: 2;
  29.     text-align:center;
  30.     display:block;
  31. }
  32. header .item > username{
  33.     display:block;
  34. }
  35. header .item > ul{
  36.     list-style-type:none;
  37.     list-style-position: inside;
  38.     text-align:left;
  39. }
  40. header .item > ul > li{
  41.     margin:0;
  42. }
  43. navigation{
  44.     text-align:center;
  45.     display: box;
  46.     display: -webkit-box;
  47.     display: -moz-box;
  48.  
  49.     box-pack: center;
  50.     -webkit-box-pack: center;
  51.     -moz-box-pack: center;
  52.  
  53.     box-orient: horizontal;
  54.     -webkit-box-orient: horizontal;
  55.     -moz-box-orient: horizontal;
  56.  
  57.  
  58.     padding: 1em 0;
  59.     width:100%;
  60. }
  61. a{ color: inherit; text-decoration:none; }
  62. a:hover{ text-decoration: underline; }
  63. navigation > a{
  64.     -webkit-box-flex: 1;
  65.     -moz-box-flex: 1;
  66.     box-flex: 1;
  67.     -webkit-transition: all 200ms ease-in-out;
  68.     -moz-transition: all 200ms ease-in-out;
  69.     -o-transition: all 200ms ease-in-out;
  70.     transition: all 200ms ease-in-out;
  71.     display:block;
  72.     font-weight:bold;
  73.     padding:1em;
  74.     background: #ffffff;
  75.     background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%);
  76.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f3f3f3), color-stop(51%,#ededed), color-stop(100%,#ffffff));
  77.     background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
  78.     background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
  79.     background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
  80.     background: linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
  81.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
  82.     color:#333;
  83. }
  84. navigation > a:hover{
  85.     width:20%;
  86.     -webkit-box-flex: 3;
  87.     -moz-box-flex: 3;
  88.     box-flex: 3;
  89.     background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
  90.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6));
  91.     background: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
  92.     background: -o-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
  93.     background: -ms-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
  94.     background: linear-gradiendt(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
  95.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );
  96. }
  97. strong{
  98.     font-weight:bold;
  99. }
  100. em{
  101.     font-style:italic;
  102. }
  103. collection{
  104.     display: box;
  105.     display: -webkit-box;
  106.     display: -moz-box;
  107.  
  108.     box-pack: center;
  109.     -webkit-box-pack: center;
  110.     -moz-box-pack: center;
  111.  
  112.     box-align: stretch;
  113.     -webkit-box-align: stretch;
  114.     -moz-box-align: stretch;
  115.  
  116.     box-orient: horizontal;
  117.     -webkit-box-orient: horizontal;
  118.     -moz-box-orient: horizontal;
  119.     width:100%;
  120. }
  121. collection > .item{
  122.     -webkit-box-flex: 1;
  123.     -moz-box-flex: 1;
  124.     box-flex: 1;
  125.     display:block;
  126. }
  127. content .item{
  128.     padding:1em;
  129.     background:rgba(255,255,255,.3);
  130.     border-radius:5px;
  131. }
  132. monster.item{
  133.     padding: 2em;
  134.     background:transparent;
  135. }
  136. monster > collection > .item{
  137.     background:transparent;
  138. }
  139. monster > collection{
  140. }
  141. monster#user{
  142.     -webkit-box-flex: 3;
  143.     -moz-box-flex: 3;
  144.     box-flex: 3;
  145. }
  146. .tTipOwner {
  147.     position:relative;
  148.     z-index:0;
  149. }
  150. span.tTipOwner{
  151.     display:inline-block;
  152. }
  153. .tTipOwner:hover > tooltip{
  154.     bottom:3em;
  155.     opacity:1;
  156. }
  157. .tTipOwner > tooltip{
  158.     cursor:help;
  159.     z-index:1;
  160.     padding:2em;
  161.     border-radius:1em 1em 1em 0;
  162.     margin-top:0;
  163.     position: absolute;
  164.     bottom:1;
  165.     left:110%;
  166.     background:#000;
  167.     border:#FFF 1px solid;
  168.     color:#FFF;
  169.     opacity:0;
  170.     -webkit-transition: opacity 200ms ease-in-out, bottom 400ms ease-in-out;
  171.     -moz-transition: opacity 200ms ease-in-out, bottom 400ms ease-in-out;
  172.     -o-transition: opacity 200ms ease-in-out, bottom 400ms ease-in-out;
  173.     transition: opacity 200ms ease-in-out, bottom 400ms ease-in-out;
  174. }
  175. username,monstername{
  176.     color:#00F;
  177.     font-weight:bold;
  178.     padding:0 1em;
  179. }
  180. monstername{
  181.     display:inline-block;
  182. }
  183. username:hover,monstername:hover{
  184.     text-decoration:underline;
  185. }
  186. content{
  187.     display:block;
  188.     padding:1em 0;
  189.     background:rgba(255,255,255,.3);
  190. }
  191. movelist{
  192.     display:inline-block;
  193.     padding:0 1em;
  194. }
  195. movelist > move:first-child{
  196.     margin-top:0;
  197. }
  198. movelist > move{
  199.     background: #f3c5bd;
  200.     background: -moz-linear-gradient(top, #f3c5bd 0%, #e86c57 50%, #ea2803 51%, #ff6600 75%, #c72200 100%);
  201.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3c5bd), color-stop(50%,#e86c57), color-stop(51%,#ea2803), color-stop(75%,#ff6600), color-stop(100%,#c72200));
  202.     background: -webkit-linear-gradient(top, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%);
  203.     background: -o-linear-gradient(top, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%);
  204.     background: -ms-linear-gradient(top, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%);
  205.     background: linear-gradient(top, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%);
  206.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3c5bd', endColorstr='#c72200',GradientType=0 );
  207.     color: #000;
  208.     margin-top:1em;
  209.     padding:.5em 1em;
  210.     cursor:pointer;
  211.     display:block;
  212.     -webkit-transition: box-shadow 400ms ease-in-out, left 300ms ease-in-out;
  213.     -moz-transition: box-shadow 400ms ease-in-out, left 300ms ease-in-out;
  214.     -o-transition: box-shadow 400ms ease-in-out, left 300ms ease-in-out;
  215.     transition: box-shadow 400ms ease-in-out, left 300ms ease-in-out;
  216.     position:relative;
  217. }
  218. movelist > move:hover{
  219.     box-shadow: #000 0 0 10px 3px;
  220.     left:1em;
  221. }
  222. div#BattleLog{
  223.     padding:1em;
  224. }
  225. div#BattleLog > logentry{
  226.     display:block;
  227.     margin-top: 1em;
  228. }
  229. div#BattleLog > logentry:first-child{
  230.     margin-top: 0;
  231. }
  232. .contentHolder{
  233.     width:1000px;
  234.     margin: 0 auto;
  235. }
  236. div#Sprite{
  237.     width:240px;
  238.     height:240px;
  239. }
  240. .statHolder > tooltip{
  241.     left:-10%;
  242.     background:#FFF;
  243.     color:#F00;
  244.     box-shadow:#FAF 0 0 3px;
  245. }
  246. div.StatHolder{
  247.     width:240px;
  248.     height:2em;
  249.     background:rgba(0,0,0,.2);
  250.     display:block;
  251. }
  252. div.Stat{
  253.     max-width:100%;
  254.     height:100%;
  255.     background:rgba(10,200,120,.8);
  256. }
  257. </style>
  258. <script type="text/javascript" src="jquery.min.js"></script>
  259. <script type="text/javascript">
  260. function updateStat(stat){
  261.     stat.children("tooltip").text(
  262.     stat.data('current').toString() + '/' + $(this).data('max').toString());
  263.     stat.children("div").css({width:($(this).data('current')/$(this).data('max')*100).toString() + "%"});
  264. }
  265. function clickStat(){
  266.     var val = $(this).data('current') - 10;
  267.     $(this).data('current',val);
  268.     updateStat($(this));
  269. }
  270. function createStat(name,value,color){
  271.     var ret = $("<div/\>").addClass("StatHolder").addClass("tTipOwner").data(value);
  272.     var stat = $("<div/\>").addClass("Stat");
  273.     if( typeof(color)!=undefined || color != null ) stat.css({background:color})
  274.     var tTip = $("<tooltip/\>").text("&nbsp;");
  275.     ret.append(stat).append(tTip);
  276.     ret.click(clickStat);
  277.     updateStat(ret);
  278.     return ret;
  279. }
  280.  
  281. function initMonsters(monsters,usersmon){
  282.     var mondir = "sprites/";
  283.     var sprite_ext = ".png";
  284.     jQuery.each(monsters,function(index,value){
  285.         var stats = $("<table/\>");
  286.         stats.append($("<tr/\>").append("<td>HP:</td>").append("<td>"+value["HP"]+"</tr>"));
  287.         stats.append($("<tr/\>").append("<td>Defense:</td>").append("<td>"+value["DEF"]+"</tr>"));
  288.         stats.append($("<tr/\>").append("<td>Attack:</td>").append("<td>"+value["ATK"]+"</tr>"));
  289.         stats.append($("<tr/\>").append("<td>Special Defense:</td>").append("<td>"+value["SDEF"]+"</tr>"));
  290.         stats.append($("<tr/\>").append("<td>Special Attack:</td>").append("<td>"+value["SATK"]+"</tr>"));
  291.         stats.append($("<tr/\>").append("<td>Speed:</td>").append("<td>"+value["SPD"]+"</tr>"));
  292.         var moves = $("<movelist/\>");
  293.         jQuery.each(value["Moves"],function(index,move){
  294.             moves.append($("<move/\>").addClass('tTipOwner').
  295.             append(move["Name"]).append($("<tooltip/\>").append(move["MP"])));
  296.         });
  297.         moves.append($("<move/\>").append("Change Monster"));
  298.         moves.append($("<move/\>").append("Monster Box"));
  299.         moves.append($("<move/\>").append("Bag"));
  300.         var monster = $('<collection/\>');
  301.         monster.append(
  302.                $("<div/\>").addClass("item").
  303.                append($("<div/\>").append($("<img/\>").attr('src',mondir+value["name"]+sprite_ext)).attr("id","Sprite")).
  304.                append(createStat("HP",{'max':100,'current':70},null)).
  305.                append($("\<span\>Stats\</span\>").addClass('tTipOwner').append($("<tooltip/\>").append(stats)))
  306.         ).append( $("<div/\>").addClass("item").append(moves) );
  307.         if(index==usersmon)
  308.             $("collection#Battlers").prepend($("<monster class=\"item\" id=\"user\"/\>").data(value).append(monster));
  309.         else
  310.             $("collection#Battlers").append($("<monster class=\"item\"/\>").data(value).append(monster));
  311.     });
  312.     return $("collection#Battlers > monster")
  313. }
  314. function appendToCurrentLog(text){
  315.     $("div#BattleLog > logentry#current > div#summary").append($("<div/\>").text(text));
  316. }
  317. function finalizeCurrentLog(text){
  318.     if( text != "" ) appendToCurrentLog(text);
  319.     var curLogEntry = $("div#BattleLog > logentry#current").remove();
  320.     var last = curLogEntry.children("div#summary > div:last-child").remove();
  321.     curLogEntry.prepend(last);
  322.     var nLog = curLogEntry.contents().remove();
  323.     curLogEntry.append($("<div/\>").attr('id','summary'));
  324.     $("div#BattleLog").prepend($("<logentry/\>").append(nLog).fadeOut());
  325.     $("div#BattleLog > logentry:first-child").fadeIn();
  326.     $("div#BattleLog").prepend(curLogEntry);
  327. }
  328. function moveClick(){
  329.     toolTip = $(this).children("tooltip").remove();
  330.     val = $(this).text();
  331.     if( val == "Change Monster" ){
  332.         //Code to change a monster.
  333.         appendToCurrentLog("Monster change.");
  334.         finalizeCurrentLog("");
  335.     } else if ( val == "Monster Box" ){
  336.         //Throw a monster-box!
  337.         finalizeCurrentLog("Throwing a monster box!");
  338.     } else if ( val == "Bag"){
  339.         //What's in the bag?
  340.         appendToCurrentLog("Opening bag...");
  341.         finalizeCurrentLog("");
  342.     }else {
  343.         //A plain move.
  344.         finalizeCurrentLog("Move " + val + " is being executed...");
  345.     }
  346.     $(this).append(toolTip);
  347. }
  348. $(document).ready(function(){
  349.     var monsters = [
  350.         {
  351.             "name":"alpha",
  352.             "HP":25, "DEF":30, "ATK":40, "SDEF":20, "SATK":10, "SPD":5,
  353.             "Moves":[
  354.                 { "Name":"Punch", "MP":5 },
  355.                 { "Name":"Kick", "MP":6 },
  356.                 { "Name":"Sleep", "MP":7 },
  357.                 { "Name":"Dodge", "MP":8 }
  358.             ]
  359.         },
  360.         {
  361.             "name":"beta",
  362.             "HP":25, "DEF":30, "ATK":40, "SDEF":20, "SATK":10, "SPD":5,
  363.             "Moves":[
  364.                 { "Name":"Punch", "MP":5 },
  365.                 { "Name":"Kick", "MP":6 },
  366.                 { "Name":"Sleep", "MP":7 },
  367.                 { "Name":"Dodge", "MP":8 }
  368.             ]
  369.         }
  370.     ];
  371.     var usersmon = 0;
  372.     monstElements = initMonsters(monsters,usersmon);
  373.     $("movelist > move").click(moveClick)
  374. });
  375. </script>
  376. </head>
  377. <body>
  378. <header><collection class="contentHolder">
  379.     <div class="item">
  380.     <ul>
  381.         <li>Screenshots</li>
  382.         <li>FAQ</li>
  383.         <li>Game-Maps</li>
  384.         <li>Who's online</li>
  385.         <li>Top Trainers</li>
  386.         <li>Monsterdex</li>
  387.     </ul>
  388.     </div>
  389.     <div class="item" id="Logo"><img src='nLogo.png'/></div>
  390.     <div class="item">
  391.         <clock>&nbsp;</clock>
  392.         <username>CeFurkan</username>
  393.         Unread messages: <activechecker id="messagecount">&nbsp;</activechecker>
  394.     </div>
  395. </collection></header>
  396.  
  397. <div style="width:100%;"><navigation>
  398.     <a href=#>Home</a>
  399.     <a href=#>Game</a>
  400.     <a href=#>Players</a>
  401.     <a href=#>Misc</a>
  402.     <a href=#>Forum</a>
  403.     <a href=#>Turkce</a>
  404. </div></navigation>
  405.  
  406. <content><div class="contentHolder">
  407.     <collection id="Battlers"></collection>
  408.     <br/>
  409.     <div id="BattleLog"><logentry id="current"><div id="summary">&nbsp;</div></logentry></div>
  410. </div></content>
  411.  
  412. <header id="Footer"><collection class="contentHolder">
  413.     <div class="item">
  414.         <ul>
  415.             <li>For Parents</li>
  416.             <li>All Monster Links</li>
  417.             <li>Game Maps</li>
  418.             <li>Misc.</li>
  419.             <li>Online Players</li>
  420.             <li>Look Players</li>
  421.             <li>Monsterdex</li>
  422.             <li>Turkce MonsterDex</li>
  423.         </ul>
  424.     </div>
  425.     <div class="item" id="Logo">
  426.         (C) Copyright 2009 - 2011 MonsterMMORPG | All rights reserved | Contact<br/>
  427.         <style type="text/css">
  428.             .version{
  429.                 color:rgb(270,150,30);
  430.                 font-style:italic;
  431.             }
  432.         </style>
  433.         <span class="version">Version 1.04 BETA- Last Update 28 October 2011</span> | <a href="#">Privacy Policy and TOS</a> | <a href="#">Alexa Rank</a>
  434.     </div>
  435.     <div class="item">
  436.         <ul>
  437.             <li><a href="#">Forum Community</a></li>
  438.             <li><a href="#">Register ( Free! )</a></li>
  439.             <li><a href="#">Game Videos</a></li>
  440.             <li><a href="#">Canavar Oyunu Forum</a></li>
  441.             <li><a href="#">Monster Games Forum</a></li>
  442.             <li><a href="#">Oyunlar</a></li>
  443.             <li><a href="#">Monster Images</a></li>
  444.             <li><a href="#">Credits</a></li>
  445.         </ul>
  446.     </div>
  447. </collection></header>
  448. </body>
  449. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!