XF 1.4 Making a XenForo PAGE from PHP/HTML?

MichaelCS

MichaelCS

Active member
I'm looking to integrate something in to the site that I've been working on. Can the code below be added to a page? The Stylesheet information isn't important since I am assuming that the site itself would provide that through the XenForo page system but the rest?

Code: 
<!doctype html><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>MWO - Quirks - v1.3.349(pdf) - Nov. 4th, 2014</title>
<style>
body {
   background-color:#222;
   background-image: url('https://static.mwomercs.com/img/theme/newsbg.jpg');
   color:#eee;
   font-family: Helvetica,Arial;
   font-weight: 300;
   font-size:13px;
   line-height:1.2em;
}
a {
   color:#fda;
   text-decoration:none;
}
a:hover {
   color:#fda;
   text-decoration:underline;
}
.page {
   min-width:360px;
   width:25%;
   max-width:650px;
   float:left;
   margin:10px 0;
   padding:0;
   clear:right;
}
span {
   display:block;
   width:68%;
   overflow:hidden ;
}
span.note{
   text-indent:10px;
   font-size:80%;
   color:#999;
}
span.move{
   color:#6a6;
}
span.armor{
   color:#66a;
}
span.special{
   color:#f66;
}
span:hover{
   background-color:#222;
   color:#fff;
}
em{
   float:right;
}
img{
   float:right;
   bottom:15px;
   right:-5px;
   position:absolute;
   max-height:100%;
}
.page div, .box{
   position:relative;
   min-height:15px;
   background-color:#000;
   background-color:rgba(0,0,0,.7);
   padding:0 0 10px 10px;
   border:1px solid #ccc;
   margin:0 10px 15px 10px;
}
.page div div {
   background:none;
   border:none;
   padding:0;
}
h2 {
   float:left;
   margin-left:10px;
}
h4 {
   margin:10px 0 0 0;
}
button {
   color:#eee;
   background-color:#333;
   border:1px solid #666;
   width:60px;
   padding:3px;
   margin:10px 10px 0 0;
   float:right;
}
.dull {
   opacity:.1;
}
.dull:hover {
   opacity:1;
}
hr{
   border:none;
   border-bottom:1px solid #999;
}
.right{
   float:right;
}
.left{
   float:left;
}
.center{
   text-align:center;
}
.w25 {
   width:25%;
   min-width:350px;
}
label {
   width:300px;
   display:block;
}
label input {
   width:200px;
   height:17px;
   float:right;
   padding:1px;
   border:none;
   border-bottom:1px solid #666;
   background-color:#111;
   color:#eee;
}
form button {
   width:25px;
   height:20px;
   padding:0;
   margin:0 15px;
   font-size:11px;
}
@media (min-width: 751px) and (max-width: 1500px) {
   .page {width:50%;}
}
@media (max-width: 750px) {
   .page {width:100%;}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
   $(".page div div").hide();
   $(".page div").click(function() {$(this).find('div').slideToggle(100)});
   //$("input[type='text']").keyup(function() {if (timerID>0) {clearTimeout(timerID);timerID=0;}; timerID = setTimeout(filter_list,1000,$(this).attr('name'),$(this).val())}).blur(function() {$(this).keyup()});
   $("input[type='text']").keyup(function() {if (timerID>0) {clearTimeout(timerID);timerID=0;}; timerID = setTimeout('filter_list("'+$(this).attr('name')+'","'+$(this).val()+'")',1000)}).blur(function() {$(this).keyup()});
});
var timerID = 0;
var lastFilter = "";
function filter_list(typ,value){
   timerID = 0;
   if (value==lastFilter){
     return;
   }
   if (value=="") {
     $(".page div").show();
     return;
   }
   lastFilter = value;
   $(".page div").hide();
   if (typ=='mf') {
     var values = value.toLowerCase().split(' ');
     $(".page > div").filter(function(){return _findIn(values, $(this).find('h3').html());}).show();
   } else {
     var values = value.toLowerCase().split(',');
     $(".page > div").filter(function(){return _findIn(values, $(this).find('div').html());}).show();
   }
}

function _findIn(vals,match){
   match = match.toLowerCase();
   for(var i=0;i<vals.length;i++){
     if (vals[i]!="" && match.indexOf(vals[i]) != -1){
       return true;
     }
   }
   return false;
}
</script>
</head>
<body>
<div class="center"><a href="https://www.mechspecs.com">-- RETURN TO MECHSPECS --</a></div>

<form name="filter">
   <div class="box left w25">
     <h4>Filter:</h4>
     <br><label>Mech: <input type="text" name="mf"></label>
     <br><label>Quirk: <input type="text" name="qf"></label>
     <br>
   </div>
</form>

<br clear="all">
<div class="page"><h2>LIGHT</h2>
<button onClick="$(this).siblings('div').find('div').show()">show</button>
<button onClick="$(this).siblings('div').find('div').hide()">hide</button>
<br clear="all"><br>
<div><h3>LCT-1E</h3><img src="http://static.mwomercs.com/api/assets/mechicons/lct-1e.png" /><div>
<span class="armor">Armor Strength L/R Arm<em>50%</em></span>
<span class="armor">Additional Structure L/R Leg<em>8</em></span>
<span>Small Laser Heat Generation<em>-20%</em></span>
<span class="note">Energy Weapon Heat Generation<em>-10%</em></span>
<span>Small Laser Range<em>60%</em></span>
<span class="note">Energy Weapon Range<em>30%</em></span>
<span class="move">Acceleration<em>25%</em></span>
<span class="move">Deceleration<em>50%</em></span>
</div></div>
<div><h3>LCT-1M</h3><img src="http://static.mwomercs.com/api/assets/mechicons/lct-1m.png" /><div>
<span class="armor">Armor Strength L/R Arm<em>50%</em></span>
<span class="armor">Additional Structure L/R Leg<em>8</em></span>
<span>Medium Laser Cooldown<em>25%</em></span>
<span class="note">Energy Weapon Cooldown<em>12.5%</em></span>
<span>Medium Laser Heat Generation<em>-25%</em></span>
<span class="note">Energy Weapon Heat Generation<em>-12.5%</em></span>
<span>Medium Laser Range<em>25%</em></span>
<span class="note">Energy Weapon Range<em>12.5%</em></span>
<span>Missile Weapon Cooldown<em>15%</em></span>
<span>Missile Weapon Heat Generation<em>-15%</em></span>
<span class="move">Acceleration<em>25%</em></span>
<span class="move">Deceleration<em>50%</em></span>
</div></div>
<div><h3>LCT-1V</h3><img src="http://static.mwomercs.com/api/assets/mechicons/lct-1v.png" /><div>
<span class="armor">Armor Strength L/R Arm<em>50%</em></span>
<span class="armor">Additional Structure L/R Leg<em>8</em></span>
<span>Ballistic Weapon Range<em>15%</em></span>
<span>ER-Large Laser Cooldown<em>50%</em></span>
<span class="note">Energy Weapon Cooldown<em>25%</em></span>
<span>Energy Weapon Range<em>15%</em></span>
<span>ER-Large Laser Duration<em>-25%</em></span>
<span class="note">Laser Duration<em>-12.5%</em></span>
<span class="move">Acceleration<em>25%</em></span>
<span class="move">Deceleration<em>50%</em></span>
</div></div>
<div><h3>LCT-1V(P)</h3><div>
<span class="armor">Armor Strength L/R Arm<em>50%</em></span>
<span class="armor">Additional Structure L/R Leg<em>8</em></span>
<span>Ballistic Weapon Range<em>15%</em></span>
<span>ER-Large Laser Cooldown<em>50%</em></span>
<span class="note">Energy Weapon Cooldown<em>25%</em></span>
<span>Energy Weapon Range<em>15%</em></span>
<span>ER-Large Laser Duration<em>-25%</em></span>
<span class="note">Laser Duration<em>-12.5%</em></span>
<span class="move">Acceleration<em>25%</em></span>
<span class="move">Deceleration<em>50%</em></span>
</div></div>
<div><h3>LCT-3M</h3><img src="http://static.mwomercs.com/api/assets/mechicons/lct-3m.png" /><div>
<span class="armor">Armor Strength L/R Arm<em>50%</em></span>
<span class="armor">Additional Structure L/R Leg<em>8</em></span>
<span>Small Pulse Laser Cooldown<em>20%</em></span>
<span class="note">Energy Weapon Cooldown<em>10%</em></span>
<span>Small Pulse Laser Range<em>60%</em></span>
<span class="note">Energy Weapon Range<em>30%</em></span>
<span class="move">Acceleration<em>25%</em></span>
<span class="move">Deceleration<em>50%</em></span>
</div></div>
<div><h3>LCT-3S</h3><img src="http://static.mwomercs.com/api/assets/mechicons/lct-3s.png" /><div>
<span class="armor">Armor Strength L/R Arm<em>50%</em></span>
<span class="armor">Additional Structure L/R Leg<em>8</em></span>
<span>Medium Laser Cooldown<em>25%</em></span>
<span class="note">Energy Weapon Cooldown<em>12.5%</em></span>
<span>Medium Laser Range<em>25%</em></span>
<span class="note">Energy Weapon Range<em>12.5%</em></span>
<span>Missile Weapon Cooldown<em>15%</em></span>
<span>Missile Weapon Range<em>30%</em></span>
<span class="move">Acceleration<em>25%</em></span>
<span class="move">Deceleration<em>50%</em></span>
</div></div>
<div><h3>COM-1B</h3><img src="http://static.mwomercs.com/api/assets/mechicons/com-1b.png" /><div>
<span class="armor">Additional Structure L/R Leg<em>6</em></span>
<span>Medium Laser Cooldown<em>20%</em></span>
<span class="note">Energy Weapon Cooldown<em>10%</em></span>
<span>Energy Weapon Heat Generation<em>-12.5%</em></span>
<span>Large Laser Range<em>20%</em></span>
<span class="note">Energy Weapon Range<em>10%</em></span>
<span>Medium Laser Duration<em>-20%</em></span>
<span class="note">Laser Duration<em>-10%</em></span>
<span class="move">Reverse Speed<em>12.6%</em></span>
<span class="move">Turn Rate<em>10%</em></span>
</div></div>
<div><h3>COM-1D</h3><img src="http://static.mwomercs.com/api/assets/mechicons/com-1d.png" /><div>
<span class="armor">Additional Structure L/R Leg<em>6</em></span>
<span>Medium Pulse Laser Cooldown<em>20%</em></span>
<span class="note">Energy Weapon Cooldown<em>10%</em></span>
<span>Medium Pulse Laser Range<em>40%</em></span>
<span class="note">Energy Weapon Range<em>20%</em></span>
<span>Missile Weapon Range<em>12.5%</em></span>
<span class="move">Reverse Speed<em>12.6%</em></span>
<span class="move">Turn Rate<em>10%</em></span>
</div></div>
<div><h3>COM-2D</h3><img src="http://static.mwomercs.com/api/assets/mechicons/com-2d.png" /><div>
<span class="armor">Additional Structure L/R Leg<em>6</em></span>
<span>SRM/4 Cooldown<em>15%</em></span>
<span class="note">Missile Weapon Cooldown<em>7.5%</em></span>
<span>SRM/4 Range<em>15%</em></span>
<span class="note">Missile Weapon Range<em>7.5%</em></span>
</div></div>
<div><h3>COM-3A</h3><img src="http://static.mwomercs.com/api/assets/mechicons/com-3a.png" /><div>
<span class="armor">Additional Structure L/R Leg<em>6</em></span>
<span>Energy Weapon Cooldown<em>12.5%</em></span>
<span>SRM/6 Cooldown<em>20%</em></span>
<span class="note">Missile Weapon Cooldown<em>10%</em></span>
<span>SRM/6 Heat Generation<em>-20%</em></span>
<span class="note">Missile Weapon Heat Generation<em>-10%</em></span>
<span>SRM/6 Range<em>20%</em></span>
<span class="note">Missile Weapon Range<em>10%</em></span>
<span class="move">Reverse Speed<em>12.6%</em></span>
<span class="move">Turn Rate<em>10%</em></span>
</div></div>
<div><h3>COM-TDK</h3><img src="http://static.mwomercs.com/api/assets/mechicons/com-tdk.png" /><div>
<span class="armor">Additional Structure L/R Leg<em>6</em></span>
<span>Energy Weapon Heat Generation<em>-10%</em></span>
<span>Energy Weapon Range<em>10%</em></span>
<span>Laser Duration<em>-10%</em></span>
</div></div>
</body></html>

+ A LOT MORE CODE THAT I SNIPPED. JUST DUPLICATES OF THE STOP STUFF
 
Sort by date Sort by votes
It's having an issue with this line...

Code: 
  $(".page div").click(function() {$(this).find('div').slideToggle(100)});

Template HTML:
Line 146: Template syntax error.
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

Dkf
  • Question Question
XF 2.2 How do I embed a HTML code from file in a Xenforo page?
Replies
6
Views
976
Mr Lucky
Mr Lucky
Back
Top Bottom