ShareYuk

Empowering Global Communities Through Beneficial Sharing

A multi-language platform for sharing beneficial content and campaign materials with your community.

Features

• Multi-Language Support: English, Indonesian, and Arabic with RTL support
• Twibbon Text Generator: Create personalized campaign twibbons with custom text
• Twibbon Image Sharing: Download and share pre-designed campaign images
• Instant Sharing: Share directly to WhatsApp, Telegram, and more
• Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
• No Registration Required: Free and accessible to everyone

Live Demo

Visit shareyuk.github.io

Quick Start

Local Development

1. Clone the repository:

git clone https://github.com/shareyuk/shareyuk.github.io.git
cd shareyuk.github.io

2. Serve locally (choose one):

# Python 3
python -m http.server 8000

# Node.js
npx http-server

# PHP
php -S localhost:8000

3. Open http://localhost:8000

Deployment to GitHub Pages

1. Push to GitHub:

git add .
git commit -m "Initial commit"
git push origin main

2. Enable GitHub Pages in repository settings
3. Your site will be live at https://yourusername.github.io

Project Structure

shareyuk.github.io/
├── index.html
├── css/
│   ├── main.css
│   ├── twibbon.css
│   └── twibbon-image.css
├── js/
│   ├── language.js
│   ├── twibbon-generator.js
│   ├── twibbon-image-handler.js
│   └── share-handler.js
├── lang/
│   ├── en.json
│   ├── id.json
│   └── ar.json
├── twibbon-text/
│   └── [campaign-name]/
└── twibbon-image/
    └── [campaign-name]/

Adding New Campaigns

Text-Enabled Twibbon

1. Create campaign directory:

mkdir -p twibbon-text/your-campaign/assets

2. Add your twibbon image to assets/ folder

3. Copy the HTML template from an existing campaign

Image-Only Twibbon

1. Create campaign directory:

mkdir -p twibbon-image/your-campaign/assets

2. Add your image and follow the same pattern as existing campaigns

Customization

Changing Colors

Edit css/main.css:

:root {
    --primary-green: #2d5c3f;
    --secondary-green: #4a8f5e;
    --accent-gold: #d4af37;
}

Adding Translations

Add translation keys to lang/*.json files and use data-i18n attribute in HTML:

<element data-i18n="section.key">Default text</element>

Text Position Adjustment

For twibbon text generator, edit js/twibbon-generator.js:

this.textPosition = {
    x: 0.5,       // Horizontal (0-1)
    y: 0.33,      // Vertical (0-1)
    maxWidth: 0.55 // Text width (0-1)
};

Technology Stack

• HTML5 & Canvas API
• CSS3 (Grid, Flexbox, Custom Properties)
• Vanilla JavaScript (ES6+)
• Web Share API
• LocalStorage API

Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+
• Mobile browsers

License

MIT License - See LICENSE file for details

Contact

Need custom software development?

Hasan B - Full-Stack Dev & IT Generalist GitHub: @CreatorB

Custom web applications, mobile apps, and tailored software solutions.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

---

Made with ♥ by creatorbe | Open Source