[add] demo gh-pages

wadackel · Aug 10, 2015 · c7ba408 · c7ba408
1 parent 9ac99ad
commit c7ba408
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -6,12 +6,11 @@ jquery-pwd-measure
 [![Bower](https://img.shields.io/bower/v/jquery-pwd-measure.svg?style=flat-square)](http://bower.io/search/?q=jquery-pwd-measure)
 
 
-## Description
 パスワードの強度を測定して表示するためのjQueryプラグインです。
 
 
 ## Demo
-準備中
+[http://tsuyoshiwada.github.io/jquery-pwd-measure/](http://tsuyoshiwada.github.io/jquery-pwd-measure/)
 
 
 ## Features
@@ -227,6 +226,85 @@ $(document).ready(function(){
 ※実際の値の変化では無く、`events`オプションで指定したイベント実行の度にコールされます。  
 
 
+## CSS Example
+`jQuery.pwdMeasure.js`では、スタイルを柔軟に設定することが出来ます。
+このページで強度表示に使用しているスタイルは次のとおりです。是非参考にしてみてください。
+
+### CSS
+
+```css
+.pm-indicator {
+  margin:10px 0;
+  padding:1.5em 1em;
+  color:#2c3e50;
+  font-size:12px;
+  text-align:center;
+  border:1px solid #ccc;
+  border-radius:2px;
+  background:#e4e4e4;
+  text-shadow:1px 1px 0 rgba(255,255,255,.8);
+  -webkit-transition:all .2s ease-in-out;
+          transition:all .2s ease-in-out;
+}
+
+.pm-indicator.very-weak,
+.pm-indicator.not-match {
+  border-color:#be1d30;
+  background-color:#ffc3cf;
+}
+
+.pm-indicator.weak {
+  border-color:#ff787d;
+  background-color:#ffe6e5;
+}
+
+.pm-indicator.strong {
+  border-color:#78bc42;
+  background-color:#bceea6;
+}
+
+.pm-indicator.very-strong {
+  border-color:#4f85a7;
+  background-color:#68c6d7;
+}
+```
+
+### Scss
+
+```scss
+.pm-indicator {
+  margin:10px 0;
+  padding:1.5em 1em;
+  background:#e4e4e4;
+  border:1px solid #ccc;
+  border-radius:2px;
+  color:#2c3e50;
+  font-size:12px;
+  text-shadow:1px 1px 0 rgba(255, 255, 255, .8);
+  text-align:center;
+  transition:all .2s ease-in-out;
+  &.very-weak,
+  &.not-match {
+    background-color:#ffc3cf;
+    border-color:#be1d30;
+  }
+  &.weak {
+    background-color:#ffe6e5;
+    border-color:#ff787d;
+  }
+  &.average {
+  }
+  &.strong {
+    background-color:#bceea6;
+    border-color:#78bc42;
+  }
+  &.very-strong {
+    background-color:#68c6d7;
+    border-color:#4f85a7;
+  }
+}
+```
+
 ## Dependencies
 jQuery 1.7.2 +
 
@@ -235,7 +313,7 @@ jQuery 1.7.2 +
 以下、優先順位順。
 
 1. <del>テストを書く</del>
-2. デモページの移行 (Github上に作成)
+2. <del>デモページの移行 (Github上に作成)</del>
 3. コールバックとは別にイベントを提供する
 4. 文字列から、強度を測定するグローバルAPIを提供
 5. CSSのテーマを作成 (オプションで選択できるようにする予定)

diff --git a/demo/css/style.css b/demo/css/style.css
diff --git a/demo/index.html b/demo/index.html
@@ -9,7 +9,7 @@
     <meta property="og:type" content="website">
     <meta property="og:title" content="jQuery.pwdMeasure.js">
     <meta property="og:description" content="jQuery.pwdMeasure.jsはパスワードの強度を測定するjQueryプラグインです。">
-    <meta property="og:url" content="">
+    <meta property="og:url" content="http://tsuyoshiwada.github.io/jquery-pwd-measure/">
     <meta property="og:site_name" content="jQuery.pwdMeasure.js">
     <title>jQuery.pwdMeasure.js</title>
     <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
@@ -53,7 +53,7 @@ <h1><i class="fa fa-code"></i> jQuery.pwdMeasure.js</h1>
       <div class="section">
         <h2 class="section__title"><i class="fa fa-hand-o-right"></i> Demo</h2>
         <div class="form-group">
-          <label class="form-group__label">パスワード</label>
+          <label for="demo-pm-input" class="form-group__label">パスワード</label>
           <input id="demo-pm-input" type="password" value="" placeholder="Your password" class="form-group__input">
         </div>
         <div id="demo-pm-indicator" class="pm-indicator"></div>
@@ -116,7 +116,7 @@ <h3>Basic</h3>
           デフォルトで<code>#pm-indicator</code>に強度が表示されます。
         </p>
         <div class="form-group">
-          <label class="form-group__label">パスワード</label>
+          <label for="pm-input" class="form-group__label">パスワード</label>
           <input id="pm-input" type="password" value="" placeholder="Your password" class="form-group__input">
         </div>
         <div id="pm-indicator" class="pm-indicator"></div>
@@ -128,11 +128,11 @@ <h3>Basic</h3>
         <h3>Confirm</h3>
         <p><code>confirm</code>オプションで確認用のフィールドを指定した例です。確認用のフィールドがある場合は、値が一致しているかのチェックも行ないます。</p>
         <div class="form-group">
-          <label class="form-group__label">パスワード</label>
+          <label for="pm-input2" class="form-group__label">パスワード</label>
           <input id="pm-input2" type="password" value="" placeholder="Your password" class="form-group__input">
         </div>
         <div class="form-group">
-          <label class="form-group__label">パスワード確認</label>
+          <label for="pm-confirm2" class="form-group__label">パスワード確認</label>
           <input id="pm-confirm2" type="password" value="" placeholder="Your password" class="form-group__input">
         </div>
         <div id="pm-indicator2" class="pm-indicator"></div>
@@ -147,7 +147,7 @@ <h3>Confirm</h3>
         <h3>Change Labels</h3>
         <p>表示ラベルを変更する例です。</p>
         <div class="form-group">
-          <label class="form-group__label">パスワード</label>
+          <label for="pm-input3" class="form-group__label">パスワード</label>
           <input id="pm-input3" type="password" value="" placeholder="Your password" class="form-group__input">
         </div>
         <div id="pm-indicator3" class="pm-indicator"></div>
@@ -169,7 +169,7 @@ <h3>Change Labels</h3>
         <h3>Change Events</h3>
         <p>強度判定を行うタイミングを決める為のイベントを変更することが出来ます。下記では<code>change</code>のみに絞っています。</p>
         <div class="form-group">
-          <label class="form-group__label">パスワード</label>
+          <label for="pm-input4" class="form-group__label">パスワード</label>
           <input id="pm-input4" type="password" value="" placeholder="Your password" class="form-group__input">
         </div>
         <div id="pm-indicator4" class="pm-indicator"></div>
@@ -188,11 +188,11 @@ <h3>Use Callback</h3>
         </p>
         <form id="pm-form5">
           <div class="form-group">
-            <label class="form-group__label">パスワード</label>
+            <label for="pm-input5" class="form-group__label">パスワード</label>
             <input id="pm-input5" type="password" value="" placeholder="Your password" class="form-group__input">
           </div>
           <div class="form-group">
-            <label class="form-group__label">パスワード</label>
+            <label for="pm-confirm5" class="form-group__label">パスワード</label>
             <input id="pm-confirm5" type="password" value="" placeholder="Your password" class="form-group__input">
           </div>
           <div id="pm-indicator5" class="pm-indicator"></div>
@@ -347,11 +347,11 @@ <h3>Scss
       </div>
       <div class="section">
         <h2 class="section__title"> <i class="fa fa-bell-o"></i> Change Log</h2>
-        <h3>2015.06.13</h3>
+        <h3>v1.0.4<small>2015.06.13</small></h3>
         <p>IE8以下で起きるエラーの修正。(<code>labels</code>内の<code>class</code>を<code>className</code>に変更しています)</p>
-        <h3>2015.02.14</h3>
+        <h3>v1.0.2<small>2015.02.14</small></h3>
         <p><code>bower</code>を使ったインストールに対応 &amp; <code>empty</code>オプションの追加</p>
-        <h3>2015.01.24</h3>
+        <h3>v1.0.0<small>2015.01.24</small></h3>
         <p>First Release.</p>
       </div>
     </div>

diff --git a/demo/jade/index.jade b/demo/jade/index.jade
@@ -9,7 +9,7 @@ html
     meta(property="og:type", content="website")
     meta(property="og:title", content="jQuery.pwdMeasure.js")
     meta(property="og:description", content="jQuery.pwdMeasure.jsはパスワードの強度を測定するjQueryプラグインです。")
-    meta(property="og:url", content="")
+    meta(property="og:url", content="http://tsuyoshiwada.github.io/jquery-pwd-measure/")
     meta(property="og:site_name", content="jQuery.pwdMeasure.js")
     title jQuery.pwdMeasure.js
     meta(name="viewport", content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no")
@@ -73,7 +73,7 @@ html
           |  Demo
 
         div.form-group
-          label.form-group__label パスワード
+          label.form-group__label(for="demo-pm-input") パスワード
           input#demo-pm-input.form-group__input(type="password", value="", placeholder="Your password")
         div#demo-pm-indicator.pm-indicator
 
@@ -157,7 +157,7 @@ html
           | デフォルトで<code>#pm-indicator</code>に強度が表示されます。
 
         div.form-group
-          label.form-group__label パスワード
+          label.form-group__label(for="pm-input") パスワード
           input#pm-input.form-group__input(type="password", value="", placeholder="Your password")
         div#pm-indicator.pm-indicator
 
@@ -173,10 +173,10 @@ html
           | <code>confirm</code>オプションで確認用のフィールドを指定した例です。確認用のフィールドがある場合は、値が一致しているかのチェックも行ないます。
 
         div.form-group
-          label.form-group__label パスワード
+          label.form-group__label(for="pm-input2") パスワード
           input#pm-input2.form-group__input(type="password", value="", placeholder="Your password")
         div.form-group
-          label.form-group__label パスワード確認
+          label.form-group__label(for="pm-confirm2") パスワード確認
           input#pm-confirm2.form-group__input(type="password", value="", placeholder="Your password")
         div#pm-indicator2.pm-indicator
 
@@ -194,7 +194,7 @@ html
         p 表示ラベルを変更する例です。
 
         div.form-group
-          label.form-group__label パスワード
+          label.form-group__label(for="pm-input3") パスワード
           input#pm-input3.form-group__input(type="password", value="", placeholder="Your password")
         div#pm-indicator3.pm-indicator
 
@@ -219,7 +219,7 @@ html
         p 強度判定を行うタイミングを決める為のイベントを変更することが出来ます。下記では<code>change</code>のみに絞っています。
 
         div.form-group
-          label.form-group__label パスワード
+          label.form-group__label(for="pm-input4") パスワード
           input#pm-input4.form-group__input(type="password", value="", placeholder="Your password")
         div#pm-indicator4.pm-indicator
 
@@ -240,10 +240,10 @@ html
 
         form#pm-form5
           div.form-group
-            label.form-group__label パスワード
+            label.form-group__label(for="pm-input5") パスワード
             input#pm-input5.form-group__input(type="password", value="", placeholder="Your password")
           div.form-group
-            label.form-group__label パスワード
+            label.form-group__label(for="pm-confirm5") パスワード
             input#pm-confirm5.form-group__input(type="password", value="", placeholder="Your password")
           div#pm-indicator5.pm-indicator
           div.text-center
@@ -412,13 +412,19 @@ html
           i.fa.fa-bell-o
           |  Change Log
 
-        h3 2015.06.13
+        h3
+          | v1.0.4
+          small 2015.06.13
         p IE8以下で起きるエラーの修正。(<code>labels</code>内の<code>class</code>を<code>className</code>に変更しています)
 
-        h3 2015.02.14
+        h3
+          | v1.0.2
+          small 2015.02.14
         p <code>bower</code>を使ったインストールに対応 &amp; <code>empty</code>オプションの追加
 
-        h3 2015.01.24
+        h3
+          | v1.0.0
+          small 2015.01.24
         p First Release.
 
 

diff --git a/demo/sass/style.scss b/demo/sass/style.scss
@@ -87,6 +87,11 @@ h5,
 h6 {
   @include font-accent;
   color:$color-text-primary;
+  small {
+    margin-left:1em;
+    font-weight:normal;
+    font-size:.6em;
+  }
 }
 
 h1 {