Mercurial > rsstweet
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> |