Side by Side Diff: index.html
Issue 8681060:
share-page: Implement final design (Closed)
Patch Set:
Created Nov. 8, 2012, 7:32 p.m.
| Left: | ||
| Right: |
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 »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 <head> | |
| 4 | |
| 5 <style> | |
| 6 body | |
| 7 { | |
| 8 width: 650px; | |
| 9 margin: auto; | |
| 10 padding: 0px 30px 20px 30px; | |
| 11 border: 5px solid #a42c23; | |
| 12 background: white; | |
| 13 } | |
| 14 | |
| 15 #headline | |
| 16 { | |
| 17 padding: 36px 0px; | |
| 18 font-family: Arial, Helvetica, sans-serif; | |
| 19 font-size: 28px; | |
| 20 text-align: center; | |
| 21 margin: 0; | |
| 22 color: #a42c23; | |
| 23 } | |
| 24 | |
| 25 #facebook, #twitter, #gplus | |
| 26 { | |
| 27 display: block; | |
| 28 margin-bottom: 10px; | |
| 29 padding-left: 140px; | |
| 30 height: 140px; | |
| 31 border-radius: 7px; | |
| 32 background-repeat: no-repeat; | |
| 33 background-size: 140px; | |
| 34 background-position: 0px 50%; | |
| 35 } | |
| 36 | |
| 37 #facebook | |
| 38 { | |
| 39 background-image: url("/facebook.png"); | |
| 40 background-color: #8e9bb2; | |
| 41 } | |
| 42 | |
| 43 #twitter | |
| 44 { | |
| 45 background-image: url("/twitter.png"); | |
| 46 background-color: #64abcb; | |
| 47 } | |
| 48 | |
| 49 #gplus | |
| 50 { | |
| 51 background-image: url("/googleplus.png"); | |
| 52 background-color: #cf6d5c; | |
| 53 } | |
| 54 | |
| 55 .widget-container | |
| 56 { | |
| 57 position: relative; | |
| 58 height: 118px; | |
| 59 top: 11px; | |
| 60 margin-right: 11px; | |
| 61 border-radius: 0px 3px 3px 0px; | |
| 62 background-color: white; | |
| 63 } | |
| 64 | |
| 65 .fb-like | |
| 66 { | |
| 67 padding-top: 30px; | |
| 68 padding-left: 12px; | |
| 69 } | |
| 70 | |
| 71 #twitter iframe | |
| 72 { | |
| 73 padding-top: 40px; | |
| 74 padding-left: 10px; | |
| 75 } | |
| 76 </style> | |
| 77 <script><!-- | |
| 78 (function() | |
| 79 { | |
| 80 function initFacebook(locale) | |
| 81 { | |
| 82 var map = { | |
| 83 "en": "en_US", | |
| 84 "he": "he_IL", | |
| 85 "ko": "ko_KR", | |
| 86 }; | |
| 87 if (locale in map) | |
| 88 locale = map[locale]; | |
| 89 | |
| 90 // HACK AHEAD | |
| 91 if (locale.length == 2) | |
| 92 locale = locale + "_" + locale.toUpperCase(); | |
| 93 | |
| 94 (function(d, s, id) { | |
| 95 var js, fjs = d.getElementsByTagName(s)[0]; | |
| 96 if (d.getElementById(id)) return; | |
| 97 js = d.createElement(s); js.id = id; | |
| 98 js.src = "//connect.facebook.net/" + locale + "/all.js#xfbml=1"; | |
| 99 fjs.parentNode.insertBefore(js, fjs); | |
| 100 }(document, 'script', 'facebook-jssdk')); | |
| 101 } | |
| 102 | |
| 103 function initTwitter() | |
| 104 { | |
| 105 !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementBy Id(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js ";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); | |
| 106 } | |
| 107 | |
| 108 function initGooglePlus() | |
| 109 { | |
| 110 | |
| 111 var po = document.createElement('script'); po.type = 'text/javascript'; po.a sync = true; | |
| 112 po.src = 'https://apis.google.com/js/plusone.js'; | |
| 113 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefor e(po, s); | |
| 114 } | |
| 115 | |
| 116 function sendDimensions() | |
| 117 { | |
| 118 if (window.parent === window) | |
| 119 return; | |
| 120 | |
| 121 var dimensions = { | |
| 122 width: document.body.offsetWidth, | |
| 123 height: document.body.offsetHeight | |
| 124 }; | |
| 125 window.parent.postMessage(dimensions, "*"); | |
| 126 } | |
| 127 | |
| 128 window.addEventListener("DOMContentLoaded", function() | |
| 129 { | |
| 130 var locale = window.location.pathname.replace(/^\/+/, "").replace(/\/.*/, "" ); | |
| 131 if (/^\w\w(_\w\w)?/.test(locale)) | |
| 132 { | |
| 133 // Set language for Twitter | |
| 134 var links = document.getElementById("twitter").getElementsByTagName("a"); | |
| 135 for (var i = 0; i < links.length; i++) | |
| 136 links[i].setAttribute("data-lang", locale.toLowerCase()); | |
| 137 | |
| 138 // Set language for Google+ | |
| 139 window.___gcfg = {lang: locale}; | |
| 140 } | |
| 141 else | |
| 142 locale = "en"; | |
| 143 | |
| 144 initFacebook(locale); | |
| 145 initTwitter(); | |
| 146 initGooglePlus(); | |
| 147 sendDimensions(); | |
| 148 }, false); | |
| 149 })(); | |
| 150 --></script> | |
| 151 | |
| 152 </head> | |
| 153 <body> | |
| 154 | |
| 155 <div id="headline">Think Adblock Plus is worth sharing?</div> | |
| 156 | |
| 157 <div id="facebook"> | |
| 158 <div class="widget-container"> | |
| 159 <div id="fb-root"></div> | |
| 160 <div class="fb-like" data-href="https://www.facebook.com/adblockplus" data-s end="true" data-width="450" data-show-faces="true"></div> | |
| 161 </div> | |
| 162 </div> | |
| 163 | |
| 164 <div id="twitter"> | |
| 165 <div class="widget-container"> | |
| 166 <a href="https://twitter.com/AdblockPlus" class="twitter-follow-button" data -show-count="false" data-size="large">Follow @AdblockPlus</a> | |
| 167 <a href="https://twitter.com/share" class="twitter-share-button" data-url="h ttps://adblockplus.org" data-text="I browse the web without annoying ads thanks to @AdblockPlus!" data-size="large">Tweet</a> | |
| 168 </div> | |
| 169 </div> | |
| 170 | |
| 171 <div id="gplus"> | |
| 172 <div class="widget-container"> | |
| 173 <div class="g-plus" data-href="https://plus.google.com/110020691898167279887 " data-width="500" data-rel="publisher"></div> | |
| 174 </div> | |
| 175 </div> | |
| 176 | |
| 177 </body> | |
| 178 </html> | |
| OLD | NEW |
« no previous file with comments
|
« googleplus.png ('k')
|
twitter.png » ('j')
|
no next file with comments »
