json_extract.html in soaspec-0.2.19

- old
+ new
@@ -1,38 +1,52 @@
 <!DOCTYPE html>
 <html>
 <head>
     <title>JSON Exchange extractors</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="css/bootstrap.css" type="text/css" charset="utf-8" />
+    <link rel="stylesheet" href="css/bootstrap-theme.css" type="text/css" charset="utf-8" />
     <script src="js/angular.min.js"></script>
     <style>
         .highlighted {
             background: yellow;
         }
     </style>
 </head>
 <body>
-
-<h1>Extract value(s) from JSON response body</h1>
-
-<div ng-app="codeDemo" ng-controller="extract">
-    <h2>Sample JSON response body</h2>
-    <p ng-repeat="item in sampleData | filter:myData[index].highlight"
-         ng-bind-html="item | highlight:myData[index].highlight">
+<main class="container-fluid">
+    <h1>Extract value(s) from JSON response body</h1>
+    <p>
+        Demonstrating how to extract information out of a JSON response body from an Exchange object
     </p>
-    <p>Method:
-        <select ng-model="index">
-            <option ng-repeat="option in myData" value="{{$index}}">{{option.desc}}
-            </option>
-        </select>
-    </p>
-    <p>Code:
-        <code>{{ myData[index].method }}</code>
-    </p>
-    <p>Result:
-        <code>{{ myData[index].result }}</code>
-    </p>
-</div>
+    <div ng-app="codeDemo" ng-controller="extract">
+        <h2>Sample JSON response body</h2>
+        <code ng-repeat="item in sampleData | filter:myData[index].highlight"
+             ng-bind-html="item | highlight:myData[index].highlight">
+        </code>
+        <dl>
+            <dt>Method:</dt>
+            <dd>
+            <select ng-model="index">
+                <option ng-repeat="option in myData" value="{{$index}}">{{option.desc}}
+                </option>
+            </select>
+            </dd>
+        </dl>
+        <dl>
+            <dt>Code:</dt>
+            <dd>
+                <kbd>{{ myData[index].method }}</kbd>
+            </dd>
+        </dl>
+        <dl>
+            <dt>Result:</dt>
+            <dd>
+                <code>{{ myData[index].result }}</code>
+            </dd>
+        </dl>
+    </div>
+</main>
 <script>
     var app = angular.module('codeDemo', []);
     app.controller('extract', function($scope, $http) {
         $http.get("json_extract.json").then(function(response) {
             $scope.myData = response.data.methods;
\ No newline at end of file