view app/views/tweets/index.html.erb @ 114:394235fd42d2

Fancy index page
author nanaya <me@myconan.net>
date Sun, 12 Feb 2017 16:45:55 +0900
parents 54aac458e979
children 32c8c150cd80
line wrap: on
line source

<!DOCTYPE html>
<head>
  <title>rsstweet</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style type="text/css">
    *, *::before, *::after {
      box-sizing: border-box;
    }

    html {
      line-height: 1.5;
      font-family: Arial, sans-serif;
      font-size: 14px;
      height: 100%;
    }

    code {
      font-family: "Courier New", monospace;
    }

    .main {
      margin: auto;
      max-width: 600px;
      width: 100%;
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 0 10px;
    }

    .main__content {
      flex: 1;
    }

    .main__footer {
      padding-bottom: 10px;
    }

    .twitter-form {
      width: 100%;
      display: flex;
      align-items: center;
    }

    .twitter-form__input {
      flex: 1;
      margin-right: 5px;
      font-family: "Courier New", monospace;
      font-size: 16px;
    }
  </style>
</head>
<body class="main">
  <div class="main__content">
    <h1>rsstweet</h1>
    <p>
      Proxying any user's tweet for usage with RSS readers.
      Doesn't actually output <code>rss</code> but generates <code>atom</code> instead.
      Not that it matters because either way it works with any RSS readers.
    </p>

    <form class="js-twitter--form twitter-form">
      <input type="text" placeholder="Enter Username" class="js-twitter--input twitter-form__input" autofocus>
      <button type="submit">
        Go
      </button>
    </form>
  </div>
  <div class="main__footer">
    <hr>
    <a href="https://bitbucket.org/nanaya1/rsstweet">Source</a>
  </div>

  <script>
    var form = document.getElementsByClassName('js-twitter--form')[0]
    var input = document.getElementsByClassName('js-twitter--input')[0]
    var doRedirect = function(e) {
      e.preventDefault()
      document.location = "/" + input.value
    }

    form.addEventListener('submit', doRedirect)
  </script>
</body>