Skyscraper Wiki
Register
Advertisement

The Skyscraper Info Maker is an editor, for creating the skyscraper information for this wiki. It was made by PhilippL with HTML, CSS and JS.

Gallery

How to get it

If you want to try the editor, then please do this:

1. Copy all of this code:

<html> <head> <title>Skyscraper Info Maker</title> <style> body { background-color: #eeffd1; } div.page { background-color: white; width: 1000px; height: 2490px; border-radius: 3px; border: 1px solid #ccc; margin-left: auto; margin-right: auto; } .title { background-color: #eeffd1; padding: 5px; width: 950px; font-family: arial; border-radius: 3px; text-align: center; color: green; margin-left: auto; margin-right: auto; } div.container { font-family: arial; padding-left: 20px; font-size: 20px; } button { background-color: lightgreen; border: 3px solid lightgreen; border-style: groove; transition: background-color 0.3s; border-radius: 3px; font-size: 20px; width: 120px; height: 30px; } button:hover { background-color: #eeffd1; } div.code { background-color: #eeffd1; padding: 5px; border: 1px solid #bbffd1; width: 950px; border-radius: 3px; margin-left: auto; margin-right: auto; margin-top: 10px; } input[type="text"] { border-radius: 3px; font-size: 21px; } input[type="url"] { width: 500px; border-radius: 3px; font-size: 21px; } div.maker { font-size: 21px; } div.toolbar { margin-left: 10px; padding-bottom: 10px; } button.long { width: 260px; } button.medium { width: 165px; } span.info { padding-left: 8px; } iframe.ssp-internet { width: 955px; height: 700px; } p.link { display: inline !important; color: steelblue; } p.link:hover { text-decoration: underline; cursor: pointer; } </style> </head> <body> <div class="page"> <h1 class="title">Skyscraper Info Maker</h1> <div class="container"> Welcome to the Skyscraper Info Maker! Here you can make an information template for a skyscraper. <hr /> <div class="maker"> <b>City</b>: <input type="text" id="txt1" /> <br /><br /> <b>Country</b>: <input type="text" id="txt2" /> <br /><br /> <b>Height</b>: <input type="text" id="txt3" /> m <br /><br /> <b>Status</b>: <input type="text" id="txt4" /> <br /><br /> <b>Built</b>: <input type="text" id="txt5" /> <br /><br /> <b>Floors</b>: <input type="text" id="txt6" /> <br /><br /> <b>Use</b>: <input type="text" id="txt7" /> <br /><br /> <b>Construction Time</b>: <input type="text" id="txt8" /> years <br /><br /> <b>Construction Types</b>: <input type="text" id="txt10" /> <br /><br /> <b title="SkyscraperPage Image" style="cursor: help;">SSP Image</b>: <input type="url" id="txt9" /> </div> <br /> <center> <button class="submit" onclick="submit()">Submit</button> </center> <hr /> <h2 class="title">SkyscraperPage</h2> <span class="info">Here you can look at the information of the skyscraper on SkyscraperPage.com without opening the internet!</span> <br /><br /> <iframe src="http://skyscraperpage.com/diagrams/#searchform" class="ssp-internet" frameborder="0"></iframe> <hr /> <h2 class="title">Code</h2> <div class="toolbar"> <button onclick="time1()" style="width:70px;">Built </button> <button onclick="time2()" style="width:200px;">Under Construction </button> <button onclick="time3()" style="width:90px;">On-hold</button> <button onclick="time4()">Proposed</button> <button onclick="time5()" class="medium">Stale Proposal</button> </div> <span class="info">Copy and paste this code:</span> <div class="code" contenteditable="true"> <span id="txtinfo"> The '''{{PAGENAME}}''' is a <span id="height">425.5</span> m high skyscraper in <span id="city">New York</span> (<span id="country">United States</span>). This building was built <span id="built">2010</span> and has <span id="floors">90</span> floors.</span><br /> ==Info==<br /> '''Name:''' {{PAGENAME}}<br /> <br /> '''City:''' <span id="city2">New York</span><br /> <br /> '''Country:''' <span id="country2">United States</span><br /> <br /> '''Height:''' <span id="height2">425.5</span> m<br /> <br /> '''Status:''' <span id="status">Built</span><br /> <br /> '''Built:''' <span id="built2">2010</span><br /> <br /> '''Floors:''' <span id="floors2">90</span><br /> <br /> '''Use:''' <span id="use">Residential</span><br /> <br /> '''Construction time:''' <span id="ct">4</span> years<br /> <br /> '''Construction Types:''' <span id="types">Highrise</span><br /> <br /> '''{{SSP}}''': [<span id="ssp">http://skyscraperpage.com/cities/?buildingID=94370</span> Image] <br /><br /> [[Category:Skyscrapers]]<br /> [[Category:<span id="city3">Berlin</span>]]<br /> [[Category:<span id="country3">Germany</span>]]<br /> [[Category:<span id="status3">Built</span> skyscrapers]]<br /> [[Category:<span id="use3">Residential</span> skyscrapers]]<br /> [[Category:Built in <span id="ct3">4</span> years]] </div> </div> </div> <script> function submit() { document.getElementById("city").innerHTML = txt1.value; document.getElementById("city2").innerHTML = txt1.value; document.getElementById("country").innerHTML = txt2.value; document.getElementById("country2").innerHTML = txt2.value; document.getElementById("height").innerHTML = txt3.value; document.getElementById("height2").innerHTML = txt3.value; document.getElementById("status").innerHTML = txt4.value; document.getElementById("built").innerHTML = txt5.value; document.getElementById("built2").innerHTML = txt5.value; document.getElementById("floors").innerHTML = txt6.value; document.getElementById("floors2").innerHTML = txt6.value; document.getElementById("use").innerHTML = txt7.value; document.getElementById("ct").innerHTML = txt8.value; document.getElementById("ssp").innerHTML = txt9.value; document.getElementById("city3").innerHTML = txt1.value; document.getElementById("country3").innerHTML = txt2.value; document.getElementById("use3").innerHTML = txt7.value; document.getElementById("ct3").innerHTML = txt8.value; document.getElementById("status3").innerHTML = txt4.value; document.getElementById("types").innerHTML = txt10.value; } var txt1 = document.getElementById("txt1"); var txt2 = document.getElementById("txt2"); var txt3 = document.getElementById("txt3"); var txt4 = document.getElementById("txt4"); var txt5 = document.getElementById("txt5"); var txt6 = document.getElementById("txt6"); var txt7 = document.getElementById("txt7"); var txt8 = document.getElementById("txt8"); var txt9 = document.getElementById("txt9"); var txt10 = document.getElementById("txt10"); function time1() { document.getElementById("txtinfo").innerHTML = "The '''{{PAGENAME}}''' is a <span id='height'>425.5</span> m high skyscraper in <span id='city'>New York</span> (<span id='country'>United States</span>). This building was built <span id='built'>2013</span> and has <span id='floors'>90</span> floors."; } function time2() { document.getElementById("txtinfo").innerHTML = "The '''{{PAGENAME}}''' is a skyscraper that is under construction. This building will be <span id='height'>425.5</span> m high and will be completed <span id='built'>2018</span>."; } function time3() { document.getElementById("txtinfo").innerHTML = "The '''{{PAGENAME}}''' is a skyscraper that is on-hold in <span id='city'>New York</span> (<span id='country'>United States</span>). This building will be <span id='height'>500</span> m high and will be completed <span id='built'>2018</span>."; } function time4() { document.getElementById("txtinfo").innerHTML = "The '''{{PAGENAME}}''' is a proposed skyscraper that will be built in <span id='city'>New York</span> (<span id='country'>United States</span>). This building will be <span id='height'>500</span> m high and will have <span id='floors'>100</span> floors."; } function time5() { document.getElementById("txtinfo").innerHTML = "The '''{{PAGENAME}}''' is a stale proposed skyscraper that will be built in <span id='city'>New York</span> (<span id='country'>United States</span>). This building will be <span id='height'>500</span> m high and will have <span id='floors'>100</span> floors."; } </script> </body> </html>


2. Open any easy text program (e.g. Notepad) and paste the code.


3. Save the file as an HTML page like this:

SSIM Image 4

Enter any name that the editor should have and write .html at the end.








4. Open the HTML file and you'll see something like this:

SSIM Image 1

The editor










Now you are done.

How to use

It's easy to use the editor, just follow the steps:

1. Scroll down a bit until you see the title "SkyscraperPage". You'll see something like this:

SSIM Image 2

The Diagram Search Form of skyscraperpage.com












2. Do see see the check-boxes in the Diagram Search Form? Check or uncheck the check-boxes for selecting the status of the buildings: If you check the for example only the "Proposed" check-box, then it will show all the skyscrapers in the proposed status if you click on Search.

SSIM Image 5

You can also choose Structure types you want to find special skyscrapers or towers in that category.







3. On the top-left of the Search Forum, you can enter the minimum or maximum height of the buildings you want to search. Enter inside the 'Minimum' box the number 300 because the wiki will only accept buildings over 300 m.

SSIM Image 6







4. Click on search. You find lots of drawings of skyscrapers, buildings and towers. Under the drawings are the informations about it:

SSIM Image 7

"Ping An International Finance Centre" is the name of the skyscraper if you look at the picture. "Shenzhen" is the city, "China" is the country, "J. Eduardo etc." is the illustrator (this information is not important), "Under construction" is the status, "2016" is the year when the tower was/will be built, "115" is the number of the floors, "Office" is the use, and "598.9 m" is the height of the building or tower in meters.



5. Remember some of the information, scroll up to the text-boxes, and type the information into the correct box. When you're done, click on the drawing of the skyscraper you're making to look at the rest of the information. A new tab in your internet will open.


6. Now you will see more information about the building.

icon

Look at the Construction Dates and find out the length construction time. Scroll up the the editor and enter the number of years.

SSIM Image 9









7. Now look at the Building Uses. If you find more building uses, then write (parking garage, restaurant, retail) for that building.

SSIM Image 10









8. Now you only need to look at the Structural Types. Enter all the types listed in a - inside the "Construction Types" text-box.

SSIM Image 11







9. When you are done with all the information, click the Submit button. Scroll down until you see the "Code" title. Click on the green button with the status that your building has. IMPORATNT: You must refresh the code, by clicking on Submit again.

SSIM Image 12





10. You are almost done! You only need the copy the code and create a new page on this wiki with the name of the skyscraper. Just paste the code and click on publish!

SSIM Image 13
SSIM Image 14










And you are done!


Advertisement