Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	CSS 3D Earth Program [Khantober!]
ID	6046209114537984
Created	6 years ago, 1538576576307
Updated	5 years ago, 1569624658747
Code	<!DOCTYPE html> <!-- Subscribe to my website: https://www.khanacademy.org/computer-programming/to13s-website/6064708199415808 Yes, only 15 countries, because I have homework and like only 3-4 days to do it, but hopefully you like the actual program! And yes, it isn't "3D" but is "3D" things 3D??? Ha. Credit to RocketBear27 for a small spelling error catch. --> <html> <head> <meta charset="utf-8"> <title>CSS 3D Earth Program [Khantober!]</title> <link href="https://fonts.googleapis.com/css?family=Fredoka+One\|Google+Sans+Display:500,400\|Roboto:500,400\|Material+Icons" rel="stylesheet"> <script> var countries = [ { name: "China", xPos: 300, yPos: 65, desc: "<h2>China</h2><img src='https://upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg' width='100%'/><h3>Introduction</h3><p>China is a populous nation in East Asia whose vast landscape encompasses grassland, desert, mountains, lakes, rivers and more than 14,000km of coastline. Capital Beijing mixes modern architecture with historic sites such as the Forbidden City palace complex and Tiananmen Square. Shanghai is a skyscraper-studded global financial center. The iconic Great Wall of China runs east-west across the countrys north.</p><h3>Information</h3><ul><li>Borders with several countries including India, North Korea, and Russia.</li><li><b>Population:</b> 1.38 billion</li><li><b>Capital:</b> Beijing</li><li><b>President:</b> Xi Jinping</li><li><b>Founded:</b> 1949</li></ul>", }, { name: "India", xPos: 350, yPos: 50, image: "", desc: "<h2>India</h2><img src='https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Flag_of_India.svg/1200px-Flag_of_India.svg.png' width='100%'/><h3>Introduction</h3><p>India is a vast South Asian country with diverse terrain – from Himalayan peaks to Indian Ocean coastline – and history reaching back 5 millennia. In the north, Mughal Empire landmarks include Delhi’s Red Fort complex and massive Jama Masjid mosque, plus Agra’s iconic Taj Mahal mausoleum. Pilgrims bathe in the Ganges in Varanasi, and Rishikesh is a yoga centre and base for Himalayan trekking.</p><h3>Information</h3><ul><li>Borders with several countries including China, Nepal, and Pakistan.</li><li><b>Population:</b> 1.28 billion</li><li><b>Prime Minister:</b> Narendra Modi</li><li><b>Capital:</b> New Delhi</li></ul>", }, { name: "United States of America", xPos: 30, yPos: 80, desc: "<h2>U.S.A.</h2><img src='https://upload.wikimedia.org/wikipedia/en/thumb/a/a4/Flag_of_the_United_States.svg/1280px-Flag_of_the_United_States.svg.png' width='100%'/><h3>Introduction</h3><p>The U.S. is a country of 50 states covering a vast swath of North America, with Alaska in the northwest and Hawaii extending the nation’s presence into the Pacific Ocean. Major Atlantic Coast cities are New York, a global finance and culture center, and capital Washington, DC. Midwestern metropolis Chicago is known for influential architecture and on the west coast, Los Angeles Hollywood is famed for filmmaking.</p><h3>Information</h3><ul><li><b>Borders:</b> Canada and Mexico</li><li><b>Capital:</b> Washington, DC.</li><li><b>President:</b> Donald Trump</li><li><b>Population:</b> 325.7 million</li></ul>", }, { name: "Indonesia", xPos: 275, yPos: 0, desc: "<h2>Indonesia</h2><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Flag_of_Indonesia.svg/255px-Flag_of_Indonesia.svg.png' width='100%'/><h3>Introduction</h3><p>Indonesia, a Southeast Asian nation made up of thousands of volcanic islands, is home to hundreds of ethnic groups speaking many different languages. It’s known for beaches, volcanoes, Komodo dragons and jungles sheltering elephants, orangutans and tigers. On the island of Java lies Indonesia’s vibrant, sprawling capital, Jakarta, and the city of Yogyakarta, known for gamelan music and traditional puppetry.</p><h3>Information</h3><ul><li><b>Capital:</b> Jakarta</li><li><b>President:</b> Joko Widodo</li><li><b>Population:</b> 261.1 million</li></ul>", }, { name: "Brazil", xPos: -60, yPos: -30, desc: "<h2>Brazil</h2><img src='https://upload.wikimedia.org/wikipedia/en/thumb/0/05/Flag_of_Brazil.svg/1280px-Flag_of_Brazil.svg.png' width='100%'/><h3>Introduction</h3><p>Brazil, a vast South American country, stretches from the Amazon Basin in the north to vineyards and massive Iguaçu Falls in the south. Rio de Janeiro, symbolized by its 38m Christ the Redeemer statue atop Mount Corcovado, is famed for its busy Copacabana and Ipanema beaches as well as its enormous, raucous Carnaval festival, featuring parade floats, flamboyant costumes, and samba music and dance.</p><h3>Information</h3><ul><li><b>Capital:</b> Brasilia</li><li><b>President:</b> Michel Temer</li><li><b>Population:</b> 207.7 million</li></ul>", }, { name: "Pakistan", xPos: 365, yPos: 60, desc: "<h2>Pakistan</h2><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Flag_of_Pakistan.svg/255px-Flag_of_Pakistan.svg.png' width='100%'/><h3>Introduction</h3><p>Pakistan, officially the Islamic Republic of Pakistan, is a country in South Asia. It is the sixth-most populous country with a population exceeding 212,742,631 people. In area, it is the 33rd-largest country, spanning 881,913 square kilometres.</p><h3>Information</h3><ul><li><b>Capital:</b> Islamabad</li><li><b>Prime minister:</b> Imran Khan</li><li><b>President:</b> Arif Alvi</li><li><b>Population:</b> 212.7 million</li></ul>", }, { name: "Nigeria", xPos: -175, yPos: 25, desc: "<h2>Nigeria</h2><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Flag_of_Nigeria.svg/1000px-Flag_of_Nigeria.svg.png' width='100%'/><h3>Introduction</h3><p>Nigeria, an African country on the Gulf of Guinea, has many natural landmarks and wildlife reserves. Protected areas such as Cross River National Park and Yankari National Park have waterfalls, dense rainforest, savanna and rare primate habitats. One of the most recognizable sites is Zuma Rock, a 725m-tall monolith outside the capital of Abuja that’s pictured on the national currency.</p><h3>Information</h3><ul><li><b>Capital:</b> Abuja</li><li><b>President:</b> Muhammadu Buhari</li><li><b>Population:</b> 186 million</li></ul>", }, { name: "Bangladesh", xPos: 332, yPos: 53, desc: "<h2>Bangladesh</h2><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Flag_of_Bangladesh.svg/1200px-Flag_of_Bangladesh.svg.png' width='100%'/><h3>Introduction</h3><p>Bangladesh, to the east of India on the Bay of Bengal, is a South Asian country marked by lush greenery and many waterways. Its Padma (Ganges), Meghna and Jamuna rivers create fertile plains, and travel by boat is common. On the southern coast, the Sundarbans, an enormous mangrove forest shared with Eastern India, is home to the royal Bengal tiger.</p><h3>Information</h3><ul><li><b>Capital:</b> Dhaka</li><li><b>Currency:</b> Bangladeshi taka</li><li><b>Population:</b> 163 million</li></ul>", }, { name: "Russia", xPos: 300, yPos: 120, desc: "<h2>Russia</h2><img src='https://upload.wikimedia.org/wikipedia/en/f/f3/Flag_of_Russia.svg' width='100%'/><h3>Introduction</h3><p>Russia, the world’s largest nation, borders European and Asian countries as well as the Pacific and Arctic oceans. Its landscape ranges from tundra and forests to subtropical beaches. It’s famous for Moscow's Bolshoi and St. Petersburg's Mariinsky ballet companies. St. Petersburg, founded by Russian leader Peter the Great, has the baroque Winter Palace, now housing part of the State Hermitage Museum’s art collection.</p><h3>Information</h3><ul><li><b>Capital:</b> Moscow</li><li><b>President:</b> Vladimir Putin</li><li><b>Currency:</b> Russian Ruble</li><li><b>Population:</b> 144.3 million</li></ul>", }, { name: "Japan", xPos: 240, yPos: 75, desc: "<h2>Japan</h2><img src='https://upload.wikimedia.org/wikipedia/en/9/9e/Flag_of_Japan.svg' width='100%'/><h3>Introduction</h3><p>Japan is an island nation in the Pacific Ocean with dense cities, imperial palaces, mountainous national parks and thousands of shrines and temples. Shinkansen bullet trains connect the main islands of Kyushu (with Okinawa's subtropical beaches), Honshu (home to Tokyo and Hiroshima’s atomic-bomb memorial) and Hokkaido (famous for skiing). Tokyo, the capital, is known for skyscrapers, shopping and pop culture.</p><h3>Information</h3><ul><li><b>Capital:</b> Tokyo</li><li><b>Emperor:</b> Akihito</li><li><b>Currency:</b> Japanese yen</li><li><b>Population:</b> 127 million</li></ul>", }, { name: "Mexico", xPos: 25, yPos: 50, desc: "<h2>Mexico</h2><img src='https://upload.wikimedia.org/wikipedia/commons/f/fc/Flag_of_Mexico.svg' width='100%'/><h3>Introduction</h3><p>Mexico is a country between the U.S. and Central America that's known for its Pacific and Gulf of Mexico beaches and its diverse landscape of mountains, deserts and jungles. Ancient ruins such as Teotihuacán and the Mayan city of Chichén Itzá are scattered throughout the country, as are Spanish colonial-era towns. In capital Mexico City, upscale shops, renowned museums and gourmet restaurants cater to modern life.</p><h3>Information</h3><ul><li><b>Capital:</b> Mexico City</li><li><b>President:</b> Enrique Peña Nieto</li><li><b>National Language:</b> Spanish</li><li><b>Population:</b> 124.6 million</li></ul>", }, { name: "Ethiopia", xPos: -222, yPos: 25, desc: "<h2>Ethiopia</h2><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Flag_of_Ethiopia.svg/1200px-Flag_of_Ethiopia.svg.png' width='100%'/><h3>Introduction</h3><p>Ethiopia, in the Horn of Africa, is a rugged, landlocked country split by the Great Rift Valley. With archaeological finds dating back more than 3 million years, it’s a place of ancient culture. Among its important sites are Lalibela with its rock-cut Christian churches from the 12th–13th centuries. Aksum is the ruins of an ancient city with obelisks, tombs, castles and Our Lady Mary of Zion church.</p><h3>Information</h3><ul><li><b>Capital:</b> Addis Ababa</li><li><b>Prime Minister:</b> Abiy Ahmed</li><li><b>President:</b> Mulatu Teshome</li><li><b>Population:</b> 105.4 million</li></ul>", }, { name: "Philippines", xPos: 270, yPos: 32, desc: "<h2>Philippines</h2><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Flag_of_the_Philippines.svg/1200px-Flag_of_the_Philippines.svg.png' width='100%'/><h3>Introduction</h3><p>The Philippines is a Southeast Asian country in the Western Pacific, comprising more than 7,000 islands. Its capital, Manila, is famous for its waterfront promenade and centuries-old Chinatown, Binondo. Intramuros, a walled city in colonial times, is the heart of Old Manila. It’s home to the baroque 17th-century San Agustin Church as well as Fort Santiago, a storied citadel and military prison.</p><h3>Information</h3><ul><li><b>Capital:</b> Manila</li><li><b>President:</b> Rodrigo Duterte</li><li><b>Population:</b> 104.2 million</li></ul>", }, { name: "Egypt", xPos: 440, yPos: 48, desc: "<h2>Egypt</h2><img src='https://upload.wikimedia.org/wikipedia/commons/f/fe/Flag_of_Egypt.svg' width='100%'/><h3>Introduction</h3><p>Egypt, a country linking northeast Africa with the Middle East, dates to the time of the pharaohs. Millennia-old monuments sit along the fertile Nile River Valley, including Giza's colossal Pyramids and Great Sphinx as well as Luxor's hieroglyph-lined Karnak Temple and Valley of the Kings tombs. The capital, Cairo, is home to Ottoman landmarks like Muhammad Ali Mosque and the Egyptian Museum, a trove of antiquities.</p><h3>Information</h3><ul><li><b>Capital:</b> Cairo</li><li><b>Population:</b> 95.7 million</li></ul>", }, { name: "Vietnam", xPos: 300, yPos: 35, desc: "<h2>Vietnam</h2><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Flag_of_Vietnam.svg/2000px-Flag_of_Vietnam.svg.png' width='100%'/><h3>Introduction</h3><p>Vietnam is a Southeast Asian country on the South China Sea known for its beaches, rivers, Buddhist pagodas and bustling cities. Hanoi, the capital, pays homage to the nation’s iconic Communist-era leader, Ho Chi Minh, via a huge marble mausoleum. Ho Chi Minh City (formerly Saigon) has French colonial landmarks, plus Vietnamese War history museums and the Củ Chi tunnels, used by Viet Cong soldiers.</p><h3>Information</h3><ul><li><b>Capital:</b> Hanoi</li><li><b>Currency:</b> Vietnamese dong</li><li><b>Population:</b> 92.7 million</li></ul>", }, {name:"Afghanistan"},{name:"Albania"},{name:"Algeria"},{name:"Andorra"},{name:"Angola"},{name:"Anguilla"},{name:"Antigua & Barbuda"},{name:"Argentina"},{name:"Armenia"},{name:"Aruba"},{name:"Australia"},{name:"Austria"},{name:"Azerbaijan"},{name:"Bahamas"},{name:"Bahrain"},{name:"Barbados"},{name:"Belarus"},{name:"Belgium"},{name:"Belize"},{name:"Benin"},{name:"Bermuda"},{name:"Bhutan"},{name:"Bolivia"},{name:"Bosnia & Herzegovina"},{name:"Botswana"},{name:"British Virgin Islands"},{name:"Brunei"},{name:"Bulgaria"},{name:"Burkina Faso"},{name:"Burundi"},{name:"Cambodia"},{name:"Cameroon"},{name:"Canada"},{name:"Cape Verde"},{name:"Cayman Islands"},{name:"Central Arfrican Republic"},{name:"Chad"},{name:"Chile"},{name:"Colombia"},{name:"Congo"},{name:"Cook Islands"},{name:"Costa Rica"},{name:"Cote D Ivoire"},{name:"Croatia"},{name:"Cuba"},{name:"Curacao"},{name:"Cyprus"},{name:"Czech Republic"},{name:"Denmark"},{name:"Djibouti"},{name:"Dominica"},{name:"Dominican Republic"},{name:"Ecuador"},{name:"El Salvador"},{name:"Equatorial Guinea"},{name:"Eritrea"},{name:"Estonia"},{name:"Falkland Islands"},{name:"Faroe Islands"},{name:"Fiji"},{name:"Finland"},{name:"France"},{name:"French Polynesia"},{name:"French West Indies"},{name:"Gabon"},{name:"Gambia"},{name:"Georgia"},{name:"Germany"},{name:"Ghana"},{name:"Gibraltar"},{name:"Greece"},{name:"Greenland"},{name:"Grenada"},{name:"Guam"},{name:"Guatemala"},{name:"Guernsey"},{name:"Guinea"},{name:"Guinea Bissau"},{name:"Guyana"},{name:"Haiti"},{name:"Honduras"},{name:"Hong Kong"},{name:"Hungary"},{name:"Iceland"},{name:"Iran"},{name:"Iraq"},{name:"Ireland"},{name:"Isle of Man"},{name:"Israel"},{name:"Italy"},{name:"Jamaica"},{name:"Jersey"},{name:"Jordan"},{name:"Kazakhstan"},{name:"Kenya"},{name:"Kiribati"},{name:"Kosovo"},{name:"Kuwait"},{name:"Kyrgyzstan"},{name:"Laos"},{name:"Latvia"},{name:"Lebanon"},{name:"Lesotho"},{name:"Liberia"},{name:"Libya"},{name:"Liechtenstein"},{name:"Lithuania"},{name:"Luxembourg"},{name:"Macau"},{name:"Macedonia"},{name:"Madagascar"},{name:"Malawi"},{name:"Malaysia"},{name:"Maldives"},{name:"Mali"},{name:"Malta"},{name:"Marshall Islands"},{name:"Mauritania"},{name:"Mauritius"},{name:"Micronesia"},{name:"Moldova"},{name:"Monaco"},{name:"Mongolia"},{name:"Montenegro"},{name:"Montserrat"},{name:"Morocco"},{name:"Mozambique"},{name:"Myanmar"},{name:"Namibia"},{name:"Nauro"},{name:"Nepal"},{name:"Netherlands"},{name:"Netherlands Antilles"},{name:"New Caledonia"},{name:"New Zealand"},{name:"Nicaragua"},{name:"Niger"},{name:"North Korea"},{name:"Norway"},{name:"Oman"},{name:"Palau"},{name:"Palestine"},{name:"Panama"},{name:"Papua New Guinea"},{name:"Paraguay"},{name:"Peru"},{name:"Poland"},{name:"Portugal"},{name:"Puerto Rico"},{name:"Qatar"},{name:"Reunion"},{name:"Romania"},{name:"Rwanda"},{name:"Saint Pierre & Miquelon"},{name:"Samoa"},{name:"San Marino"},{name:"Sao Tome and Principe"},{name:"Saudi Arabia"},{name:"Senegal"},{name:"Serbia"},{name:"Seychelles"},{name:"Sierra Leone"},{name:"Singapore"},{name:"Slovakia"},{name:"Slovenia"},{name:"Solomon Islands"},{name:"Somalia"},{name:"South Africa"},{name:"South Korea"},{name:"South Sudan"},{name:"Spain"},{name:"Sri Lanka"},{name:"St Kitts & Nevis"},{name:"St Lucia"},{name:"St Vincent"},{name:"Sudan"},{name:"Suriname"},{name:"Swaziland"},{name:"Sweden"},{name:"Switzerland"},{name:"Syria"},{name:"Taiwan"},{name:"Tajikistan"},{name:"Tanzania"},{name:"Thailand"},{name:"Timor L'Este"},{name:"Togo"},{name:"Tonga"},{name:"Trinidad & Tobago"},{name:"Tunisia"},{name:"Turkey"},{name:"Turkmenistan"},{name:"Turks & Caicos"},{name:"Tuvalu"},{name:"Uganda"},{name:"Ukraine"},{name:"United Arab Emirates"},{name:"United Kingdom"},{name:"Uruguay"},{name:"Uzbekistan"},{name:"Vanuatu"},{name:"Vatican City"},{name:"Venezuela"},{name:"Virgin Islands (US)"},{name:"Yemen"},{name:"Zambia"},{name:"Zimbabwe"}, ]; </script> <style> #globe { width: 300px; height: 300px; position: fixed; top: 50%; right: 50%; background-image: url(https://upload.wikimedia.org/wikipedia/commons/c/c4/Earthmap1000x500compac.jpg); background-position: center; background-size: 650px; background-repeat: repeat; margin-top: -150px; margin-right: -150px; border-radius: 50%; box-shadow: inset 30px 0 100px 6px rgba(0, 0, 0, 0.7), 0 0 40px rgba(0, 0, 0, 0.1); animation: rotate 10s infinite linear forwards; transition: all 0.3s; } #globe:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; box-shadow: -100px 15px 100px 10px rgba(0,0,0,.8) inset; } #globe:before { content: ""; position: absolute; border-radius: 50%; width: 100%; height: 100%; top: 0; left: 0; opacity: 0.2; background: radial-gradient(circle at 200px 100px, #fff, #000); } @keyframes rotate { 0% {background-position: 0 0;} 100% {background-position: 650px 0;} } #background { position:fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgb(25, 34, 46); } #backgroundInside { transition: all 0.7s; } .scene { position: fixed; z-index: 10; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.1); text-align: center; } .scene h1 { margin: 0; color: white; font-size: 48px; font-family: "Fredoka One", sans-serif; text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); text-align: center; } .text { position: absolute; top: 50%; left: 50%; transform: translateX(-50%)translateY(-50%); } .text h3 { font-size: 24px; font-family: "Google Sans Display", sans-serif; color: white; font-weight: 500; } .text p { margin-bottom: 0; } button { padding: 0 20px; min-width: 72px; height: 42px; color: white; background-color: #3F51B5; border-radius: 2px; border: 0; font-family: "Roboto", sans-serif; font-weight: 500; text-transform: uppercase; font-size: 14px; cursor: pointer; transition: all 0.3s; outline: none; } button:hover { background-color: #5C6BC0; box-shadow: 0 2px 4px rgba(255, 255, 255, 0.2); } #sidebar { position: fixed; top: 0; left: -80px; bottom: 0; width: 64px; background-color: white; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); transition: all 0.3s; z-index: 9; } #sidebar a { padding: 20px 0; text-align: center; display: block; margin: 0; text-decoration: none; color: #636363; } #sidebar a:hover { color: #212121; } #sidebar a.active { color: #3F51B5; } #options { position: absolute; top: 30px; right: 30px; display: none; } #options .zoomBtns { display: block; } #options .zoomBtns a { position: relative; width: 150px; } #options .zoomBtns a i.material-icons { position: relative; transform: translateY(25%); } #options a { color: white; opacity: 0.7; font-family: "Roboto", sans-serif; font-size: 12px; text-transform: uppercase; font-weight: 500; text-decoration: none; padding: 10px; transition: all 0.3s; } #options a:hover { opacity: 1; background-color: rgba(255, 255, 255, 0.1); } #options a.opt { width: 100%; display: block; text-align: center; } .pg { position: fixed; top: 0; left: 64px; right: 0; bottom: 0; z-index: 8; background-color: #EFEFEF; display: none; padding: 40px; overflow-y: auto; overflow-x: hidden; } a { font-weight: 500; color: darkgrey; text-decoration: none; transition: all 0.1s; } a:hover { color: #3F51B5; } .pg h2 { color: #212121; font-size: 28px; font-family: "Google Sans Display", sans-serif; font-weight: 500; text-align: center; } #search input { width: 70%; padding: 8px 12px; background-color: #DEDEDE; font-family: "Roboto", sans-serif; font-size: 15px; font-weight: 500; border: 0; border-radius: 2px; outline: none; transition: all 0.1s; } #search input:focus { background-color: #CDCDCD; } h3 { font-family: "Google Sans Display", sans-serif; font-weight: normal; } p, li { margin-top: 0; font-family: "Google Sans Display", sans-serif; font-weight: 400; font-size: 15px; color: #636363; line-height: 25px; } p b, li b { font-weight: 500; } select { width: 100%; padding: 5px 8px; background-color: #DEDEDE; color: #636363; font-family: "Roboto", sans-serif; font-size: 15px; font-weight: 500; border: 0; transition: all 0.1s; cursor: pointer; outline: none; } select:hover { background-color: #CDCDCD; } select option { background-color: white!important; } #searchResults { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #FAFAFA; z-index: 9; display: none; padding: 20px; overflow-y: auto; overflow-x: hidden; } .card { background-color: white; margin: 20px; border-radius: 2px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .card h3 { padding: 20px; margin: 0; font-size: 24px; font-family: "Fredoka One", sans-serif; font-weight: normal; } h2 { font-family: "Google Sans Display", sans-serif; font-weight: 400; font-size: 24px; } #nothing { position: fixed; top: 50%; left: 50%; transform: translateX(-50%)translateY(-50%); width: 100%; text-align: center; color: white; z-index: 9; font-family: "Fredoka One", sans-serif; font-size: 28px; font-weight: normal; display: none; } #arrowBack { display: none; } #info { position: fixed; top: 0; right: -220px; bottom: 0; width: 180px; background-color: #FAFAFA; z-index: 9; transition: all 0.3s; padding: 20px; overflow-y: auto; overflow-x: hidden; } </style> </head> <body> <div id='background'> <div id='backgroundInside'></div> </div> <div id='globe'></div> <div class='scene' id='scene1'> <div class='text'> <h1>Welcome!</h1> <h3>We will be exploring the Planet Earth in this 3D program made with CSS!</h3> <p style='margin-top:40px;'><button onclick='viewTool()'>Get Started</button></p> </div> </div> <div id='sidebar'> <a href='#' id='globeBtn' class='active' onclick='displayGlobe()'><i class='material-icons'>place</i></a> <a href='#' id='searchBtn' onclick='displaySearch()'><i class='material-icons'>search</i></a> <a href='#' id='aboutBtn' onclick='displayAbout()'><i class='material-icons'>assignment_ind</i></a> </div> <div id='options'> <div class='zoomBtns'> <a href='javascript:zoomInGlobe();'><i class='material-icons'>add</i></a> <a href='javascript:zoomOutGlobe();'><i class='material-icons'>remove</i></a> </div> <br> <div class='zoomBtns'> <a href='javascript:moveGlobeUp();'><i class='material-icons'>keyboard_arrow_up</i></a> <a href='javascript:moveGlobeRight();'><i class='material-icons'>keyboard_arrow_left</i></a> </div> <div class='zoomBtns' style='margin-top:6px;'> <a href='javascript:moveGlobeDown();'><i class='material-icons'>keyboard_arrow_down</i></a> <a href='javascript:moveGlobeLeft();'><i class='material-icons'>keyboard_arrow_right</i></a> </div> <br> <a href='#' id='stAnim' class='opt' onclick='stopAnimation()'>Stop Animation</a> </div> <div id='search' class='pg'> <h2>Search the Earth</h2> <form action='javascript:searchCountries()'> <p style='text-align:center;'><input class='search' placeholder='Type here to search by country' id='searchInput'/> <button style='height:34px;'>Search</button></p> </form> <br> <p>I wasn't able to get all the major countries up, but here are the fifteen ones (top 15 by population) entered in so far. The rest of the countries 200-something countries are there for you to search, just not added to the globe yet. I will add them in the future.</p> <p><b>Top 15 Countries by Population added to Globe</b></p> <ul> <li>China</li> <li>India</li> <li>USA</li> <li>Indonesia</li> <li>Brazil</li> <li>Pakistan</li> <li>Nigeria</li> <li>Bangladesh</li> <li>Russia</li> <li>Japan</li> <li>Mexico</li> <li>Ethiopia</li> <li>Philippines</li> <li>Egypt</li> <li>Vietnam</li> </ul> </div> <div id='about' class='pg'> <h2>About This Program</h2> <p>This program was designed for <b>Khantober 2018</b> by <b>Chester Banks</b>, its 5<sup>th</sup> year of running, and my first time of participating.</p> <p>I developed this program using HTML/CSS and JavaScript DOM. It includes a lot of information about the top 20 countries in terms of population and a few other major countries, information about our oceans and continents, and major landmarks as well!</p> <p>Hopefully you like this and the features included! ~To13@epophoney13</p> <p>My profile is available here: <a href='https://www.khanacademy.org/profile/epophoney13/projects' target='_blank'>click here</a></p> <p>My in-KA website is available here: <a href='https://www.khanacademy.org/computer-programming/to13s-website/6064708199415808' target='_blank'>click here</a></p> </div> <div id='searchResults'></div> <h1 id='nothing'>There are no results for this entry.</h1> <i class='material-icons' style='position:fixed;top:30px;left:30px;color:white;cursor:pointer;z-index:9;' id='arrowBack' onclick='returnToSearch()'>arrow_backward</i> <i class='material-icons' style='position:fixed;top:50%;left:50%;transform:translateX(-50%);translateY(-50%);color:#f44436;text-shadow:-1px 0 0 rgba(255, 255, 255, 0.3), 1px 0 0 rgba(255, 255, 255, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3), 0 -1px 0 rgba(255, 255, 255, 0.3);display:none;font-size:36px;margin-left:-50px;' id='marker'>place</i> <div id='info'> </div> <script> for ( var i = 0; i < 100; i++ ) { var newStar = document.createElement('DIV'); var randomDimension = Math.floor(Math.random()2)+1; newStar.style.backgroundColor = "white"; newStar.style.position = "absolute"; newStar.style.width = randomDimension+"px"; newStar.style.height = randomDimension+"px"; newStar.style.top = Math.floor(Math.random()600)-100+"px"; newStar.style.left = Math.floor(Math.random()document.getElementById('background').offsetWidth+200)-200+"px"; newStar.style.borderRadius = "50%"; newStar.style.opacity = "0.8"; document.getElementById('backgroundInside').appendChild(newStar); } function viewTool() { document.getElementById('scene1').style.display = "none"; document.getElementById('globe').style.transform = "translateX(32px)"; document.getElementById('sidebar').style.left = '0'; document.getElementById('options').style.display = 'block'; } var animState = "running"; function stopAnimation() { animState = "paused"; document.getElementById('globe').style.animationPlayState = "paused"; document.getElementById('globe').style.webkitAnimationPlayState = "paused"; document.getElementById('globe').style.mozAnimationPlayState = "paused"; document.getElementById('stAnim').innerHTML = "Play Animation"; document.getElementById('stAnim').setAttribute('onclick', 'playAnimation()'); } function playAnimation() { animState = "running"; document.getElementById('globe').style.animationPlayState = "running"; document.getElementById('globe').style.webkitAnimationPlayState = "running"; document.getElementById('globe').style.mozAnimationPlayState = "running"; document.getElementById('stAnim').innerHTML = "Stop Animation"; document.getElementById('stAnim').setAttribute('onclick', 'stopAnimation()'); } var zoomGlobe = 1; var zoomBg = 1; var globePosX = 0; var globePosY = 0; function zoomInGlobe() { if ( zoomGlobe < 3.3 ) { zoomGlobe+=0.3; zoomBg+=0.05; document.getElementById('globe').style.transform = "scale("+zoomGlobe+")translateX("+(32+globePosX)+"px)translateY("+globePosY+"px)"; document.getElementById('backgroundInside').style.transform = "scale("+zoomBg+")translateY("+globePosY/3+"px)"; } } function zoomOutGlobe() { if ( zoomGlobe > 1 ) { zoomGlobe-=0.3; zoomBg-=0.05; document.getElementById('globe').style.transform = "scale("+zoomGlobe+")translateX("+(32+globePosX)+"px)translateY("+globePosY+"px)"; document.getElementById('backgroundInside').style.transform = "scale("+zoomBg+")translateX("+globePosX/3+"px)translateY("+globePosY/3+"px)"; } } function moveGlobeUp() { if ( globePosY < 140 ) { globePosY += 20; document.getElementById('globe').style.transform = "scale("+zoomGlobe+")translateX("+(32+globePosX)+"px)translateY("+globePosY+"px)"; document.getElementById('backgroundInside').style.transform = "scale("+zoomBg+")translateX("+globePosX/3+"px)translateY("+globePosY/3+"px)"; } } function moveGlobeDown() { if ( globePosY > -140 ) { globePosY -= 20; document.getElementById('globe').style.transform = "scale("+zoomGlobe+")translateX("+(32+globePosX)+"px)translateY("+globePosY+"px)"; document.getElementById('backgroundInside').style.transform = "scale("+zoomBg+")translateX("+globePosX/3+"px)translateY("+globePosY/3+"px)"; } } function moveGlobeRight() { if ( globePosX < 140 ) { globePosX += 20; document.getElementById('globe').style.transform = "scale("+zoomGlobe+")translateX("+(32+globePosX)+"px)translateY("+globePosY+"px)"; document.getElementById('backgroundInside').style.transform = "scale("+zoomBg+")translateX("+globePosX/3+"px)translateY("+globePosY/3+"px)"; } } function moveGlobeLeft() { if ( globePosX > -140 ) { globePosX -= 20; document.getElementById('globe').style.transform = "scale("+zoomGlobe+")translateX("+(32+globePosX)+"px)translateY("+globePosY+"px)"; document.getElementById('backgroundInside').style.transform = "scale("+zoomBg+")translateX("+globePosX/3+"px)translateY("+globePosY/3+"px)"; } } function displayGlobe() { document.getElementById('about').style.display = "none"; document.getElementById('search').style.display = "none"; document.getElementById('globeBtn').classList.add('active'); document.getElementById('aboutBtn').classList.remove('active'); document.getElementById('searchBtn').classList.remove('active'); playAnimation(); } function displaySearch() { document.getElementById('about').style.display = "none"; document.getElementById('search').style.display = "block"; document.getElementById('globeBtn').classList.remove('active'); document.getElementById('aboutBtn').classList.remove('active'); document.getElementById('searchBtn').classList.add('active'); stopAnimation(); } function displayAbout() { document.getElementById('about').style.display = "block"; document.getElementById('search').style.display = "none"; document.getElementById('globeBtn').classList.remove('active'); document.getElementById('aboutBtn').classList.add('active'); document.getElementById('searchBtn').classList.remove('active'); stopAnimation(); } function searchCountries() { var resultCount = 0; document.getElementById('searchResults').innerHTML = "<h2 style='text-align:center;'>Search Results</h2><p style='text-align:center;'><b><a href=\"javascript:document.getElementById('searchResults').innerHTML='';javascript:document.getElementById('searchResults').style.display='none';void 0;\">Return to search form</a><b></p><br>"; if ( document.getElementById('searchInput').value.toUpperCase() == "USA" \|\| document.getElementById('searchInput').value.toUpperCase() == "AMERICA" \|\| document.getElementById('searchInput').value.toUpperCase() == "U.S.A." \|\| document.getElementById('searchInput').value.toUpperCase() == "U.S.A" ) { document.getElementById('searchInput').value = "United States of America"; } if ( document.getElementById('searchInput').value != "" ) { for ( var i = 0; i < countries.length; i++ ) { if ( document.getElementById('searchInput').value.toUpperCase() == countries[i].name.substr(0, document.getElementById('searchInput').value.length).toUpperCase() ) { resultCount++; var card = document.createElement('DIV'); card.classList.add('card'); var innerLink = document.createElement('A'); innerLink.href = "javascript:viewOnGlobeWithSidebar(\""+countries[i].name+"\", "+countries[i].xPos+", "+countries[i].yPos+", \""+countries[i].desc+"\")"; innerLink.innerHTML = "<h3>"+countries[i].name+"</h3>"; card.appendChild(innerLink); document.getElementById('searchResults').appendChild(card); } } if ( resultCount == 0 ) { document.getElementById('searchResults').innerHTML += "<p style='text-align: center;'><b>Sorry, we can't find any results for this entry.</b> Please try another submission or check if your spelling was right.</p>"; } } else { document.getElementById('searchResults').innerHTML += "<p style='text-align: center;'><b>Please enter in a value for your search input. Thanks!</b></p>"; } document.getElementById('searchInput').value = ''; document.getElementById('searchResults').style.display = "block"; } function viewOnGlobeWithSidebar(country, xPos, yPos, details) { document.getElementById('searchResults').style.display = "none"; document.getElementById('search').style.display = "none"; document.getElementById('options').style.display = "none"; document.getElementById('sidebar').style.left = '-80px'; document.getElementById('globe').style.transform = "translateX(0px)"; document.getElementById('globe').style.animation = "none"; document.getElementById('arrowBack').style.display = "block"; if ( details == "undefined" ) { document.getElementById('nothing').style.display = "block"; } else { document.getElementById('marker').style.display = "block"; document.getElementById('globe').style.backgroundPosition = xPos+"px 0px"; zoomGlobe = 1.5; document.getElementById('globe').style.transform = "scale("+zoomGlobe+")translateX(-50px)translateY("+yPos+"px)"; document.getElementById('info').style.right = '0'; document.getElementById('info').innerHTML = details; } } function returnToSearch() { document.getElementById('search').style.display = "block"; document.getElementById('options').style.display = "block"; document.getElementById('sidebar').style.left = '0'; document.getElementById('info').style.right = '-220px'; document.getElementById('globe').style.transform = "translateX(32px)"; document.getElementById('globe').style.animation = "rotate 10s infinite linear forwards"; document.getElementById('arrowBack').style.display = "none"; document.getElementById('marker').style.display = "none"; document.getElementById('nothing').style.display = "none"; stopAnimation(); zoomGlobe = 1; document.getElementById('globe').style.transform = "scale("+zoomGlobe+")translateX("+(32+globePosX)+"px)translateY("+globePosY+"px)"; document.getElementById('backgroundInside').style.transform = "scale("+zoomBg+")translateX("+globePosX/3+"px)translateY("+globePosY/3+"px)"; } </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> <script> / CREDIT TO BLUEBIRD FOR THE AMAZING SAVE FUNCTION */ var save = function(){ html2canvas(document.body,{ onrendered: function(canvas) { b64Img = canvas.toDataURL(); window.top.postMessage(b64Img, "https://www.khanacademy.org/"); }, allowTaint : false, useCORS: true, width:420, height:400, }); }; document.documentElement.onkeydown = function(e) { if (e.keyCode === 27) { save(); } }; </script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgIqU7N_eCgw
Votes	95
Spin-Offs	3
Type	WEBPAGE
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	true
By Child	false
Author Nick	Tony Punnacherry
Author Name	epophoney13
Author ID	kaid_576902677336720533585076
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1709835194799
Updated	10 months ago, 1709835194799
Source Deleted	unknown