lrullo/anorgatarrak-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
bc804febde
anorgatarrak-frontend/node_modules/bootstrap-social/index.html

293 lines
21 KiB
HTML
Raw Normal View History

Añorgatarrak Frontend - AngularJS+Bootstrap
2017-08-20 12:55:35 +02:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="Social Buttons for Bootstrap" />
<meta property="og:description" content="Social Sign-In Buttons made in pure CSS based on Bootstrap and Font Awesome!" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://lipis.github.io/bootstrap-social/" />
<meta property="og:image" content="http://lipis.github.io/bootstrap-social/assets/img/bootstrap-social.png" />
<title>Social Buttons for Bootstrap</title>
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/font-awesome.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet" >
<link href="bootstrap-social.css" rel="stylesheet" >
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-42119746-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>Social Buttons for Bootstrap</h1>
<p>
Social Sign-In Buttons made in pure CSS based on
<a href="https://getbootstrap.com/">Bootstrap</a> and
<a href="https://fortawesome.github.io/Font-Awesome/">Font Awesome</a>!
</p>
<a href="https://github.com/lipis/bootstrap-social" class="btn btn-outline btn-lg" onclick="_gaq.push(['_trackEvent', 'exit', 'header', 'GitHub']);"><span class="fa fa-github"></span> View on GitHub</a>
<a href="https://github.com/lipis/bootstrap-social/archive/gh-pages.zip" class="btn btn-outline btn-lg" onclick="_gaq.push(['_trackEvent', 'exit', 'download', 'bootstrap-social']);"><span class="fa fa-download"></span> Download</a>
<ul class="jumbotron-links">
<li><a href="http://lipis.github.io/flag-icon-css" onclick="_gaq.push(['_trackEvent', 'exit', 'header', 'flag-icon-css']);"><span class="fa fa-flag"></span> flag-icon-css</a></li>
</ul>
</div>
<div class="bottom">
<iframe src="https://ghbtns.com/github-btn.html?user=lipis&amp;repo=bootstrap-social&amp;type=watch&amp;count=true" class="social-share"></iframe>
<a href="https://twitter.com/share" class="social-share twitter-share-button" data-url="http://lipis.github.io/bootstrap-social/" data-text="Social Sign-In Buttons made in pure CSS based on Bootstrap and Font Awesome!" data-via="lipis" data-hashtags="bootstrap css">Tweet</a>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-offset-3 col-sm-6">
<div class="alert alert-info text-center">
<a class="alert-link h3" href="http://githubstats.lip.is/" onclick="_gaq.push(['_trackEvent', 'exit', 'banner', 'githubstats']);">
<span class="fa fa-github"></span>
New GitHub Stats
<span class="fa fa-star"></span>
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 social-buttons">
<h3 class="text-center">The Buttons</h3>
<a class="btn btn-block btn-social btn-adn" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-adn']);">
<span class="fa fa-adn"></span> Sign in with App.net
</a>
<a class="btn btn-block btn-social btn-bitbucket" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-bitbucket']);">
<span class="fa fa-bitbucket"></span> Sign in with Bitbucket
</a>
<a class="btn btn-block btn-social btn-dropbox" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-dropbox']);">
<span class="fa fa-dropbox"></span> Sign in with Dropbox
</a>
<a class="btn btn-block btn-social btn-facebook" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-facebook']);">
<span class="fa fa-facebook"></span> Sign in with Facebook
</a>
<a class="btn btn-block btn-social btn-flickr" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-flickr']);">
<span class="fa fa-flickr"></span> Sign in with Flickr
</a>
<a class="btn btn-block btn-social btn-foursquare" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-foursquare']);">
<span class="fa fa-foursquare"></span> Sign in with Foursquare
</a>
<a class="btn btn-block btn-social btn-github" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-github']);">
<span class="fa fa-github"></span> Sign in with GitHub
</a>
<a class="btn btn-block btn-social btn-google" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-google']);">
<span class="fa fa-google"></span> Sign in with Google
</a>
<a class="btn btn-block btn-social btn-instagram" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-instagram']);">
<span class="fa fa-instagram"></span> Sign in with Instagram
</a>
<a class="btn btn-block btn-social btn-linkedin" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-linkedin']);">
<span class="fa fa-linkedin"></span> Sign in with LinkedIn
</a>
<a class="btn btn-block btn-social btn-microsoft" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-microsoft']);">
<span class="fa fa-windows"></span> Sign in with Microsoft
</a>
<a class="btn btn-block btn-social btn-odnoklassniki" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-odnoklassniki']);">
<span class="fa fa-odnoklassniki"></span> Sign in with Odnoklassniki
</a>
<a class="btn btn-block btn-social btn-openid" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-openid']);">
<span class="fa fa-openid"></span> Sign in with OpenID
</a>
<a class="btn btn-block btn-social btn-pinterest" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-pinterest']);">
<span class="fa fa-pinterest"></span> Sign in with Pinterest
</a>
<a class="btn btn-block btn-social btn-reddit" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-reddit']);">
<span class="fa fa-reddit"></span> Sign in with Reddit
</a>
<a class="btn btn-block btn-social btn-soundcloud" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-soundcloud']);">
<span class="fa fa-soundcloud"></span> Sign in with SoundCloud
</a>
<a class="btn btn-block btn-social btn-tumblr" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-tumblr']);">
<span class="fa fa-tumblr"></span> Sign in with Tumblr
</a>
<a class="btn btn-block btn-social btn-twitter" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-twitter']);">
<span class="fa fa-twitter"></span> Sign in with Twitter
</a>
<a class="btn btn-block btn-social btn-vimeo" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-vimeo']);">
<span class="fa fa-vimeo-square"></span> Sign in with Vimeo
</a>
<a class="btn btn-block btn-social btn-vk" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-vk']);">
<span class="fa fa-vk"></span> Sign in with VK
</a>
<a class="btn btn-block btn-social btn-yahoo" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-yahoo']);">
<span class="fa fa-yahoo"></span> Sign in with Yahoo!
</a>
<hr>
<div class="text-center">
<a class="btn btn-social-icon btn-adn" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-adn']);"><span class="fa fa-adn"></span></a>
<a class="btn btn-social-icon btn-bitbucket" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-bitbucket']);"><span class="fa fa-bitbucket"></span></a>
<a class="btn btn-social-icon btn-dropbox" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-dropbox']);"><span class="fa fa-dropbox"></span></a>
<a class="btn btn-social-icon btn-facebook" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-facebook']);"><span class="fa fa-facebook"></span></a>
<a class="btn btn-social-icon btn-flickr" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-flickr']);"><span class="fa fa-flickr"></span></a>
<a class="btn btn-social-icon btn-foursquare" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-foursquare']);"><span class="fa fa-foursquare"></span></a>
<a class="btn btn-social-icon btn-github" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-github']);"><span class="fa fa-github"></span></a>
<a class="btn btn-social-icon btn-google" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-google']);"><span class="fa fa-google"></span></a>
<a class="btn btn-social-icon btn-instagram" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-instagram']);"><span class="fa fa-instagram"></span></a>
<a class="btn btn-social-icon btn-linkedin" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-linkedin']);"><span class="fa fa-linkedin"></span></a>
<a class="btn btn-social-icon btn-microsoft" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-microsoft']);"><span class="fa fa-windows"></span></a>
<a class="btn btn-social-icon btn-odnoklassniki" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-odnoklassniki']);"><span class="fa fa-odnoklassniki"></span></a>
<a class="btn btn-social-icon btn-openid" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-openid']);"><span class="fa fa-openid"></span></a>
<a class="btn btn-social-icon btn-pinterest" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-pinterest']);"><span class="fa fa-pinterest"></span></a>
<a class="btn btn-social-icon btn-reddit" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-reddit']);"><span class="fa fa-reddit"></span></a>
<a class="btn btn-social-icon btn-soundcloud" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-soundcloud']);"><span class="fa fa-soundcloud"></span></a>
<a class="btn btn-social-icon btn-tumblr" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-tumblr']);"><span class="fa fa-tumblr"></span></a>
<a class="btn btn-social-icon btn-twitter" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-twitter']);"><span class="fa fa-twitter"></span></a>
<a class="btn btn-social-icon btn-vimeo" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-vimeo']);"><span class="fa fa-vimeo-square"></span></a>
<a class="btn btn-social-icon btn-vk" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-vk']);"><span class="fa fa-vk"></span></a>
<a class="btn btn-social-icon btn-yahoo" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-yahoo']);"><span class="fa fa-yahoo"></span></a>
</div>
</div>
<div class="col-sm-4">
<h3 class="text-center">Available Classes</h3>
<ul class="social-class list-unstyled">
<li data-code="adn" data-name="App.net"><code>btn-adn</code> <span class="social-hex">#D87A68</span></li>
<li data-code="bitbucket" data-name="Bitbucket"><code>btn-bitbucket</code> <span class="social-hex">#205081</span></li>
<li data-code="dropbox" data-name="Dropbox"><code>btn-dropbox</code> <span class="social-hex">#1087DD</span></li>
<li data-code="facebook" data-name="Facebook"><code>btn-facebook</code> <span class="social-hex">#3B5998</span></li>
<li data-code="flickr" data-name="Flickr"><code>btn-flickr</code> <span class="social-hex">#2BA9E1</span></li>
<li data-code="foursquare" data-name="Foursquare"><code>btn-foursquare</code> <span class="social-hex">#f94877</span></li>
<li data-code="github" data-name="GitHub"><code>btn-github</code> <span class="social-hex">#444444</span></li>
<li data-code="google" data-name="Google"><code>btn-google</code> <span class="social-hex">#DD4B39</span></li>
<li data-code="instagram" data-name="Instagram"><code>btn-instagram</code> <span class="social-hex">#3F729B</span></li>
<li data-code="linkedin" data-name="LinkedIn"><code>btn-linkedin</code> <span class="social-hex">#007BB6</span></li>
<li data-code="microsoft" data-icon="windows" data-name="Microsoft"><code>btn-microsoft</code> <span class="social-hex">#2672EC</span></li>
<li data-code="odnoklassniki" data-name="Odnoklassniki"><code>btn-odnoklassniki</code> <span class="social-hex">#F4731C</span></li>
<li data-code="openid" data-name="OpenID"><code>btn-openid</code> <span class="social-hex">#F7931E</span></li>
<li data-code="pinterest" data-name="Pinterest"><code>btn-pinterest</code> <span class="social-hex">#CB2027</span></li>
<li data-code="reddit" data-name="Reddit"><code>btn-reddit</code> <span class="social-hex">#EFF7FF</span></li>
<li data-code="soundcloud" data-name="SoundCloud"><code>btn-soundcloud</code> <span class="social-hex">#FF5500</span></li>
<li data-code="tumblr" data-name="Tumblr"><code>btn-tumblr</code> <span class="social-hex">#CB2027</span></li>
<li data-code="twitter" data-name="Twitter"><code>btn-twitter</code> <span class="social-hex">#55ACEE</span></li>
<li data-code="vimeo" data-icon="vimeo-square" data-name="Vimeo"><code>btn-vimeo</code> <span class="social-hex">#1AB7EA</span></li>
<li data-code="vk" data-name="VK"><code>btn-vk</code> <span class="social-hex">#587EA3</span></li>
<li data-code="yahoo" data-name="Yahoo!"><code>btn-yahoo</code> <span class="social-hex">#720E9E</span></li>
</ul>
</div>
<div class="col-sm-4">
<div class="social-sizes">
<h3 class="text-center">Different Sizes</h3>
<a class="btn btn-block btn-social btn-lg btn-google" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-lg']);">
<span class="fa fa-google"></span>
Sign in with Google
</a>
<a class="btn btn-block btn-social btn-google" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-md']);">
<span class="fa fa-google"></span>
Sign in with Google
</a>
<a class="btn btn-block btn-social btn-sm btn-google" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-sm']);">
<span class="fa fa-google"></span>
Sign in with Google
</a>
<a class="btn btn-block btn-social btn-xs btn-google" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-xs']);">
<span class="fa fa-google"></span>
Sign in with Google
</a>
<hr>
<div class="text-center">
<a class="btn btn-social-icon btn-lg btn-google" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-lg']);"><span class="fa fa-google"></span></a>
<a class="btn btn-social-icon btn-google" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-md']);"><span class="fa fa-google"></span></a>
<a class="btn btn-social-icon btn-sm btn-google" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-sm']);"><span class="fa fa-google"></span></a>
<a class="btn btn-social-icon btn-xs btn-google" onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-xs']);"><span class="fa fa-google"></span></a>
</div>
</div>
<hr>
<div class="alert alert-info">
<h4>Check them out in real projects</h4>
<ul>
<li><a class="alert-link" href="https://gae-init.appspot.com/signin/" onclick="_gaq.push(['_trackEvent', 'exit', 'body', 'gae-init']);">gae-init</a></li>
<li><a class="alert-link" href="https://restaurant.app.foodit.com/rms/signin" onclick="_gaq.push(['_trackEvent', 'exit', 'body', 'foodit']);">FOODit</a></li>
</ul>
</div>
</div>
</div>
<hr>
</div>
<div class="how-to">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2>How to use</h2>
<ol>
<li>
Include Bootstrap and Font Awesome
<p>
If you haven't done that already, include the latest
<a href="http://twitter.github.io/bootstrap/">Bootstrap</a>
and <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a> in your project.
</p>
</li>
<li>
Include the CSS or Less
<p>
You have two options for enabling the social buttons in your project:
vanilla CSS or source Less. For vanilla CSS, just include the
<code>bootstrap-social.css</code> file into your project.
</p>
<p>
For Less, copy the <code>bootstrap-social.less</code> into
your existing Bootstrap directory and import it into
<code>bootstrap.less</code> via
<code>@import "bootstrap-social.less";</code>. Recompile when ready.
</p>
</li>
<li>
Add some buttons!
<p>
Start using the buttons as you would normally do with the
Bootstrap buttons that have an icon by adding the relevant
class. For example:
</p>
<pre>
&lt;a class=&quot;btn btn-block <strong class="text-danger">btn-social</strong> <strong class="text-info">btn-twitter</strong>&quot;&gt;
&lt;span class=&quot;fa fa-twitter&quot;&gt;&lt;/span&gt; Sign in with Twitter
&lt;/a&gt;</pre>
<p>
Or if you just want the icon button, use it like this:
</p>
<pre>
&lt;a class=&quot;btn <strong class="text-danger">btn-social-icon</strong> <strong class="text-info">btn-twitter</strong>&quot;&gt;
&lt;span class=&quot;fa fa-twitter&quot;&gt;&lt;/span&gt;
&lt;/a&gt;</pre>
</li>
</ol>
</div>
</div>
</div>
</div>
<footer>
<ul class="links">
<li><a href="https://lip.is" onclick="_gaq.push(['_trackEvent', 'exit', 'footer', 'Lipis']);">Lipis</a></li>
<li><a href="https://github.com/lipis" onclick="_gaq.push(['_trackEvent', 'exit', 'footer', 'GitHub']);"><span class="fa fa-github"></span> GitHub</a></li>
<li><a href="https://twitter.com/lipis" onclick="_gaq.push(['_trackEvent', 'exit', 'footer', 'Twitter']);"><span class="fa fa-twitter"></span> Twitter</a></li>
<li><a href="https://google.com/+PanayiotisLipiridis" onclick="_gaq.push(['_trackEvent', 'exit', 'footer', 'Google+']);"><span class="fa fa-google"></span> Google+</a></li>
</ul>
</footer>
<a href="https://github.com/lipis/bootstrap-social" title="Fork me on GitHub" class="github-corner"><svg width="80" height="80" viewbox="0 0 250 250"><title>Fork me on GitHub</title><path d="M0 0h250v250"></path><path d="M127.4 110c-14.6-9.2-9.4-19.5-9.4-19.5 3-7 1.5-11 1.5-11-1-6.2 3-2 3-2 4 4.7 2 11 2 11-2.2 10.4 5 14.8 9 16.2" fill="currentColor" style="transform-origin:130px 110px" class="octo-arm"></path><path d="M113.2 114.3s3.6 1.6 4.7.6l15-13.7c3-2.4 6-3 8.2-2.7-8-11.2-14-25 3-41 4.7-4.4 10.6-6.4 16.2-6.4.6-1.6 3.6-7.3 11.8-10.7 0 0 4.5 2.7 6.8 16.5 4.3 2.7 8.3 6 12 9.8 3.3 3.5 6.7 8 8.6 12.3 14 3 16.8 8 16.8 8-3.4 8-9.4 11-11.4 11 0 5.8-2.3 11-7.5 15.5-16.4 16-30 9-40 .2 0 3-1 7-5.2 11l-13.3 11c-1 1 .5 5.3.8 5z" fill="currentColor" class="octo-body"></path></svg><style> .github-corner svg{position:absolute;right:0;top:0;mix-blend-mode:darken;color:#ffffff;fill:#000000;}.github-corner:hover .octo-arm{animation:octocat-wave .56s;}@keyframes octocat-wave{0%, 100%{transform:rotate(0);}20%, 60%{transform:rotate(-20deg);}40%, 80%{transform:rotate(10deg);}}</style></a>
<!-- Some JavaScript that is used only in this demo, not needed for the buttons -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/docs.js"></script>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
</body>
</html>
Reference in New Issue Copy Permalink