Skip to content

Instantly share code, notes, and snippets.

@tamoxin tamoxin/index.html

Created Jul 31, 2016
Embed
What would you like to do?
Random Quote Machine
<head>
<link href='https://fonts.googleapis.com/css?family=Contrail+One' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono" rel="stylesheet">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body id="page">
<div class="title">
<h1>Random Quote Terminal</h1>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 col-sm-0" ></div>
<div class="col-md-8 col-sm-12" >
<img src="https://dl.dropboxusercontent.com/u/49375955/Images/terminal_header_final.png" alt="terminal header" class="img-responsive" id="header"/>
<div id="terminal">
<p class="user">tamoxin@codepen:~$ <span id="user"></span></p>
<div id="quote"></div>
<div id="author"></div>
</div>
</div>
<div class="col-md-2 col-sm-0" ></div>
</div>
<div class="row">
<div class="col-md-2 col-sm-0"></div>
<div class="col-md-8 col-sm-12">
<button class="btn btn-info buttons" id="about"><i class="fa fa-info-circle"></i> About</button>
<a target="_blank" href="#" class="btn btn-primary buttons" id="share-quote"><i class="fa fa-twitter"></i> Share quote</a>
<button class="btn buttons" id="new-quote" ><i class="fa fa-quote-left"></i> <i class="fa fa-quote-right"></i> New quote</button>
</div>
<div class="col-md-2 col-sm-0"></div>
</div>
</div>
</body>
var user = "tamoxin@codepen:~$ ";
var shareLink = "";
var command = "";
var tweet = "https://twitter.com/intent/tweet?text=";
var quote;
var author;
var insertText = function(){
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
quote = a[0].content;
author = a[0].title;
$("#quote").html(quote);
$("#author").html(author);
tweet += $("#quote").text()+ "\n" + $("#author").text();
shareLink = encodeURI(tweet);
});
}
var insertAbout = function(){
quote = "<p style='text-align: left'>This random quote machine was made by <a href='https://twitter.com/tamoxin' target='_blank' class='links'>Marco Carrizales</a>.<br>Thanks to <a href='http://www.mattboldt.com/' target='_blank' class='links'>Matt Boldt</a> for the Typed plugin.<br>The quotes showed on this site are from <a href='https://quotesondesign.com/' target='_blank' class='links'>https://quotesondesign.com/</a></p>";
author = "Thanks for passing by :)"
$("#quote").html(quote);
$("#author").html(author);
tweet += $("#quote").text()+ "\n" + $("#author").text();
shareLink = encodeURI(tweet);
}
var newQuote = function(){
$(clr);
command = "sudo ./randomQuote.py^400..^100..^100.^100.^300";
$("#user").typed({
strings: [command],
typeSpeed: -900,
onStringTyped: insertText
});
};
var about = function(){
$(clr);
command = "about.txt^500";
$("#user").typed({
strings: [command],
typeSpeed: -900,
onStringTyped: insertAbout
});
}
var clr = function(){
quote = "";
author = "";
tweet = "https://twitter.com/intent/tweet?text=";
shareLink = "";
$("#quote").text(quote);
$("#author").text(author);
}
$(document).ready(function(){
$(newQuote);
// new quote
$("#new-quote").on("click", newQuote);
//about
$("#about").on("click", about);
//share quote
$("#share-quote").on("click", function(){
$("#share-quote").attr("href", shareLink);
});
});
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/49375955/Script/typed.js"></script>
body {
//font-size: 100%
}
h1 {
font-size: 4em;
}
.title {
font-family: 'Contrail One';
color: #FFF;
text-align: center;
margin-bottom: 2%
}
.buttons {
float: right;
margin-bottom: 2%;
}
.links{
color: rgb(222, 136, 68);
}
#page {
background-image: url("https://dl.dropboxusercontent.com/u/49375955/Images/backgrounds-codepen/wallpaper-1406531.jpg");
background-size: cover;
//background-position: center center;
}
#header {
border-radius: 10px 10px 0px 0px;
min-height: 1.3em;
}
#terminal {
background-color: rgba(43, 61, 80, .95);
background-size: contain;
border-radius: 0px 0px 10px 10px;
padding-top: 1%;
padding-bottom: 1%;
margin-bottom: 1%;
min-height: 300px;
font-family: 'Ubuntu Mono', monospace;
font-size: 1.3em;
}
.user {
color: rgb(222, 136, 68);
padding-left: .5%;
}
#quote {
color: rgb(98, 152, 205);
margin-top: 2%;
padding-left: 5%;
padding-right: 5%;
text-align: justify;
}
#author {
color: rgb(45, 199, 109);
margin-top: 10%;
padding-left: 5%;
padding-right: 5%;
text-align: right;
}
#new-quote {
background-color: #2ecc71;
margin-right: 1%;
//font-family: 'Ubuntu Mono', monospace;
}
#share-quote {
//font-family: 'Ubuntu Mono', monospace;
margin-right: 1%;
}
#about {
}
.typed-cursor{
opacity: 1;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
@keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.