Skip to content

Instantly share code, notes, and snippets.

@jamesmichiemo

jamesmichiemo/makehtml.rb

Created September 26, 2013 10:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jamesmichiemo/6712199 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jamesmichiemo/6712199 to your computer and use it in GitHub Desktop.
Download ZIP
a ruby script that rolls out a splash page using Bitstarter's template
Raw
makehtml.rb
print "Hi. Please enter the product name of your app: "
title = gets
print "Thank you. Now please enter a brief description for your app: "
description = gets
htmlfile = File.new("index.html", "w")
htmlfile.puts '<!DOCTYPE html>'
htmlfile.puts '<html lang="en">'
htmlfile.puts ' <head>'
htmlfile.puts ' <meta charset="utf-8">'
htmlfile.puts " <title>#{title}</title>"
htmlfile.puts ' <meta name="viewport" content="width=device-width, initial-scale=1.0">'
htmlfile.puts ' <link rel="stylesheet" href="https://d396qusza40orc.cloudfront.net/startup%2Fcode%2Fbootstrap-combined.no-icons.min.css">'
htmlfile.puts ' <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css">'
htmlfile.puts ' <link rel="stylesheet" href="https://d396qusza40orc.cloudfront.net/startup%2Fcode%2Fsocial-buttons.css">'
htmlfile.puts ' <script src="https://d396qusza40orc.cloudfront.net/startup%2Fcode%2Fjquery.js"></script>'
htmlfile.puts ' <script src="https://d396qusza40orc.cloudfront.net/startup%2Fcode%2Fbootstrap.js"></script>'
htmlfile.puts ' <link href="http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic" rel="stylesheet" type="text/css">'
htmlfile.puts ' <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,300,400,600,700,800"'
htmlfile.puts ' rel="stylesheet" type="text/css">'
htmlfile.puts ' <style type="text/css">'
htmlfile.puts ''
htmlfile.puts ' /* Large desktop */'
htmlfile.puts ' @media (min-width: 980px) {'
htmlfile.puts ' body {'
htmlfile.puts ' padding-top: 60px;'
htmlfile.puts ' }'
htmlfile.puts ' .linediv-l {'
htmlfile.puts ' border-right: 1px white solid;'
htmlfile.puts ' }'
htmlfile.puts ' .linediv-r {'
htmlfile.puts ' border-left: 1px white solid;'
htmlfile.puts ' }'
htmlfile.puts ' }'
htmlfile.puts ''
htmlfile.puts ' /* Landscape phones and down */'
htmlfile.puts ' @media (max-width: 480px) {'
htmlfile.puts ' .copy {'
htmlfile.puts ' padding: 2.5% 10%;'
htmlfile.puts ' }'
htmlfile.puts ' .linediv-l {'
htmlfile.puts ' border-bottom: 1px white solid;'
htmlfile.puts ' }'
htmlfile.puts ' .linediv-r {'
htmlfile.puts ' border-top: 1px white solid;'
htmlfile.puts ' }'
htmlfile.puts ' }'
htmlfile.puts ''
htmlfile.puts ' /* All form factors */'
htmlfile.puts ''
htmlfile.puts ' /* Main body and headings */'
htmlfile.puts ' body{'
htmlfile.puts ' font-family: "Open Sans", Helvetica, Arial, sans-serif;'
htmlfile.puts ' }'
htmlfile.puts ' .heading, .subheading {'
htmlfile.puts ' font-family: "Ubuntu", Helvetica, Arial, sans-serif;'
htmlfile.puts ' text-align: center;'
htmlfile.puts ' }'
htmlfile.puts ' p.lead {'
htmlfile.puts ' padding-top: 1.5%;'
htmlfile.puts ' font-size: 24px;'
htmlfile.puts ' line-height: 30px;'
htmlfile.puts ' }'
htmlfile.puts ' p {'
htmlfile.puts ' font-size: 18px;'
htmlfile.puts ' line-height: 24px;'
htmlfile.puts ' }'
htmlfile.puts ''
htmlfile.puts ' /* Video pitch and Action */'
htmlfile.puts ' .pitch {'
htmlfile.puts ' padding: 2.5% 0%;'
htmlfile.puts ' }'
htmlfile.puts ' .order {'
htmlfile.puts ' padding: 2% 0%;'
htmlfile.puts ' }'
htmlfile.puts ' .actions {'
htmlfile.puts ' background-color: #343434;'
htmlfile.puts ' padding: 3% 0%;'
htmlfile.puts ' }'
htmlfile.puts ' .video, .thermometer, .order, .social, .statistics {'
htmlfile.puts ' text-align: center;'
htmlfile.puts ' }'
htmlfile.puts ' .statistics h3, .statistics p {'
htmlfile.puts ' color: white;'
htmlfile.puts ' }'
htmlfile.puts ''
htmlfile.puts ' /* Marketing Copy and Footer */'
htmlfile.puts ' .copy {'
htmlfile.puts ' padding-top: 2.5%;'
htmlfile.puts ' padding-bottom: 2.5%;'
htmlfile.puts ' text-align: justify;'
htmlfile.puts ' }'
htmlfile.puts ' .asset {'
htmlfile.puts ' padding: 2.5% 0%;'
htmlfile.puts ' }'
htmlfile.puts ' .footer {'
htmlfile.puts ' color: #cccccc;'
htmlfile.puts ' text-align: center;'
htmlfile.puts ' }'
htmlfile.puts ' .footer p {'
htmlfile.puts ' font-size: 11px;'
htmlfile.puts ' }'
htmlfile.puts ' .footer a {'
htmlfile.puts ' color: #ccccff;'
htmlfile.puts ' }'
htmlfile.puts ' </style>'
htmlfile.puts ' </head>'
htmlfile.puts ' <body>'
htmlfile.puts ''
htmlfile.puts ' <!-- Mobile-friendly navbar adapted from example. -->'
htmlfile.puts ' <!-- http://twitter.github.io/bootstrap/examples/starter-template.html -->'
htmlfile.puts ' <div class="navbar navbar-inverse navbar-fixed-top">'
htmlfile.puts ' <div class="navbar-inner">'
htmlfile.puts ' <div class="container">'
htmlfile.puts ' <button type="button" class="btn btn-navbar"'
htmlfile.puts ' data-toggle="collapse" data-target=".nav-collapse">'
htmlfile.puts ' <span class="icon-bar"></span>'
htmlfile.puts ' <span class="icon-bar"></span>'
htmlfile.puts ' <span class="icon-bar"></span>'
htmlfile.puts ' </button>'
htmlfile.puts " <a class='brand' href='#'>#{title}</a>"
htmlfile.puts ' <div class="nav-collapse collapse">'
htmlfile.puts ' <ul class="nav">'
htmlfile.puts ' <li class="active"><a href="#">Home</a></li>'
htmlfile.puts ' <li><a href="#about">About</a></li>'
htmlfile.puts ' <li><a href="#contact">Contact</a></li>'
htmlfile.puts ' </ul>'
htmlfile.puts ' </div><!--/.nav-collapse -->'
htmlfile.puts ' </div>'
htmlfile.puts ' </div>'
htmlfile.puts ' </div>'
htmlfile.puts ''
htmlfile.puts ' <!-- We use row-fluid inside containers to achieve a resizable layout. -->'
htmlfile.puts ' <!-- blogs.endjin.com/2013/04/tips-for-implementing-responsive-designs-using-bootstrap/ -->'
htmlfile.puts ' <!-- http://stackoverflow.com/a/12270322 -->'
htmlfile.puts ' <div class="container">'
htmlfile.puts ' <!-- Font and paired font of .heading/.subheading and body from Google Fonts -->'
htmlfile.puts ' <!-- www.google.com/fonts/specimen/Ubuntu -->'
htmlfile.puts ' <!-- www.google.com/fonts/specimen/Ubuntu#pairings -->'
htmlfile.puts ' <div class="row-fluid heading">'
htmlfile.puts ' <div class="span12">'
htmlfile.puts " <h1>#{title}</h1>"
htmlfile.puts ' </div>'
htmlfile.puts ' </div>'
htmlfile.puts ' <div class="row-fluid subheading">'
htmlfile.puts ' <div class="span12">'
htmlfile.puts ' <!-- Special typography from Bootstrap for lead paragraph. -->'
htmlfile.puts ' <!-- http://twitter.github.io/bootstrap/base-css.html#typography -->'
htmlfile.puts " <p class='lead'>#{description}</p>"
htmlfile.puts ' </div>'
htmlfile.puts ' </div>'
htmlfile.puts ' <div class="row-fluid pitch">'
htmlfile.puts ' <div class="span5 offset1 video">'
htmlfile.puts ' <img class="img-polaroid" src="http://placehold.it/480x300">'
htmlfile.puts ' </div>'
htmlfile.puts ''
htmlfile.puts ' <!-- We define a new "actions" div to contain statistics, order, and share buttons.-->'
htmlfile.puts ' <div class="span5 actions">'
htmlfile.puts ' <div class="span8 offset2">'
htmlfile.puts ' <div class="statistics">'
htmlfile.puts ' <div class="span4">'
htmlfile.puts ' <!-- linediv-l and linediv-r give dividing lines that look'
htmlfile.puts 'different in horizontal and vertical layouts, illustrating'
htmlfile.puts 'media queries. -->'
htmlfile.puts ' <div class="linediv-l">'
htmlfile.puts ' <h3>1000</h3> <p>backers</p>'
htmlfile.puts ' </div>'
htmlfile.puts ' </div>'
htmlfile.puts ' <div class="span4">'
htmlfile.puts ' <div class="linediv-c">'
htmlfile.puts ' <h3>$6000</h3> <p>of $10,000</p>'
htmlfile.puts ' </div>'
htmlfile.puts ' </div>'
htmlfile.puts ' <div class="span4">'
htmlfile.puts ' <div class="linediv-r">'
htmlfile.puts ' <h3>10</h3> <p>days left</p>'
htmlfile.puts ' </div>'
htmlfile.puts ' </div>'
htmlfile.puts ' </div>'
htmlfile.puts ' </div>'
htmlfile.puts ' <div class="span10 offset1">'
htmlfile.puts ' <!-- Bootstrap progress bar -->'
htmlfile.puts ' <!-- http://twitter.github.io/bootstrap/components.html#progress -->'
htmlfile.puts ' <div class="thermometer progress active">'
htmlfile.puts ' <div class="bar bar-success" style="width: 60%;"></div>'
htmlfile.puts ' <div class="bar bar-warning" style="width: 40%;"></div>'
htmlfile.puts ' </div>'
htmlfile.puts ' </div>'
htmlfile.puts ' <div class="span6 offset3 order">'
htmlfile.puts ' <!-- Standard Bootstrap button. -->'
htmlfile.puts ' <!-- http://twitter.github.io/bootstrap/base-css.html#buttons -->'
htmlfile.puts ' <button class="btn btn-success btn-large">Preorder</button>'
htmlfile.puts ' </div>'
htmlfile.puts ' <div class="span8 offset2 social">'
htmlfile.puts ' <!-- Social buttons are not included in default Bootstrap. -->'
htmlfile.puts ' <!-- See: http://noizwaves.github.io/bootstrap-social-buttons -->'
htmlfile.puts ' <button class="btn btn-twitter"><i class="icon-twitter"></i> | Twitter</button>'
htmlfile.puts ' <button class="btn btn-facebook"><i class="icon-facebook"></i> | Facebook</button>'
htmlfile.puts ' </div>'
htmlfile.puts ' </div>'
htmlfile.puts ' </div>'
htmlfile.puts ''
htmlfile.puts ' <!-- Beyond this part the marketing copy begins. -->'
htmlfile.puts ' <!-- https://developer.mozilla.org/en-US/docs/Web/CSS/text-align -->'
htmlfile.puts ' <!-- http://twitter.github.io/bootstrap/base-css.html#images -->'
htmlfile.puts ' <!-- http://placehold.it -->'
htmlfile.puts ' <div class="row-fluid section1">'
htmlfile.puts ' <div class="span5 offset1 asset">'
htmlfile.puts ' <img class="img-polaroid" src="http://placehold.it/480x300">'
htmlfile.puts ' </div>'
htmlfile.puts ' <div class="span5 copy">'
htmlfile.puts ' <p>'
htmlfile.puts ' Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec'
htmlfile.puts ' porta, dui sagittis hendrerit rutrum, nunc leo tempus nisl, eu'
htmlfile.puts ' mollis justo velit at nunc. Fusce nec egestas sem. Donec'
htmlfile.puts ' fringilla ante lectus, a pellentesque lacus dignissim ac. Sed'
htmlfile.puts ' volutpat lorem ut congue malesuada. In facilisis scelerisque'
htmlfile.puts ' turpis sed lacinia. Donec in orci lectus. Donec auctor semper'
htmlfile.puts ' quam, eget rhoncus purus fringilla id. Phasellus id nibh eu'
htmlfile.puts ' risus ultrices adipiscing. Lorem ipsum dolor sit amet,'
htmlfile.puts ' consectetur adipiscing elit. Donec porta, dui sagittis hendrerit'
htmlfile.puts ' rutrum, nunc leo tempus nisl, eu mollis justo velit at'
htmlfile.puts ' nunc. Fusce nec egestas sem. Donec fringilla.'
htmlfile.puts ' </p>'
htmlfile.puts ' </div>'
htmlfile.puts ' </div>'
htmlfile.puts ''
htmlfile.puts ' <div class="row-fluid section2">'
htmlfile.puts ' <div class="span5 offset1 copy copy-right">'
htmlfile.puts ' <p>'
htmlfile.puts ' Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec'
htmlfile.puts ' porta, dui sagittis hendrerit rutrum, nunc leo tempus nisl, eu'
htmlfile.puts ' mollis justo velit at nunc. Fusce nec egestas sem. Donec'
htmlfile.puts ' fringilla ante lectus, a pellentesque lacus dignissim ac. Sed'
htmlfile.puts ' volutpat lorem ut congue malesuada. In facilisis scelerisque'
htmlfile.puts ' turpis sed lacinia. Donec in orci lectus. Donec auctor semper'
htmlfile.puts ' quam, eget rhoncus purus fringilla id. Phasellus id nibh eu'
htmlfile.puts ' risus ultrices adipiscing. Lorem ipsum dolor sit amet,'
htmlfile.puts ' consectetur adipiscing elit. Donec porta, dui sagittis hendrerit'
htmlfile.puts ' rutrum, nunc leo tempus nisl, eu mollis justo velit at'
htmlfile.puts ' nunc. Fusce nec egestas sem. Donec fringilla.'
htmlfile.puts ' </p>'
htmlfile.puts ' </div>'
htmlfile.puts ' <div class="span5 asset">'
htmlfile.puts ' <img class="img-polaroid" src="http://placehold.it/480x300">'
htmlfile.puts ' </div>'
htmlfile.puts ' </div>'
htmlfile.puts ''
htmlfile.puts ' <!-- For the FAQ, we introduce a little bit of JS, using the accordion. -->'
htmlfile.puts ' <!-- This brings in jquery.js and bootstrap.js as dependencies. -->'
htmlfile.puts ' <!-- http://twitter.github.io/bootstrap/javascript.html#collapse -->'
htmlfile.puts ' <div class="row-fluid faq">'
htmlfile.puts ' <div class="span10 offset1">'
htmlfile.puts ' <h3>FAQ</h3>'
htmlfile.puts ' <div class="accordion" id="accordion2">'
htmlfile.puts ' <div class="accordion-group">'
htmlfile.puts ' <div class="accordion-heading">'
htmlfile.puts ' <a class="accordion-toggle" data-toggle="collapse"'
htmlfile.puts ' data-parent="#accordion2" href="#collapseOne">'
htmlfile.puts ' What does FAQ stand for?'
htmlfile.puts ' </a>'
htmlfile.puts ' </div>'
htmlfile.puts ' <div id="collapseOne" class="accordion-body collapse">'
htmlfile.puts ' <div class="accordion-inner">'
htmlfile.puts ' Frequently Asked Question.'
htmlfile.puts ' </div>'
htmlfile.puts ' </div>'
htmlfile.puts ' </div>'
htmlfile.puts ' <div class="accordion-group">'
htmlfile.puts ' <div class="accordion-heading">'
htmlfile.puts ' <a class="accordion-toggle" data-toggle="collapse"'
htmlfile.puts ' data-parent="#accordion2" href="#collapseTwo">'
htmlfile.puts ' What is a Frequently Asked Question?'
htmlfile.puts ' </a>'
htmlfile.puts ' </div>'
htmlfile.puts ' <div id="collapseTwo" class="accordion-body collapse">'
htmlfile.puts ' <div class="accordion-inner">'
htmlfile.puts ' A question which is commonly asked by users.'
htmlfile.puts ' </div>'
htmlfile.puts ' </div>'
htmlfile.puts ' </div>'
htmlfile.puts ' </div>'
htmlfile.puts ' </div>'
htmlfile.puts ''
htmlfile.puts ' </div>'
htmlfile.puts ''
htmlfile.puts ' <!-- Not crucial, but we put this under a CC By-SA 3.0 license. -->'
htmlfile.puts ' <!-- http://creativecommons.org/licenses/ -->'
htmlfile.puts ' <div class="row-fluid footer">'
htmlfile.puts ' <div class="span12">'
htmlfile.puts ' <p>This work is licensed under'
htmlfile.puts ' the <a href="http://creativecommons.org/licenses/by-sa/3.0/">CC'
htmlfile.puts ' By-SA 3.0'
htmlfile.puts ' </a>, without all the cruft that would otherwise be'
htmlfile.puts ' put at the bottom of the page.</p>'
htmlfile.puts ' </div>'
htmlfile.puts ' </div>'
htmlfile.puts ' </div>'
htmlfile.puts ' </body>'
htmlfile.puts '</html>'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment