diff --git a/cache.manifest b/cache.manifest new file mode 100644 index 0000000..1e40ea4 --- /dev/null +++ b/cache.manifest @@ -0,0 +1,81 @@ +CACHE MANIFEST +./includes/jsTouch.js +./includes/jquery.js +./includes/iscroll.js +./includes/cache.js +./index.html +./pages/test.php +./pages/buttons.html +./pages/tabs-tab4.html +./pages/tabs.html +./pages/forms_save.php +./pages/home.html +./pages/overlay-buttons.html +./pages/tabs-tab3.html +./pages/list-edgetoedge.html +./pages/animations.html +./pages/lists.html +./pages/tabs-tab2.html +./pages/overlays.html +./pages/about.html +./pages/forms.html +./pages/tabs-tab1.html +./pages/tabs-tab5.html +./pages/overlay-msg2.html +./pages/list-rounded.html +./pages/overlay-list.html +./pages/overlay-msg.html +./pages/themes.html +./w2touch-r1.zip +./config.xml +./cache.manifest +./css/ipad-light.css +./css/apple.css +./css/core.css +./css/ipad-dark.css +./index.js +./images/iphone_startup_p.png +./images/iphone_startup_l.png +./images/dark-linen.jpg +./images/on_off.png +./images/iphone_startup_2x.png +./images/iphone4.png +./images/iphone_icon_2x.png +./images/iphone_icon.png +./images/tabs/mute.png +./images/tabs/play-back.png +./images/tabs/person.png +./images/tabs/go-right.png +./images/tabs/flag.png +./images/tabs/tag.png +./images/tabs/guitar.png +./images/tabs/sound-loud.png +./images/tabs/note.png +./images/tabs/play-pause.png +./images/tabs/cloud.png +./images/tabs/phone.png +./images/tabs/unlock.png +./images/tabs/music.png +./images/tabs/tag2.png +./images/tabs/search.png +./images/tabs/lock.png +./images/tabs/bright-light.png +./images/tabs/bright-dark.png +./images/tabs/clock.png +./images/tabs/wizard.png +./images/tabs/aim.png +./images/tabs/delete.png +./images/tabs/camera.png +./images/tabs/play.png +./images/tabs/passforward.png +./images/tabs/go-left.png +./images/tabs/info.png +./images/tabs/heart.png +./images/tabs/pause.png +./images/tabs/sound-normal.png +./images/tabs/rewind.png +./images/stripes.png +./images/web20-touch.xar +./images/on_off_ios5.png +./images/iphone_startup.png +# hash: 8426351aa8c59ae750b8725e0c777baa \ No newline at end of file diff --git a/config.xml b/config.xml index 319c111..4e871f3 100644 --- a/config.xml +++ b/config.xml @@ -4,7 +4,7 @@ id = "Web20TouchDemo" version = "1.0"> - Web 2.0 Touch Demo + W2touch Demo A demo application for Web 2.0 Touch framework. You can fork it on github @@ -14,8 +14,21 @@ Vitali Malinouski + + + + + + + ' - - + + + + + + + + - + diff --git a/css/apple.css b/css/apple.css index 48dfb3f..674e6b0 100644 --- a/css/apple.css +++ b/css/apple.css @@ -71,9 +71,6 @@ div.jsTouch div.toolbar h1{ /* BLACK BUTTON WITH BLUE OVERLAY */ .button { - position: relative; - top: -26px; - float: right; color: #fff; text-decoration: none; display: inline-block; @@ -104,10 +101,10 @@ div.jsTouch div.toolbar h1{ -webkit-background-clip: content; } -.button.back { - float: left; - padding-left: 5px; - margin-left: 8px; +.button.back, .button.left { + position: absolute; + left: 12px; + top: 8px; } .back > span.s2 { @@ -138,17 +135,16 @@ div.jsTouch div.toolbar h1{ -webkit-mask-position-y: 0px; -webkit-mask-clip: border; -webkit-box-sizing: border-box; - -webkit-box-shadow: 0px 1px 0px #bbb; } .back.clicked > span.s2 { background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#7AD62B), to(#56961E)); } -.button.next { - float: right; - padding-right: 5px; - margin-right: 8px; +.button.next, .button.right { + position: absolute; + right: 12px; + top: 8px; } .next > span.s2 { @@ -179,7 +175,6 @@ div.jsTouch div.toolbar h1{ -webkit-mask-position-y: 0px; -webkit-mask-clip: border; -webkit-box-sizing: border-box; - -webkit-box-shadow: 0px 1px 0px #bbb; } .next.clicked > span.s2 { diff --git a/css/core.css b/css/core.css index b546f03..6ede31a 100644 --- a/css/core.css +++ b/css/core.css @@ -3,6 +3,7 @@ body { padding: 0px; overflow: hidden; //-webkit-user-select: none; + box-sizing: border-box; } .icon { padding: 0px; @@ -158,7 +159,8 @@ div.overlay .toolbar > span.arrow { } div.overlay .toolbar .button { - top: -43px; + border: 1px solid #222; + box-shadow: 0px 1px 0px #888; } div.overlay .footer { @@ -381,33 +383,32 @@ div.jsTouch div.content input { } div.jsTouch div.content span.toggle { - width: 94px; + width: 70px; height: 27px; display: block; overflow: hidden; float: right; - margin-top: -3px; - margin-bottom: -3px; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; + margin: 0px -3px; + -webkit-border-radius: 20px; + -moz-border-radius: 20px; } div.jsTouch div.content span.toggle input[type=checkbox]:checked { - margin-left: 0px; + margin-left: -2px; } div.jsTouch div.content span.toggle input[type=checkbox] { - background: #fff url(../images/on_off.png) 0 0 no-repeat; + background: #fff url(../images/on_off_ios5.png) 0 0 no-repeat; height: 28px; margin: 0; - margin-left: -55px; - width: 150px; + margin-left: -48px; + width: 120px; -moz-appearance: none; - -moz-border-radius: 5px; + -moz-border-radius: 20px; -moz-tap-highlight-color: rgba(0,0,0,0); -moz-transition: margin .15s; -webkit-appearance: textarea; - -webkit-border-radius: 5px; + -webkit-border-radius: 20px; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-transition: margin .15s; } \ No newline at end of file diff --git a/css/ipad-dark.css b/css/ipad-dark.css index 4a7d79b..ca6cdad 100644 --- a/css/ipad-dark.css +++ b/css/ipad-dark.css @@ -67,12 +67,75 @@ div.jsTouch div.toolbar h1{ text-align: center; } -/* BLACK BUTTON WITH BLUE OVERLAY */ +/* BLACK BUTTON WITH GREEN OVERLAY */ -.button { - position: relative; - top: -26px; +/* +.button { + position: absolute; + top: 8px; + color: #fff; + text-decoration: none; + display: inline-block; + padding: 4px 10px; + -webkit-border-radius: 5px; + font-family: Helvetica, Arial, sans-serif; + font-size: 13px; + font-weight: bold; + cursor: pointer; + margin: 0 1px; + -webkit-tap-highlight-color: rgba(0,0,0,0); + background: -webkit-gradient(linear, left top, left bottom, from(#A6A6A6), to(#B5B5B5), color-stop(.5,#7A7A7A),color-stop(.5,#5C5C5C)); + border: 1px solid #222222; + -webkit-box-shadow: 0px 1px 0px #666666; + height: 17px; + text-shadow: #444444 1px 1px 1px; +} + +.button.clicked { + background-image: -webkit-gradient(linear, left top, left bottom, from(#7AD62B), to(#56961E)); +} + +.button:before { + content: ""; + height: 18px; + width: 18px; + display: block; + -webkit-background-clip: content; + background: -webkit-gradient(linear, left top, right bottom, from(#A6A6A6), to(#B5B5B5), color-stop(.45,#7A7A7A), color-stop(.45,#5C5C5C)); + border-bottom: 1px solid #222222; + border-left: 1px solid #222222; +} + +.button.clicked:before { + background-image: -webkit-gradient(linear, left top, right bottom, from(#7AD62B), to(#56961E)); +} + +.button.back { + left: 15px; +} + +.button.back:before { + float: left; + margin-top: -1px; + margin-left: -18px; + -webkit-transform: rotate(45deg); + -webkit-box-shadow: 0px 1px 0px #666666; +} + +.button.next { + right: 15px; +} + +.button.next:before { float: right; + margin-top: -1px; + margin-right: -18px; + -webkit-transform: rotate(-135deg); + -webkit-box-shadow: -1px 0px 0px #666666; +} +*/ + +.button { color: #fff; text-decoration: none; display: inline-block; @@ -104,10 +167,10 @@ div.jsTouch div.toolbar h1{ -webkit-background-clip: content; } -.button.back { - float: left; - padding-left: 5px; - margin-left: 8px; +.button.back, .button.left { + position: absolute; + left: 12px; + top: 8px; } .back > span.s2 { @@ -138,17 +201,16 @@ div.jsTouch div.toolbar h1{ -webkit-mask-position-y: 0px; -webkit-mask-clip: border; -webkit-box-sizing: border-box; - -webkit-box-shadow: 0px 1px 0px #bbb; } .back.clicked > span.s2 { background-image: -webkit-gradient(linear, left top, right bottom, from(#7AD62B), to(#56961E)); } -.button.next { - float: right; - padding-right: 5px; - margin-right: 8px; +.button.next, .button.right { + position: absolute; + right: 12px; + top: 8px; } .next > span.s2 { @@ -179,7 +241,6 @@ div.jsTouch div.toolbar h1{ -webkit-mask-position-y: 0px; -webkit-mask-clip: border; -webkit-box-sizing: border-box; - -webkit-box-shadow: 0px 1px 0px #bbb; } .next.clicked > span.s2 { diff --git a/css/ipad-light.css b/css/ipad-light.css index cff9e15..da8a277 100644 --- a/css/ipad-light.css +++ b/css/ipad-light.css @@ -72,9 +72,6 @@ div.jsTouch div.toolbar h1{ /* BLACK BUTTON WITH BLUE OVERLAY */ .button { - position: relative; - top: -26px; - float: right; color: #fff; text-decoration: none; display: inline-block; @@ -107,10 +104,10 @@ div.jsTouch div.toolbar h1{ -webkit-background-clip: content; } -.button.back { - float: left; - padding-left: 5px; - margin-left: 8px; +.button.back, .button.left { + position: absolute; + left: 12px; + top: 8px; } .back > span.s2 { @@ -141,17 +138,16 @@ div.jsTouch div.toolbar h1{ -webkit-mask-position-y: 0px; -webkit-mask-clip: border; -webkit-box-sizing: border-box; - -webkit-box-shadow: 0px 1px 0px #bbb; } .back.clicked > span.s2 { background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#24CCFF), to(#1A83D4), color-stop(.5,#1A88DB),color-stop(.5,#187BC7)); } -.button.next { - float: right; - padding-right: 5px; - margin-right: 8px; +.button.next, .button.right { + position: absolute; + right: 12px; + top: 8px; } .next > span.s2 { @@ -159,7 +155,7 @@ div.jsTouch div.toolbar h1{ right: -9px; height: 27px; width: 12px; - background: -webkit-gradient(linear, left top, right bottom, from(#BCBDBF), to(#717882)); + background: -webkit-gradient(linear, 0 0, 0 100%, from(#BCBDBF), to(#717882)); -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABGCAYAAADb7SQ4AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAACk0lEQVRoQ8WZP2gUQRTGLwYCVlaBgK1tOokgBI50QTFgJQqBlBaWgoFgq72FZSrFSjAk2NkKtgEr25AiELASLgTz/ULmuGRvdmdn3rx78DW3cL/58755b2fnRmfnx4PB4L50JLnFLZGWpO/SHTeqQICJZemrtOAFD2B4a9LuLMAwn0tvPeBzSq7/U0Av9NvnmgOIgUeCrks/asEn93iSQZKRbCRdlYiBgWEvbLZYg9wGhndX2pduW8O7wPBWpC/SvCU8BQzvifRhFmCYL6XXVvCYnWL/f64HT6W90gH0BcP7Jw2lXyXw1D2eZJDhZPo9bzA8vF3k8ZwZh4kyY2yWVUpLwAwgu5SWgoFTSt/13W8LMMw3Vz5P5ufYKfbnvUqp1YwZTK9SagkGHkopVa01rMHAgHa2yzXAwOlcPknRUloLDPyRFC2lNcHAKaVYrRGWdmpLpka77AXG40PpZxhd7aUOHDz+TRqXUi8wA7hWSj3BwJkxTcSC1x7fTLwt7xmHASzPCjy+EWjzYI1nh7PYY9riVe+l/iPoY2nkCf4rIC/7J+ydF5gjk1cfZnwZXuAtsa5da3iAdwRtXOTUzmqAlMRG1ASztCQT++sG/i3SQ4lMnho19hi7bLRBa2Q1L+0cEGPbeM34mUBJNwWWS70taPLdiBX4o6DvY8taK6sPrpKJG6HkKPXxoUirXRk8bTQlS83HEw6IqFfbpp8LDiUu+8tNDpi93JRY5uzIAb/qYxurAwTLYJ3i6JPVHA50Eb1sExthKphjcChxFptEyh6HztAMysi7wNiG5b3sDC2jDRw6wyLb5GR1ozP0mDG2cf/EF+0MLWd8006tnWEtMLZ5IJ1aArqSC7tQ4lygwcfJnaHlSlwADTGshYz22ugAAAAASUVORK5CYII=); -webkit-mask-size: 13px 27px; -webkit-mask-repeat: no-repeat; @@ -182,7 +178,6 @@ div.jsTouch div.toolbar h1{ -webkit-mask-position-y: 0px; -webkit-mask-clip: border; -webkit-box-sizing: border-box; - -webkit-box-shadow: 0px 1px 0px #bbb; } .next.clicked > span.s2 { diff --git a/images/iphone_icon.png b/images/iphone_icon.png index 1fa0d84..28005ab 100644 Binary files a/images/iphone_icon.png and b/images/iphone_icon.png differ diff --git a/images/iphone_icon2.png b/images/iphone_icon2.png new file mode 100644 index 0000000..1fa0d84 Binary files /dev/null and b/images/iphone_icon2.png differ diff --git a/images/iphone_icon_2x.png b/images/iphone_icon_2x.png new file mode 100644 index 0000000..a726e5e Binary files /dev/null and b/images/iphone_icon_2x.png differ diff --git a/images/iphone_startup.png b/images/iphone_startup.png index f5c6aad..ffec588 100644 Binary files a/images/iphone_startup.png and b/images/iphone_startup.png differ diff --git a/images/iphone_startup_2x.png b/images/iphone_startup_2x.png new file mode 100644 index 0000000..69d7247 Binary files /dev/null and b/images/iphone_startup_2x.png differ diff --git a/images/iphone_startup_l.png b/images/iphone_startup_l.png new file mode 100644 index 0000000..97e2e60 Binary files /dev/null and b/images/iphone_startup_l.png differ diff --git a/images/iphone_startup_p.png b/images/iphone_startup_p.png new file mode 100644 index 0000000..c8f474c Binary files /dev/null and b/images/iphone_startup_p.png differ diff --git a/images/on_off_ios5.png b/images/on_off_ios5.png new file mode 100644 index 0000000..50e9b6d Binary files /dev/null and b/images/on_off_ios5.png differ diff --git a/images/web20-touch.xar b/images/web20-touch.xar new file mode 100644 index 0000000..a219870 Binary files /dev/null and b/images/web20-touch.xar differ diff --git a/index.html b/index.html index 014c50f..0727cfd 100644 --- a/index.html +++ b/index.html @@ -1 +1,19 @@ - Web 2.0 Touch \ No newline at end of file + + + + Web 2.0 Touch + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/pages/about.html b/pages/about.html index 434227a..f26c427 100644 --- a/pages/about.html +++ b/pages/about.html @@ -1,6 +1,6 @@

About

- Done + Done

Web 2.0 Touch

diff --git a/pages/animations.html b/pages/animations.html index a4d7ae0..0419087 100644 --- a/pages/animations.html +++ b/pages/animations.html @@ -1,6 +1,6 @@
-

Animations

Back +

Animations

diff --git a/pages/forms.html b/pages/forms.html index 33b49a3..cbac585 100644 --- a/pages/forms.html +++ b/pages/forms.html @@ -1 +1,56 @@ -

Forms

Back
  • Status
  • Active
  • First Name
  • Last Name
  • URL
  • Email
  • Login
  • Password
\ No newline at end of file +
+

Forms

+ Back +
+
+
+
    +
  • +
    Status
    +
    +
    +
    • +
  • +
    Active
    +
    +
    +
    • +
  • +
    First Name
    +
    +
    +
    • +
  • +
    Last Name
    +
    +
    +
    • +
  • +
    URL
    +
    +
    +
    • +
  • +
    Email
    +
    +
    +
    • +
  • +
    Login
    +
    +
    +
    • +
  • +
    Password
    +
    +
    +
    • +
+
+ Save Record +

+ +

+
+
+
\ No newline at end of file diff --git a/pages/forms_save.php b/pages/forms_save.php index c3c126b..0269f37 100644 --- a/pages/forms_save.php +++ b/pages/forms_save.php @@ -1 +1,10 @@ - Data:
"); print_r($_POST); ?> \ No newline at end of file + +Data:
+"); +print_r($_POST); +?> + + \ No newline at end of file diff --git a/pages/overlay-list.html b/pages/overlay-list.html index 7b58016..e8a5487 100644 --- a/pages/overlay-list.html +++ b/pages/overlay-list.html @@ -1 +1,31 @@ -

Overlay List

\ No newline at end of file +
+ + + +

Overlay List

+
+
+ + +
\ No newline at end of file diff --git a/pages/overlays.html b/pages/overlays.html index e69f22c..dac92b4 100644 --- a/pages/overlays.html +++ b/pages/overlays.html @@ -1,7 +1,7 @@
-

Overlays

Back - Info + Info +

Overlays

diff --git a/pages/tabs-tab1.html b/pages/tabs-tab1.html index de7d363..f87f9a1 100644 --- a/pages/tabs-tab1.html +++ b/pages/tabs-tab1.html @@ -1 +1,12 @@ -

This is tab 1

\ No newline at end of file +

This is tab 1

+ \ No newline at end of file diff --git a/pages/tabs-tab2.html b/pages/tabs-tab2.html index a7714a7..18cf86d 100644 --- a/pages/tabs-tab2.html +++ b/pages/tabs-tab2.html @@ -1 +1,33 @@ - \ No newline at end of file + + + \ No newline at end of file diff --git a/pages/tabs-tab3.html b/pages/tabs-tab3.html index 60152b4..17e27b5 100644 --- a/pages/tabs-tab3.html +++ b/pages/tabs-tab3.html @@ -1 +1,12 @@ -

This is tab 3

\ No newline at end of file +

This is tab 3

+ \ No newline at end of file diff --git a/pages/tabs-tab4.html b/pages/tabs-tab4.html index 725283f..dbd21e3 100644 --- a/pages/tabs-tab4.html +++ b/pages/tabs-tab4.html @@ -1 +1,23 @@ -

This is tab 4

\ No newline at end of file +

This is tab 4

+ + \ No newline at end of file diff --git a/pages/tabs-tab5.html b/pages/tabs-tab5.html index ace9703..0e9bd04 100644 --- a/pages/tabs-tab5.html +++ b/pages/tabs-tab5.html @@ -1 +1,11 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/pages/tabs.html b/pages/tabs.html index a4926b6..bf83505 100644 --- a/pages/tabs.html +++ b/pages/tabs.html @@ -1 +1,30 @@ -

Tabs

Back
\ No newline at end of file +
+

Tabs

+ Back +
+ +
+
+ +
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ \ No newline at end of file diff --git a/pages/test.php b/pages/test.php new file mode 100644 index 0000000..86362e1 --- /dev/null +++ b/pages/test.php @@ -0,0 +1,3 @@ + \ No newline at end of file