A Pen by Marco Carrizales on CodePen.
Created
July 31, 2016 05:43
-
-
Save tamoxin/7d36c10d0e29fd3aa0c8e054a9e4f750 to your computer and use it in GitHub Desktop.
Random Quote Machine
This file contains 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
| <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> |
This file contains 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
| 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); | |
| }); | |
| }); |
This file contains 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
| <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> |
This file contains 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
| 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; } | |
| } |
This file contains 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
| <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