Created
September 21, 2012 09:18
-
-
Save vinhnx/3760542 to your computer and use it in GitHub Desktop.
New Tab Clock's landing page. http://vinhnx.github.com/lab/new-tab-clock/
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset=utf-8> | |
| <title>New Tab Clock preview</title> | |
| <link href='http://fonts.googleapis.com/css?family=McLaren' rel='stylesheet' type='text/css'> | |
| </head> | |
| <body> | |
| <a href="http://vinhnx.github.com/lab/new-tab-clock/"><h1>New Tab Clock</h1></a> | |
| <small>( ... a Chrome extension)</small> | |
| <br/> | |
| <a href="https://dl.dropbox.com/u/11357190/HTML-builds/test-lab/New-tab-clock%20%5BChrome%20Extension%5D.crx"><img src="https://dl.dropbox.com/u/11357190/Shared%20Images/newtabclock-default440.png" alt="New Tab Clock preview"/></a> | |
| <br/> | |
| <a href="https://dl.dropbox.com/u/11357190/HTML-builds/test-lab/New-tab-clock%20%5BChrome%20Extension%5D.crx" class="btn" download="New-tab-clock [Chrome Extension].crx">Download</a> <a href="#" class="btn help">?</a> | |
| <div id="help-box"> | |
| <a href="#" id="close">x</a> | |
| <h2>Install & use New Tab CLock in 2 steps</h2> | |
| <small>( For some reasons, currently I can not publish this extension on the offical Chrome Web Store... but it's definitely in my check list in the future. So this is the manual way to install it.)</small><br/> | |
| <dl> | |
| <dt><b>Step 1</b></dt> | |
| <dd>Click on either the image or the download button (on the frontpage) to download New-tab-clock [Chrome Extension].crx file (it's our extension) to anywhere. Don't close the download bar just yet.</dd> | |
| <dt><b>Step 2</b></dt> | |
| <dd>First, in your Chrome browser, open extension manager, in Settings -> Extensions (1); or type chrome://extensions/ into the address bar. | |
| After that and when the .crx was sucessfully downloaded (hopefully!), you can: | |
| <ul> | |
| <li>On the download bar that would appears right after we save the file, just click on New-tab-clock [Chrome Extension] on that bar and drag into chrome://extensions/ that currenly active and drop it (A dialog will appear, says 'Drop to install'); click add add and you are good to go, open new tab (cmd+T or ctrl+T) to test. :)</li> | |
| </ul></dd> | |
| </dl> | |
| <a href="https://github.com/vinhnx/new-tab-clock" target="_blank">[View project on <span style="font-weight: bold; text-transform: capitalize">github</span>]</a> | |
| <p>Well, I hope you like this little extension. Contact me at: <a href="http://twitter.com/vinhnx" target="_blank">@vinhnx</a>. Have a good day! ;)</p> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or 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
| $(function(){var c=$("div#help-box"),b=$(".btn"),a=$("a#close");c.hide();b.click(function(){var d=$(".btn");d.addClass("blur");c.slideDown('fast',function(){a.click(function(){c.slideUp(); | |
| d.removeClass("blur");});});});}); |
This file contains hidden or 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{text-rendering:optimizeLegibility;min-height:100%;overflow-y:scroll;overflow-x:hidden}::-moz-selection{background:#ffa;color:#222;text-shadow:none}::selection{background:#ffa;color:#222;text-shadow:none}3::-webkit-scrollbar{margin-right:5px;background-color:#eee;width:12px}::-webkit-scrollbar-track{-webit-box-shadow:0 0 2px #ccc;box-shadow:0 0 2px #ccc}::-webkit-scrollbar-thumb{border:1px #eee solid;border-radius:12px;background:#777;-webit-box-shadow:0 0 8px #555 inset;box-shadow:0 0 8px #555 inset;-webit-transition:all 0.3s ease-out;transition:all 0.3s ease-out}::-webkit-scrollbar-thumb:window-inactive{background:#bbb;box-shadow:0 0 8px #999 inset}::-webkit-scrollbar-thumb:hover{background:#999}body{width:100%;-webkit-animation:blurIn 3s normal;-moz-animation:blurIn 3s normal;-ms-animation:blurIn 3s normal;-o-animation:blurIn 3s normal;animation:blurIn 3s normal;padding:2% 0;background:#222;font:14px/2 'McLaren','Segoe UI','Helvetica Neue',Helvetica,Arial,sans-serif;text-align:center;color:#ddd;text-shadow:0 1px 0 black}a,a:visited{text-decoration:none;color:#fc3}a:hover,a:visited:hover{color:brown}a:active,a:visited:active{top:1px;position:relative}h1{text-transform:uppercase;font-size:335%;line-height:50px;text-shadow:1px 5px 6px #000;color:#ddd}small{font-style:italic}img{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 0 5px #111;-moz-box-shadow:0 0 5px #111;box-shadow:0 0 5px #111;margin:1rem 0 2rem;max-width:100%;-ms-interpolation-mode:biculic;height:auto !important;background:#1e2325;-webkit-transition-duration:150ms;-moz-transition-duration:150ms;transition-duration:150ms}img:hover{cursor:pointer;-webkit-transform:scale(1.3);-moz-transform:scale(1.3);-ms-transform:scale(1.3);-o-transform:scale(1.3);transform:scale(1.3);-webkit-filter:sepia(0.4)}img:active{-webkit-transform:scale(2);-moz-transform:scale(2);-ms-transform:scale(2);-o-transform:scale(2);transform:scale(2)}.btn{background:#1e75aa;vertical-align:middle;border:1px solid #135984;-webkit-box-shadow:inset 0px 2px 0px 0px rgba(255, 255, 255, 0.2),0px 3px 4px 0px rgba(0, 0, 0, 0.2);box-shadow:inset 0px 2px 0px 0px rgba(255, 255, 255, 0.2),0px 3px 4px 0px rgba(0, 0, 0, 0.2);text-shadow:0 -1px 0 #333;text-align:center;padding:1.3rem 5.2rem;font-size:20px;line-height:40px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;color:#ddd}.btn.help{background:#ab4628;border:1px solid #ab4628;padding:1.25rem 5rem;color:#ddd}.btn.help:hover{background:#82341e;border:solid 1px #82341e;background-position:2.5em;color:#ccc}.btn:hover{color:#ccc;-webkit-opacity:.7;-moz-opacity:.7;-o-opacity:.7;opacity:.7;border:solid 1px #135984;background-position:2.5em}.btn:active{position:relative;top:1px;-webkit-box-shadow:inset 0px 3px 4px 0px rgba(0, 0, 0, 0.2);box-shadow:inset 0px 3px 4px 0px rgba(0, 0, 0, 0.2)}#help-box{clear:both;position:absolute;z-index:9999;top:0;left:13%;-webkit-transition-duration:0;-moz-transition-duration:0;transition-duration:0;width:960px;height:auto;padding:0 2rem 2rem;background:#333;text-align:left;word-wrap:wrap;-webkit-border-radius:0 0 9px 9px;-moz-border-radius:0 0 9px 9px;-ms-border-radius:0 0 9px 9px;-o-border-radius:0 0 9px 9px;border-radius:0 0 9px 9px;box-shadow:1px 5px 6px #000}#help-box h2{text-align:center}#help-box #close{float:right;margin:.3rem}.blur{-webkit-filter:blur(5px)}@-webkit-keyframes blurIn{0%{-webkit-filter:blur(10px)} 100%{-webkit-filter:blur(0px)}} @-moz-keyframes blurIn{0%{-webkit-filter:blur(10px)} 100%{-webkit-filter:blur(0px)}} @-ms-keyframes blurIn{0%{-webkit-filter:blur(10px)} 100%{-webkit-filter:blur(0px)}} @-o-keyframes blurIn{0%{-webkit-filter:blur(10px)} 100%{-webkit-filter:blur(0px)}} @keyframes blurIn{0%{-webkit-filter:blur(10px)} 100%{-webkit-filter:blur(0px)}} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment