1 files changed, 83 insertions, 2 deletions
diff --git a/html/display-panel.html b/html/display-panel.html
index 5e5580e..9b6d619 100644
--- a/html/display-panel.html
+++ b/html/display-panel.html
@@ -6,9 +6,90 @@
 <html>
   <head>
     <meta charset="utf-8"/>
-    <title>Myext popup</title>
+    <title>Hachette - page settings</title>
+    <style>
+      input[type="radio"], input[type="checkbox"] {
+	  display: none;
+      }
+
+      body {
+	  width: 300px;
+	  height: 300px;
+      }
+
+      .show_next:not(:checked)+* {
+	  display: none;
+      }
+
+      .hide {
+	  display: none;
+      }
+
+      #possible_patterns_chbx:not(:checked)+label span#triangle:first-child+span,
+      #possible_patterns_chbx:not(:checked)+label+*,
+      #possible_patterns_chbx:checked+label span#triangle:first-child {
+	  display: none;
+      }
+
+      #container_for_injected>#none_injected:not(:last-child) {
+	  display: none;
+      }
+
+      input#connected_chbx:checked+div+h3 {
+	  display: none;
+      }
+    </style>
   </head>
   <body>
-    <button id="settings_but" type="button">Settings</button>_POPUPSCRIPTS_
+    <!-- The invisible div below is for elements that will be cloned. -->
+    <div class="hide">
+      <li id="pattern_li_template">
+	<span></span>
+	<button>View in settings</button>
+      </li>
+    </div>
+
+    <h2 id="page_url_heading"></h2>
+
+    <input id="show_privileged_notice_chbx" type="checkbox" class="show_next"></input>
+    <h3>Privileged page</h3>
+
+    <input id="show_page_state_chbx" type="checkbox" class="show_next"></input>
+    <div>
+      <input id="possible_patterns_chbx" type="checkbox"></input>
+      <label for="possible_patterns_chbx">
+	<h3>
+	  <span id="triangle">&#x23F5;</span><span>&#x23F7;</span>
+	  Possible patterns
+	</h3>
+      </label>
+      <ul id="possible_patterns"></ul>
+
+      <input id="connected_chbx" type="checkbox" class="show_next"></input>
+      <div>
+	<h3>
+	  Matched pattern: <span id="pattern">...</span>
+	  <button id="view_pattern" class="hide">
+	  View in settings
+	  </button>
+	</h3>
+	<h3>
+	  Blocked: <span id="blocked">...</span>
+	</h3>
+	<h3>
+	  Payload: <span id="payload">...</span>
+	  <button id="view_payload" class="hide">
+	    View in settings
+	  </button>
+	</h3>
+	<h3>Injected</h3>
+	<div id="container_for_injected">
+	  <span id="none_injected">None</span>
+	</div>
+      </div>
+      <h3>Trying to connect..<input id="loading_chbx" type="checkbox" class="show_next"></input><span>.</span></h3>
+    </div>
+
+    <button id="settings_but" type="button" style="margin-top: 20px;">Settings</button>_POPUPSCRIPTS_
   </body>
 </html>