Binary file img/screenshot1.png has changed

Binary file img/screenshot2.png has changed

Binary file img/screenshot3.png has changed

Binary file img/screenshot4.png has changed

--- a/index.html	Tue Mar 10 00:55:15 2015 -0600
+++ b/index.html	Thu May 14 13:09:38 2015 -0400
@@ -15,25 +15,6 @@
                 </div>
 
                 <h2 id="main">Thermostat: Serviceability and Monitoring for OpenJDK</h2>
-
-		<p>Thermostat is an instrumentation tool for the Hotspot JVM,
-with support for monitoring multiple JVM instances on multiple hosts,
-optionally in a cloud environment. The name Thermostat is intended as a play on
-words: Thermostat is to Hotspot much as IcedTea is to Java.</p>
-                <p>Some goals of Thermostat are:</p>
-                <ul>
-		  <li>We want a tool that allows users of IcedTea/OpenJDK to
-                      monitor running JVMs, especially remote JVMs.</li>
-
-		  <li>Both high level (uptime, cpu and memory usage) and low
-                      level (including hotspot's perf data) information should
-                      be available through the tool.</li>
-
-		  <li>The tool should be usable in a production environment,
-                      with minimal overhead. </li>
-                </ul>
-
-                <div>
                     <div id="links-box">
                         <h2>Links</h2>
 
@@ -54,13 +35,49 @@
                         </ul>
 
                     </div>
+
+		<p>Thermostat is an instrumentation tool for the Hotspot JVM,
+with support for monitoring multiple JVM instances on multiple hosts,
+optionally in a cloud environment. The name Thermostat is intended as a play on
+words: Thermostat is to Hotspot much as IcedTea is to Java.</p>
+
+                <!-- there's no space between 'a' and 'figure'
+                elements to avoid empty text being underlined -->
+                <a href="img/screenshot1.png"><figure class="screenshot">
+                    <img src="img/screenshot1.png"/>
+                    <figcaption>Examine memory regions and their sizes</figcaption>
+                </figure></a>
+
+                <a href="img/screenshot2.png"><figure class="screenshot">
+                    <img src="img/screenshot2.png"/>
+                    <figcaption>Visualize thread states</figcaption>
+                </figure></a>
+
+                <a href="img/screenshot3.png"><figure class="screenshot">
+                    <img src="img/screenshot3.png"/>
+                    <figcaption>Dump, browse and search the Java heap</figcaption>
+                </figure></a>
+
+                <a href="img/screenshot4.png"><figure class="screenshot">
+                    <img src="img/screenshot4.png"/>
+                    <figcaption>See garbage collections</figcaption>
+                </figure></a>
+
+                <iframe width="560" height="315" src="https://www.youtube.com/embed/l4CZekgyuYI" frameborder="0" allowfullscreen></iframe>
+
+                <div>
                     <h2>Features</h2>
 
                     <ul>
                         <li>Local and remote monitoring (threads, numa, heap-analysis, garbage collection, etc.)</li>
+                        <li>Records and visualizes both high level (uptime, cpu and memory usage)
+                          and low level (HotSpot's perf) data</li>
+                        <li>Designed to work well against OpenJDK and IcedTea</li>
                         <li>Stand-alone Swing GUI client</li>
                         <li>Web layer for increased security</li>
                         <li>Command line interface client</li>
+                        <li>Usable in production environment, with
+                          minimal overhead</li>
                     </ul>
 
                     <h2>Basic System Requirements</h2>

--- a/style/main-style.css	Tue Mar 10 00:55:15 2015 -0600
+++ b/style/main-style.css	Thu May 14 13:09:38 2015 -0400
@@ -64,3 +64,26 @@
 body {
   padding: 20px;
 }
+
+a figure.screenshot {
+  display: inline-block;
+  text-align: center;
+  margin: 10px;
+}
+
+a figure.screenshot img {
+  height: 200px;
+  width: 300px;
+  transition: transform 0.2s;
+  -moz-transition: -moz-transform 0.2s;
+  -webkit-transition: -webkit-transform 0.2s;
+  -ms-transition: -ms-transform 0.2s;
+  -o-transition: -o-transform 0.2s;
+}
+a figure.screenshot img:hover {
+  transform: scale(1.2);
+  -moz-transform: scale(1.2);
+  -webkit-transform: scale(1.2);
+  -ms-transform: scale(1.2);
+  -o-transform: scale(1.2);
+}