Live Demo: http://binghuan.github.io/canitbend/

A fun interactive web application that simulates bending a smartphone! Test your phone's durability with this entertaining touch-based game.

1. Touch and Hold: Place one finger on the top area and another on the bottom area of the phone
2. Apply Pressure: Keep both fingers pressed simultaneously
3. Wait for the Bend: Hold for about 2.5 seconds to see the phone bend
4. Recover: Use the "Recover" button to restore the phone to its original state

• Touch-based Interaction: Realistic two-finger bending simulation
• Sound Effects: Audio feedback for bending and breaking sounds
• Visual Animation: Smooth transition from normal phone to bent phone
• Mobile Optimized: Designed specifically for mobile devices and touch screens
• Offline Support: Uses Application Cache for offline functionality
• Social Sharing: Built-in Facebook, Google+, and Line sharing buttons

• HTML5: Modern web structure with mobile-first design
• jQuery Mobile 1.4.4: Mobile-optimized UI framework
• JavaScript: Interactive touch event handling
• CSS3: Responsive design and animations
• Web Audio API: Sound effects and audio feedback
• Application Cache: Offline web app capabilities

• Apple Web App capable (can be added to home screen)
• Custom app icons for various device sizes (16px to 1024px)
• Responsive design that adapts to different screen sizes
• Touch event optimization for mobile devices
• Fixed header and footer for better mobile UX

• sound1.wav: Bending sound effect
• wrong.wav: Breaking/failure sound effect
• Supports both WAV and OGG formats for browser compatibility

• Phone Images:
  • smartphone.png: Normal phone appearance
  • smartphonebended.png: Bent phone appearance
• Finger Icons: Visual guides showing where to touch
• App Icons: Complete icon set for various devices and sizes

# Clone the repository
git clone https://github.com/binghuan/canitbend.git

# Navigate to project directory
cd canitbend

# Serve the files (using any local server)
# For example, using Python:
python -m http.server 8000

# Or using Node.js serve:
npx serve .

# Open browser and navigate to:
# http://localhost:8000

Simply upload all files to any web server. The app is designed to work as a static website.

The app includes Google Analytics tracking to monitor usage and user interactions.

• Modern mobile browsers (iOS Safari, Chrome Mobile, etc.)
• Desktop browsers with touch simulation
• Offline functionality through Application Cache

BH_Lin (Bing-Huan)

• Blog: Studio Bing Huan
• GitHub: binghuan

"Can it bend? Find out with this fun interactive simulator!" 🎯