Commit f3097356 authored by Daniele Venzano's avatar Daniele Venzano

Add some styling to the web pages

parent 50c5599b
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<entry url="file://$PROJECT_DIR$"> <entry url="file://$PROJECT_DIR$">
<entryData> <entryData>
<resourceRoots> <resourceRoots>
<path value="file://$PROJECT_DIR$/caaas/static" /> <path value="file://$PROJECT_DIR$/caaas" />
</resourceRoots> </resourceRoots>
</entryData> </entryData>
</entry> </entry>
......
This diff is collapsed.
body {
font-family: sans-serif;
max-width: 800px;
margin-left: 20px;
}
a:link {
color: rgba(79, 140, 30, 1);
text-decoration: none;
}
a:visited {
color: rgba(79, 140, 30, 1);
text-decoration: none;
}
div#activities {
padding-left: 3em;
}
a.activity {
width: 100px;
height: 80px;
border: 1px black solid;
border-radius: 15px;
float: left;
margin-right: 10px;
padding: 1em;
text-align: center;
display: block;
}
a.activity:hover {
transition: background-color 200ms linear;
background-color: khaki;
}
div.user_info {
font-size: smaller;
clear: both;
padding-top: 20px;
}
div.caaas_status_line {
float: left;
}
span#app_name {
font-family: cursive;
font-size: larger;
}
span#status {
font-size: smaller;
}
div.copyright {
float: left;
padding-left: 3em;
}
\ No newline at end of file
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
<script type="application/javascript"> <script type="application/javascript">
var api_endpoint = "/api"; var api_endpoint = "/api";
</script> </script>
<link rel="stylesheet" href="/static/caaas.css" type="text/css">
{% endblock %} {% endblock %}
</head> </head>
<body> <body>
...@@ -29,8 +30,17 @@ ...@@ -29,8 +30,17 @@
<div id="content">{% block content %}{% endblock %}</div> <div id="content">{% block content %}{% endblock %}</div>
<div id="footer"> <div id="footer">
{% block footer %} {% block footer %}
<div class="caaas_status"><p><em>CAaaS</em> status: <span id="num_nodes">N/A</span> available nodes, <span id="num_containers">N/A</span> containers running</p></div> <div class="caaas_status_line">
<h6>&copy; Copyright 2015 by <a href="http://distsysgroup.wordpress.com/">DSG</a></h6> <p>
<span id="app_name"><a href="{{ url_for("web_status") }}">CAaaS</a></span>
<span id="status">
[<span id="num_nodes">N/A</span> swarm nodes, <span id="num_containers">N/A</span> active containers]
</span>
</p>
</div>
<div class="copyright">
<h6>&copy; Copyright 2015 by <a href="http://distsysgroup.wordpress.com/">DSG</a></h6>
</div>
{% endblock %} {% endblock %}
</div> </div>
</body> </body>
......
{% extends "base_user.html" %} {% extends "base.html" %}
{% block title %}Home{% endblock %} {% block title %}Home{% endblock %}
{% block content %} {% block content %}
<p>Start an activity:</p>
<ul>
<li><a href="{{ url_for("web_notebook", user_id=user_id) }}">Give me a Spark notebook</a></li>
<li><a href="{{ url_for("web_spark_submit", user_id=user_id) }}">Submit a Spark application</a></li>
</ul>
<p>My activities:</p> <div id="activities">
<ul> <a class="activity" href="{{ url_for("web_notebook", user_id=user_id) }}">Give me a Spark notebook</a>
<li><a href="{{ url_for("web_user_apps", user_id=user_id) }}">Applications</a></li>
</ul>
<p>Cluster status:</p> <a class="activity" href="{{ url_for("web_spark_submit", user_id=user_id) }}">Submit a Spark application</a>
<ul>
<li><a href="{{ url_for("web_status") }}">Overview</a></li>
</ul>
<p>Your email address used for notifications is: {{ email }}</p> <a class="activity" href="{{ url_for("web_user_apps", user_id=user_id) }}">History</a>
</div>
<div class="user_info">
<p>Email address used for notifications: <a href="mailto:{{ email }}">{{ email }}</a></p>
</div>
{% endblock %} {% endblock %}
\ No newline at end of file
...@@ -11,11 +11,12 @@ function process() ...@@ -11,11 +11,12 @@ function process()
</script> </script>
<form onSubmit="return process();"> <form onSubmit="return process();">
<label for="user">Type your username to start:</label> <label for="user">Type your email address to start:</label>
<input id="user" autofocus required type="email" autocomplete="on" name="email"> <input id="user" autofocus required type="email" autocomplete="on" name="email" size="30">
<input type="submit" value="Start"> <input type="submit" value="Start">
</form> </form>
<p>To create a new user, just type a new username in the box above, only lowercase letters are accepted.</p> <p>If you are a new user, just type your email address in the box above, it will be used to send notifications about the applications
you start.</p>
{% endblock %} {% endblock %}
\ No newline at end of file
{% extends "base_user.html" %} {% extends "base_user.html" %}
{% block title %}Spark notebook{% endblock %} {% block title %}Spark notebook{% endblock %}
{% block content %} {% block content %}
<h2>Notebook</h2> <h2>Spark Notebook</h2>
<p>You notebook is available at: <a href="{{ notebook_address }}">{{ notebook_address }}</a></p> <p>You notebook is available at: <a href="{{ notebook_address }}">{{ notebook_address }}</a></p>
<p>Please note that notebooks are automatically terminated {{ max_age }} hours after the last time they are accessed. <p>Please note that notebooks are <b>automatically terminated {{ max_age }} hours after the last access</b>.
A warning email will be sent {{ wrn_time }} hours before.</p> A warning email will be sent {{ wrn_time }} hours before this happens.</p>
{% endblock %} {% endblock %}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment