Point4 Studios Website

A premium, modern company website for Point4 Studios GmbH - built with pure HTML, CSS, JavaScript, and PHP.

Overview

This is the main company website for Point4 Studios, a Vienna-based digital agency specializing in AI adoption, software development, and growth support for SMEs.

Key Features

• Dark/Light Mode Toggle - Fully functional theme switching with localStorage persistence
• German/English Language Switch - Complete bilingual support with JavaScript translations
• PHP Contact Form - Server-side form handling with validation and sanitization
• Fully Responsive - Optimized for desktop, tablet, and mobile devices
• Premium Design - Modern, minimal aesthetic aligned with brand identity
• No Frameworks - Pure HTML/CSS/JS/PHP for maximum performance and simplicity

---

File Structure

point4-studios/
├── index.html          # Main HTML file (single-page website)
├── style.css           # Complete stylesheet with CSS variables
├── script.js           # JavaScript for interactions and translations
├── contact.php         # PHP form handler with validation
├── README.md           # This documentation file
└── assets/
    └── logo.png        # Point4 Studios logo (place your logo here)

---

How Language Switching Works

The website uses a JavaScript-based translation system:

1. Translation Object (script.js):

   • All text content is stored in the translations object
   • Two language keys: de (German) and en (English)
   • Each translatable element has a data-i18n attribute matching a translation key

2. Switching Mechanism:

   • Click the DE/EN toggle in the header or footer
   • The toggleLanguage() function switches between languages
   • Preference is saved to localStorage as p4s-language

3. Default Language:

   • German (de) is the default
   • Can be changed by modifying the default in script.js

4. Adding New Translations:

   // Add to both de and en objects in script.js
   'your.key.here': 'Your translated text here'
   

   Then add data-i18n="your.key.here" to the HTML element.

---

How Dark/Light Mode Works

The theme system uses CSS custom properties (variables):

1. CSS Variables (style.css):

   • Default (dark) colors defined in :root
   • Light mode colors defined in [data-theme="light"]

2. Switching Mechanism:

   • Click the sun/moon icon in the header
   • The toggleTheme() function switches the data-theme attribute
   • Preference is saved to localStorage as p4s-theme

3. Default Theme:

   • Dark mode is the default (primary brand mode)
   • Can be changed by modifying the default in script.js

4. Design Philosophy:

   • Dark mode: Deep navy (#0a0f1a) base with blue accent
   • Light mode: Clean white with refined contrast
   • Both modes maintain premium, intentional aesthetics

---

How the PHP Contact Form Works

The contact form (contact.php) provides secure server-side handling:

Features

1. Input Validation:

   • Name: Required, 2-100 characters
   • Email: Valid format required
   • Message: Required, 10-5000 characters
   • Privacy: Must be checked

2. Security Measures:

   • Input sanitization with htmlspecialchars()
   • Honeypot field for bot detection
   • Rate limiting (3 submissions per 5 minutes)
   • CORS headers for security
   • XSS protection headers

3. Email Delivery:

   • Sends both plain text and HTML email
   • Includes sender details and timestamp
   • Sends confirmation email to user

Configuration Required

Edit contact.php and update:

// Line 18: Replace with your actual business email
$recipientEmail = 'hello@point4studios.at';

Server Requirements for Email

The PHP mail() function requires:

1. Sendmail (Linux/Unix servers):

   • Usually pre-configured on shared hosting
   • Check php.ini for sendmail_path

2. SMTP Configuration (if sendmail not available):

   • Use a library like PHPMailer for SMTP support
   • Or configure PHP's mail function for SMTP

3. DNS Records (recommended):

   • SPF record for your domain
   • DKIM signing for better deliverability

Testing the Form

1. Upload files to your server
2. Update the recipient email
3. Submit the contact form
4. Check your email (including spam folder)

---

How to Run/Test Locally

Option 1: Simple PHP Server (Recommended)

# Navigate to the project directory
cd point4-studios

# Start PHP built-in server
php -S localhost:8000

# Open in browser
http://localhost:8000

Option 2: Using MAMP/XAMPP/WAMP

1. Copy the point4-studios folder to your web server document root:

   • MAMP: /Applications/MAMP/htdocs/
   • XAMPP: C:\xampp\htdocs\
   • WAMP: C:\wamp\www\

2. Start your local server

3. Open http://localhost/point4-studios

Option 3: Static Preview (No PHP)

For design preview only (form won't work):

# Use any static file server
npx serve point4-studios
# or
python -m http.server 8000

---

Deployment Instructions

1. Upload Files

Upload all files to your web server:

/public_html/
  ├── index.html
  ├── style.css
  ├── script.js
  ├── contact.php
  └── assets/
      └── logo.png

2. Configure PHP

Edit contact.php:

• Set $recipientEmail to your business email
• Set $debugMode = false for production

3. Set Permissions

Ensure proper file permissions:

chmod 644 *.html *.css *.js *.php
chmod 755 assets/
chmod 644 assets/*

4. Test Contact Form

Submit a test message and verify email delivery.

5. SSL Certificate (Recommended)

Enable HTTPS for security and trust:

• Contact form submissions will be encrypted
• Better SEO ranking
• Professional appearance

---

Customization Guide

Changing Colors

Edit CSS variables in style.css:

:root {
    --color-primary: #0a0f1a;        /* Main background */
    --color-accent: #3b82f6;          /* Primary accent */
    --color-accent-cyan: #22d3ee;     /* Secondary accent */
    --color-text: #f8fafc;            /* Main text */
    --color-text-secondary: #94a3b8;  /* Secondary text */
}

Adding New Sections

1. Add HTML to index.html:

<section class="new-section" id="newsection">
    <div class="container">
        <!-- Content here -->
    </div>
</section>

2. Add styles to style.css:

.new-section {
    padding: var(--space-5xl) 0;
    background: var(--color-surface);
}

3. Add navigation link:

<li><a href="#newsection" data-i18n="nav.newsection">New Section</a></li>

4. Add translations to script.js:

'de': {
    'nav.newsection': 'Neuer Bereich'
},
'en': {
    'nav.newsection': 'New Section'
}

Updating Content

1. Edit text in index.html
2. Update corresponding translations in script.js
3. Test both language versions

---

Browser Support

• Chrome 80+
• Firefox 75+
• Safari 13+
• Edge 80+
• iOS Safari 13+
• Chrome Android 80+

---

Performance Optimizations

• No external JavaScript frameworks
• Minimal CSS (single file, ~800 lines)
• Google Fonts loaded with preconnect
• CSS variables for efficient theming
• Intersection Observer for scroll animations
• Passive event listeners for scroll

---

Accessibility Features

• Semantic HTML structure
• ARIA labels for interactive elements
• Focus-visible styles
• Reduced motion support
• High contrast mode support
• Keyboard navigation support

---

License

This website is proprietary to Point4 Studios GmbH.

---

Support

For technical support or questions:

• Email: hello@point4studios.at
• Website: https://point4studios.at

---

Changelog

Version 1.0 (2026-04-10)

• Initial release
• Dark/Light mode toggle
• German/English language switch
• PHP contact form
• Responsive design
• Premium animations