diff --git a/.project b/.project new file mode 100644 index 0000000..0c94d3d --- /dev/null +++ b/.project @@ -0,0 +1,11 @@ + + + F_WebAPI + + + + + + + + diff --git a/Contacts/contact_create.html b/Contacts/contact_create.html new file mode 100644 index 0000000..30aa056 --- /dev/null +++ b/Contacts/contact_create.html @@ -0,0 +1,53 @@ + + + +Contacts + + + + + + + + +
+
+ back +

create

+
+
+
+
+ Name +
+

+ + +

+
+
+
+ Tel +
+

+ + +

+
+
+
+ +
+
+
+
+ + + \ No newline at end of file diff --git a/Contacts/contact_read.html b/Contacts/contact_read.html new file mode 100644 index 0000000..c755a0f --- /dev/null +++ b/Contacts/contact_read.html @@ -0,0 +1,56 @@ + + + +Contacts + + + + + + + + +
+ +
+ back +

Contacts

+
+
+
+
+ Name +
+

+ + +

+
+
+
+ Tel +
+

+ + + +

+
+
+
+ + +
+
+
+ +
+ + + \ No newline at end of file diff --git a/Contacts/css/headers.css b/Contacts/css/headers.css new file mode 100644 index 0000000..4c6297d --- /dev/null +++ b/Contacts/css/headers.css @@ -0,0 +1,257 @@ +/* ---------------------------------- + * HEADERS: default + * ---------------------------------- */ +section[role="region"]>header:first-child { + position: relative; z-index: 10; padding: 0; height: 5rem; color: #fff; + background: url(../images/headers/ui/header.png) repeat-x 0 0; background-size: auto 100%; border: none; +} + +section[role="region"]>header:first-child:after { + content: ""; display: block; height: 0.3rem; position: absolute; top: 100%; left: 0; right: 0; + background: url(../images/headers/ui/shadow.png) repeat-x; background-size: auto 100%; +} + +section[role="region"]>header:first-child h1 { + font-size: 2.5rem; line-height: 4.8rem; text-align: left; color: #fff; white-space: nowrap; text-overflow: ellipsis; + display: block; overflow: hidden; margin: 0 0 0 3rem; padding-right: 1rem; height: 100%; font-weight: normal; +} + +section[role="region"]>header:first-child h1 em { + font-weight: 400; font-size: 1.5rem; line-height: 1em; font-style: normal; +} + +section[role="region"]>header:first-child form { + display: block; overflow: hidden; position: relative; padding: 1rem 1rem 0 0.5rem; margin-left: 2.5rem; +} + +section[role="region"]>header:first-child input[type="text"] { + width: 100%; height: 3rem; -moz-box-sizing: border-box; padding: 0 0.8rem; border: solid 0.1rem #9d4123; + border-top-color: #a6501e; border-radius: 0.3rem; + background: #fff url(../images/headers/ui/shadow.png) repeat-x left -0.1rem; font-size: 1.5rem; line-height: 3em; + box-shadow: none; +} + +section[role="region"]>header:first-child form button[type="reset"] { + font-size: 0; overflow: hidden; position: absolute; right: 1rem; top: 1rem; bottom: 0; width: 3rem; height: auto; + margin: 0; display: none; border: none; + background: url(../images/headers/icons/clear.png) no-repeat center center/1.7rem auto; +} + +section[role="region"]>header:first-child input[type="text"]:valid+button[type="reset"] { + display: block; +} + +/* Generic set of actions in toolbar */ +section[role="region"]>header:first-child menu[type="toolbar"] { + height: 100%; float: right; +} + +section[role="region"]>header:first-child menu[type="toolbar"] a,section[role="region"]>header:first-child menu[type="toolbar"] button + { + -moz-box-sizing: border-box; position: relative; float: left; width: auto; min-width: 5rem; height: 5rem; + margin-bottom: 0; padding: 0 1rem; border-radius: 0; line-height: 5rem; background: none; text-align: center; + text-shadow: none; z-index: 5; +} + +section[role="region"]>header:first-child menu[type="toolbar"] a:last-child,section[role="region"]>header:first-child menu[type="toolbar"] button:last-child + { + background: url(../images/headers/ui/separator.png) no-repeat left center/auto 4.8rem; margin-left: -0.2rem; z-index: 1; +} + +section[role="region"]>header:first-child menu[type="toolbar"] { + padding: 0; margin: 0; +} + +section[role="region"]>header:first-child a,section[role="region"]>header:first-child button { + border: none; padding: 0; overflow: hidden; font-weight: 400; font-size: 1.5rem; line-height: 1.1em; color: #fff; + border-radius: 0; text-decoration: none; +} + +/* Pressed state */ +section[role="region"]>header:first-child a::-moz-focus-inner,section[role="region"]>header:first-child button::-moz-focus-inner,section[role="region"]>header:first-child a:active,section[role="region"]>header:first-child button:active,section[role="region"]>header:first-child a:focus,section[role="region"]>header:first-child button:focus + { + outline: none !important; border: none !important; +} + +section[role="region"]>header:first-child a:not ([aria-disabled="true"] + ):active .icon:after,section[role="region"]>header:first-child button:not + (:disabled ):active .icon:after,section[role="region"]>header:first-child menu[type="toolbar"] a:not + ([aria-disabled="true"] ):active,section[role="region"]>header:first-child menu[type="toolbar"] button:not + (:disabled ):active { + background: #008aaa !important; transition: background 0.2s ease; +} + +/* Disabled state */ +section[role="region"]>header:first-child menu[type="toolbar"] a[aria-disabled="true"],section[role="region"]>header:first-child menu[type="toolbar"] button[disabled] + { + opacity: 0.5; +} + +section[role="region"]>header:first-child a:first-letter,section[role="region"]>header:first-child button:first-letter { + text-transform: uppercase; +} + +/* Icon definitions */ +section[role="region"]>header:first-child .icon { + position: relative; float: none; display: inline-block; vertical-align: top; width: 3rem; height: 4.9rem; + margin: 0 -1rem; background: transparent no-repeat center center/3rem auto; font-size: 0; overflow: hidden; +} + +section[role="region"]>header:first-child .icon.icon-add { + background-image: url(../images/headers/icons/add.png); +} + +section[role="region"]>header:first-child .icon.icon-compose { + background-image: url(../images/headers/icons/compose.png); +} + +section[role="region"]>header:first-child .icon.icon-edit { + background-image: url(../images/headers/icons/edit.png); +} + +section[role="region"]>header:first-child .icon.icon-send { + background-image: url(../images/headers/icons/send.png); +} + +section[role="region"]>header:first-child .icon.icon-close { + background-image: url(../images/headers/icons/close.png); +} + +section[role="region"]>header:first-child .icon.icon-back { + background-image: url(../images/headers/icons/back.png); +} + +section[role="region"]>header:first-child .icon.icon-menu { + background-image: url(../images/headers/icons/menu.png); +} + +section[role="region"]>header:first-child .icon.icon-user { + background-image: url(../images/headers/icons/user.png); +} + +section[role="region"]>header:first-child .icon.icon-reply { + background-image: url(../images/headers/icons/reply.png); +} + +section[role="region"]>header:first-child .icon.icon-reply-all { + background-image: url(../images/headers/icons/reply-all.png); +} + +/* Navigation links (back, cancel, etc) */ +section[role="region"]>header:first-child>button,section[role="region"]>header:first-child>a { + position: absolute; left: 0; width: 5rem; height: 5rem; + background: url(../images/headers/ui/separator-large.png) no-repeat 2rem top/0.2rem 5rem; overflow: hidden; +} + +section[role="region"]>header:first-child>button::-moz-focus-inner { + border: 0; padding: 0; +} + +section[role="region"]>header:first-child>button .icon,section[role="region"]>header:first-child>a .icon { + position: static; display: block; width: 2rem; height: 4.9rem; margin: 0; overflow: visible; font-size: 0; +} + +section[role="region"]>header:first-child>button .icon:after,section[role="region"]>header:first-child>a .icon:after { + content: ""; position: absolute; left: 0; top: 0; z-index: -1; width: 2rem; height: 4.9rem; background-color: #a03f25; +} + +section[role="region"]>header>a .icon.icon-menu,section[role="region"]>header>button .icon.icon-menu { + background-position: -1.1rem center; +} + +/* ---------------------------------- + * HEADERS: subheader + * ---------------------------------- */ +section[role="region"]>header { + z-index: 0; height: auto; +} + +section[role="region"]>header:after { + display: none; +} + +section[role="region"] header h2 { + margin: 0; padding: 0.8rem 3rem; color: #424242; font-weight: 400; font-size: 1.5rem; line-height: 1.8rem; + border-bottom: solid 0.1rem #e6e6e6; +} + +/* ---------------------------------- + * HEADERS: dark + * ---------------------------------- */ +section[role="region"].skin-dark>header:first-child,.skin-dark section[role="region"]>header:first-child { + background-image: url(../images/headers/ui/dark/header.png); +} + +section[role="region"].skin-dark>header:first-child menu[type="toolbar"] a:last-child,.skin-dark section[role="region"]>header:first-child menu[type="toolbar"] a:last-child,section[role="region"].skin-dark>header:first-child menu[type="toolbar"] button:last-child,.skin-dark section[role="region"]>header:first-child menu[type="toolbar"] button:last-child + { + background: url(../images/headers/ui/dark/separator.png) no-repeat left center/auto 4.8rem; +} + +/* Navigation links (back, cancel, etc) */ +section[role="region"].skin-dark>header:first-child>a .icon:after,.skin-dark section[role="region"]>header:first-child>a .icon:after,section[role="region"].skin-dark>header:first-child>button .icon:after,.skin-dark section[role="region"]>header:first-child>button .icon:after + { + background-image: url(../images/headers/ui/dark/negative.png); background-color: transparent; +} + +section[role="region"].skin-dark>header:first-child a,.skin-dark section[role="region"]>header:first-child a,section[role="region"].skin-dark>header:first-child button,.skin-dark section[role="region"]>header:first-child button + { + background: url(../images/headers/ui/dark/separator-large.png) no-repeat 2rem top/0.2rem 4.8rem; +} + +section[role="region"].skin-dark header h2,.skin-dark section[role="region"] header h2 { + background: #2e3c3f url(../images/headers/ui/organic/subheader.png); color: #fff; border: none; +} + +/* ---------------------------------- + * HEADERS: organic + * ---------------------------------- */ +section[role="region"].skin-organic>header:first-child,.skin-organic section[role="region"]>header:first-child { + background-image: url(../images/headers/ui/noise-pattern.png), url(../images/headers/ui/organic/header.png); + background-size: auto; +} + +section[role="region"].skin-organic>header:first-child menu[type="toolbar"] a:last-child,.skin-organic section[role="region"]>header:first-child menu[type="toolbar"] a:last-child,section[role="region"].skin-organic>header:first-child menu[type="toolbar"] button:last-child,.skin-organic section[role="region"]>header:first-child menu[type="toolbar"] button:last-child + { + background: url(../images/headers/ui/organic/separator.png) no-repeat left center/auto 4.8rem; +} + +/* Navigation links (back, cancel, etc) */ +section[role="region"].skin-organic>header:first-child>a .icon:after,.skin-organic section[role="region"]>header:first-child>a .icon:after,section[role="region"].skin-organic>header:first-child>button .icon:after,.skin-organic section[role="region"]>header>button .icon:after + { + background: #23292b url(../images/headers/ui/noise-pattern.png); background-size: auto; +} + +section[role="region"].skin-organic>header:first-child a,.skin-organic section[role="region"]>header:first-child a,section[role="region"].skin-organic>header:first-child button,.skin-organic section[role="region"]>header:first-child button + { + background: url(../images/headers/ui/organic/separator-large.png) no-repeat 2rem top/0.2rem 4.8rem; +} + +section[role="region"].skin-organic header h2,.skin-organic section[role="region"] header h2 { + background: #5c6a6d url(../images/headers/ui/organic/subheader.png); color: #fff; border: none; +} + +/* ---------------------------------- + * HEADERS: right-to-left tweaks + * ---------------------------------- */ +html[dir="rtl"] section[role="region"]>header:first-child h1 { + text-align: right; margin: 0 3rem 0 0; +} + +html[dir="rtl"] section[role="region"]>header:first-child button,html[dir="rtl"] section[role="region"]>header:first-child a + { + left: inherit; right: 0; +} + +html[dir="rtl"] section[role="region"]>header:first-child>button .icon,html[dir="rtl"] section[role="region"]>header:first-child>a .icon + { + margin-left: 0; margin-right: -2rem; +} + +html[dir="rtl"] section[role="region"]>header:first-child>button .icon:after,html[dir="rtl"] section[role="region"]>header:first-child>a .icon:after + { + left: inherit; right: 0; +} + +html[dir="rtl"] section[role="region"]>header:first-child .icon.icon-back { + background-image: url(../images/headers/icons/back-rtl.png); +} \ No newline at end of file diff --git a/Contacts/css/input_areas.css b/Contacts/css/input_areas.css new file mode 100644 index 0000000..c03c182 --- /dev/null +++ b/Contacts/css/input_areas.css @@ -0,0 +1,263 @@ +/* ---------------------------------- +* Input areas +* ---------------------------------- */ +input[type="text"],input[type="password"],input[type="email"],input[type="tel"],input[type="search"],input[type="url"],input[type="number"],textarea + { + -moz-box-sizing: border-box; display: block; overflow: hidden; width: 100%; height: 4rem; resize: none; + padding: 0 1.2rem; font-size: 1.8rem; line-height: 4rem; border: 0.1rem solid #ccc; border-radius: 0.3rem; + box-shadow: none; + /* override the box-shadow from the system (performance issue) */ + background: #fff url(../images/input_areas/ui/shadow.png) repeat-x; +} + +textarea { + height: 10rem; max-height: 10rem; line-height: 2rem; margin: 0; +} + +/* fix for required inputs with wrong or empty value e.g. [type=email] */ +input:invalid,textarea:invalid { + border: 0.1rem solid #820000; color: #b90000; +} + +input::-moz-placeholder,textarea::-moz-placeholder { + color: #858585; opacity: 1; +} + +input:-moz-placeholder,textarea:-moz-placeholder { + color: #858585; opacity: 1; +} + +form p { + position: relative; margin: 0; +} + +form p+p { + margin-top: 1rem; +} + +form p input+button[type="reset"],form p textarea+button[type="reset"] { + position: absolute; top: 50%; right: 0; width: 3rem; height: 4rem; padding: 0; border: none; font-size: 0; opacity: 0; + pointer-events: none; background: transparent url(../images/input_areas/icons/clear.png) no-repeat 50% 50%/1.7rem auto; +} + +form.skin-dark p input+button[type="reset"],form.skin-dark p textarea+button[type="reset"] { + background-image: url(../images/input_areas/icons/clear-dark.png); +} + +/* To avoid colission with BB butons */ +li input+button[type="reset"]:after,li textarea+button[type="reset"]:after { + background: none; +} + +form p input+button[type="reset"],form p textarea+button[type="reset"] { + top: 0; margin: 0; +} + +textarea { + padding: 1.2rem; +} + +form p input:focus { + padding-right: 3rem; +} + +form p input:focus+button[type="reset"],form p textarea:focus+button[type="reset"] { + opacity: 1; pointer-events: all; +} + +/* Fieldset */ +fieldset { + position: relative; overflow: hidden; margin: 0; padding: 0; border-radius: 0.3rem; + border: 0.1rem solid rgba(0, 0, 0, .2); font-size: 1.8rem; line-height: 1em; + background: #fff url(../images/input_areas/ui/shadow.png) repeat-x left top; +} + +fieldset+fieldset { + margin-top: 1.5rem; +} + +fieldset legend { + -moz-box-sizing: border-box; position: absolute; width: 9.5rem; height: 100%; padding: 0 0.5rem 0 1.5rem; + white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: #333; line-height: 4rem; + text-transform: uppercase; +} + +fieldset legend.action { + background: url(../images/input_areas/icons/arrow.png) no-repeat 100% 100%/1.2rem; +} + +fieldset legend:active { + background-color: #008caa; text-shadow: 0.1rem 0.1rem 0 rgba(255, 255, 255, .3); +} + +fieldset section input[type="text"],fieldset section input[type="password"],fieldset section input[type="email"],fieldset section input[type="tel"],fieldset section input[type="search"],fieldset section input[type="number"],fieldset section textarea + { + height: 4rem; border: none; border-radius: 0; background: none; +} + +fieldset section { + display: block; border-left: 0.1rem solid #ddd; border-radius: 0 0.3rem 0.3rem 0; overflow: hidden; margin-left: 9.5rem; +} + +fieldset section p { + margin: 0; border-bottom: 0.1rem solid #ddd; +} + +fieldset section p:last-child { + border-bottom: none; +} + +/* Tidy (search/submit) */ +form[role="search"] { + position: relative; height: 3.7rem; background: #dbe3eb; +} + +form[role="search"].skin-dark { + background: url(../images/input_areas/ui/background-dark.png) repeat; background-size: 2rem; +} + +form[role="search"].bottom { + background: #fff; +} + +form[role="search"]:before { + content: ""; position: absolute; top: 1rem; left: 1rem; height: 1.6rem; width: 1.6rem; + background: url(../images/input_areas/icons/search.png) no-repeat; background-size: 1.6rem; +} + +form[role="search"].bottom:before { + display: none; +} + +form[role="search"].skin-dark:before { + background-image: url(../images/input_areas/icons/search-dark.png); +} + +form[role="search"]:after { + content: ""; position: absolute; top: 3.6rem; right: 0; left: 0; height: 0.4rem; + background: url(../images/input_areas/ui/shadow-search.png) repeat-x left top; border-top: 0.1rem solid #fff; +} + +form[role="search"].bottom:after { + content: ""; position: absolute; top: -0.4rem; + background: url(../images/input_areas/ui/shadow-invert.png) repeat-x 0 100%; border-color: transparent; +} + +form[role="search"].skin-dark:after { + border-color: #2b3538; +} + +section[role="region"]>header:first-child+form[role="search"]:after { + background: none; +} + +form[role="search"] p { + padding: 0.4rem 1.2rem 0 3.2rem; overflow: hidden; +} + +form[role="search"].bottom p { + padding: 0.4rem 1.2rem 0 1.2rem; +} + +form[role="search"] p input,form[role="search"] p textarea { + height: 3rem; border: none; background: none; font-size: 1.8rem; padding: 0.5rem 0; +} + +form[role="search"] p input:focus { + padding: 0 2rem 0 0; +} + +form[role="search"] p input:invalid,form[role="search"] p textarea:invalid { + border: none; +} + +form[role="search"].skin-dark p input,form[role="search"].skin-dark p textarea { + color: #fff; +} + +form[role="search"] button.icon { + float: left; height: 3.7rem; width: 3rem; border: none; font-size: 0; + background: url(../images/input_areas/ui/separator.png) no-repeat 100% 50%, url(../images/input_areas/ui/background.png) + repeat-x 0 100%; background-size: auto 100%; border-radius: 0; margin: 0; padding: 0; margin: 0; position: relative; +} + +form[role="search"] button.icon:before { + content: ""; position: absolute; width: 3rem; height: 3.7rem; background: transparent center no-repeat; top: 0; left: 0; +} + +form[role="search"] p button[type="reset"] { + right: 0; +} + +form[role="search"] button[type="submit"] { + float: right; min-width: 6rem; height: 3.7rem; padding: 0 1.5rem; border: none; color: #000; font-weight: 500; + font-size: 1.6rem; line-height: 3.2rem; background: url(../images/input_areas/ui/separator.png) no-repeat 0 50%; + background-size: auto 100%; border-radius: 0; width: auto; border-radius: 0; margin: 0; +} + +form[role="search"].bottom button[type="submit"] { + color: #333; + background: url(../images/input_areas/ui/separator.png) no-repeat 0 50%, url(../images/input_areas/ui/active.png) + repeat-x 0 100%; +} + +form[role="search"].skin-dark button[type="submit"] { + color: #fff; background-image: url(../images/input_areas/ui/separator-dark.png); +} + +form[role="search"] button[type="submit"]+p>textarea { + height: 3rem; line-height: 2rem; font-size: 1.8rem; +} + +form[role="search"] button[type="submit"]+p button { + height: 3.7rem; +} + +form[role="search"].full button[type="submit"] { + display: none; +} + +form[role="search"] button.icon:active,form[role="search"] button[type="submit"]:active { + background: #008caa; text-shadow: 0.1rem 0.1rem 0 rgba(255, 255, 255, .3); +} + +form[role="search"] button[type="submit"][disabled] { + color: #adadad; + background: url(../images/input_areas/ui/separator.png) no-repeat 0 50%, url(../images/input_areas/ui/background.png) + repeat-x 0 100%; +} + +form p button[type="reset"]:focus,form p button[type="reset"]::-moz-focus-inner { + border: none; outline: none; +} + +/****************************************************************************** + * Right-to-Left layout + */ +html[dir="rtl"] form p input:valid,html[dir="rtl"] form p input:valid:focus { + padding: 0 1.2rem 0 3rem; +} + +html[dir="rtl"] form p input+button[type="reset"],html[dir="rtl"] form p textarea+button[type="reset"] { + right: auto; left: 0; +} + +html[dir="rtl"] fieldset legend.action:after { + margin: 0 0.5rem 0 0; +} + +html[dir="rtl"] fieldset legend { + padding: 0 1.5rem 0 0.5rem; +} + +html[dir="rtl"] form[role="search"] p input { + padding: 0; +} + +html[dir="rtl"] form[role="search"] p input:focus { + padding: 0 0 0 2rem; +} + +html[dir="rtl"] form[role="search"] button[type="submit"]+p>button { + left: 0; +} \ No newline at end of file diff --git a/Contacts/css/lists.css b/Contacts/css/lists.css new file mode 100644 index 0000000..f71de2f --- /dev/null +++ b/Contacts/css/lists.css @@ -0,0 +1,124 @@ +/* ---------------------------------- + * Lists + * ---------------------------------- */ +[data-type="list"] { + font-weight: 400; padding: 0 1.5rem; +} + +[data-type="list"] ul { + list-style: none; margin: 0; padding: 0; overflow: hidden; +} + +[data-type="list"] strong { + font-weight: 500; +} + +/* Title divisors */ +[data-type="list"] header { + border-bottom: 0.1rem solid #ff4E00; padding: 0.5rem 1rem; margin: 0; font-size: 1.6rem; line-height: 1.8rem; + font-weight: normal; color: #ff4E00; text-transform: uppercase; +} + +/* List items */ +[data-type="list"] li { + width: 100%; height: 6rem; -moz-box-sizing: border-box; transition: transform 0.3s ease, padding 0.3s ease; + border-bottom: solid 0.1rem #dbd9d9; color: #000; margin: 0; display: block; position: relative; z-index: 1; +} + +[data-type="list"] li:last-child { + border: none; +} + +/* Pressed State */ +[data-type="list"] li>a { + text-decoration: none; color: #000; display: block; height: 6rem; position: relative; border: none; outline: none; +} + +[data-type="list"] li>a:after { + content: ""; background-color: #b1f1ff; opacity: 0; pointer-events: none; position: absolute; left: 0; top: 0; right: 0; + bottom: 0; z-index: 0; +} + +[data-type="list"] li>a:active:after { + opacity: 0.6; + /* Only transition on 'press', not on 'release' */ transition: opacity 0.2s ease; +} + +/* Disabled */ +[data-type="list"] li[aria-disabled="true"]:after { + content: ""; background-color: #e6e6e6; opacity: 0.7; position: absolute; left: 0; top: 0; right: 0; bottom: 0; +} + +[data-type="list"] li[aria-disabled="true"] { + pointer-events: none; +} + +/* Graphic content */ +[data-type="list"] aside { + float: left; margin: 0 1.5rem 0 0; height: 100%; position: relative; z-index: 2; +} + +[data-type="list"] li>a aside,[data-type="list"] li>a aside.icon { + background-color: transparent; z-index: -1; +} + +[data-type="list"] aside.pack-end { + text-align: right; +} + +[data-type="list"] aside.icon { + width: 3rem; height: 6rem; background: #fff no-repeat left center/100% auto; font: 0/0 a; display: block; + overflow: hidden; +} + +[data-type="list"] aside img { + display: block; overflow: hidden; width: 6rem; height: 6rem; background: transparent center center/cover; + position: relative; z-index: 1; +} + +/* Text content */ +[data-type="list"] li p { + white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: none; display: block; margin: 0; color: #5b5b5b; + font-size: 1.5rem; line-height: 2rem; +} + +[data-type="list"] li p:first-of-type { + font-size: 1.8rem; line-height: 2.2rem; color: #000; padding: 1rem 0 0; +} + +[data-type="list"] li p:only-child,[data-type="list"] li p:first-of-type:last-of-type { + line-height: 4rem; +} + +[data-type="list"] li p em { + font-size: 1.5rem; font-style: normal; +} + +[data-type="list"] li p time { + margin-right: 0.3rem; text-transform: uppercase; +} + +/* Checkable content */ +[data-type="list"] li>.pack-checkbox,[data-type="list"] li>.pack-radio,[data-type="list"] li>.pack-switch { + pointer-events: none; position: absolute; top: -0.1rem; bottom: 0; right: 0; left: -4rem; z-index: 1; width: auto; + height: auto; border-top: solid 0.1rem #dbd9d9; +} + +[data-type="list"] li>.pack-checkbox input+span,[data-type="list"] li>.pack-radio input+span,[data-type="list"] li>.pack-switch input+span + { + left: 0; margin-left: 0; +} + +/* Edit mode */ +[data-type="list"] [data-type="edit"] li { + transform: translateX(4rem); padding-left: 0; +} + +[data-type="list"] [data-type="edit"] li>.pack-checkbox,[data-type="list"] [data-type="edit"] li>.pack-radio,[data-type="list"] [data-type="edit"] li>.pack-switch + { + pointer-events: auto; +} + +[data-type="list"] [data-type="edit"] li>a:active:after { + display: none; +} \ No newline at end of file diff --git a/Contacts/css/style.css b/Contacts/css/style.css new file mode 100644 index 0000000..2e6eced --- /dev/null +++ b/Contacts/css/style.css @@ -0,0 +1,66 @@ +@import url(./headers.css); + +@import url(./input_areas.css); + +@import url(./lists.css); + +html,body { + margin: 0; padding: 0; font-size: 10px; background-color: #fff; +} + +#index { + height: 100%; +} + +/* contacts read */ +.search { + position: relative; z-index: 1; +} + +.contacts_read { + padding: 1rem; overflow: hidden; +} + +/* contact read */ +.contact_read { + position: absolute; left: 0; top: 5rem; width: 90%; padding: 1.5rem; +} + +/* contact create */ +.contact_create { + position: absolute; left: 0; top: 5rem; width: 90%; padding: 1.5rem; +} + +/* common button */ +div.bb-docs { + padding-top: 1rem; +} + +div.bb-docs button { + width: 100%; height: 3.8rem; margin: 0 0 1rem; padding: 0 1.5rem; -moz-box-sizing: border-box; display: inline-block; + vertical-align: middle; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; border-radius: 0.2rem; + font-weight: 500; font-size: 1.6rem; line-height: 3.8rem; text-align: center; + text-shadow: 0.1rem 0.1rem 0 rgba(255, 255, 255, 0.3); text-decoration: none; outline: none; +} + +button.recommend { + background: #00caf2 url(../images/buttons/ui/recommend.png) repeat-x left bottom/auto 100%; color: #333; + border: 0.1rem solid #008eab; +} + +button.recommend:active { + border-color: #008aaa; background: #008aaa; background-size: auto 100%; color: #333; +} + +button.danger { + background-image: url(../images/buttons/ui/danger.png); background-color: #b70404; color: #fff; text-shadow: none; + border: 0.1rem solid #820000; +} + +button.danger:active { + background-image: url(../images/buttons/ui/danger-press.png); background-color: #890707; +} + +.contact_read button.recommend,.contact_read button.danger { + width: 100%; +} \ No newline at end of file diff --git a/Contacts/images/buttons/icons/dialog.png b/Contacts/images/buttons/icons/dialog.png new file mode 100644 index 0000000..6cda241 Binary files /dev/null and b/Contacts/images/buttons/icons/dialog.png differ diff --git a/Contacts/images/buttons/icons/dialog@1.5x.png b/Contacts/images/buttons/icons/dialog@1.5x.png new file mode 100644 index 0000000..c8bf0f7 Binary files /dev/null and b/Contacts/images/buttons/icons/dialog@1.5x.png differ diff --git a/Contacts/images/buttons/icons/dialog@2x.png b/Contacts/images/buttons/icons/dialog@2x.png new file mode 100644 index 0000000..4c0bec3 Binary files /dev/null and b/Contacts/images/buttons/icons/dialog@2x.png differ diff --git a/Contacts/images/buttons/icons/view.png b/Contacts/images/buttons/icons/view.png new file mode 100644 index 0000000..de62f59 Binary files /dev/null and b/Contacts/images/buttons/icons/view.png differ diff --git a/Contacts/images/buttons/icons/view@1.5x.png b/Contacts/images/buttons/icons/view@1.5x.png new file mode 100644 index 0000000..9004f30 Binary files /dev/null and b/Contacts/images/buttons/icons/view@1.5x.png differ diff --git a/Contacts/images/buttons/icons/view@2x.png b/Contacts/images/buttons/icons/view@2x.png new file mode 100644 index 0000000..4d565bd Binary files /dev/null and b/Contacts/images/buttons/icons/view@2x.png differ diff --git a/Contacts/images/buttons/ui/danger-disabled.png b/Contacts/images/buttons/ui/danger-disabled.png new file mode 100644 index 0000000..2a14bfb Binary files /dev/null and b/Contacts/images/buttons/ui/danger-disabled.png differ diff --git a/Contacts/images/buttons/ui/danger-press.png b/Contacts/images/buttons/ui/danger-press.png new file mode 100644 index 0000000..d7529b5 Binary files /dev/null and b/Contacts/images/buttons/ui/danger-press.png differ diff --git a/Contacts/images/buttons/ui/danger.png b/Contacts/images/buttons/ui/danger.png new file mode 100644 index 0000000..400e3ae Binary files /dev/null and b/Contacts/images/buttons/ui/danger.png differ diff --git a/Contacts/images/buttons/ui/default.png b/Contacts/images/buttons/ui/default.png new file mode 100644 index 0000000..2ff298a Binary files /dev/null and b/Contacts/images/buttons/ui/default.png differ diff --git a/Contacts/images/buttons/ui/disabled.png b/Contacts/images/buttons/ui/disabled.png new file mode 100644 index 0000000..2e97135 Binary files /dev/null and b/Contacts/images/buttons/ui/disabled.png differ diff --git a/Contacts/images/buttons/ui/recommend.png b/Contacts/images/buttons/ui/recommend.png new file mode 100644 index 0000000..42aed39 Binary files /dev/null and b/Contacts/images/buttons/ui/recommend.png differ diff --git a/Contacts/images/buttons/ui/shadow.png b/Contacts/images/buttons/ui/shadow.png new file mode 100644 index 0000000..acc799f Binary files /dev/null and b/Contacts/images/buttons/ui/shadow.png differ diff --git a/Contacts/images/buttons/ui/shadow@1.5x.png b/Contacts/images/buttons/ui/shadow@1.5x.png new file mode 100644 index 0000000..9a15353 Binary files /dev/null and b/Contacts/images/buttons/ui/shadow@1.5x.png differ diff --git a/Contacts/images/buttons/ui/shadow@2x.png b/Contacts/images/buttons/ui/shadow@2x.png new file mode 100644 index 0000000..f208d73 Binary files /dev/null and b/Contacts/images/buttons/ui/shadow@2x.png differ diff --git a/Contacts/images/comms_icons.png b/Contacts/images/comms_icons.png new file mode 100644 index 0000000..0c30729 Binary files /dev/null and b/Contacts/images/comms_icons.png differ diff --git a/Contacts/images/headers/.DS_Store b/Contacts/images/headers/.DS_Store new file mode 100644 index 0000000..1c9513d Binary files /dev/null and b/Contacts/images/headers/.DS_Store differ diff --git a/Contacts/images/headers/icons/.DS_Store b/Contacts/images/headers/icons/.DS_Store new file mode 100644 index 0000000..8f33539 Binary files /dev/null and b/Contacts/images/headers/icons/.DS_Store differ diff --git a/Contacts/images/headers/icons/add.png b/Contacts/images/headers/icons/add.png new file mode 100644 index 0000000..92a5a24 Binary files /dev/null and b/Contacts/images/headers/icons/add.png differ diff --git a/Contacts/images/headers/icons/add@1.5x.png b/Contacts/images/headers/icons/add@1.5x.png new file mode 100644 index 0000000..e78368f Binary files /dev/null and b/Contacts/images/headers/icons/add@1.5x.png differ diff --git a/Contacts/images/headers/icons/add@2x.png b/Contacts/images/headers/icons/add@2x.png new file mode 100644 index 0000000..c6ef238 Binary files /dev/null and b/Contacts/images/headers/icons/add@2x.png differ diff --git a/Contacts/images/headers/icons/back-rtl.png b/Contacts/images/headers/icons/back-rtl.png new file mode 100644 index 0000000..a71c7c0 Binary files /dev/null and b/Contacts/images/headers/icons/back-rtl.png differ diff --git a/Contacts/images/headers/icons/back-rtl@1.5x.png b/Contacts/images/headers/icons/back-rtl@1.5x.png new file mode 100644 index 0000000..5e00eb8 Binary files /dev/null and b/Contacts/images/headers/icons/back-rtl@1.5x.png differ diff --git a/Contacts/images/headers/icons/back-rtl@2x.png b/Contacts/images/headers/icons/back-rtl@2x.png new file mode 100644 index 0000000..67931b2 Binary files /dev/null and b/Contacts/images/headers/icons/back-rtl@2x.png differ diff --git a/Contacts/images/headers/icons/back.png b/Contacts/images/headers/icons/back.png new file mode 100644 index 0000000..5383ee2 Binary files /dev/null and b/Contacts/images/headers/icons/back.png differ diff --git a/Contacts/images/headers/icons/back@1.5x.png b/Contacts/images/headers/icons/back@1.5x.png new file mode 100644 index 0000000..08ab986 Binary files /dev/null and b/Contacts/images/headers/icons/back@1.5x.png differ diff --git a/Contacts/images/headers/icons/back@2x.png b/Contacts/images/headers/icons/back@2x.png new file mode 100644 index 0000000..9ce702e Binary files /dev/null and b/Contacts/images/headers/icons/back@2x.png differ diff --git a/Contacts/images/headers/icons/clear.png b/Contacts/images/headers/icons/clear.png new file mode 100644 index 0000000..9990d01 Binary files /dev/null and b/Contacts/images/headers/icons/clear.png differ diff --git a/Contacts/images/headers/icons/clear@1.5x.png b/Contacts/images/headers/icons/clear@1.5x.png new file mode 100644 index 0000000..b408f9b Binary files /dev/null and b/Contacts/images/headers/icons/clear@1.5x.png differ diff --git a/Contacts/images/headers/icons/clear@2x.png b/Contacts/images/headers/icons/clear@2x.png new file mode 100644 index 0000000..e2ebc9f Binary files /dev/null and b/Contacts/images/headers/icons/clear@2x.png differ diff --git a/Contacts/images/headers/icons/close.png b/Contacts/images/headers/icons/close.png new file mode 100644 index 0000000..5e73322 Binary files /dev/null and b/Contacts/images/headers/icons/close.png differ diff --git a/Contacts/images/headers/icons/close@1.5x.png b/Contacts/images/headers/icons/close@1.5x.png new file mode 100644 index 0000000..f2f34ee Binary files /dev/null and b/Contacts/images/headers/icons/close@1.5x.png differ diff --git a/Contacts/images/headers/icons/close@2x.png b/Contacts/images/headers/icons/close@2x.png new file mode 100644 index 0000000..5e3a069 Binary files /dev/null and b/Contacts/images/headers/icons/close@2x.png differ diff --git a/Contacts/images/headers/icons/compose.png b/Contacts/images/headers/icons/compose.png new file mode 100644 index 0000000..d11379f Binary files /dev/null and b/Contacts/images/headers/icons/compose.png differ diff --git a/Contacts/images/headers/icons/compose@1.5x.png b/Contacts/images/headers/icons/compose@1.5x.png new file mode 100644 index 0000000..0d7035e Binary files /dev/null and b/Contacts/images/headers/icons/compose@1.5x.png differ diff --git a/Contacts/images/headers/icons/compose@2x.png b/Contacts/images/headers/icons/compose@2x.png new file mode 100644 index 0000000..1265d1a Binary files /dev/null and b/Contacts/images/headers/icons/compose@2x.png differ diff --git a/Contacts/images/headers/icons/edit.png b/Contacts/images/headers/icons/edit.png new file mode 100644 index 0000000..66c7a2d Binary files /dev/null and b/Contacts/images/headers/icons/edit.png differ diff --git a/Contacts/images/headers/icons/edit@1.5x.png b/Contacts/images/headers/icons/edit@1.5x.png new file mode 100644 index 0000000..49fb8e3 Binary files /dev/null and b/Contacts/images/headers/icons/edit@1.5x.png differ diff --git a/Contacts/images/headers/icons/edit@2x.png b/Contacts/images/headers/icons/edit@2x.png new file mode 100644 index 0000000..837c0c3 Binary files /dev/null and b/Contacts/images/headers/icons/edit@2x.png differ diff --git a/Contacts/images/headers/icons/menu.png b/Contacts/images/headers/icons/menu.png new file mode 100644 index 0000000..d1462c8 Binary files /dev/null and b/Contacts/images/headers/icons/menu.png differ diff --git a/Contacts/images/headers/icons/menu@1.5x.png b/Contacts/images/headers/icons/menu@1.5x.png new file mode 100644 index 0000000..5cf17fe Binary files /dev/null and b/Contacts/images/headers/icons/menu@1.5x.png differ diff --git a/Contacts/images/headers/icons/menu@2x.png b/Contacts/images/headers/icons/menu@2x.png new file mode 100644 index 0000000..35a9cfd Binary files /dev/null and b/Contacts/images/headers/icons/menu@2x.png differ diff --git a/Contacts/images/headers/icons/reply-all.png b/Contacts/images/headers/icons/reply-all.png new file mode 100644 index 0000000..5c0c8b9 Binary files /dev/null and b/Contacts/images/headers/icons/reply-all.png differ diff --git a/Contacts/images/headers/icons/reply-all@1.5x.png b/Contacts/images/headers/icons/reply-all@1.5x.png new file mode 100644 index 0000000..8618023 Binary files /dev/null and b/Contacts/images/headers/icons/reply-all@1.5x.png differ diff --git a/Contacts/images/headers/icons/reply-all@2x.png b/Contacts/images/headers/icons/reply-all@2x.png new file mode 100644 index 0000000..4d3d74a Binary files /dev/null and b/Contacts/images/headers/icons/reply-all@2x.png differ diff --git a/Contacts/images/headers/icons/reply.png b/Contacts/images/headers/icons/reply.png new file mode 100644 index 0000000..c354b5f Binary files /dev/null and b/Contacts/images/headers/icons/reply.png differ diff --git a/Contacts/images/headers/icons/reply@1.5x.png b/Contacts/images/headers/icons/reply@1.5x.png new file mode 100644 index 0000000..e45eb0f Binary files /dev/null and b/Contacts/images/headers/icons/reply@1.5x.png differ diff --git a/Contacts/images/headers/icons/reply@2x.png b/Contacts/images/headers/icons/reply@2x.png new file mode 100644 index 0000000..1990b4d Binary files /dev/null and b/Contacts/images/headers/icons/reply@2x.png differ diff --git a/Contacts/images/headers/icons/send.png b/Contacts/images/headers/icons/send.png new file mode 100644 index 0000000..4bdbb1e Binary files /dev/null and b/Contacts/images/headers/icons/send.png differ diff --git a/Contacts/images/headers/icons/send@1.5x.png b/Contacts/images/headers/icons/send@1.5x.png new file mode 100644 index 0000000..e30e881 Binary files /dev/null and b/Contacts/images/headers/icons/send@1.5x.png differ diff --git a/Contacts/images/headers/icons/send@2x.png b/Contacts/images/headers/icons/send@2x.png new file mode 100644 index 0000000..c62d699 Binary files /dev/null and b/Contacts/images/headers/icons/send@2x.png differ diff --git a/Contacts/images/headers/icons/user.png b/Contacts/images/headers/icons/user.png new file mode 100644 index 0000000..c8abb82 Binary files /dev/null and b/Contacts/images/headers/icons/user.png differ diff --git a/Contacts/images/headers/icons/user@1.5x.png b/Contacts/images/headers/icons/user@1.5x.png new file mode 100644 index 0000000..ba0edf5 Binary files /dev/null and b/Contacts/images/headers/icons/user@1.5x.png differ diff --git a/Contacts/images/headers/icons/user@2x.png b/Contacts/images/headers/icons/user@2x.png new file mode 100644 index 0000000..9e2d4ff Binary files /dev/null and b/Contacts/images/headers/icons/user@2x.png differ diff --git a/Contacts/images/headers/ui/dark/header.png b/Contacts/images/headers/ui/dark/header.png new file mode 100644 index 0000000..df83859 Binary files /dev/null and b/Contacts/images/headers/ui/dark/header.png differ diff --git a/Contacts/images/headers/ui/dark/negative.png b/Contacts/images/headers/ui/dark/negative.png new file mode 100644 index 0000000..6f092a5 Binary files /dev/null and b/Contacts/images/headers/ui/dark/negative.png differ diff --git a/Contacts/images/headers/ui/dark/separator-large.png b/Contacts/images/headers/ui/dark/separator-large.png new file mode 100644 index 0000000..37ce4de Binary files /dev/null and b/Contacts/images/headers/ui/dark/separator-large.png differ diff --git a/Contacts/images/headers/ui/dark/separator.png b/Contacts/images/headers/ui/dark/separator.png new file mode 100644 index 0000000..fce8808 Binary files /dev/null and b/Contacts/images/headers/ui/dark/separator.png differ diff --git a/Contacts/images/headers/ui/dark/subheader.png b/Contacts/images/headers/ui/dark/subheader.png new file mode 100644 index 0000000..4c7699f Binary files /dev/null and b/Contacts/images/headers/ui/dark/subheader.png differ diff --git a/Contacts/images/headers/ui/header.png b/Contacts/images/headers/ui/header.png new file mode 100644 index 0000000..24796f6 Binary files /dev/null and b/Contacts/images/headers/ui/header.png differ diff --git a/Contacts/images/headers/ui/noise-pattern.png b/Contacts/images/headers/ui/noise-pattern.png new file mode 100644 index 0000000..9c78da8 Binary files /dev/null and b/Contacts/images/headers/ui/noise-pattern.png differ diff --git a/Contacts/images/headers/ui/organic/header.png b/Contacts/images/headers/ui/organic/header.png new file mode 100644 index 0000000..ac250cd Binary files /dev/null and b/Contacts/images/headers/ui/organic/header.png differ diff --git a/Contacts/images/headers/ui/organic/negative.png b/Contacts/images/headers/ui/organic/negative.png new file mode 100644 index 0000000..b663901 Binary files /dev/null and b/Contacts/images/headers/ui/organic/negative.png differ diff --git a/Contacts/images/headers/ui/organic/pattern.png b/Contacts/images/headers/ui/organic/pattern.png new file mode 100644 index 0000000..202db19 Binary files /dev/null and b/Contacts/images/headers/ui/organic/pattern.png differ diff --git a/Contacts/images/headers/ui/organic/separator-large.png b/Contacts/images/headers/ui/organic/separator-large.png new file mode 100644 index 0000000..3c4782f Binary files /dev/null and b/Contacts/images/headers/ui/organic/separator-large.png differ diff --git a/Contacts/images/headers/ui/organic/separator.png b/Contacts/images/headers/ui/organic/separator.png new file mode 100644 index 0000000..e315f0e Binary files /dev/null and b/Contacts/images/headers/ui/organic/separator.png differ diff --git a/Contacts/images/headers/ui/organic/subheader.png b/Contacts/images/headers/ui/organic/subheader.png new file mode 100644 index 0000000..31adb6c Binary files /dev/null and b/Contacts/images/headers/ui/organic/subheader.png differ diff --git a/Contacts/images/headers/ui/overlay/header.png b/Contacts/images/headers/ui/overlay/header.png new file mode 100644 index 0000000..fb3ead5 Binary files /dev/null and b/Contacts/images/headers/ui/overlay/header.png differ diff --git a/Contacts/images/headers/ui/overlay/separator.png b/Contacts/images/headers/ui/overlay/separator.png new file mode 100644 index 0000000..e02f24a Binary files /dev/null and b/Contacts/images/headers/ui/overlay/separator.png differ diff --git a/Contacts/images/headers/ui/separator-large.png b/Contacts/images/headers/ui/separator-large.png new file mode 100644 index 0000000..f50841f Binary files /dev/null and b/Contacts/images/headers/ui/separator-large.png differ diff --git a/Contacts/images/headers/ui/separator.png b/Contacts/images/headers/ui/separator.png new file mode 100644 index 0000000..18d6c81 Binary files /dev/null and b/Contacts/images/headers/ui/separator.png differ diff --git a/Contacts/images/headers/ui/shadow.png b/Contacts/images/headers/ui/shadow.png new file mode 100644 index 0000000..70e7e1d Binary files /dev/null and b/Contacts/images/headers/ui/shadow.png differ diff --git a/Contacts/images/headers/ui/shadow@1.5x.png b/Contacts/images/headers/ui/shadow@1.5x.png new file mode 100644 index 0000000..5e12dee Binary files /dev/null and b/Contacts/images/headers/ui/shadow@1.5x.png differ diff --git a/Contacts/images/headers/ui/shadow@2x.png b/Contacts/images/headers/ui/shadow@2x.png new file mode 100644 index 0000000..9f54ae6 Binary files /dev/null and b/Contacts/images/headers/ui/shadow@2x.png differ diff --git a/Contacts/images/headers/ui/subheader.png b/Contacts/images/headers/ui/subheader.png new file mode 100644 index 0000000..6bd5a23 Binary files /dev/null and b/Contacts/images/headers/ui/subheader.png differ diff --git a/Contacts/images/input_areas/icons/arrow.png b/Contacts/images/input_areas/icons/arrow.png new file mode 100644 index 0000000..60b0048 Binary files /dev/null and b/Contacts/images/input_areas/icons/arrow.png differ diff --git a/Contacts/images/input_areas/icons/arrow@1.5x.png b/Contacts/images/input_areas/icons/arrow@1.5x.png new file mode 100644 index 0000000..c829016 Binary files /dev/null and b/Contacts/images/input_areas/icons/arrow@1.5x.png differ diff --git a/Contacts/images/input_areas/icons/arrow@2x.png b/Contacts/images/input_areas/icons/arrow@2x.png new file mode 100644 index 0000000..6263903 Binary files /dev/null and b/Contacts/images/input_areas/icons/arrow@2x.png differ diff --git a/Contacts/images/input_areas/icons/clear-dark.png b/Contacts/images/input_areas/icons/clear-dark.png new file mode 100644 index 0000000..eb8acf8 Binary files /dev/null and b/Contacts/images/input_areas/icons/clear-dark.png differ diff --git a/Contacts/images/input_areas/icons/clear-dark@1.5x.png b/Contacts/images/input_areas/icons/clear-dark@1.5x.png new file mode 100644 index 0000000..0124197 Binary files /dev/null and b/Contacts/images/input_areas/icons/clear-dark@1.5x.png differ diff --git a/Contacts/images/input_areas/icons/clear-dark@2x.png b/Contacts/images/input_areas/icons/clear-dark@2x.png new file mode 100644 index 0000000..92a3ec4 Binary files /dev/null and b/Contacts/images/input_areas/icons/clear-dark@2x.png differ diff --git a/Contacts/images/input_areas/icons/clear.png b/Contacts/images/input_areas/icons/clear.png new file mode 100644 index 0000000..56ceb33 Binary files /dev/null and b/Contacts/images/input_areas/icons/clear.png differ diff --git a/Contacts/images/input_areas/icons/clear@1.5x.png b/Contacts/images/input_areas/icons/clear@1.5x.png new file mode 100644 index 0000000..1753074 Binary files /dev/null and b/Contacts/images/input_areas/icons/clear@1.5x.png differ diff --git a/Contacts/images/input_areas/icons/clear@2x.png b/Contacts/images/input_areas/icons/clear@2x.png new file mode 100644 index 0000000..0fb3521 Binary files /dev/null and b/Contacts/images/input_areas/icons/clear@2x.png differ diff --git a/Contacts/images/input_areas/icons/search-dark.png b/Contacts/images/input_areas/icons/search-dark.png new file mode 100644 index 0000000..6d217cf Binary files /dev/null and b/Contacts/images/input_areas/icons/search-dark.png differ diff --git a/Contacts/images/input_areas/icons/search-dark@1.5x.png b/Contacts/images/input_areas/icons/search-dark@1.5x.png new file mode 100644 index 0000000..1e3f1f8 Binary files /dev/null and b/Contacts/images/input_areas/icons/search-dark@1.5x.png differ diff --git a/Contacts/images/input_areas/icons/search-dark@2x.png b/Contacts/images/input_areas/icons/search-dark@2x.png new file mode 100644 index 0000000..1d31a21 Binary files /dev/null and b/Contacts/images/input_areas/icons/search-dark@2x.png differ diff --git a/Contacts/images/input_areas/icons/search.png b/Contacts/images/input_areas/icons/search.png new file mode 100644 index 0000000..64684db Binary files /dev/null and b/Contacts/images/input_areas/icons/search.png differ diff --git a/Contacts/images/input_areas/icons/search@1.5x.png b/Contacts/images/input_areas/icons/search@1.5x.png new file mode 100644 index 0000000..7bf564c Binary files /dev/null and b/Contacts/images/input_areas/icons/search@1.5x.png differ diff --git a/Contacts/images/input_areas/icons/search@2x.png b/Contacts/images/input_areas/icons/search@2x.png new file mode 100644 index 0000000..3618e8b Binary files /dev/null and b/Contacts/images/input_areas/icons/search@2x.png differ diff --git a/Contacts/images/input_areas/ui/active.png b/Contacts/images/input_areas/ui/active.png new file mode 100644 index 0000000..48e84d8 Binary files /dev/null and b/Contacts/images/input_areas/ui/active.png differ diff --git a/Contacts/images/input_areas/ui/background-dark.png b/Contacts/images/input_areas/ui/background-dark.png new file mode 100644 index 0000000..f376b7c Binary files /dev/null and b/Contacts/images/input_areas/ui/background-dark.png differ diff --git a/Contacts/images/input_areas/ui/background.png b/Contacts/images/input_areas/ui/background.png new file mode 100644 index 0000000..dce3df4 Binary files /dev/null and b/Contacts/images/input_areas/ui/background.png differ diff --git a/Contacts/images/input_areas/ui/separator-dark.png b/Contacts/images/input_areas/ui/separator-dark.png new file mode 100644 index 0000000..1469595 Binary files /dev/null and b/Contacts/images/input_areas/ui/separator-dark.png differ diff --git a/Contacts/images/input_areas/ui/separator-dark@1.5x.png b/Contacts/images/input_areas/ui/separator-dark@1.5x.png new file mode 100644 index 0000000..a6a781a Binary files /dev/null and b/Contacts/images/input_areas/ui/separator-dark@1.5x.png differ diff --git a/Contacts/images/input_areas/ui/separator-dark@2x.png b/Contacts/images/input_areas/ui/separator-dark@2x.png new file mode 100644 index 0000000..ffb0a3f Binary files /dev/null and b/Contacts/images/input_areas/ui/separator-dark@2x.png differ diff --git a/Contacts/images/input_areas/ui/separator.png b/Contacts/images/input_areas/ui/separator.png new file mode 100644 index 0000000..32bcc46 Binary files /dev/null and b/Contacts/images/input_areas/ui/separator.png differ diff --git a/Contacts/images/input_areas/ui/separator@1.5x.png b/Contacts/images/input_areas/ui/separator@1.5x.png new file mode 100644 index 0000000..8b2acd3 Binary files /dev/null and b/Contacts/images/input_areas/ui/separator@1.5x.png differ diff --git a/Contacts/images/input_areas/ui/separator@2x.png b/Contacts/images/input_areas/ui/separator@2x.png new file mode 100644 index 0000000..1c4ae4a Binary files /dev/null and b/Contacts/images/input_areas/ui/separator@2x.png differ diff --git a/Contacts/images/input_areas/ui/shadow-invert.png b/Contacts/images/input_areas/ui/shadow-invert.png new file mode 100644 index 0000000..1694bbf Binary files /dev/null and b/Contacts/images/input_areas/ui/shadow-invert.png differ diff --git a/Contacts/images/input_areas/ui/shadow-invert@1.5x.png b/Contacts/images/input_areas/ui/shadow-invert@1.5x.png new file mode 100644 index 0000000..7676c3a Binary files /dev/null and b/Contacts/images/input_areas/ui/shadow-invert@1.5x.png differ diff --git a/Contacts/images/input_areas/ui/shadow-invert@2x.png b/Contacts/images/input_areas/ui/shadow-invert@2x.png new file mode 100644 index 0000000..d3c0db1 Binary files /dev/null and b/Contacts/images/input_areas/ui/shadow-invert@2x.png differ diff --git a/Contacts/images/input_areas/ui/shadow-search.png b/Contacts/images/input_areas/ui/shadow-search.png new file mode 100644 index 0000000..234e7e4 Binary files /dev/null and b/Contacts/images/input_areas/ui/shadow-search.png differ diff --git a/Contacts/images/input_areas/ui/shadow-search@1.5x.png b/Contacts/images/input_areas/ui/shadow-search@1.5x.png new file mode 100644 index 0000000..7aa06d2 Binary files /dev/null and b/Contacts/images/input_areas/ui/shadow-search@1.5x.png differ diff --git a/Contacts/images/input_areas/ui/shadow-search@2x.png b/Contacts/images/input_areas/ui/shadow-search@2x.png new file mode 100644 index 0000000..58f4c7d Binary files /dev/null and b/Contacts/images/input_areas/ui/shadow-search@2x.png differ diff --git a/Contacts/images/input_areas/ui/shadow.png b/Contacts/images/input_areas/ui/shadow.png new file mode 100644 index 0000000..3739f71 Binary files /dev/null and b/Contacts/images/input_areas/ui/shadow.png differ diff --git a/Contacts/images/input_areas/ui/shadow@1.5x.png b/Contacts/images/input_areas/ui/shadow@1.5x.png new file mode 100644 index 0000000..2d51d10 Binary files /dev/null and b/Contacts/images/input_areas/ui/shadow@1.5x.png differ diff --git a/Contacts/images/input_areas/ui/shadow@2x.png b/Contacts/images/input_areas/ui/shadow@2x.png new file mode 100644 index 0000000..fa7e121 Binary files /dev/null and b/Contacts/images/input_areas/ui/shadow@2x.png differ diff --git a/Contacts/index.html b/Contacts/index.html new file mode 100644 index 0000000..083159e --- /dev/null +++ b/Contacts/index.html @@ -0,0 +1,42 @@ + + + +Contacts + + + + + + + + +
+ +
+ + + +

Contacts

+
+ +
+
+
+
    + +
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/Contacts/js/app.js b/Contacts/js/app.js new file mode 100644 index 0000000..22ab8bc --- /dev/null +++ b/Contacts/js/app.js @@ -0,0 +1,214 @@ +var app = function(){ + + return { + /** + * common + */ + $: function(id){ + if(!id){ + return null; + } + return document.getElementById(id); + }, + addEvent: function(id, event, callBack){ + var obj = $(id); + if (obj.addEventListener) { + obj.addEventListener(event, callBack, false); + } + else{ + obj.attachEvent('on'+event, callBack, false); + } + }, + getURLParameter: function(name) { + return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null + }, + back: function(){ + document.location = "index.html"; + }, + + /** + * contacts read + */ + contactsRead: function(){ + app.addEvent('btnCreateOnContactsRead', 'click', function(){ + document.location = 'contact_create.html'; + }); + + var filter = { + sortBy: "name", + sortOrder: "descending" + }; + + var allContacts = navigator.mozContacts.getAll(filter); + + allContacts.onsuccess = function (event) { + var cursor = event.target; + var tmpl = ''; + var person = {}; + if (cursor.result) { + person.id = cursor.result.id; + person.name = cursor.result.name || ''; + person.tel = cursor.result.tel ? cursor.result.tel[0].value : ''; + + tmpl += '
  • '; + tmpl += ' '; + tmpl += '

    name : ' + person.name + '

    '; + tmpl += '

    tel : ' + person.tel + '

    '; + tmpl += '     '; + tmpl += '
    • '; + + $('contactsList').innerHTML += tmpl; + + cursor.continue(); + } + else { + console.log('No more contacts'); + } + } + + allContacts.onerror = function() { + console.warn("Something went terribly wrong! :("); + } + }, + /** + * contact create + */ + contactCreate: function(event){ + + event.preventDefault ? event.preventDefault() : event.returnValue = false; + + var name = $('name').value; + var tel = $('tel').value; + var person = { + name : [ name ], + familyName : [ name ], + tel : [ { + type : 'home', + value : tel + } ] + }; + + var saving = navigator.mozContacts.save(person); + saving.onsuccess = function() { + app.back(); + console.log('new contact saved'); + }; + saving.onerror = function(err) { + console.error('save err : ', err); + }; + }, + /** + * contact read + */ + contactRead: function(){ + console.log('contactread'); + app.addEvent('btnBackOnContactRead', 'click', app.back); + app.addEvent('btnUpdateOnContactRead', 'click', app.contactUpdate); + app.addEvent('btnDeleteOnContactRead', 'click', app.contactDelete); + + var id = app.getURLParameter('id'); + var options = { + filterValue : id, + filterBy : ["id"], + filterOp : "equals" + }; + var search = navigator.mozContacts.find(options); + + search.onsuccess = function() { + if (search.result.length === 1) { + var person = search.result[0]; + + $('id').value = person.id; + $('name').value = person.name || ''; + $('tel').value = person.tel ? person.tel[0].value : ''; + + console.log("Found:" + person.givenName[0] + " " + person.familyName[0]); + } else { + console.log("Sorry, there is no such contact."); + } + } + search.onerror = function() { + console.warn("Uh! Something goes wrong, no result found!"); + } + }, + /** + * contact update + */ + contactUpdate: function(event){ + + event.preventDefault ? event.preventDefault() : event.returnValue = false; + + var id = $('id').value; + var name = $('name').value; + var tel = $('tel').value; + + + var options = { + filterValue : id, + filterBy : ["id"], + filterOp : "equals" + }; + + var updateSearch = navigator.mozContacts.find(options); + + updateSearch.onsuccess = function(){ + if(updateSearch.result.length == 1){ + var person = updateSearch.result[0]; + person.name = name; + person.tel[0].value = tel; + + var upadte = navigator.mozContacts.save(person); + upadte.onsuccess = function() { + document.location = "index.html"; + }; + + upadte.onerror = function(err) { + console.error(err); + }; + } + } + updateSearch.onerror = function() { + console.warn("Uh! Something goes wrong, no result found!"); + } + }, + /** + * contactDelete + */ + contactDelete: function(event){ + event.preventDefault ? event.preventDefault() : event.returnValue = false; + + if (confirm("Really?")) { + + var id = $('id').value; + + var options = { + filterValue : id, + filterBy : ["id"], + filterOp : "equals" + }; + + var removeSearch = navigator.mozContacts.find(options); + + removeSearch.onsuccess = function(){ + if(removeSearch.result.length == 1){ + var person = removeSearch.result[0]; + var remove = navigator.mozContacts.remove(person); + + remove.onsuccess = function() { + document.location = "index.html"; + }; + + remove.onerror = function(err) { + console.error('remove error : ' + err); + }; + } + } + removeSearch.onerror = function() { + console.warn("Uh! Something goes wrong, no result found!"); + } + } + } + } //-- return +}(); + +window.$ = app.$; diff --git a/Contacts/manifest.webapp b/Contacts/manifest.webapp new file mode 100644 index 0000000..f710ed1 --- /dev/null +++ b/Contacts/manifest.webapp @@ -0,0 +1,20 @@ +{ + "version": "0.1", + "name": "Contacts", + "type" : "privileged", + "csp" : "default-src *; script-src 'self'; object-src 'none'; style-src 'self' 'unsafe-inline'", + "launch_path": "/index.html", + "installs_allowed_from": ["*"], + "default_locale": "en", + "permissions": { + "contacts": { + "description": "Contacts App", + "access": "readwrite" + } + }, + "icons": { + "16": "img/icon-16.png", + "48": "img/icon-48.png", + "128": "img/icon-128.png" + } +} \ No newline at end of file diff --git a/Contacts/sample.html b/Contacts/sample.html new file mode 100644 index 0000000..10fba6a --- /dev/null +++ b/Contacts/sample.html @@ -0,0 +1,85 @@ + + + + + + + + + + \ No newline at end of file