ui improvements

diff --git a/static/css/base-site.css b/static/css/base-site.css
index 7208c226de6091293d4a65935b8b452bbf6b6948..9979e069560691916aa6dd1bb6f56b7a4a3d3427 100644 (file)
--- a/static/css/base-site.css
+++ b/static/css/base-site.css
@@ -48,7 +48,6 @@ div.header {
     background-color: rgba(64, 64, 64, 0.5);
     height: 50px;
     position: relative;
-    z-index: 10;
 }
 
 div.header-container {
@@ -93,7 +92,7 @@ div.settings.open {
 }
 
 div.settings-container {
-    padding-top: 60px;
+    padding-top: 10px;
     display: none;
     white-space: nowrap;
 }
@@ -102,6 +101,11 @@ div.settings.open div.settings-container {
     display: block;
 }
 
+div.settings-top-bar {
+    height: 50px;
+    background-color: #414141;
+}
+
 div.settings-section-title {
     position: relative;
     text-align: right;
@@ -130,14 +134,40 @@ span.settings-item-label {
     font-size: 0.9em;
 }
 
-input.settings-item-value {
-    
+select.video-device {
+    padding: 4px 1.5em 4px 4px;
+    vertical-align: middle;
+    font-size: 20px;
 }
 
-select.video-device {
-    position: absolute;
-    left: 2px;
-    top: 2px;
+div.check-box.section {
+    margin: 0px;
+    float: left;
+}
+
+div.check-box.top-bar {
+    margin: 10px;
+    float: right;
+    width: 90px;
+    height: 30px;
+}
+
+div.check-box.top-bar div.check-box-button {
+    line-height: 30px;
+}
+
+div.check-box.top-bar div.check-box-button span.check-box-text {
+    font-size: 20px;
+}
+
+div.check-box.section div.check-box-button,
+div.check-box.top-bar div.check-box-button {
+    background-color: #515151;
+}
+
+div.check-box.on.section div.check-box-button,
+div.check-box.on.top-bar div.check-box-button {
+    background-color: #3498db;
 }
 
 
@@ -193,6 +223,7 @@ a {
 img.settings-button {
     margin: 2px;
     cursor: pointer;
+    vertical-align: middle;
 }
 
 div.logo {

diff --git a/static/css/ui.css b/static/css/ui.css
index 3db6f4f737a4330144c54a0c2ffbf5d3d588ae92..faeb43efd972b0172ba129f72052375ca0cc92a1 100644 (file)
--- a/static/css/ui.css
+++ b/static/css/ui.css
@@ -43,8 +43,8 @@ div.check-box:HOVER {
 }
 
 div.check-box-button {
-    width: 1.25em;
-    height: 1em;
+    width: 50%;
+    height: 100%;
     left: 0px;
     background-color: #414141;
     color: #aaaaaa;
@@ -55,14 +55,13 @@ div.check-box-button {
 }
 
 span.check-box-text {
-    line-height: 1em;
     font-size: 0.5em;
     font-weight: bold;
-    vertical-align: middle;
+    vertical-align: top;
 }
 
 div.check-box.on div.check-box-button {
-    left: 1.25em;
+    left: 50%;
     background-color: #3498db;
     color: white;
 }

diff --git a/static/js/base.js b/static/js/base.js
index af99f914b8558ddc7ccc615e9516512ee01eb1da..6795993e045138da3b443cf907251d7b3d783104 100644 (file)
--- a/static/js/base.js
+++ b/static/js/base.js
@@ -4,15 +4,11 @@ function initUI() {
         makeCheckBox($(this));
     });
 
-//    $('select.styled').each(function () {
-//        makeComboBox($(this));
-//    });
-    
-    makeSlider($('#device-brightness'), 0, 100, 0, null, 5, 0, '%');
-    makeSlider($('#device-contrast'), 0, 100, 0, null, 5, 0, '%');
-    makeSlider($('#device-saturation'), 0, 100, 0, null, 5, 0, '%');
-    makeSlider($('#device-hue'), 0, 100, 0, null, 5, 0, '%');
-    makeSlider($('#device-framerate'), 1, 30, 0, [
+    makeSlider($('#brightnessSlider'), 0, 100, 0, null, 5, 0, '%');
+    makeSlider($('#contrastSlider'), 0, 100, 0, null, 5, 0, '%');
+    makeSlider($('#saturationSlider'), 0, 100, 0, null, 5, 0, '%');
+    makeSlider($('#hueSlider'), 0, 100, 0, null, 5, 0, '%');
+    makeSlider($('#framerateSlider'), 1, 30, 0, [
         {value: 1, label: '1'},
         {value: 5, label: '5'},
         {value: 10, label: '10'},
@@ -21,7 +17,7 @@ function initUI() {
         {value: 25, label: '25'},
         {value: 30, label: '30'}
     ], null, 0);
-    makeSlider($('#streaming-framerate'), 1, 30, 0, [
+    makeSlider($('#streamingFramerateSlider'), 1, 30, 0, [
         {value: 1, label: '1'},
         {value: 5, label: '5'},
         {value: 10, label: '10'},
@@ -30,11 +26,11 @@ function initUI() {
         {value: 25, label: '25'},
         {value: 30, label: '30'}
     ], null, 0);
-    makeSlider($('#streaming-quality'), 0, 100, 0, null, 5, 0, '%');
-    makeSlider($('#image-quality'), 0, 100, 0, null, 5, 0, '%');
-    makeSlider($('#movie-quality'), 0, 100, 0, null, 5, 0, '%');
-    makeSlider($('#motion-frame-change-threshold'), 0, 10000, 0, null, 3, 0, 'px');
-    makeSlider($('#motion-noise-level'), 0, 100, 0, null, 5, 0, '%');
+    makeSlider($('#streamingQualitySlider'), 0, 100, 0, null, 5, 0, '%');
+    makeSlider($('#imageQualitySlider'), 0, 100, 0, null, 5, 0, '%');
+    makeSlider($('#movieQualitySlider'), 0, 100, 0, null, 5, 0, '%');
+    makeSlider($('#frameChangeThresholdSlider'), 0, 10000, 0, null, 3, 0, 'px');
+    makeSlider($('#noiseLevelSlider'), 0, 100, 0, null, 5, 0, '%');
 }
 
 function handleDocumentReady() {

diff --git a/static/js/ui.js b/static/js/ui.js
index 7c9f0dae2ecae314c2162194299479b6e6d3b644..7e075cbbbf798283a360472b1e32822df5138803 100644 (file)
--- a/static/js/ui.js
+++ b/static/js/ui.js
@@ -17,7 +17,13 @@ function makeCheckBox($input) {
     buttonDiv.append(text);
     mainDiv.append(buttonDiv);
     
-    $input.parent().append(mainDiv);
+    /* transfer the CSS classes */
+    mainDiv[0].className += ' ' + $input[0].className;
+    
+    /* add the element */
+    $input.after(mainDiv);
+    
+    /* add event handers */
     $input.change(function () {
         if (this.checked) {
             setOn();
@@ -187,11 +193,14 @@ function makeSlider($input, minVal, maxVal, snapMode, ticks, ticksNumber, decima
         slider.attr('title', '' + $input.val() + unit);
     }
     
+    /* transfer the CSS classes */
+    slider[0].className += ' ' + $input[0].className;
+    
     /* handle input events */
     $input.change(input2slider).change();
     
     /* add the slider to the parent of the input */
-    $input.parent().append(slider);
+    $input.after(slider);
     
     /* make the slider focusable */
     slider[0].tabIndex = 0;

diff --git a/templates/base-site.html b/templates/base-site.html
index c1fce0a1abc144e128f4d390cb1870798b608437..616d3c98319a84805a69832c180e3d02347b18c8 100644 (file)
--- a/templates/base-site.html
+++ b/templates/base-site.html
@@ -2,8 +2,8 @@
 
 {% block style %}
     {{super()}}
-    <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}css/base-site.css" />
     <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}css/ui.css" />
+    <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}css/base-site.css" />
 {% endblock %}
 
 {% block script %}
@@ -25,73 +25,70 @@
     </div>
     <div class="page">
         <div class="settings">
+            <div class="settings-top-bar">
+                <img class="settings-button" src="{{STATIC_URL}}img/settings.png">
+                <select class="video-device styled" id="videoDeviceSelect">
+                    <option>USB Camera 2.0</option>
+                    <option>A4Tech Camera</option>
+                </select>
+                <input type="checkbox" class="styled top-bar" id="generalSwitch">
+            </div>
             <div class="settings-container">
                 <div class="settings-section-title">General Settings</div>
                 <table class="settings">
                     <tr>
-                        <td class="settings-item-label"><span class="settings-item-label">Enable motionEye</span></td>
-                        <td class="settings-item-value"><input type="checkbox" class="settings-item-value styled"></td>
+                        <td class="settings-item-label"><span class="settings-item-label">Show Advanced Settings</span></td>
+                        <td class="settings-item-value"><input type="checkbox" class="styled general" id="showAdvancedSwitch"></td>
                         <td class="settings-item-value"><span class="help-mark">?</span></td>
                     </tr>
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Target Directory</span></td>
-                        <td class="settings-item-value"><input type="text" class="settings-item-value styled"></td>
+                        <td class="settings-item-value"><input type="text" class="styled general" id="targetDirectoryEntry"></td>
                         <td class="settings-item-value"><span class="help-mark">?</span></td>
                     </tr>
                 </table>
                 
-                <div class="settings-section-title">
-                    <select class="video-device styled">
-                        <option>USB Camera 2.0</option>
-                        <option>A4Tech Camera</option>
-                    </select>
-                    Video Device
-                </div>
+                <div class="settings-section-title"><input type="checkbox" class="styled section">Video Device</div>
                 <table class="settings">
-                    <tr>
-                        <td class="settings-item-label"><span class="settings-item-label">Enable Video Device</span></td>
-                        <td class="settings-item-value"><input type="checkbox" class="settings-item-value styled"></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
-                    </tr>
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Camera Name</span></td>
-                        <td class="settings-item-value"><input type="text" class="settings-item-value styled" name="device-name" id="device-name" placeholder="camera name..."></td>
+                        <td class="settings-item-value"><input type="text" class="styled device" id="deviceNameEntry" placeholder="camera name..."></td>
                         <td class="settings-item-value"><span class="help-mark">?</span></td>
                     </tr>
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Light Switch Detection</span></td>
-                        <td class="settings-item-value"><input type="checkbox" class="settings-item-value styled"></td>
+                        <td class="settings-item-value"><input type="checkbox" class="styled device" id="lightSwitchDetectSwitch"></td>
                         <td class="settings-item-value"><span class="help-mark">?</span></td>
                     </tr>
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Automatic Brightness</span></td>
-                        <td class="settings-item-value"><input type="checkbox" class="settings-item-value styled"></td>
+                        <td class="settings-item-value"><input type="checkbox" class="styled device" id="autoBrightnessSwitch"></td>
                         <td class="settings-item-value"><span class="help-mark">?</span></td>
                     </tr>
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Brightness</span></td>
-                        <td class="settings-item-value"><input type="text" class="settings-item-value range styled" name="device-brightness" id="device-brightness"></td>
+                        <td class="settings-item-value"><input type="text" class="range styled device" id="brightnessSlider"></td>
                         <td class="settings-item-value"><span class="help-mark">?</span></td>
                     </tr>
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Contrast</span></td>
-                        <td class="settings-item-value"><input type="text" class="settings-item-value range styled" name="device-contrast" id="device-contrast"></td>
+                        <td class="settings-item-value"><input type="text" class="range styled device" id="contrastSlider"></td>
                         <td class="settings-item-value"><span class="help-mark">?</span></td>
                     </tr>
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Saturation</span></td>
-                        <td class="settings-item-value"><input type="text" class="settings-item-value range styled" name="device-saturation" id="device-saturation"></td>
+                        <td class="settings-item-value"><input type="text" class="range styled device" id="saturationSlider"></td>
                         <td class="settings-item-value"><span class="help-mark">?</span></td>
                     </tr>
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Hue</span></td>
-                        <td class="settings-item-value"><input type="text" class="settings-item-value range styled" name="device-hue" id="device-hue"></td>
+                        <td class="settings-item-value"><input type="text" class="range styled device" id="hueSlider"></td>
                         <td class="settings-item-value"><span class="help-mark">?</span></td>
                     </tr>
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Video Resolution</span></td>
                         <td class="settings-item-value">
-                            <select class="video-resolution styled">
+                            <select class="video-resolution styled device" id="resolutionSelect">
                                 <option>640 x 480</option>
                                 <option>1024 x 768</option>
                             </select>
@@ -101,7 +98,7 @@
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Video Rotation</span></td>
                         <td class="settings-item-value">
-                            <select class="video-resolution styled">
+                            <select class="video-resolution styled device" id="rotationSelect">
                                 <option>0&deg;</option>
                                 <option>90&deg;</option>
                                 <option>180&deg;</option>
@@ -112,56 +109,82 @@
                     </tr>
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Frame Rate</span></td>
-                        <td class="settings-item-value"><input type="text" class="settings-item-value range styled" name="device-framerate" id="device-framerate"></td>
+                        <td class="settings-item-value"><input type="text" class="range styled device" id="framerateSlider"></td>
                         <td class="settings-item-value"><span class="help-mark">?</span></td>
                     </tr>
                 </table>
 
-                <div class="settings-section-title">Video Streaming</div>
+                <div class="settings-section-title"><input type="checkbox" class="styled section">Text Overlay</div>
                 <table class="settings">
                     <tr>
-                        <td class="settings-item-label"><span class="settings-item-label">Enable Video Streaming</span></td>
-                        <td class="settings-item-value"><input type="checkbox" class="settings-item-value styled"></td>
+                        <td class="settings-item-label"><span class="settings-item-label">Left Text</span></td>
+                        <td class="settings-item-value">
+                            <select class="styled text-overlay" id="leftTextSelect">
+                                <option>Camera Name</option>
+                                <option>Timestamp</option>
+                                <option>Custom Text</option>
+                            </select>
+                        </td>
+                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                    </tr>
+                    <tr>
+                        <td class="settings-item-label"></td>
+                        <td class="settings-item-value"><input type="text" class="styled text-overlay" id="leftTextEntry" placeholder="custom text..."></td>
                         <td class="settings-item-value"><span class="help-mark">?</span></td>
                     </tr>
+                    <tr>
+                        <td class="settings-item-label"><span class="settings-item-label">Right Text</span></td>
+                        <td class="settings-item-value">
+                            <select class="styled text-overlay" id="rightTextSelect">
+                                <option>Camera Name</option>
+                                <option>Timestamp</option>
+                                <option>Custom Text</option>
+                            </select>
+                        </td>
+                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                    </tr>
+                    <tr>
+                        <td class="settings-item-label"></td>
+                        <td class="settings-item-value"><input type="text" class="styled text-overlay" id="rightTextEntry" placeholder="custom text..."></td>
+                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                    </tr>
+                </table>
+
+                <div class="settings-section-title"><input type="checkbox" class="styled section">Video Streaming</div>
+                <table class="settings">
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Streaming Frame Rate</span></td>
-                        <td class="settings-item-value"><input type="text" class="settings-item-value range styled" name="streaming-framerate" id="streaming-framerate"></td>
+                        <td class="settings-item-value"><input type="text" class="range styled streaming" id="streamingFramerateSlider"></td>
                         <td class="settings-item-value"><span class="help-mark">?</span></td>
                     </tr>
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Streaming Quality</span></td>
-                        <td class="settings-item-value"><input type="text" class="settings-item-value range styled" name="streaming-quality" id="streaming-quality"></td>
+                        <td class="settings-item-value"><input type="text" class="range styled streaming" id="streamingQualitySlider"></td>
                         <td class="settings-item-value"><span class="help-mark">?</span></td>
                     </tr>
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Motion Optimization</span></td>
-                        <td class="settings-item-value"><input type="checkbox" class="settings-item-value styled"></td>
+                        <td class="settings-item-value"><input type="checkbox" class="styled streaming" id="motionOptimizationSwitch"></td>
                         <td class="settings-item-value"><span class="help-mark">?</span></td>
                     </tr>
                 </table>
                 
-                <div class="settings-section-title">Still Images</div>
+                <div class="settings-section-title"><input type="checkbox" class="styled section">Still Images</div>
                 <table class="settings">
-                    <tr>
-                        <td class="settings-item-label"><span class="settings-item-label">Enable Still Images</span></td>
-                        <td class="settings-item-value"><input type="checkbox" class="settings-item-value styled"></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
-                    </tr>
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Image File Name</span></td>
-                        <td class="settings-item-value"><input type="text" class="settings-item-value styled" placeholder="file name pattern..."></td>
+                        <td class="settings-item-value"><input type="text" class="styled still-images" id="imageFileNameEntry" placeholder="file name pattern..."></td>
                         <td class="settings-item-value"><span class="help-mark">?</span></td>
                     </tr>
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Image Quality</span></td>
-                        <td class="settings-item-value"><input type="text" class="settings-item-value range styled" name="image-quality" id="image-quality"></td>
+                        <td class="settings-item-value"><input type="text" class="range styled still-images" id="imageQualitySlider"></td>
                         <td class="settings-item-value"><span class="help-mark">?</span></td>
                     </tr>
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Capture Mode</span></td>
                         <td class="settings-item-value">
-                            <select class="styled">
+                            <select class="styled still-images" id="captureModeSelect">
                                 <option>Motion Triggered</option>
                                 <option>Automated Snapshots</option>
                                 <option>All Frames</option>
@@ -171,26 +194,34 @@
                     </tr>
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Snapshot Interval</span></td>
-                        <td class="settings-item-value"><input type="text" class="settings-item-value styled number" name="image-snapshot-interval" id="image-snapshot-interval"></td>
+                        <td class="settings-item-value"><input type="text" class="styled number still-images" id="snapshotIntervalEntry"></td>
                         <td class="settings-item-value"><span class="help-mark">?</span></td>
                     </tr>
                 </table>
                 
-                <div class="settings-section-title">Motion Movies</div>
+                <div class="settings-section-title"><input type="checkbox" class="styled section">Motion Movies</div>
                 <table class="settings">
                     <tr>
-                        <td class="settings-item-label"><span class="settings-item-label">Enable Motion Movies</span></td>
-                        <td class="settings-item-value"><input type="checkbox" class="settings-item-value styled"></td>
+                        <td class="settings-item-label"><span class="settings-item-label">Movie File Name</span></td>
+                        <td class="settings-item-value"><input type="text" class="styled motion-movies" id="movieFileNameEntry" placeholder="file name pattern..."></td>
                         <td class="settings-item-value"><span class="help-mark">?</span></td>
                     </tr>
                     <tr>
-                        <td class="settings-item-label"><span class="settings-item-label">Movie File Name</span></td>
-                        <td class="settings-item-value"><input type="text" class="settings-item-value styled" placeholder="file name pattern..."></td>
+                        <td class="settings-item-label"><span class="settings-item-label">Movie Quality</span></td>
+                        <td class="settings-item-value"><input type="text" class="range styled motion-movies" id="movieQualitySlider"></td>
                         <td class="settings-item-value"><span class="help-mark">?</span></td>
                     </tr>
                     <tr>
-                        <td class="settings-item-label"><span class="settings-item-label">Movie Quality</span></td>
-                        <td class="settings-item-value"><input type="text" class="settings-item-value range styled" name="movie-quality" id="movie-quality"></td>
+                        <td class="settings-item-label"><span class="settings-item-label">Preserve Movies</span></td>
+                        <td class="settings-item-value">
+                            <select class="styled motion-movies" id="preserveSelect">
+                                <option>For One Day</option>
+                                <option>For One Week</option>
+                                <option>For One Month</option>
+                                <option>For One Year</option>
+                                <option>Forever</option>
+                            </select>
+                        </td>
                         <td class="settings-item-value"><span class="help-mark">?</span></td>
                     </tr>
                 </table>
@@ -199,97 +230,51 @@
                 <table class="settings">
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Show Frame Changes</span></td>
-                        <td class="settings-item-value"><input type="checkbox" class="settings-item-value styled"></td>
+                        <td class="settings-item-value"><input type="checkbox" class="styled motion-detection" id="showFrameChangesSwitch"></td>
                         <td class="settings-item-value"><span class="help-mark">?</span></td>
                     </tr>
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Frame Change Threshold</span></td>
-                        <td class="settings-item-value"><input type="text" class="settings-item-value range styled" name="motion-frame-change-threshold" id="motion-frame-change-threshold"></td>
+                        <td class="settings-item-value"><input type="text" class="range styled motion-detection" id="frameChangeThresholdSlider"></td>
                         <td class="settings-item-value"><span class="help-mark">?</span></td>
                     </tr>
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Automatic Noise Detection</span></td>
-                        <td class="settings-item-value"><input type="checkbox" class="settings-item-value styled"></td>
+                        <td class="settings-item-value"><input type="checkbox" class="styled motion-detection" id="autoNoiseDetectSwitch"></td>
                         <td class="settings-item-value"><span class="help-mark">?</span></td>
                     </tr>
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Noise Level</span></td>
-                        <td class="settings-item-value"><input type="text" class="settings-item-value range styled" name="motion-noise-level" id="motion-noise-level"></td>
+                        <td class="settings-item-value"><input type="text" class="range styled motion-detection" id="noiseLevelSlider"></td>
                         <td class="settings-item-value"><span class="help-mark">?</span></td>
                     </tr>
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Motion Gap</span></td>
-                        <td class="settings-item-value"><input type="text" class="settings-item-value number styled" name="motion-gap" id="motion-gap"></td>
+                        <td class="settings-item-value"><input type="text" class="number styled motion-detection" id="gapEntry"></td>
                         <td class="settings-item-value"><span class="help-mark">?</span></td>
                     </tr>
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Frames Captured Before</span></td>
-                        <td class="settings-item-value"><input type="text" class="settings-item-value number styled" name="motion-pre-capture" id="motion-pre-capture"></td>
+                        <td class="settings-item-value"><input type="text" class="number styled motion-detection" id="preCaptureEntry"></td>
                         <td class="settings-item-value"><span class="help-mark">?</span></td>
                     </tr>
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Frames Captured After</span></td>
-                        <td class="settings-item-value"><input type="text" class="settings-item-value number styled" name="motion-post-capture" id="motion-post-capture"></td>
+                        <td class="settings-item-value"><input type="text" class="number styled motion-detection" id="postCaptureEntry"></td>
                         <td class="settings-item-value"><span class="help-mark">?</span></td>
                     </tr>
                 </table>
                 
-                <div class="settings-section-title">Motion Notifications</div>
+                <div class="settings-section-title"><input type="checkbox" class="styled section">Motion Notifications</div>
                 <table class="settings">
-                    <tr>
-                        <td class="settings-item-label"><span class="settings-item-label">Enable Email Notifications</span></td>
-                        <td class="settings-item-value"><input type="checkbox" class="settings-item-value styled"></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
-                    </tr>
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Email Address</span></td>
-                        <td class="settings-item-value"><input type="text" class="settings-item-value styled" placeholder="email address..."></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
-                    </tr>
-                    <tr>
-                        <td class="settings-item-label"><span class="settings-item-label">Enable SMS Notifications</span></td>
-                        <td class="settings-item-value"><input type="checkbox" class="settings-item-value styled"></td>
+                        <td class="settings-item-value"><input type="text" class="styled notifications" id="emailAddressEntry" placeholder="email address..."></td>
                         <td class="settings-item-value"><span class="help-mark">?</span></td>
                     </tr>
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Phone Number</span></td>
-                        <td class="settings-item-value"><input type="text" class="settings-item-value styled" placeholder="phone number..."></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
-                    </tr>
-                </table>
-
-                <div class="settings-section-title">Text Overlay</div>
-                <table class="settings">
-                    <tr>
-                        <td class="settings-item-label"><span class="settings-item-label">Left Text</span></td>
-                        <td class="settings-item-value">
-                            <select class="styled">
-                                <option>Camera Name</option>
-                                <option>Timestamp</option>
-                                <option>Custom Text</option>
-                            </select>
-                        </td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
-                    </tr>
-                    <tr>
-                        <td class="settings-item-label"></td>
-                        <td class="settings-item-value"><input type="text" class="settings-item-value styled" placeholder="custom text..."></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
-                    </tr>
-                    <tr>
-                        <td class="settings-item-label"><span class="settings-item-label">Right Text</span></td>
-                        <td class="settings-item-value">
-                            <select class="styled">
-                                <option>Camera Name</option>
-                                <option>Timestamp</option>
-                                <option>Custom Text</option>
-                            </select>
-                        </td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
-                    </tr>
-                    <tr>
-                        <td class="settings-item-label"></td>
-                        <td class="settings-item-value"><input type="text" class="settings-item-value styled" placeholder="custom text..."></td>
+                        <td class="settings-item-value"><input type="text" class="styled notifications" id="phoneNumberEntry" placeholder="phone number..."></td>
                         <td class="settings-item-value"><span class="help-mark">?</span></td>
                     </tr>
                 </table>