4 files changed, 75 insertions, 2 deletions
diff --git a/src/command-line/index.html b/src/command-line/index.html
new file mode 100644
index 0000000..e9e4123
--- /dev/null
+++ b/src/command-line/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset=utf-8 />
+    <title>VimVixen command-line</title>
+    <script src='command-line.js'></script>
+  </head>
+  <body class='vimvixen-command-line'>
+    <div>
+      <p class='vimvixen-command-line-title'></p>
+      <div class='vimvixen-command-line-line'>
+        <i class='vimvixen-command-line-line-prompt'></i><input class='vimvixen-command-line-line-input'></input>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/src/command-line/index.js b/src/command-line/index.js
new file mode 100644
index 0000000..67aac61
--- /dev/null
+++ b/src/command-line/index.js
@@ -0,0 +1 @@
+import './index.scss';
diff --git a/src/command-line/index.scss b/src/command-line/index.scss
new file mode 100644
index 0000000..2256bf2
--- /dev/null
+++ b/src/command-line/index.scss
@@ -0,0 +1,42 @@
+html, body, * {
+  margin: 0;
+  padding: 0;
+}
+
+.vimvixen-command-line {
+  border-top: 1px solid gray;
+  bottom: 0;
+  margin: 0;
+  padding: 0;
+
+  &-title {
+    background-color: lightgray;
+    font-weight: bold;
+    margin: 0;
+    padding: 0;
+  }
+
+  &-line {
+    background-color: white;
+    display: flex;
+
+    @mixin input-style {
+      font-style: normal;
+      font-family: monospace;
+      font-size: 12px;
+    }
+
+    &-prompt:before {
+      content: ':';
+
+      @include input-style;
+    }
+
+    &-input {
+      border: none;
+      flex-grow: 1;
+
+      @include input-style;
+    }
+  }
+}
diff --git a/webpack.config.js b/webpack.config.js
index 1c80236..5019366 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,3 +1,4 @@
+var HtmlWebpackPlugin = require('html-webpack-plugin');
 var path = require('path');
 
 const src = path.resolve(__dirname, 'src');
@@ -6,7 +7,8 @@ const dist = path.resolve(__dirname, 'build');
 module.exports = {
   entry: {
     index: path.join(src, 'content'),
-    background: path.join(src, 'background')
+    background: path.join(src, 'background'),
+    'command-line': path.join(src, 'command-line')
   },
 
   output: {
@@ -28,10 +30,22 @@ module.exports = {
         test: /\.css$/,
         loader: 'style-loader!css-loader',
       },
+      {
+        test: /\.scss$/,
+        loader: 'style-loader!css-loader!sass-loader?sourceMap=true'
+      },
     ]
   },
 
   resolve: {
     extensions: [ '.js' ]
-  }
+  },
+
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.join(src, 'command-line', 'index.html'),
+      filename: path.join(dist, 'command-line.html'),
+      inject: false
+    })
+  ]
 };