Added "force WebApp mode" and style fixed

Author: kudakurage

images/toggle.png

@@ -4,8 +4,8 @@
   <meta charset="UTF-8" />
   <title>CSS PhotoEditor for iOS6 - kudakurage</title>
   <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
-  <meta name="Description" content="It's time again for a new version of iOS for iPhone and iPad and a bunch of news about mobile web development." />
-  <meta name="Keywords"  content="iOS6,safari,iphone,ipad" />
+  <meta name="Description" content="CSS PhotoEditor is a test site for new features that will be installed in iOS 6." />
+  <meta name="Keywords"  content="iOS6,safari,iphone,ipad,css,filter" />
   <meta name="format-detection" content="telephone=no" />
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
@@ -50,7 +50,7 @@
         <div id="opacity-slider"><input type="range" name="opacity" min="0" max="100" value="100"><output class="value"><span>100</span>%</output></div>
       </div>
     </div>
-    <div id="disabled"><img src="images/loading.gif"></div>
+    <div id="disabled"><div><img src="images/loading.gif"></div></div>
     <div id="info-body">
       <header>
         <h1>CSS PhotoEditor</h1>
@@ -65,6 +65,13 @@ <h2>About This</h2>
           </p>
           <p>IF you want to learn more, you may read <a href="http://d.hatena.ne.jp/kudakurage/">my blog entry</a>.</p>
         </div>
+        <div id="force-webapp-content">
+          <h2>WebApp Mode by Force</h2>
+          <p>
+            When you turn on this mode, you can switch to forcibly WebApp mode. This switch is not only appear at the time of the Overview mode.
+          </p>
+          <p class="function">Force WebApp Mode<a href="#" id="force-webapp">OFF</a></p>
+        </div>
         <div>
           <h2>Features and Help</h2>
           <h3>Image Filters</h3>
@@ -99,5 +106,18 @@ <h2>Creator Profile</h2>
     </div><!-- #info-body -->
   </div><!-- #display -->
 </div><!-- #wrapper -->
+<script type="text/javascript">
+
+  var _gaq = _gaq || [];
+  _gaq.push(['_setAccount', 'UA-33534717-1']);
+  _gaq.push(['_trackPageview']);
+
+  (function() {
+    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+  })();
+
+</script>
 </body>
 </html>

images/upload.jpg

@@ -144,13 +144,29 @@ $(function(){
       }
     }, 'json');
   });
+  
+  $('#force-webapp').toggle(function(){
+    $(this).addClass('on').text('ON');
+    setTimeout(function(){
+      $('body').addClass('fullscreen');
+    }, 350);
+  }, function(){
+    $(this).removeClass('on').text('OFF');
+    setTimeout(function(){
+      $('body').removeClass('fullscreen');
+    }, 350);
+  });
 });
 
 ///////////////////////////////////////////////////////// Function
 pe.init = function(){
   if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
     pe.mobile = true;
     document.title='PhotoEditor';
+    if(navigator.userAgent.indexOf('iPhone OS 6') == -1){
+      pe.osAlert = $('<div/>').attr('id', 'os-alert').html('<div><p>This app will work correctly only on the iOS6!</p><span>Tap and close</span></div>').click(function(){$(this).hide();});
+      $('#display').append(pe.osAlert);
+    }
   }
   if(pe.mobile){
     $('body').addClass('mobile');
@@ -162,7 +178,7 @@ pe.init = function(){
   pe.switchOrientation();
   if(!pe.mobile){
     $('#wrapper').addClass('start').append('<img src="images/iphone.png" id="iphone"><a href="#" onclick="pe.checkStyle();return false;" id="check-style-button">Check the style</a>');
-    $('#wrapper').append('<div id="pc"><img src="images/logo.png" id="pc-logo"><p id="pc-text">CSS PhotoEditor is a test site for new features that will be installed in iOS6.<span>The browsers supported this site are Chrome19, Safari6 & iOS6.</span></p><a href="#" onclick="pe.showVideo();return false;" id="video"><img src="images/video.png"><span>DEMO on iOS simulator</span></a><ul id="features"><li class="upload">Input type=file</li><li class="filter">CSS Filters</li><li class="slider">Custom Slider UI</li><li class="font">Landscape Mode</li></ul><div class="profile"><a href="http://d.hatena.ne.jp/kudakurage/"><img src="images/profile.png" class="profile-image"></a><p class="profile-name">Kazuyuki Motoyama<span>Kudakurage</span></p><p class="profile-acount"><a href="https://twitter.com/kudakurage" class="twitter">twitter</a><a href="http://dribbble.com/kudakurage" class="dribbble">dribbble</a><a href="https://github.com/kudakurage" class="github">github</a></p><p class="profile-text">I have been working as a Web designer in Kyoto.<br />UI Design / App Design / Illustration / HTML5&CSS3 / Javascript / PHP</p><p class="copyright">Copyright &copy; 2012 kazuyuki motoyama</p></div></div>');
+    $('#wrapper').append('<div id="pc"><img src="images/logo.png" id="pc-logo"><p id="pc-text">CSS PhotoEditor is a test site for new features that will be installed in iOS6.<span>The browsers supported this site are Chrome20, Safari6 & iOS6. <a href="http://d.hatena.ne.jp/kudakurage/">Learn more about this page</a></span></p><a href="#" onclick="pe.showVideo();return false;" id="video"><img src="images/video.png"><span>DEMO on iOS simulator</span></a><ul id="features"><li class="upload">Input type=file</li><li class="filter">CSS Filters</li><li class="slider">Custom Slider UI</li><li class="font">Landscape Mode</li></ul><div class="profile"><a href="http://d.hatena.ne.jp/kudakurage/"><img src="images/profile.png" class="profile-image"></a><p class="profile-name">Kazuyuki Motoyama<span>Kudakurage</span></p><p class="profile-acount"><a href="https://twitter.com/kudakurage" class="twitter">twitter</a><a href="http://dribbble.com/kudakurage" class="dribbble">dribbble</a><a href="https://github.com/kudakurage" class="github">github</a></p><p class="profile-text">I have been working as a Web designer in Kyoto.<br />UI Design / App Design / Illustration / HTML5&CSS3 / Javascript / PHP</p><p class="copyright">Copyright &copy; 2012 kazuyuki motoyama</p></div></div>');
     pe.videoWindow = $('<div/>').attr('id','video-window').click(function(){pe.hideVideo();});
     $('body').append(pe.videoWindow);
   }
@@ -304,7 +320,7 @@ pe.captureMode = function(){
 }
 
 pe.showVideo = function(){
-  $(pe.videoWindow).html('<div id="video-content"><iframe width="640" height="360" src="http://www.youtube.com/embed/592T7P3macw?rel=0&autoplay=1&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe></div>');
+  $(pe.videoWindow).html('<div id="video-content"><iframe width="640" height="360" src="http://www.youtube.com/embed/Z5bFwu5WSeg?rel=0&autoplay=1&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe></div>');
   $('#video-window').addClass('show');
   return false;
 }