PageRenderTime 69ms CodeModel.GetById 22ms RepoModel.GetById 0ms app.codeStats 0ms

/public/index.html

https://github.com/paulmars/streamie
HTML | 175 lines | 117 code | 5 blank | 53 comment | 0 complexity | a12f4386f6f8225646ddd7a3ba635bd3 MD5 | raw file
    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <!-- Streamie.org 
    4. 

  4.      Thank you for viewing source!
    5. 

  5.      
    6. 

  6.      For more see http://github.com/cramforce/streamie
    7. 

  7.      
    8. 

  8.      Learn how to make your own version of streamie without having to run your own server:
    9. 

  9.      http://j.mp/c6EFKk
    10. 

  10.      
    11. 

  11.      We use all the hot stuff
    12. 

  12.      - Backend is built on node.js
    13. 

  13.      - Web sockets via socket.io
    14. 

  14.      - CSS via less.js
    15. 

  15.      - Loading via require.js
    16. 

  16.      - underscore.js to make the JavaScript saner
    17. 

  17.      - yes, also jQuery for DOM manipulation
    18. 

  18.      
    19. 

  19.      
    20. 

  20.      Simplified BSD License
    21. 

  21.      
    22. 

  22.      Copyright 2010 Malte Ubl. All rights reserved.
    23. 

  23. 

  24.      Redistribution and use in source and binary forms, with or without modification, are
    25. 

  25.      permitted provided that the following conditions are met:
    26. 

  26. 

  27.         1. Redistributions of source code must retain the above copyright notice, this list of
    28. 

  28.            conditions and the following disclaimer.
    29. 

  29. 

  30.         2. Redistributions in binary form must reproduce the above copyright notice, this list
    31. 

  31.            of conditions and the following disclaimer in the documentation and/or other materials
    32. 

  32.            provided with the distribution.
    33. 

  33. 

  34.      THIS SOFTWARE IS PROVIDED BY MALTE UBL ``AS IS'' AND ANY EXPRESS OR IMPLIED
    35. 

  35.      WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND
    36. 

  36.      FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL MALTE UBL OR
    37. 

  37.      CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
    38. 

  38.      CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
    39. 

  39.      SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
    40. 

  40.      ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
    41. 

  41.      NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
    42. 

  42.      ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
    43. 

  43. 

  44.      The views and conclusions contained in the software and documentation are those of the
    45. 

  45.      authors and should not be interpreted as representing official policies, either expressed
    46. 

  46.      or implied, of Malte Ubl.
    47. 

  47. -->
    48. 

  48. 

  49. <head>
    50. 

  50. 	<title>Streamie</title>
    51. 

  51. 	<meta charset="UTF-8" />
    52. 

  52. 	<base target="_blank" />
    53. 

  53. 	<meta name="language" content="en-US" />
    54. 

  54. 	<link rel="stylesheet" type="text/css" href="css/streamie.less.css" media="screen,projection,print" />
    55. 

  55. 	<script src="ext/less-1.0.35.min.js"></script>
    56. 

  56. 	<!-- 
    57. 

  57. 	We use less.js: http://github.com/cloudhead/less.js/tree/ 
    58. 

  58. 	<link rel="stylesheet/less" type="text/css" href="css/streamie.less" media="screen,projection,print" />
    59. 

  59. 	<script>
    60. 

  60. 	  less.refresh(true); // localstorage caching is bad for frequent releases
    61. 

  61. 	</script>
    62. 

  62.   -->
    63. 

  63. 	<link href='images/streamie-empty.ico' rel='shortcut icon' />
    64. 

  64. </head>
    65. 

  65. 

  66. <body id="www-streamie-org" class="loading">
    67. 

  67. 	<div id="container">
    68. 

  68. 		<div id="header">
    69. 

  69. 			<h1 id="logo"><a href="#" target="_self">streamie (early alpha) for <span id="currentuser-screen_name"></span></a></h1>
    70. 

  70. 			<div id="meta"><a href="#" class="logout">Logout</a></div>
    71. 

  71. 			<ul id="mainnav">
    72. 

  72. 				<li class="activatable rpl"><a href="#mention" title="Mentions" target="_self">@</a></li>
    73. 

  73. 				<li class="activatable timeline active"><a href="#all" title="Show All" target="_self">⚛</a></li>
    74. 

  74. 				<li class="activatable rt"><a href="#retweet" title="Retweets" target="_self">♻</a></li>
    75. 

  75. 				<li class="activatable fv"><a href="#starred" title="Favorites" target="_self">★</a></li>
    76. 

  76. 				<li class="activatable dm"><a href="#direct" title="Direct Messages" target="_self">✉</a></li>
    77. 

  77. 				<li class="settings"><a href="#settings" title="Settings" target="_self">⚙</a></li>
    78. 

  78. 				<li class="add"><a href="#add" title="New Tweet" target="_self">✍</a></li>
    79. 

  79. 			</ul>
    80. 

  80. 			<form action="/1/statuses/update.json" method="post" class="status tweet" id="mainstatus"> 
    81. 

  81. 				<input type="hidden" name="in_reply_to_status_id" value="" />
    82. 

  82. 				<input type="hidden" name="lat" value="" />
    83. 

  83. 				<input type="hidden" name="long" value="" />
    84. 

  84. 				<input type="hidden" name="display_coordinates" value="" />
    85. 

  85. 				<fieldset class="addons">
    86. 

  86. 					<a href="#" class="shortenURLs">Shorten URLs</a>
    87. 

  87. 					<a href="#" class="attachImage">Attach an Image</a>
    88. 

  88. 				</fieldset>
    89. 

  89. 				<fieldset> 
    90. 

  90. 					<textarea name="status" rows="5" cols="40" placeholder="Your Tweet…"></textarea>
    91. 

  91. 					<span class="characters">0</span> 
    92. 

  92. 					<input type="submit" value="Tweet" class="button" />
    93. 

  93. 				</fieldset>
    94. 

  94. 			</form>
    95. 

  95. 			<div id="settings" class="panel"></div>
    96. 

  96. 		</div>
    97. 

  97. 		<div id="content">
    98. 

  98. 		  <div class="logo"><img src="data:image/png;base64,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" alt="streamie" width="350" height="66" /></div>
    99. 

  99. 			<div id="about">
    100. 

  100. 				<h2>Streamie</h2>
    101. 

  101. 				<p>
    102. 

  102. 					<a href="http://twitter.com/streamieorg">Streamie</a> is a full <b>realtime</b> Twitter client that runs in your web browser.<br />
    103. 

  103. 					New tweets will appear in your timeline immediately when someone posts them to Twitter.
    104. 

  104. 				</p>
    105. 

  105. 				<h2>Cutting Edge Web Technology</h2>
    106. 

  106. 				<p>
    107. 

  107. 					We take advantage of the latest web standards such as HTML5 and CSS3. We encourage you to update to the newest (even beta) versions 
    108. 

  108. 					of your <a href="http://www.google.com/landing/chrome/beta/">favorite web browser</a> to use streamie. If you cannot do that, 
    109. 

  109. 					streamie is not for you, if you can, the experience will be great.
    110. 

  110. 				</p>
    111. 

  111. 				<h2>Hackability</h2>
    112. 

  112. 				<p>
    113. 

  113. 					Streamie was designed with extreme <b>"hackability"</b> in mind and it is <a href="http://github.com/cramforce/streamie">fully open source</a>. 
    114. 

  114. 					If you are a programmer you can make your own version of streamie. The cool thing is: You do not have to run your own server so you can 
    115. 

  115. 					concentrate on actually building the features you want. The infrastructure is handled by us. 
    116. 

  116. 					<a href="http://www.nonblocking.io/2010/08/future-is-here-i-just-forked-running.html">Learn how to make your own version of streamie.</a>
    117. 

  117. 				</p>
    118. 

  118. 				<h2>Alpha</h2>
    119. 

  119. 				<p>
    120. 

  120. 				  While Streamie does work quite well, it is still alpha level software. If you're experiencing problems, please 
    121. 

  121. 				  <a href="http://github.com/cramforce/streamie/issues">report them.</a>
    122. 

  122. 				</p>
    123. 

  123. 				<h2>Get Started / Sign in with Twitter</h2>
    124. 

  124. 				<p><a href="/access" target="_self"><img src="http://a0.twimg.com/images/dev/buttons/sign-in-with-twitter-d.png" alt="Sign in with Twitter" /></a></p>				
    125. 

  125. 				<p class="subline">Thanks for reading. You might want to <a href="http://twitter.com/streamieorg">follow us on Twitter</a></p>
    126. 

  126. 			</div>
    127. 

  127. 			<h2 class="h1">Timeline</h2>
    128. 

  128. 			<ol id="stream">
    129. 

  129. 			</ol>
    130. 

  130. 		</div>
    131. 

  131. 	</div>
    132. 

  132. 	<div id="imageUpload" class="popin">
    133. 

  133. 		<h2 class="h">Image Upload</h2>
    134. 

  134. 		<div class="msg">
    135. 

  135. 			<form id="imageUploadForm"><input type="file" name="file"></form>
    136. 

  136. 			<div class="progress"></div>
    137. 

  137. 		</div>
    138. 

  138. 		<div class="buttons">
    139. 

  139. 			<input type="button" value="Cancel" class="button close" />
    140. 

  140. 		</div>
    141. 

  141. 	</div>
    142. 

  142. 	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    143. 

  143. 	<script src="/ext/underscore.js"></script>
    144. 

  144. 	<script src="ext/socket.io/socket.io.js"></script>
    145. 

  145. 	<!-- We use require.js for loading dependencies http://requirejs.org/ -->
    146. 

  146.   <script src="ext/require.js"></script>
    147. 

  147.   <script>
    148. 

  148.     require({
    149. 

  149.       baseUrl: "./",
    150. 

  150.       paths: {
    151. 

  151.         "stream": "/lib/stream"
    152. 

  152.       },
    153. 

  153.     },
    154. 

  154.     ["stream/app"],
    155. 

  155.       function(app) {
    156. 

  156.         app.start();
    157. 

  157.       }
    158. 

  158.     );
    159. 

  159.   </script>
    160. 

  160.   <script type="text/javascript">
    161. 

  161. 

  162.     var _gaq = _gaq || [];
    163. 

  163.     _gaq.push(['_setAccount', 'UA-4656061-3']);
    164. 

  164.     _gaq.push(['_setDomainName', '.streamie.org']);
    165. 

  165.     _gaq.push(['_trackPageview']);
    166. 

  166. 

  167.     (function() {
    168. 

  168.       var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    169. 

  169.       ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    170. 

  170.       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    171. 

  171.     })();
    172. 

  172. 

  173.   </script>
    174. 

  174. </body> 
    175. 

  175. </html>
    176. 

  176.