Initial commit: Web app with HTML/CSS/JS/PHP + Docker

.github/workflows/sync-to-hf.yml

@@ -0,0 +1,24 @@
+name: Sync to Hugging Face Space
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  sync:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          lfs: true
+
+      - name: Push to Hugging Face Space
+        env:
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+        run: |
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+          git config --global user.name "github-actions[bot]"
+          git remote add hf https://NLarchive:[email protected]/spaces/NLarchive/my-webapp-hf

.gitignore

@@ -0,0 +1,23 @@
+# Dependencies
+node_modules/
+vendor/
+
+# Environment files
+.env
+.env.local
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+
+# Docker
+.dockerignore

Dockerfile

@@ -0,0 +1,26 @@
+FROM php:8.2-apache
+
+# Enable Apache mod_rewrite for clean URLs
+RUN a2enmod rewrite
+
+# Install any additional PHP extensions if needed
+# RUN docker-php-ext-install pdo pdo_mysql
+
+# Set working directory
+WORKDIR /var/www/html
+
+# Copy all web files to Apache document root
+COPY ./public /var/www/html
+
+# Set proper permissions
+RUN chown -R www-data:www-data /var/www/html \
+    && chmod -R 755 /var/www/html
+
+# Configure Apache to listen on port 7860 (required by Hugging Face Spaces)
+RUN sed -i 's/80/7860/g' /etc/apache2/sites-available/000-default.conf /etc/apache2/ports.conf
+
+# Expose port 7860
+EXPOSE 7860
+
+# Start Apache in foreground
+CMD ["apache2-foreground"]

README.md

@@ -0,0 +1,61 @@
+# My Web App on Hugging Face Spaces
+
+A simple web application with HTML, CSS, JavaScript, and PHP running on Hugging Face Spaces via Docker.
+
+## Features
+
+- 📄 Static HTML content
+- 🎨 Responsive CSS styling
+- ⚡ Interactive JavaScript
+- 🐘 PHP backend processing
+- 🐳 Dockerized with Apache
+- 🔄 Auto-sync from GitHub to Hugging Face
+
+## Technologies
+
+- HTML5
+- CSS3
+- JavaScript (Vanilla)
+- PHP 8.2
+- Apache Web Server
+- Docker
+
+## Local Development
+
+### Run with Docker
+
+```bash
+# Build the image
+docker build -t my-webapp .
+
+# Run the container
+docker run -p 7860:7860 my-webapp
+```
+
+Visit http://localhost:7860
+
+### File Structure
+
+```
+.
+├── Dockerfile
+├── README.md
+├── .gitignore
+├── .dockerignore
+└── public/
+    ├── index.html
+    ├── styles.css
+    ├── script.js
+    ├── api.php
+    └── process.php
+```
+
+## Deployment
+
+This app is automatically deployed to Hugging Face Spaces from GitHub.
+
+Live URL: [Your Space URL will be here]
+
+## License
+
+MIT

SETUP.md

@@ -0,0 +1,179 @@
+# Setup Instructions
+
+## Complete Step-by-Step Guide
+
+### Part 1: Create GitHub Repository
+
+1. **Create a new repository on GitHub:**
+   - Go to https://github.com/new
+   - Repository name: `my-webapp-hf` (or your choice)
+   - Make it **Public** (easier for HF Spaces)
+   - ✅ Initialize with README (optional, we have our own)
+   - Click **Create repository**
+
+2. **Clone the repository to your local machine:**
+   ```bash
+   git clone https://github.com/YOUR_USERNAME/my-webapp-hf.git
+   cd my-webapp-hf
+   ```
+
+3. **Copy all the files from this project** into your local repository folder
+
+4. **Commit and push to GitHub:**
+   ```bash
+   git add .
+   git commit -m "Initial commit: Web app with HTML, CSS, JS, PHP and Docker"
+   git push origin main
+   ```
+
+---
+
+### Part 2: Create Hugging Face Space
+
+1. **Go to Hugging Face Spaces:**
+   - Visit https://huggingface.co/spaces
+   - Click **Create new Space**
+
+2. **Configure the Space:**
+   - **Owner:** Your HF username
+   - **Space name:** `my-webapp-hf` (or match your GitHub repo name)
+   - **License:** Choose one (e.g., MIT)
+   - **Select SDK:** Choose **Docker**
+   - **Space hardware:** CPU basic (free tier)
+   - **Visibility:** Public
+   - Click **Create Space**
+
+3. **Import from GitHub (Option A - Easier):**
+   - On the Space page, look for **Settings**
+   - Click **Settings** → **Sync with GitHub**
+   - Authorize Hugging Face to access your GitHub
+   - Select your repository
+   - Click **Import**
+   - HF will clone your repo and build automatically
+
+---
+
+### Part 3: Set Up Auto-Sync (GitHub → Hugging Face)
+
+1. **Get your Hugging Face Token:**
+   - Go to https://huggingface.co/settings/tokens
+   - Click **New token**
+   - Name: `GitHub Sync Token`
+   - Role: **Write**
+   - Click **Generate**
+   - **Copy the token** (save it securely)
+
+2. **Add the token to GitHub Secrets:**
+   - Go to your GitHub repo settings
+   - **Secrets and variables** → **Actions**
+   - Click **New repository secret**
+   - Name: `HF_TOKEN`
+   - Value: paste your HF token
+   - Click **Add secret**
+
+3. **Update the GitHub Action workflow:**
+   - Edit `.github/workflows/sync-to-hf.yml`
+   - Replace `NLarchive` with your GitHub username
+   - Replace `YOUR_SPACE_NAME` with your actual space name
+   - Commit and push
+
+4. **Verify the Action:**
+   - Go to your GitHub repo → **Actions** tab
+   - You should see "Sync to Hugging Face Space" workflow
+   - On future pushes to `main`, changes will auto-deploy to HF
+
+---
+
+### Part 4: Test Locally
+
+```bash
+# Build the Docker image
+docker build -t my-webapp .
+
+# Run the container
+docker run -p 7860:7860 my-webapp
+
+# Visit http://localhost:7860 in your browser
+```
+
+---
+
+### Part 5: Verify on Hugging Face
+
+1. Go to your Space: `https://huggingface.co/spaces/YOUR_USERNAME/my-webapp-hf`
+2. Check **Logs** or **Build logs** for any errors
+3. Wait for Docker build to complete (2-5 minutes on first build)
+4. Once running, click on your Space URL
+5. Test all features:
+   - Click the "Click Me" button (tests JavaScript)
+   - Check PHP content loads
+   - Submit the form
+
+---
+
+## Project Structure
+
+```
+my-webapp-hf/
+├── Dockerfile              # Docker configuration for Apache + PHP 8.2
+├── README.md               # Project documentation
+├── .gitignore              # Git ignore rules
+├── .dockerignore           # Docker ignore rules
+├── .github/
+│   └── workflows/
+│       └── sync-to-hf.yml  # GitHub Action for auto-sync
+└── public/                 # Web root (served by Apache)
+    ├── index.html          # Main HTML page
+    ├── styles.css          # Styling
+    ├── script.js           # JavaScript functionality
+    ├── api.php             # API endpoint for dynamic content
+    └── process.php         # Form processing endpoint
+```
+
+---
+
+## Key Features
+
+✅ **Modular Architecture:** Each file has a single responsibility  
+✅ **Maintainable Code:** Clean, well-organized structure  
+✅ **Plug-and-play:** Easy to add new features or APIs  
+✅ **Production Ready:** Proper headers, error handling, security basics  
+✅ **Responsive Design:** Works on mobile and desktop  
+✅ **Full Stack:** HTML + CSS + JavaScript + PHP  
+✅ **Docker Support:** Single command deployment  
+✅ **Auto-Sync:** Changes to GitHub automatically deploy to HF Spaces  
+
+---
+
+## Troubleshooting
+
+| Issue | Solution |
+|-------|----------|
+| 502 Bad Gateway | Docker still building, wait 2-5 minutes |
+| Build failed | Check Docker build logs for errors |
+| PHP not working | Verify files are in `public/` folder |
+| Page not loading | Ensure port 7860 is used in Dockerfile |
+| Auto-sync not working | Check GitHub Actions logs, verify HF_TOKEN secret |
+
+---
+
+## Quick Commands
+
+```bash
+# Local Docker testing
+docker build -t my-webapp .
+docker run -p 7860:7860 my-webapp
+
+# Push to GitHub
+git add .
+git commit -m "Your message"
+git push origin main
+
+# Manual push to HF Spaces
+git remote add hf https://huggingface.co/spaces/YOUR_USERNAME/my-webapp-hf
+git push hf main
+```
+
+---
+
+For detailed instructions, see README.md

public/api.php

@@ -0,0 +1,14 @@
+<?php
+header('Content-Type: application/json');
+header('Access-Control-Allow-Origin: *');
+
+$response = [
+    'message' => 'PHP is working correctly! ✓',
+    'timestamp' => date('Y-m-d H:i:s'),
+    'random' => rand(1, 1000),
+    'php_version' => phpversion(),
+    'server' => $_SERVER['SERVER_SOFTWARE'] ?? 'Unknown'
+];
+
+echo json_encode($response);
+?>

public/index.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My Hugging Face Space</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>Welcome to My Web App</h1>
+            <p class="subtitle">Running on Hugging Face Spaces with Docker</p>
+        </header>
+
+        <main>
+            <section class="card">
+                <h2>Static Content</h2>
+                <p>This is a simple HTML page styled with CSS.</p>
+                <button id="testButton">Click Me (JS Test)</button>
+                <p id="jsOutput"></p>
+            </section>
+
+            <section class="card">
+                <h2>PHP Dynamic Content</h2>
+                <div id="phpContent">
+                    <p>Loading PHP content...</p>
+                </div>
+                <button id="loadPhp">Reload PHP Data</button>
+            </section>
+
+            <section class="card">
+                <h2>Form Example</h2>
+                <form id="testForm">
+                    <input type="text" id="nameInput" placeholder="Enter your name" required>
+                    <button type="submit">Submit to PHP</button>
+                </form>
+                <div id="formResponse"></div>
+            </section>
+        </main>
+
+        <footer>
+            <p>Synced from GitHub to Hugging Face Spaces</p>
+        </footer>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>

public/process.php

@@ -0,0 +1,22 @@
+<?php
+header('Content-Type: application/json');
+header('Access-Control-Allow-Origin: *');
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : 'Guest';
+    
+    $response = [
+        'success' => true,
+        'greeting' => "Hello, {$name}! Your form was processed by PHP.",
+        'timestamp' => date('Y-m-d H:i:s'),
+        'name_length' => strlen($name)
+    ];
+} else {
+    $response = [
+        'success' => false,
+        'error' => 'Only POST requests are accepted'
+    ];
+}
+
+echo json_encode($response);
+?>

public/script.js

@@ -0,0 +1,66 @@
+// JavaScript functionality
+document.addEventListener('DOMContentLoaded', function() {
+    
+    // Button click test
+    const testButton = document.getElementById('testButton');
+    const jsOutput = document.getElementById('jsOutput');
+    
+    testButton.addEventListener('click', function() {
+        const now = new Date().toLocaleString();
+        jsOutput.textContent = `✓ JavaScript is working! Clicked at: ${now}`;
+        jsOutput.style.display = 'block';
+    });
+
+    // Load PHP content
+    function loadPhpContent() {
+        const phpContent = document.getElementById('phpContent');
+        
+        fetch('api.php')
+            .then(response => response.json())
+            .then(data => {
+                phpContent.innerHTML = `
+                    <p><strong>Server Message:</strong> ${data.message}</p>
+                    <p><strong>Server Time:</strong> ${data.timestamp}</p>
+                    <p><strong>Random Number:</strong> ${data.random}</p>
+                `;
+            })
+            .catch(error => {
+                phpContent.innerHTML = `<p style="color: red;">Error loading PHP: ${error.message}</p>`;
+            });
+    }
+
+    // Load PHP on page load
+    loadPhpContent();
+
+    // Reload PHP button
+    document.getElementById('loadPhp').addEventListener('click', loadPhpContent);
+
+    // Form submission
+    const testForm = document.getElementById('testForm');
+    const formResponse = document.getElementById('formResponse');
+
+    testForm.addEventListener('submit', function(e) {
+        e.preventDefault();
+        
+        const nameInput = document.getElementById('nameInput');
+        const formData = new FormData();
+        formData.append('name', nameInput.value);
+
+        fetch('process.php', {
+            method: 'POST',
+            body: formData
+        })
+        .then(response => response.json())
+        .then(data => {
+            formResponse.innerHTML = `
+                <p><strong>${data.greeting}</strong></p>
+                <p>Processed at: ${data.timestamp}</p>
+            `;
+            formResponse.style.display = 'block';
+            nameInput.value = '';
+        })
+        .catch(error => {
+            formResponse.innerHTML = `<p style="color: red;">Error: ${error.message}</p>`;
+        });
+    });
+});

public/styles.css

@@ -0,0 +1,140 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    padding: 20px;
+    color: #333;
+}
+
+.container {
+    max-width: 900px;
+    margin: 0 auto;
+}
+
+header {
+    text-align: center;
+    color: white;
+    padding: 40px 20px;
+    margin-bottom: 30px;
+}
+
+header h1 {
+    font-size: 2.5em;
+    margin-bottom: 10px;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+}
+
+.subtitle {
+    font-size: 1.2em;
+    opacity: 0.9;
+}
+
+main {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.card {
+    background: white;
+    border-radius: 12px;
+    padding: 30px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+    transition: transform 0.3s ease;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+}
+
+.card h2 {
+    color: #667eea;
+    margin-bottom: 15px;
+    font-size: 1.8em;
+}
+
+.card p {
+    line-height: 1.6;
+    margin-bottom: 15px;
+}
+
+button {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    padding: 12px 24px;
+    border-radius: 6px;
+    font-size: 1em;
+    cursor: pointer;
+    transition: opacity 0.3s ease;
+    margin-top: 10px;
+}
+
+button:hover {
+    opacity: 0.9;
+}
+
+button:active {
+    transform: scale(0.98);
+}
+
+#jsOutput, #formResponse {
+    margin-top: 15px;
+    padding: 15px;
+    background: #f0f0f0;
+    border-radius: 6px;
+    min-height: 20px;
+    font-weight: bold;
+    color: #667eea;
+}
+
+#phpContent {
+    padding: 15px;
+    background: #f9f9f9;
+    border-radius: 6px;
+    border-left: 4px solid #667eea;
+    margin-bottom: 10px;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+input[type="text"] {
+    padding: 12px;
+    border: 2px solid #ddd;
+    border-radius: 6px;
+    font-size: 1em;
+    transition: border-color 0.3s ease;
+}
+
+input[type="text"]:focus {
+    outline: none;
+    border-color: #667eea;
+}
+
+footer {
+    text-align: center;
+    color: white;
+    padding: 30px 20px;
+    margin-top: 30px;
+    opacity: 0.9;
+}
+
+@media (max-width: 600px) {
+    header h1 {
+        font-size: 2em;
+    }
+    
+    .card {
+        padding: 20px;
+    }
+}