Unified Diff: index.html
Issue 8681060:
share-page: Implement final design (Closed)
Patch Set:
Created Nov. 5, 2012, 8:41 a.m.
Use n/p to move between diff chunks;
N/P to move between comments.
« no previous file with comments
|
« googleplus.png ('k')
|
twitter.png » ('j')
|
no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| Index: index.html |
| =================================================================== |
| new file mode 100644 |
| --- /dev/null |
| +++ b/index.html |
| @@ -0,0 +1,191 @@ |
| +<!DOCTYPE html> |
| +<html> |
| +<head> |
| + |
| +<style> |
| +body |
| +{ |
| + width: 680px; |
| + height: 570px; |
| + margin: auto; |
| + padding-left: 30px; |
| + border: 5px solid #a42c23; |
| + background: white; |
| +} |
| + |
| +#headline |
| +{ |
| + height: 100px; |
| + font-family: Arial, Helvetica, sans; |
| + font-size: 28px; |
| + text-align: center; |
| + margin: 0; |
| + color: #a42c23; |
| + |
| + display: -webkit-box; |
| + -webkit-box-orient: vertical; |
| + -webkit-box-pack: center; |
| + |
| + display: box; |
| + box-orient: vertical; |
| + box-pack: center; |
| +} |
| + |
| +#facebook, #twitter, #gplus |
| +{ |
| + margin-bottom: 10px; |
| + padding-left: 140px; |
| + width: 500px; |
| + height: 140px; |
| + background-repeat: no-repeat; |
| + background-size: 140px; |
| + background-position: 0px 50%; |
| + |
| + display: -webkit-box; |
| + -webkit-box-orient: vertical; |
| + -webkit-box-pack: center; |
| + |
| + display: box; |
| + box-orient: vertical; |
| + box-pack: center; |
| + |
| + border-radius: 7px; |
| +} |
| + |
| +{ |
| + background-image: url("/facebook.png"); |
| + background-color: #8e9bb2; |
| +} |
| + |
| +{ |
| + background-image: url("/twitter.png"); |
| + background-color: #64abcb; |
| +} |
| + |
| +#gplus |
| +{ |
| + background-image: url("/googleplus.png"); |
| + background-color: #cf6d5c; |
| +} |
| + |
| +.widget-container |
| +{ |
| + width: 490px; |
| + height: 118px; |
| + border-radius: 0px 3px 3px 0px; |
| + background-color: white; |
| +} |
| + |
| +.fb-like { |
| + margin-top: 30px; |
| + margin-left: 12px; |
| +} |
| + |
| +#twitter iframe { |
| + margin-top: 40px; |
| + margin-left: 10px; |
| +} |
| +</style> |
| +<script><!-- |
| +(function() |
| +{ |
| + function initFacebook(locale) |
| + { |
| + var map = { |
| + "en": "en_US", |
| + "he": "he_IL", |
| + "ko": "ko_KR", |
| + }; |
| + if (locale in map) |
| + locale = map[locale]; |
| + |
| + // HACK AHEAD |
| + if (locale.length == 2) |
| + locale = locale + "_" + locale.toUpperCase(); |
| + |
| + (function(d, s, id) { |
| + var js, fjs = d.getElementsByTagName(s)[0]; |
| + if (d.getElementById(id)) return; |
| + js = d.createElement(s); js.id = id; |
| + js.src = "//connect.facebook.net/" + locale + "/all.js#xfbml=1"; |
| + fjs.parentNode.insertBefore(js, fjs); |
| + }(document, 'script', 'facebook-jssdk')); |
| + } |
| + |
| + function initTwitter() |
| + { |
| + !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); |
| + } |
| + |
| + function initGooglePlus() |
| + { |
| + var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; |
| + po.src = 'https://apis.google.com/js/plusone.js'; |
| + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); |
| + } |
| + |
| + function sendDimensions() |
| + { |
| + if (window.parent === window) |
| + return; |
| + |
| + var dimensions = { |
| + width: document.body.offsetWidth, |
| + height: document.body.offsetHeight |
| + }; |
| + window.parent.postMessage(dimensions, "*"); |
| + } |
| + |
| + window.addEventListener("DOMContentLoaded", function() |
| + { |
| + var locale = window.location.pathname.replace(/^\/+/, "").replace(/\/.*/, ""); |
| + if (/^\w\w(_\w\w)?/.test(locale)) |
| + { |
| + // Set language for Twitter |
| + var links = document.getElementById("twitter").getElementsByTagName("a"); |
| + for (var i = 0; i < links.length; i++) |
| + links[i].setAttribute("data-lang", locale.toLowerCase()); |
| + |
| + // Set language for Google+ |
| + window.___gcfg = {lang: locale}; |
| + } |
| + else |
| + locale = "en"; |
| + |
| + initFacebook(locale); |
| + initTwitter(); |
| + initGooglePlus(); |
| + sendDimensions(); |
| + }, false); |
| +})(); |
| +--></script> |
| + |
| +</head> |
| +<body> |
| + |
| +<div id="headline">Think Adblock Plus is worth sharing?</div> |
| + |
| +<div id="facebook"> |
| + <div class="widget-container"> |
| + <div id="fb-root"></div> |
| + <div class="fb-like" data-href="https://www.facebook.com/adblockplus" data-send="true" data-width="450" data-show-faces="true"></div> |
| + </div> |
| +</div> |
| + |
| +<div id="twitter"> |
| + <div class="widget-container"> |
| + <a href="https://twitter.com/AdblockPlus" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @AdblockPlus</a> |
| + <a href="https://twitter.com/share" class="twitter-share-button" data-url="https://adblockplus.org" data-text="I browse the web without annoying ads thanks to @AdblockPlus!" data-size="large">Tweet</a> |
| + </div> |
| +</div> |
| + |
| +<div id="gplus"> |
| + <div class="widget-container"> |
| + <div class="g-plus" data-href="https://plus.google.com/110020691898167279887" data-width="490" data-rel="publisher"></div> |
| + </div> |
| +</div> |
| + |
| +</body> |
| +</html> |
« no previous file with comments
|
« googleplus.png ('k')
|
twitter.png » ('j')
|
no next file with comments »
