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