comparison 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
comparison
equal deleted inserted replaced
113:d34116ff634b 114:394235fd42d2
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <head> 2 <head>
3 <title>rsstweet</title> 3 <title>rsstweet</title>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
5 6
6 <style type="text/css"> 7 <style type="text/css">
7 body { 8 *, *::before, *::after {
8 font-family: sans-serif; 9 box-sizing: border-box;
9 font-size: 12px; 10 }
11
12 html {
13 line-height: 1.5;
14 font-family: Arial, sans-serif;
15 font-size: 14px;
16 height: 100%;
17 }
18
19 code {
20 font-family: "Courier New", monospace;
21 }
22
23 .main {
24 margin: auto;
25 max-width: 600px;
26 width: 100%;
27 display: flex;
28 flex-direction: column;
29 height: 100%;
30 padding: 0 10px;
31 }
32
33 .main__content {
34 flex: 1;
35 }
36
37 .main__footer {
38 padding-bottom: 10px;
39 }
40
41 .twitter-form {
42 width: 100%;
43 display: flex;
44 align-items: center;
45 }
46
47 .twitter-form__input {
48 flex: 1;
49 margin-right: 5px;
50 font-family: "Courier New", monospace;
51 font-size: 16px;
10 } 52 }
11 </style> 53 </style>
12 </head> 54 </head>
13 <body> 55 <body class="main">
14 <h1>rsstweet</h1> 56 <div class="main__content">
15 <p>Proxying any user's tweet for usage with RSS readers</p> 57 <h1>rsstweet</h1>
16 <ul> 58 <p>
17 <li> 59 Proxying any user's tweet for usage with RSS readers.
18 Source: <a href="https://bitbucket.org/nanaya1/rsstweet">Bitbucket</a> 60 Doesn't actually output <code>rss</code> but generates <code>atom</code> instead.
19 </li> 61 Not that it matters because either way it works with any RSS readers.
20 </ul> 62 </p>
63
64 <form class="js-twitter--form twitter-form">
65 <input type="text" placeholder="Enter Username" class="js-twitter--input twitter-form__input" autofocus>
66 <button type="submit">
67 Go
68 </button>
69 </form>
70 </div>
71 <div class="main__footer">
72 <hr>
73 <a href="https://bitbucket.org/nanaya1/rsstweet">Source</a>
74 </div>
75
76 <script>
77 var form = document.getElementsByClassName('js-twitter--form')[0]
78 var input = document.getElementsByClassName('js-twitter--input')[0]
79 var doRedirect = function(e) {
80 e.preventDefault()
81 document.location = "/" + input.value
82 }
83
84 form.addEventListener('submit', doRedirect)
85 </script>
21 </body> 86 </body>