commit add40238f2474ba19f7cdfaa24a6d2e34fbf73e1 Author: Moritz Graf Date: Fri Jan 2 14:01:38 2026 +0100 Initial commit physio-remotion diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2eea525 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.env \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..1328c13 --- /dev/null +++ b/README.md @@ -0,0 +1,86 @@ +# Physio-Remotion Website + +A modern, clean, and mobile-optimized "Coming Soon" landing page for the physiotherapy practice **Physio-Remotion** in Erding. + +## Project Overview + +The website is a static landing page built with Vanilla HTML, CSS, and JavaScript. It features a responsive layout that adapts to both desktop and mobile devices, using high-quality background images of the practice. + +- **Launch Date:** April 2026 +- **Design:** Teal-based color palette (`#699ba4`, `#8ac3ca`) with golden accent (`#d4a373`). +- **Tech Stack:** HTML5, CSS3 (Vanilla), JavaScript, npm (for build/deploy). + +## Getting Started + +### Prerequisites + +- **Node.js**: Required for build and deployment scripts. +- **lftp**: Required for SFTP deployment. + ```bash + brew install lftp + ``` + +### Local Setup + +1. **Environment Variables**: Create a `.env` file in the root directory (already present in your repository, but ensure it has the following variables): + ```env + SFTP_USER=your_user + SFTP_PASS=your_password + SFTP_HOST=your_host + SFTP_PORT=your_port + SFTP_SUB_DIR=your_remote_directory + ``` +2. **Install Dependencies** (Optional, for future tools): + ```bash + npm install + ``` + +### Development & Build + +To prepare the website for deployment, you can run the build script which collects all necessary files into a `dist/` directory: + +```bash +npm run build +``` + +## Deployment + +The project includes an automated deployment script using SFTP. + +To deploy the website to your remote server: +```bash +npm run deploy +``` + +**What the script does:** +1. Loads credentials from `.env`. +2. Runs `npm run build` to prepare static assets. +3. Uses `lftp` to mirror the `dist/` folder to the remote `SFTP_SUB_DIR`. + +## Project Structure + +```text +. +├── img/ # Visual assets (praxis images) +├── dist/ # Generated build artifacts (gitignored) +├── index.html # Main landing page +├── impressum.html # Legal notice (Draft) +├── datenschutz.html # Privacy policy (Draft) +├── style.css # Global styles +├── main.js # Basic site logic +├── deploy.sh # SFTP deployment bash script +├── .env # SFTP credentials (gitignored) +├── .gitignore # Git ignore rules +└── package.json # Project metadata and scripts +``` + +## Legal Requirements + +> [!IMPORTANT] +> This is a draft version. Before going public, please ensure the following: +> 1. Complete the placeholder information in `impressum.html` (Full names, insurance details, etc.). +> 2. Complete the placeholder information in `index.html` (Phone number). +> 3. Verify the `datenschutz.html` with a legal professional. + +--- +© 2025 Physio-Remotion diff --git a/datenschutz.html b/datenschutz.html new file mode 100644 index 0000000..ca8bd51 --- /dev/null +++ b/datenschutz.html @@ -0,0 +1,52 @@ + + + + + + + Datenschutz | Physio-Remotion + + + + +
+
+ +
+
+ +
+

Datenschutzerklärung

+
+

1. Datenschutz auf einen Blick

+

Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten + passiert, wenn Sie diese Website besuchen.

+ +

2. Verantwortliche Stelle

+

Die verantwortliche Stelle für die Datenverarbeitung auf dieser Website ist:

+

Physio-Remotion
+ Justus-von-Liebig-Straße 2
+ 85435 Erding

+

E-Mail: info@physio-remotion.de

+ +

3. Datenerfassung auf unserer Website

+

Ihre Daten werden zum einen dadurch erhoben, dass Sie uns diese mitteilen. Hierbei kann es sich z. B. um + Daten handeln, die Sie uns per E-Mail senden.

+

Andere Daten werden automatisch beim Besuch der Website durch unsere IT-Systeme erfasst. Das sind vor + allem technische Daten (z. B. Internetbrowser, Betriebssystem oder Uhrzeit des Seitenaufrufs).

+
+
+ + + + + \ No newline at end of file diff --git a/deploy.sh b/deploy.sh new file mode 100755 index 0000000..07b1779 --- /dev/null +++ b/deploy.sh @@ -0,0 +1,55 @@ +#!/bin/bash + +# Physio-Remotion Deployment Script +# This script loads credentials from .env and deploys the 'dist' folder via SFTP. + +# Load .env file +if [ -f .env ]; then + export $(cat .env | xargs) +else + echo "Error: .env file not found." + exit 1 +fi + +# Check for required variables +REQUIRED_VARS=("SFTP_USER" "SFTP_PASS" "SFTP_HOST" "SFTP_PORT" "SFTP_SUB_DIR") +for VAR in "${REQUIRED_VARS[@]}"; do + if [ -z "${!VAR}" ]; then + echo "Error: $VAR is not set in .env" + exit 1 + fi +done + +echo "--- Starting Build ---" +npm run build + +if [ $? -ne 0 ]; then + echo "Build failed. Aborting deployment." + exit 1 +fi + +echo "--- Starting Deployment to $SFTP_HOST ---" + +# We use lftp for robust directory mirroring with password support. +# If lftp is not installed, it can be installed via 'brew install lftp' on macOS. +if ! command -v lftp &> /dev/null; then + echo "Error: lftp is not installed. Please install it using 'brew install lftp'." + exit 1 +fi + +lftp -u "$SFTP_USER","$SFTP_PASS" -p "$SFTP_PORT" sftp://"$SFTP_HOST" < + + + + + + Datenschutz | Physio-Remotion + + + + +
+
+ +
+
+ +
+

Datenschutzerklärung

+
+

1. Datenschutz auf einen Blick

+

Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten + passiert, wenn Sie diese Website besuchen.

+ +

2. Verantwortliche Stelle

+

Die verantwortliche Stelle für die Datenverarbeitung auf dieser Website ist:

+

Physio-Remotion
+ Justus-von-Liebig-Straße 2
+ 85435 Erding

+

E-Mail: info@physio-remotion.de

+ +

3. Datenerfassung auf unserer Website

+

Ihre Daten werden zum einen dadurch erhoben, dass Sie uns diese mitteilen. Hierbei kann es sich z. B. um + Daten handeln, die Sie uns per E-Mail senden.

+

Andere Daten werden automatisch beim Besuch der Website durch unsere IT-Systeme erfasst. Das sind vor + allem technische Daten (z. B. Internetbrowser, Betriebssystem oder Uhrzeit des Seitenaufrufs).

+
+
+ +
+
+
+

© 2025 Physio-Remotion. Alle Rechte vorbehalten.

+
+ Startseite +
+
+
+
+ + + \ No newline at end of file diff --git a/dist/img/praxis_landscape.jpg b/dist/img/praxis_landscape.jpg new file mode 100644 index 0000000..f7f792c Binary files /dev/null and b/dist/img/praxis_landscape.jpg differ diff --git a/dist/img/praxis_portrait.jpg b/dist/img/praxis_portrait.jpg new file mode 100644 index 0000000..d1ffe07 Binary files /dev/null and b/dist/img/praxis_portrait.jpg differ diff --git a/dist/impressum.html b/dist/impressum.html new file mode 100644 index 0000000..6a7f1ca --- /dev/null +++ b/dist/impressum.html @@ -0,0 +1,63 @@ + + + + + + + Impressum | Physio-Remotion + + + + +
+
+ +
+
+ +
+

Impressum

+
+

Angaben gemäß § 5 TMG

+

Physio-Remotion
+ Justus-von-Liebig-Straße 2
+ 85435 Erding

+ +

Vertreten durch:
+ Magdalena [Nachname]
+ Carmen [Nachname]

+ +

Kontakt

+

Telefon: [+49 XXX XXXXXXXX]
+ E-Mail: info@physio-remotion.de

+ +

Berufsbezeichnung und berufsrechtliche Regelungen

+

Berufsbezeichnung: Physiotherapeutin (verliehen in der Bundesrepublik Deutschland)

+

Zuständige Aufsichtsbehörde: [Gesundheitsamt Erding]

+

Es gelten folgende berufsrechtliche Regelungen: Gesetz über die Berufe in der Physiotherapie (Masseur- + und Physiotherapeutengesetz - MPhG)
+ Regelungen einsehbar unter: https://www.gesetze-im-internet.de/mphg/index.html +

+ +

Angaben zur Berufshaftpflichtversicherung

+

Name und Sitz des Versicherers:
+ [Name der Versicherung]
+ [Anschrift der Versicherung]

+

Geltungsraum der Versicherung: Deutschland

+
+
+ +
+
+
+

© 2025 Physio-Remotion. Alle Rechte vorbehalten.

+
+ Startseite +
+
+
+
+ + + \ No newline at end of file diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 0000000..ad5d3df --- /dev/null +++ b/dist/index.html @@ -0,0 +1,77 @@ + + + + + + Physio-Remotion | Erding + + + + + + + +
+
+ + +
+
+ +
+
+
+
+

Physio-Remotion

+

Im April 2026 geht es los.

+ Unsere Philosophie +
+
+ +
+
+

Unsere Philosophie

+
+

Im Mittelpunkt unserer Arbeit steht der Mensch als Ganzes. Physiotherapie bedeutet für uns, Beweglichkeit und Funktion nachhaltig zu fördern und nicht nur Symptome zu behandeln.

+

Um eine hochwertige und effektive Behandlung sicherzustellen, arbeiten wir im 30-Minuten-Takt, wodurch eine 25-minütige, befundorientierte Therapieeinheit gewährleistet ist.

+

Dadurch begleiten wir unsere Patientinnen und Patienten auf dem Weg zu mehr Gesundheit, Selbstständigkeit und mehr Lebensqualität!

+
+
+
+ +
+
+

Kontakt

+
+
+

Anschrift

+

Justus-von-Liebig-Straße 2
85435 Erding

+
+
+

Kontakt

+

Telefon: [+49 XXX XXXXXXXX]

+

E-Mail: info@physio-remotion.de

+
+
+
+
+
+ + + + + + diff --git a/dist/main.js b/dist/main.js new file mode 100644 index 0000000..20c8245 --- /dev/null +++ b/dist/main.js @@ -0,0 +1,4 @@ +// Basic interactions for Physio-Remotion website +document.addEventListener('DOMContentLoaded', () => { + console.log('Physio-Remotion website loaded.'); +}); diff --git a/dist/style.css b/dist/style.css new file mode 100644 index 0000000..f53e48d --- /dev/null +++ b/dist/style.css @@ -0,0 +1,279 @@ +:root { + /* Color Palette */ + --primary: #699ba4; + --primary-light: #8ac3ca; + --accent: #d4a373; + --white: #ffffff; + --text-dark: #333333; + --text-muted: #666666; + --bg-light: #f9fbfb; + + /* Layout */ + --container-width: 1100px; + --header-height: 80px; + + /* Transitions */ + --transition: all 0.3s ease; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Inter', sans-serif; + line-height: 1.6; + color: var(--text-dark); + background-color: var(--bg-light); + scroll-behavior: smooth; +} + +h1, h2, h3 { + font-family: 'Montserrat', sans-serif; + color: var(--primary); +} + +a { + text-decoration: none; + color: inherit; + transition: var(--transition); +} + +ul { + list-style: none; +} + +.container { + max-width: var(--container-width); + margin: 0 auto; + padding: 0 20px; +} + +/* Header */ +.header { + height: var(--header-height); + background: var(--white); + display: flex; + align-items: center; + position: fixed; + top: 0; + width: 100%; + z-index: 1000; + box-shadow: 0 2px 10px rgba(0,0,0,0.05); +} + +.header .container { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; +} + +.logo { + font-size: 1.5rem; + font-weight: 700; + color: var(--primary); + font-family: 'Montserrat', sans-serif; +} + +.nav a { + margin-left: 25px; + font-weight: 600; + font-size: 0.9rem; + text-transform: uppercase; + letter-spacing: 1px; +} + +.nav a:hover { + color: var(--primary); +} + +/* Hero Section */ +.hero { + height: 100vh; + position: relative; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + overflow: hidden; +} + +.hero-background { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: url('img/praxis_landscape.jpg'); + background-size: cover; + background-position: center; + z-index: -1; +} + +/* Landscape for desktop, Portrait for mobile */ +@media (max-width: 768px) { + .hero-background { + background-image: url('img/praxis_portrait.jpg'); + } +} + +.hero-background::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.75); /* White overlay */ +} + +.hero-content { + max-width: 800px; + padding: 0 20px; +} + +.hero-title { + font-size: 3.5rem; + margin-bottom: 1rem; + color: var(--primary); +} + +.hero-subtitle { + font-size: 1.5rem; + margin-bottom: 2rem; + color: var(--text-muted); + font-weight: 300; +} + +/* Buttons */ +.btn { + display: inline-block; + padding: 12px 30px; + border-radius: 5px; + font-weight: 600; + cursor: pointer; +} + +.btn-primary { + background: var(--primary); + color: var(--white); + border: 2px solid var(--primary); +} + +.btn-primary:hover { + background: transparent; + color: var(--primary); +} + +/* Philosophy Section */ +.philosophy { + padding: 100px 0; + background: var(--white); + text-align: center; +} + +.philosophy h2 { + margin-bottom: 40px; + position: relative; + display: inline-block; +} + +.philosophy h2::after { + content: ''; + position: absolute; + bottom: -10px; + left: 50%; + transform: translateX(-50%); + width: 50px; + height: 3px; + background: var(--accent); +} + +.philosophy-text { + max-width: 800px; + margin: 0 auto; + font-size: 1.1rem; + color: var(--text-muted); +} + +.philosophy-text p { + margin-bottom: 20px; +} + +/* Contact Section */ +.contact { + padding: 80px 0; +} + +.contact h2 { + text-align: center; + margin-bottom: 50px; +} + +.contact-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 40px; + text-align: center; +} + +.contact-item h3 { + margin-bottom: 15px; + font-size: 1.2rem; +} + +/* Footer */ +.footer { + background: var(--white); + padding: 40px 0; + border-top: 1px solid #eee; +} + +.footer-bottom { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 20px; + font-size: 0.85rem; + color: var(--text-muted); +} + +.footer-links a { + margin-left: 20px; +} + +.footer-links a:hover { + color: var(--primary); +} + +/* Mobile Optimizations */ +@media (max-width: 768px) { + .hero-title { + font-size: 2.5rem; + } + + .hero-subtitle { + font-size: 1.2rem; + } + + .header { + height: 60px; + } + + .nav { + display: none; /* Can add a burger menu later if needed */ + } + + .footer-bottom { + flex-direction: column; + text-align: center; + } + + .footer-links a { + margin: 0 10px; + } +} diff --git a/img/praxis_landscape.jpg b/img/praxis_landscape.jpg new file mode 100644 index 0000000..f7f792c Binary files /dev/null and b/img/praxis_landscape.jpg differ diff --git a/img/praxis_portrait.jpg b/img/praxis_portrait.jpg new file mode 100644 index 0000000..d1ffe07 Binary files /dev/null and b/img/praxis_portrait.jpg differ diff --git a/impressum.html b/impressum.html new file mode 100644 index 0000000..6a7f1ca --- /dev/null +++ b/impressum.html @@ -0,0 +1,63 @@ + + + + + + + Impressum | Physio-Remotion + + + + +
+
+ +
+
+ +
+

Impressum

+
+

Angaben gemäß § 5 TMG

+

Physio-Remotion
+ Justus-von-Liebig-Straße 2
+ 85435 Erding

+ +

Vertreten durch:
+ Magdalena [Nachname]
+ Carmen [Nachname]

+ +

Kontakt

+

Telefon: [+49 XXX XXXXXXXX]
+ E-Mail: info@physio-remotion.de

+ +

Berufsbezeichnung und berufsrechtliche Regelungen

+

Berufsbezeichnung: Physiotherapeutin (verliehen in der Bundesrepublik Deutschland)

+

Zuständige Aufsichtsbehörde: [Gesundheitsamt Erding]

+

Es gelten folgende berufsrechtliche Regelungen: Gesetz über die Berufe in der Physiotherapie (Masseur- + und Physiotherapeutengesetz - MPhG)
+ Regelungen einsehbar unter: https://www.gesetze-im-internet.de/mphg/index.html +

+ +

Angaben zur Berufshaftpflichtversicherung

+

Name und Sitz des Versicherers:
+ [Name der Versicherung]
+ [Anschrift der Versicherung]

+

Geltungsraum der Versicherung: Deutschland

+
+
+ +
+
+
+

© 2025 Physio-Remotion. Alle Rechte vorbehalten.

+
+ Startseite +
+
+
+
+ + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..ad5d3df --- /dev/null +++ b/index.html @@ -0,0 +1,77 @@ + + + + + + Physio-Remotion | Erding + + + + + + + +
+
+ + +
+
+ +
+
+
+
+

Physio-Remotion

+

Im April 2026 geht es los.

+ Unsere Philosophie +
+
+ +
+
+

Unsere Philosophie

+
+

Im Mittelpunkt unserer Arbeit steht der Mensch als Ganzes. Physiotherapie bedeutet für uns, Beweglichkeit und Funktion nachhaltig zu fördern und nicht nur Symptome zu behandeln.

+

Um eine hochwertige und effektive Behandlung sicherzustellen, arbeiten wir im 30-Minuten-Takt, wodurch eine 25-minütige, befundorientierte Therapieeinheit gewährleistet ist.

+

Dadurch begleiten wir unsere Patientinnen und Patienten auf dem Weg zu mehr Gesundheit, Selbstständigkeit und mehr Lebensqualität!

+
+
+
+ +
+
+

Kontakt

+
+
+

Anschrift

+

Justus-von-Liebig-Straße 2
85435 Erding

+
+
+

Kontakt

+

Telefon: [+49 XXX XXXXXXXX]

+

E-Mail: info@physio-remotion.de

+
+
+
+
+
+ + + + + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..20c8245 --- /dev/null +++ b/main.js @@ -0,0 +1,4 @@ +// Basic interactions for Physio-Remotion website +document.addEventListener('DOMContentLoaded', () => { + console.log('Physio-Remotion website loaded.'); +}); diff --git a/package.json b/package.json new file mode 100644 index 0000000..89b188b --- /dev/null +++ b/package.json @@ -0,0 +1,11 @@ +{ + "name": "physio-remotion", + "version": "1.0.0", + "description": "Coming Soon Website for Physio-Remotion", + "scripts": { + "build": "rm -rf dist && mkdir -p dist/img && cp *.html style.css main.js dist/ && cp img/* dist/img/", + "deploy": "./deploy.sh" + }, + "author": "", + "license": "ISC" +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..f53e48d --- /dev/null +++ b/style.css @@ -0,0 +1,279 @@ +:root { + /* Color Palette */ + --primary: #699ba4; + --primary-light: #8ac3ca; + --accent: #d4a373; + --white: #ffffff; + --text-dark: #333333; + --text-muted: #666666; + --bg-light: #f9fbfb; + + /* Layout */ + --container-width: 1100px; + --header-height: 80px; + + /* Transitions */ + --transition: all 0.3s ease; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Inter', sans-serif; + line-height: 1.6; + color: var(--text-dark); + background-color: var(--bg-light); + scroll-behavior: smooth; +} + +h1, h2, h3 { + font-family: 'Montserrat', sans-serif; + color: var(--primary); +} + +a { + text-decoration: none; + color: inherit; + transition: var(--transition); +} + +ul { + list-style: none; +} + +.container { + max-width: var(--container-width); + margin: 0 auto; + padding: 0 20px; +} + +/* Header */ +.header { + height: var(--header-height); + background: var(--white); + display: flex; + align-items: center; + position: fixed; + top: 0; + width: 100%; + z-index: 1000; + box-shadow: 0 2px 10px rgba(0,0,0,0.05); +} + +.header .container { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; +} + +.logo { + font-size: 1.5rem; + font-weight: 700; + color: var(--primary); + font-family: 'Montserrat', sans-serif; +} + +.nav a { + margin-left: 25px; + font-weight: 600; + font-size: 0.9rem; + text-transform: uppercase; + letter-spacing: 1px; +} + +.nav a:hover { + color: var(--primary); +} + +/* Hero Section */ +.hero { + height: 100vh; + position: relative; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + overflow: hidden; +} + +.hero-background { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: url('img/praxis_landscape.jpg'); + background-size: cover; + background-position: center; + z-index: -1; +} + +/* Landscape for desktop, Portrait for mobile */ +@media (max-width: 768px) { + .hero-background { + background-image: url('img/praxis_portrait.jpg'); + } +} + +.hero-background::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.75); /* White overlay */ +} + +.hero-content { + max-width: 800px; + padding: 0 20px; +} + +.hero-title { + font-size: 3.5rem; + margin-bottom: 1rem; + color: var(--primary); +} + +.hero-subtitle { + font-size: 1.5rem; + margin-bottom: 2rem; + color: var(--text-muted); + font-weight: 300; +} + +/* Buttons */ +.btn { + display: inline-block; + padding: 12px 30px; + border-radius: 5px; + font-weight: 600; + cursor: pointer; +} + +.btn-primary { + background: var(--primary); + color: var(--white); + border: 2px solid var(--primary); +} + +.btn-primary:hover { + background: transparent; + color: var(--primary); +} + +/* Philosophy Section */ +.philosophy { + padding: 100px 0; + background: var(--white); + text-align: center; +} + +.philosophy h2 { + margin-bottom: 40px; + position: relative; + display: inline-block; +} + +.philosophy h2::after { + content: ''; + position: absolute; + bottom: -10px; + left: 50%; + transform: translateX(-50%); + width: 50px; + height: 3px; + background: var(--accent); +} + +.philosophy-text { + max-width: 800px; + margin: 0 auto; + font-size: 1.1rem; + color: var(--text-muted); +} + +.philosophy-text p { + margin-bottom: 20px; +} + +/* Contact Section */ +.contact { + padding: 80px 0; +} + +.contact h2 { + text-align: center; + margin-bottom: 50px; +} + +.contact-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 40px; + text-align: center; +} + +.contact-item h3 { + margin-bottom: 15px; + font-size: 1.2rem; +} + +/* Footer */ +.footer { + background: var(--white); + padding: 40px 0; + border-top: 1px solid #eee; +} + +.footer-bottom { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 20px; + font-size: 0.85rem; + color: var(--text-muted); +} + +.footer-links a { + margin-left: 20px; +} + +.footer-links a:hover { + color: var(--primary); +} + +/* Mobile Optimizations */ +@media (max-width: 768px) { + .hero-title { + font-size: 2.5rem; + } + + .hero-subtitle { + font-size: 1.2rem; + } + + .header { + height: 60px; + } + + .nav { + display: none; /* Can add a burger menu later if needed */ + } + + .footer-bottom { + flex-direction: column; + text-align: center; + } + + .footer-links a { + margin: 0 10px; + } +}