Created
January 25, 2013 19:48
-
-
Save djekl/4637276 to your computer and use it in GitHub Desktop.
Bordem playing with CSS XboxAPI and the XboxAPI Catalog
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>djekl Achievements</title> | |
| <style type="text/css"> | |
| body { | |
| text-align: center; | |
| } | |
| .achievement { | |
| /*display: block;*/ | |
| display: inline-block; | |
| text-align: left; | |
| width: 420px; | |
| height: 167px; | |
| margin: 10px auto; | |
| border: 2px outset #aeaeae; | |
| border-radius: 8px; | |
| position: relative; | |
| } | |
| .achievement .info { | |
| /*display: block;*/ | |
| } | |
| .achievement .info .achievement_img { | |
| display: inline-block; | |
| border-radius: 7px; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| } | |
| .achievement .info .achievement_name { | |
| display: inline-block; | |
| border-radius: 7px; | |
| position: absolute; | |
| top: 5; | |
| left: 70; | |
| } | |
| .achievement .info .achievement_g { | |
| display: inline-block; | |
| border-radius: 7px; | |
| position: absolute; | |
| top: 35; | |
| left: 70; | |
| } | |
| .achievement .info .achievement_desc { | |
| display: inline-block; | |
| border-radius: 7px; | |
| position: absolute; | |
| top: 30; | |
| left: 120; | |
| width: 280px; | |
| height: 35px; | |
| } | |
| .achievement .banner { | |
| display: inline-block; | |
| border-radius: 7px; | |
| position: absolute; | |
| top: 72px; | |
| left: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <?php | |
| $djekl = json_decode(file_get_contents('http://djekl.co.uk/djekl_achievements.json')); | |
| foreach ($djekl as $achievement) : | |
| $catalog_info = json_decode(file_get_contents('http://catalog.xboxapi.com/' . $achievement->GameID)); ?> | |
| <div class="achievement"> | |
| <div class="info"> | |
| <img src="<?=$achievement->TileUrl?>" alt="<?=$achievement->Name?>" class="achievement_img"> | |
| <span class="achievement_name"><?=$achievement->Name?></span> | |
| <span class="achievement_g"><?=$achievement->Score?></span> | |
| <span class="achievement_desc"><?=$achievement->Description?></span> | |
| </div> | |
| <a href="http://marketplace.xbox.com/en-US/Title/<?=$achievement->GameID?>" title="<?=$achievement->GameName?>" target="_blank"> | |
| <img src="<?=$catalog_info->data->images->banner?>" alt="<?=htmlspecialchars($achievement->GameName)?>" class="banner"> | |
| </a> | |
| </div> | |
| <?php endforeach; ?> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Here it is in action on my server --> http://djekl.co.uk/djekl_achievements.php