zulip/templates/zephyr/index.html

181 lines
9.5 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Humbug, from Humbug Inc.</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
{% load jstemplate %}
{% block content %}
{% icanhazjs "zephyr" %}
{% autoescape off %}
<link href="/static/third/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/third/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<link href="/static/third/jquery/jquery-ui-1.8.23.custom.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link href="/static/styles/zephyr.css" rel="stylesheet">
<link href="/static/styles/pygments.css" rel="stylesheet">
{# We need to import jQuery before Bootstrap #}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script src="/static/third/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/js/common.js"></script>
<script type="text/javascript" src="/static/third/jquery/jquery.form.js"></script>
<script type="text/javascript" src="/static/third/ich/ICanHaz.min.js"></script>
<script type="text/javascript" src="/static/js/zephyr.js"></script>
<script type="text/javascript">
var initial_zephyr_array = {{ zephyr_array }};
var initial_pointer = {{ user_profile.pointer }};
var username = "{{ user_profile.user.username }}";
var class_list = {{ classes }};
var instance_list = {{ instances }};
var people_list = {{ people }};
</script>
{% endautoescape %}
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<div class="zephyr_well well sidebar-nav">
<ul class="nav nav-list nav-zephyr">
<span class="my_fullname">{{ user_profile.full_name }}</span><br/>
<span class="my_email">{{ user_profile.email }}</span>
<span class="logout">(<a href="/accounts/logout?next=/">not you?</a>)</span>
<li><a href="subscriptions/">Manage subscriptions</a></li>
<li><a href="#">View starred messages</a></li>
<li><a href="">Search</a></li>
<li><a href="#">Invite a friend</a></li>
<br>
<a href="#" class="btn btn-large btn-block button-slide">New Message</a>
</ul>
</div><!--/.well -->
</div><!--/span-->
<div class="span9">
<div id="wrapper">
<div class="zephyr_list" id="main_div">
<br/><br/>
<table class="zephyr_table" id="table">
<tbody>
</tbody>
</table>
<br/><br/>
<div class="row" id="narrowbox">
<div class="input-prepend input-append pull-left">
<button id="show_all_messages" class="btn" disabled=disabled onclick="show_all_messages()"><i class="icon-arrow-left"></i></button>
<span class="add-on"><span class="badge"><span id="currently_narrowed_to"></span><i class="badge_close_button icon-remove-sign icon-white" onclick="show_all_messages()"></i></span></span>
</div>
</div>
<div id="bottom_whitespace"></div>
</div>
<div class="tabbable container zephyr_compose" id="zephyr_compose">
<ul class="nav nav-tabs" id="zephyr-type-tabs">
<li class="active"><a href="#class-message" data-toggle="tab">Stream</a></li>
<li><a href="#personal-message" data-toggle="tab">Huddle</a></li>
<li class="alert" id="send-status"></li>
<li class="pull-right"><button type="button" class="close" onclick="hide_compose()">×</button></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="class-message">
<div class="zephyr_comp">
<br/>
<form action="/zephyr/" method="post" class="zephyr">
<input type="hidden" name="type" value="class" />
{% csrf_token %}
<table>
<tbody>
<tr>
<td class="pointer"></td>
<td class="zephyr_recipient">
<p>
<span class="zephyr_label_clickable zephyr_class">
<input type="text" class="zephyr_recipient_box" name="class" id="class" value="" placeholder="Stream"/>
</span>
<br/>
<span class="zephyr_label_clickable zephyr_instance">
<input type="text" class="zephyr_recipient_box" name="instance" id="instance" value="" placeholder="Topic"/>
</span>
</p>
</td>
<td class="messagebox compose">
<img class="profile_picture" src="http://www.gravatar.com/avatar/a?d=identicon&s=30"/>
<div class="zephyr_content">
<textarea class="zephyr_message" name="new_zephyr" id="new_zephyr" value="" placeholder="Compose your message here..."/></textarea>
<input type="submit" value="Send" class="btn send_zephyr"/>
</div>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
<div class="tab-pane" id="personal-message">
<div class="zephyr_comp">
<br/>
<form action="/zephyr/" method="post" class="zephyr form-inline">
<input type="hidden" name="type" value="personal" />
{% csrf_token %}
<table>
<tbody>
<tr>
<td class="pointer"></td>
<td><label class="pull-right">Huddle with</label></td>
<td><input class="input-xlarge" type="text" name="recipient" id="recipient" value="" placeholder="one or more of your friends" /></td>
</tr>
<tr>
<td class="pointer"></td>
<td class="zephyr_recipient"></td>
<td class="messagebox compose">
<img class="profile_picture" src="http://www.gravatar.com/avatar/a?d=identicon&s=30"/>
<div class="zephyr_content">
<textarea class="zephyr_message" name="new_zephyr" id="new_personal_zephyr" value="" placeholder="Compose your message here..."/></textarea>
<input type="submit" name="personal_zephyr" value="Send" class="btn send_zephyr"/>
</div>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
</div><!--/span-->
</div><!--/row-->
<div class="row-fluid" id="connection-error">
<div class="span12">
<div class="alert alert-error">
<strong>Can't receive messages</strong> &mdash; try reloading the page.
</div>
</div>
</div>
<div class="alert" id="class-dne">
<p>The class <span class="classname" id="class-dne-name"></span> does not exist.</p>
<a id="create-it" class="btn btn-primary" href="#">Create and send</a>
<a class="btn" onClick="$('#class-dne').stop(true).fadeOut(500);">Cancel message</a>
</div>
<div class="alert" id="class-nosub">
<p>You're not subscribed to the class <span class="classname" id="class-nosub-name"></span>.</p>
<a id="sub-it" class="btn btn-primary" href="#">Subscribe and send</a>
<a class="btn" onClick="$('#class-nosub').stop(true).fadeOut(500);">Cancel message</a>
</div>
</div>
{% endblock %}
</body>
</html>