Rebrand project from web4beginners to ikfreunde
This commit is contained in:
10
README.md
10
README.md
@@ -1,4 +1,4 @@
|
|||||||
# web4beginners WYSIWYG Multi-Route Deploy
|
# ikfreunde WYSIWYG Multi-Route Deploy
|
||||||
|
|
||||||
This project runs a local-content WYSIWYG editor behind Traefik and supports multiple route instances on one domain.
|
This project runs a local-content WYSIWYG editor behind Traefik and supports multiple route instances on one domain.
|
||||||
|
|
||||||
@@ -28,10 +28,10 @@ docker compose -f docker-compose.traefik-routes.yml up -d --build
|
|||||||
```
|
```
|
||||||
|
|
||||||
What it does:
|
What it does:
|
||||||
1. Creates route data folder: `/srv/web4beginners/webpage4/`
|
1. Creates route data folder: `/srv/ikfreunde/webpage4/`
|
||||||
2. Seeds files if missing:
|
2. Seeds files if missing:
|
||||||
- `/srv/web4beginners/webpage4/web4beginners.com.html`
|
- `/srv/ikfreunde/webpage4/ikfreunde.com.html`
|
||||||
- `/srv/web4beginners/webpage4/site-content.de.json`
|
- `/srv/ikfreunde/webpage4/site-content.de.json`
|
||||||
3. Injects `webpage4` service into `docker-compose.traefik-routes.yml`
|
3. Injects `webpage4` service into `docker-compose.traefik-routes.yml`
|
||||||
|
|
||||||
Then redeploy:
|
Then redeploy:
|
||||||
@@ -78,7 +78,7 @@ Security note:
|
|||||||
- `content/.editor-rate-limit.json`
|
- `content/.editor-rate-limit.json`
|
||||||
|
|
||||||
## Optional env overrides
|
## Optional env overrides
|
||||||
- `ROOT_BASE` (default: `/srv/web4beginners`)
|
- `ROOT_BASE` (default: `/srv/ikfreunde`)
|
||||||
- `COMPOSE_FILE` (default: `docker-compose.traefik-routes.yml`)
|
- `COMPOSE_FILE` (default: `docker-compose.traefik-routes.yml`)
|
||||||
|
|
||||||
Example:
|
Example:
|
||||||
|
|||||||
@@ -1,21 +1,21 @@
|
|||||||
{
|
{
|
||||||
"meta": {
|
"meta": {
|
||||||
"title": "Home | web4beginners.com",
|
"title": "Home | ikfreunde.com",
|
||||||
"description": "Daten. Websites. Skills. Anwendungen.",
|
"description": "Daten. Websites. Skills. Anwendungen.",
|
||||||
"open_graph": {
|
"open_graph": {
|
||||||
"og:description": "Daten. Websites. Skills. Anwendungen.",
|
"og:description": "Daten. Websites. Skills. Anwendungen.",
|
||||||
"og:image": "https://web4beginners.com/user/pages/_assets/Share_Img_DF.jpg",
|
"og:image": "https://ikfreunde.com/user/pages/_assets/Share_Img_DF.jpg",
|
||||||
"og:site_name": "Klar. Innovativ. Digital - web4beginners GmbH",
|
"og:site_name": "Klar. Innovativ. Digital - ikfreunde GmbH",
|
||||||
"og:title": "Klar. Innovativ. Digital - web4beginners GmbH",
|
"og:title": "Klar. Innovativ. Digital - ikfreunde GmbH",
|
||||||
"og:url": "https://web4beginners.com/"
|
"og:url": "https://ikfreunde.com/"
|
||||||
},
|
},
|
||||||
"twitter": {
|
"twitter": {
|
||||||
"twitter:card": "summary_large_image",
|
"twitter:card": "summary_large_image",
|
||||||
"twitter:image": "https://web4beginners.com/user/pages/_assets/twitter_card.jpg",
|
"twitter:image": "https://ikfreunde.com/user/pages/_assets/twitter_card.jpg",
|
||||||
"twitter:image:alt": "web4beginners"
|
"twitter:image:alt": "ikfreunde"
|
||||||
},
|
},
|
||||||
"other": {
|
"other": {
|
||||||
"title": "Klar. Innovativ. Digital - web4beginners GmbH"
|
"title": "Klar. Innovativ. Digital - ikfreunde GmbH"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"shared": {
|
"shared": {
|
||||||
@@ -30,10 +30,10 @@
|
|||||||
"common_008": "Mehr erfahren",
|
"common_008": "Mehr erfahren",
|
||||||
"common_009": "Ablehnen",
|
"common_009": "Ablehnen",
|
||||||
"common_010": "Stimme zu",
|
"common_010": "Stimme zu",
|
||||||
"common_011": "web4beginners GmbH",
|
"common_011": "ikfreunde GmbH",
|
||||||
"common_012": "Schillerstraße 21",
|
"common_012": "Schillerstraße 21",
|
||||||
"common_013": "22767 Hamburg",
|
"common_013": "22767 Hamburg",
|
||||||
"common_014": "info@web4beginners.com",
|
"common_014": "info@ikfreunde.com",
|
||||||
"common_015": "040 / 35 73 69 11"
|
"common_015": "040 / 35 73 69 11"
|
||||||
},
|
},
|
||||||
"navigation": {
|
"navigation": {
|
||||||
@@ -85,7 +85,7 @@
|
|||||||
},
|
},
|
||||||
"images": {
|
"images": {
|
||||||
"img_001": {
|
"img_001": {
|
||||||
"src": "web4beginners.com_files/0ffcdedcfc816182f817ac2520731c5868840c6e-heroimage1200x6253.jpg",
|
"src": "ikfreunde.com_files/0ffcdedcfc816182f817ac2520731c5868840c6e-heroimage1200x6253.jpg",
|
||||||
"alt": ""
|
"alt": ""
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -127,51 +127,51 @@
|
|||||||
},
|
},
|
||||||
"images": {
|
"images": {
|
||||||
"img_001": {
|
"img_001": {
|
||||||
"src": "web4beginners.com_files/ic_monitoring_1_brown.svg",
|
"src": "ikfreunde.com_files/ic_monitoring_1_brown.svg",
|
||||||
"alt": "Icon"
|
"alt": "Icon"
|
||||||
},
|
},
|
||||||
"img_002": {
|
"img_002": {
|
||||||
"src": "web4beginners.com_files/c54c8a64fe535bf7249d676fc7cb69cd6f27c3d7-kobimoprojekteimage.jpg",
|
"src": "ikfreunde.com_files/c54c8a64fe535bf7249d676fc7cb69cd6f27c3d7-kobimoprojekteimage.jpg",
|
||||||
"alt": ""
|
"alt": ""
|
||||||
},
|
},
|
||||||
"img_003": {
|
"img_003": {
|
||||||
"src": "web4beginners.com_files/ic_coins_brown.svg",
|
"src": "ikfreunde.com_files/ic_coins_brown.svg",
|
||||||
"alt": "Icon"
|
"alt": "Icon"
|
||||||
},
|
},
|
||||||
"img_004": {
|
"img_004": {
|
||||||
"src": "web4beginners.com_files/026d3a0dcea46e3c6ea8418280abc143a883560f-projektteasercofinp.jpg",
|
"src": "ikfreunde.com_files/026d3a0dcea46e3c6ea8418280abc143a883560f-projektteasercofinp.jpg",
|
||||||
"alt": ""
|
"alt": ""
|
||||||
},
|
},
|
||||||
"img_005": {
|
"img_005": {
|
||||||
"src": "web4beginners.com_files/ic_bildung_1_brown.svg",
|
"src": "ikfreunde.com_files/ic_bildung_1_brown.svg",
|
||||||
"alt": "Icon"
|
"alt": "Icon"
|
||||||
},
|
},
|
||||||
"img_006": {
|
"img_006": {
|
||||||
"src": "web4beginners.com_files/3b61b2909589fd44ec1af7c47f8a89c1515aebc1-ruhrfuturprojteaser.jpg",
|
"src": "ikfreunde.com_files/3b61b2909589fd44ec1af7c47f8a89c1515aebc1-ruhrfuturprojteaser.jpg",
|
||||||
"alt": ""
|
"alt": ""
|
||||||
},
|
},
|
||||||
"img_007": {
|
"img_007": {
|
||||||
"src": "web4beginners.com_files/ic_mobility_brown.svg",
|
"src": "ikfreunde.com_files/ic_mobility_brown.svg",
|
||||||
"alt": "Icon"
|
"alt": "Icon"
|
||||||
},
|
},
|
||||||
"img_008": {
|
"img_008": {
|
||||||
"src": "web4beginners.com_files/07eb52c038c4c75165c7ec1a757d022015dd12f1-telefonicateaser.jpg",
|
"src": "ikfreunde.com_files/07eb52c038c4c75165c7ec1a757d022015dd12f1-telefonicateaser.jpg",
|
||||||
"alt": ""
|
"alt": ""
|
||||||
},
|
},
|
||||||
"img_009": {
|
"img_009": {
|
||||||
"src": "web4beginners.com_files/ic_wasser_1_brown.svg",
|
"src": "ikfreunde.com_files/ic_wasser_1_brown.svg",
|
||||||
"alt": "Icon"
|
"alt": "Icon"
|
||||||
},
|
},
|
||||||
"img_010": {
|
"img_010": {
|
||||||
"src": "web4beginners.com_files/15542365f25229683d4a118ad7e05d35f620d42a-wassermonitorteaser.jpg",
|
"src": "ikfreunde.com_files/15542365f25229683d4a118ad7e05d35f620d42a-wassermonitorteaser.jpg",
|
||||||
"alt": ""
|
"alt": ""
|
||||||
},
|
},
|
||||||
"img_011": {
|
"img_011": {
|
||||||
"src": "web4beginners.com_files/ic_mic_brown.svg",
|
"src": "ikfreunde.com_files/ic_mic_brown.svg",
|
||||||
"alt": "Icon"
|
"alt": "Icon"
|
||||||
},
|
},
|
||||||
"img_012": {
|
"img_012": {
|
||||||
"src": "web4beginners.com_files/9faf87d7e48c5116e700e47a7cd48abf995fdbed-tideprojektteaser85.jpg",
|
"src": "ikfreunde.com_files/9faf87d7e48c5116e700e47a7cd48abf995fdbed-tideprojektteaser85.jpg",
|
||||||
"alt": ""
|
"alt": ""
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -201,7 +201,7 @@
|
|||||||
},
|
},
|
||||||
"images": {
|
"images": {
|
||||||
"img_001": {
|
"img_001": {
|
||||||
"src": "web4beginners.com_files/ic_fire.svg",
|
"src": "ikfreunde.com_files/ic_fire.svg",
|
||||||
"alt": "Icon"
|
"alt": "Icon"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -217,7 +217,7 @@
|
|||||||
},
|
},
|
||||||
"images": {
|
"images": {
|
||||||
"img_001": {
|
"img_001": {
|
||||||
"src": "web4beginners.com_files/ic_team_2_brown.svg",
|
"src": "ikfreunde.com_files/ic_team_2_brown.svg",
|
||||||
"alt": "Icon"
|
"alt": "Icon"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -233,27 +233,27 @@
|
|||||||
},
|
},
|
||||||
"images": {
|
"images": {
|
||||||
"img_001": {
|
"img_001": {
|
||||||
"src": "web4beginners.com_files/ic_pokal.svg",
|
"src": "ikfreunde.com_files/ic_pokal.svg",
|
||||||
"alt": "Icon"
|
"alt": "Icon"
|
||||||
},
|
},
|
||||||
"img_002": {
|
"img_002": {
|
||||||
"src": "web4beginners.com_files/dpok@2.png",
|
"src": "ikfreunde.com_files/dpok@2.png",
|
||||||
"alt": ""
|
"alt": ""
|
||||||
},
|
},
|
||||||
"img_003": {
|
"img_003": {
|
||||||
"src": "web4beginners.com_files/grimmeonline@2.png",
|
"src": "ikfreunde.com_files/grimmeonline@2.png",
|
||||||
"alt": ""
|
"alt": ""
|
||||||
},
|
},
|
||||||
"img_004": {
|
"img_004": {
|
||||||
"src": "web4beginners.com_files/leadawards.png",
|
"src": "ikfreunde.com_files/leadawards.png",
|
||||||
"alt": ""
|
"alt": ""
|
||||||
},
|
},
|
||||||
"img_005": {
|
"img_005": {
|
||||||
"src": "web4beginners.com_files/dt_land@2.png",
|
"src": "ikfreunde.com_files/dt_land@2.png",
|
||||||
"alt": ""
|
"alt": ""
|
||||||
},
|
},
|
||||||
"img_006": {
|
"img_006": {
|
||||||
"src": "web4beginners.com_files/prixeuropa@2.png",
|
"src": "ikfreunde.com_files/prixeuropa@2.png",
|
||||||
"alt": ""
|
"alt": ""
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -262,7 +262,7 @@
|
|||||||
"texts": {
|
"texts": {
|
||||||
"h2_001": "Kunde",
|
"h2_001": "Kunde",
|
||||||
"h2_002": "werden",
|
"h2_002": "werden",
|
||||||
"a_001": "info@web4beginners.com",
|
"a_001": "info@ikfreunde.com",
|
||||||
"a_002": "040 / 35 73 69 11"
|
"a_002": "040 / 35 73 69 11"
|
||||||
},
|
},
|
||||||
"images": []
|
"images": []
|
||||||
@@ -277,55 +277,55 @@
|
|||||||
},
|
},
|
||||||
"images": {
|
"images": {
|
||||||
"img_001": {
|
"img_001": {
|
||||||
"src": "web4beginners.com_files/ic_smiley.svg",
|
"src": "ikfreunde.com_files/ic_smiley.svg",
|
||||||
"alt": "Icon"
|
"alt": "Icon"
|
||||||
},
|
},
|
||||||
"img_002": {
|
"img_002": {
|
||||||
"src": "web4beginners.com_files/tagesschau@2.png",
|
"src": "ikfreunde.com_files/tagesschau@2.png",
|
||||||
"alt": ""
|
"alt": ""
|
||||||
},
|
},
|
||||||
"img_003": {
|
"img_003": {
|
||||||
"src": "web4beginners.com_files/zdf@2x.png",
|
"src": "ikfreunde.com_files/zdf@2x.png",
|
||||||
"alt": ""
|
"alt": ""
|
||||||
},
|
},
|
||||||
"img_004": {
|
"img_004": {
|
||||||
"src": "web4beginners.com_files/ndr@2x.png",
|
"src": "ikfreunde.com_files/ndr@2x.png",
|
||||||
"alt": ""
|
"alt": ""
|
||||||
},
|
},
|
||||||
"img_005": {
|
"img_005": {
|
||||||
"src": "web4beginners.com_files/google@2x.png",
|
"src": "ikfreunde.com_files/google@2x.png",
|
||||||
"alt": ""
|
"alt": ""
|
||||||
},
|
},
|
||||||
"img_006": {
|
"img_006": {
|
||||||
"src": "web4beginners.com_files/stifterverband@2x.png",
|
"src": "ikfreunde.com_files/stifterverband@2x.png",
|
||||||
"alt": ""
|
"alt": ""
|
||||||
},
|
},
|
||||||
"img_007": {
|
"img_007": {
|
||||||
"src": "web4beginners.com_files/gdv@2x.png",
|
"src": "ikfreunde.com_files/gdv@2x.png",
|
||||||
"alt": ""
|
"alt": ""
|
||||||
},
|
},
|
||||||
"img_008": {
|
"img_008": {
|
||||||
"src": "web4beginners.com_files/telefonica@2x.png",
|
"src": "ikfreunde.com_files/telefonica@2x.png",
|
||||||
"alt": ""
|
"alt": ""
|
||||||
},
|
},
|
||||||
"img_009": {
|
"img_009": {
|
||||||
"src": "web4beginners.com_files/brandeins@2x.png",
|
"src": "ikfreunde.com_files/brandeins@2x.png",
|
||||||
"alt": ""
|
"alt": ""
|
||||||
},
|
},
|
||||||
"img_010": {
|
"img_010": {
|
||||||
"src": "web4beginners.com_files/shz@2x.png",
|
"src": "ikfreunde.com_files/shz@2x.png",
|
||||||
"alt": ""
|
"alt": ""
|
||||||
},
|
},
|
||||||
"img_011": {
|
"img_011": {
|
||||||
"src": "web4beginners.com_files/tide@2x.png",
|
"src": "ikfreunde.com_files/tide@2x.png",
|
||||||
"alt": ""
|
"alt": ""
|
||||||
},
|
},
|
||||||
"img_012": {
|
"img_012": {
|
||||||
"src": "web4beginners.com_files/detektorfm@2x.png",
|
"src": "ikfreunde.com_files/detektorfm@2x.png",
|
||||||
"alt": ""
|
"alt": ""
|
||||||
},
|
},
|
||||||
"img_013": {
|
"img_013": {
|
||||||
"src": "web4beginners.com_files/spon@2x.png",
|
"src": "ikfreunde.com_files/spon@2x.png",
|
||||||
"alt": ""
|
"alt": ""
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1 +1 @@
|
|||||||
web4beginners.com.html
|
ikfreunde.com.html
|
||||||
@@ -1 +1 @@
|
|||||||
web4beginners.com_files
|
ikfreunde.com_files
|
||||||
@@ -3,10 +3,10 @@ services:
|
|||||||
build:
|
build:
|
||||||
context: .
|
context: .
|
||||||
dockerfile: Dockerfile
|
dockerfile: Dockerfile
|
||||||
container_name: web4beginners-webpage1
|
container_name: ikfreunde-webpage1
|
||||||
volumes:
|
volumes:
|
||||||
- /srv/web4beginners/webpage1/web4beginners.com.html:/app/web4beginners.com.html
|
- /srv/ikfreunde/webpage1/ikfreunde.com.html:/app/ikfreunde.com.html
|
||||||
- /srv/web4beginners/webpage1/site-content.de.json:/app/content/site-content.de.json
|
- /srv/ikfreunde/webpage1/site-content.de.json:/app/content/site-content.de.json
|
||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
networks:
|
networks:
|
||||||
- proxy
|
- proxy
|
||||||
@@ -26,10 +26,10 @@ services:
|
|||||||
build:
|
build:
|
||||||
context: .
|
context: .
|
||||||
dockerfile: Dockerfile
|
dockerfile: Dockerfile
|
||||||
container_name: web4beginners-webpage2
|
container_name: ikfreunde-webpage2
|
||||||
volumes:
|
volumes:
|
||||||
- /srv/web4beginners/webpage2/web4beginners.com.html:/app/web4beginners.com.html
|
- /srv/ikfreunde/webpage2/ikfreunde.com.html:/app/ikfreunde.com.html
|
||||||
- /srv/web4beginners/webpage2/site-content.de.json:/app/content/site-content.de.json
|
- /srv/ikfreunde/webpage2/site-content.de.json:/app/content/site-content.de.json
|
||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
networks:
|
networks:
|
||||||
- proxy
|
- proxy
|
||||||
@@ -49,10 +49,10 @@ services:
|
|||||||
build:
|
build:
|
||||||
context: .
|
context: .
|
||||||
dockerfile: Dockerfile
|
dockerfile: Dockerfile
|
||||||
container_name: web4beginners-webpage3
|
container_name: ikfreunde-webpage3
|
||||||
volumes:
|
volumes:
|
||||||
- /srv/web4beginners/webpage3/web4beginners.com.html:/app/web4beginners.com.html
|
- /srv/ikfreunde/webpage3/ikfreunde.com.html:/app/ikfreunde.com.html
|
||||||
- /srv/web4beginners/webpage3/site-content.de.json:/app/content/site-content.de.json
|
- /srv/ikfreunde/webpage3/site-content.de.json:/app/content/site-content.de.json
|
||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
networks:
|
networks:
|
||||||
- proxy
|
- proxy
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ services:
|
|||||||
build:
|
build:
|
||||||
context: .
|
context: .
|
||||||
dockerfile: Dockerfile
|
dockerfile: Dockerfile
|
||||||
container_name: web4beginners-editor
|
container_name: ikfreunde-editor
|
||||||
ports:
|
ports:
|
||||||
- "4173:4173"
|
- "4173:4173"
|
||||||
volumes:
|
volumes:
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ Create a first-stage extraction workflow that converts the existing HTML snapsho
|
|||||||
Content updates are currently tied to manual HTML edits. A JSON representation is needed so text and selected image properties can be adapted more easily and later edited through an interface.
|
Content updates are currently tied to manual HTML edits. A JSON representation is needed so text and selected image properties can be adapted more easily and later edited through an interface.
|
||||||
|
|
||||||
## Proposed Solution
|
## Proposed Solution
|
||||||
Build a deterministic DOM-to-JSON extraction flow for `web4beginners.com.html` that captures visible text, selected metadata, and image fields (`src`, `alt`).
|
Build a deterministic DOM-to-JSON extraction flow for `ikfreunde.com.html` that captures visible text, selected metadata, and image fields (`src`, `alt`).
|
||||||
|
|
||||||
The JSON structure should be DOM-first with section-based top-level subtopics, matching the brainstorm decisions and keeping context for editors. Duplicate text handling should follow the agreed hybrid policy: keep section-local duplicates; dedupe only clearly global/common items.
|
The JSON structure should be DOM-first with section-based top-level subtopics, matching the brainstorm decisions and keeping context for editors. Duplicate text handling should follow the agreed hybrid policy: keep section-local duplicates; dedupe only clearly global/common items.
|
||||||
|
|
||||||
@@ -54,7 +54,7 @@ Edge cases to cover:
|
|||||||
- Cookie/modal/footer content that may be conditionally visible
|
- Cookie/modal/footer content that may be conditionally visible
|
||||||
|
|
||||||
## Acceptance Criteria
|
## Acceptance Criteria
|
||||||
- [x] A single extraction run generates one nested JSON file from `web4beginners.com.html`.
|
- [x] A single extraction run generates one nested JSON file from `ikfreunde.com.html`.
|
||||||
- [x] JSON includes visible page text grouped by section subtopics.
|
- [x] JSON includes visible page text grouped by section subtopics.
|
||||||
- [x] JSON includes `title`, `description`, Open Graph, and Twitter metadata values.
|
- [x] JSON includes `title`, `description`, Open Graph, and Twitter metadata values.
|
||||||
- [x] JSON includes `img src` and `img alt` values where present.
|
- [x] JSON includes `img src` and `img alt` values where present.
|
||||||
@@ -84,5 +84,5 @@ Mitigations:
|
|||||||
|
|
||||||
## References & Research
|
## References & Research
|
||||||
- Brainstorm: `docs/brainstorms/2026-03-03-dom-json-wysiwyg-sync-brainstorm.md`
|
- Brainstorm: `docs/brainstorms/2026-03-03-dom-json-wysiwyg-sync-brainstorm.md`
|
||||||
- Source snapshot: `web4beginners.com.html`
|
- Source snapshot: `ikfreunde.com.html`
|
||||||
- Existing site bundle references: `web4beginners.com_files/*`
|
- Existing site bundle references: `ikfreunde.com_files/*`
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ This plan is limited to content editing and synchronization behavior. It explici
|
|||||||
The repository now has extractable structured content (`content/site-content.de.json`) but no practical editing surface for creators. Editors need direct, low-friction page editing (double-click text, click image) while keeping HTML and JSON in sync.
|
The repository now has extractable structured content (`content/site-content.de.json`) but no practical editing surface for creators. Editors need direct, low-friction page editing (double-click text, click image) while keeping HTML and JSON in sync.
|
||||||
|
|
||||||
## Proposed Solution
|
## Proposed Solution
|
||||||
Add an in-page edit mode with inline `contenteditable` text editing and an image overlay editor for `src` and `alt`. Implement autosave (blur/enter) plus manual save/undo controls. Persist edits via a local helper service that writes both `web4beginners.com.html` and `content/site-content.de.json`.
|
Add an in-page edit mode with inline `contenteditable` text editing and an image overlay editor for `src` and `alt`. Implement autosave (blur/enter) plus manual save/undo controls. Persist edits via a local helper service that writes both `ikfreunde.com.html` and `content/site-content.de.json`.
|
||||||
|
|
||||||
Synchronization is bidirectional in model intent, with conflict default set to HTML wins when the same mapped key diverges.
|
Synchronization is bidirectional in model intent, with conflict default set to HTML wins when the same mapped key diverges.
|
||||||
|
|
||||||
@@ -68,7 +68,7 @@ Conflict flow:
|
|||||||
- [x] Text autosaves on blur/enter and also supports explicit save/undo controls.
|
- [x] Text autosaves on blur/enter and also supports explicit save/undo controls.
|
||||||
- [x] Clicking editable images opens an overlay with `src` and `alt` fields.
|
- [x] Clicking editable images opens an overlay with `src` and `alt` fields.
|
||||||
- [x] Image ratio check warns (non-blocking) when replacement differs by >15% aspect ratio.
|
- [x] Image ratio check warns (non-blocking) when replacement differs by >15% aspect ratio.
|
||||||
- [x] Save operation persists both `web4beginners.com.html` and `content/site-content.de.json`.
|
- [x] Save operation persists both `ikfreunde.com.html` and `content/site-content.de.json`.
|
||||||
- [x] Sync mapping updates the correct JSON key for edited text/image values.
|
- [x] Sync mapping updates the correct JSON key for edited text/image values.
|
||||||
- [x] Conflict resolution follows HTML-wins default.
|
- [x] Conflict resolution follows HTML-wins default.
|
||||||
- [x] No CSS/layout properties are modified by editor actions.
|
- [x] No CSS/layout properties are modified by editor actions.
|
||||||
@@ -100,4 +100,4 @@ Mitigations:
|
|||||||
- Brainstorm input: `docs/brainstorms/2026-03-04-wysiwyg-inline-editor-sync-brainstorm.md`
|
- Brainstorm input: `docs/brainstorms/2026-03-04-wysiwyg-inline-editor-sync-brainstorm.md`
|
||||||
- Prior extraction plan: `docs/plans/2026-03-04-feat-dom-to-json-content-extraction-plan.md`
|
- Prior extraction plan: `docs/plans/2026-03-04-feat-dom-to-json-content-extraction-plan.md`
|
||||||
- Extractor/source contract: `scripts/extract_dom_content.php`, `content/site-content.de.json`
|
- Extractor/source contract: `scripts/extract_dom_content.php`, `content/site-content.de.json`
|
||||||
- Target HTML: `web4beginners.com.html`
|
- Target HTML: `ikfreunde.com.html`
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
ownerEmail: "",
|
ownerEmail: "",
|
||||||
};
|
};
|
||||||
const apiBase = computeApiBasePath();
|
const apiBase = computeApiBasePath();
|
||||||
const TOKEN_STORAGE_KEY = "web4beginners_editor_token";
|
const TOKEN_STORAGE_KEY = "ikfreunde_editor_token";
|
||||||
|
|
||||||
const SECTION_ROOTS = {
|
const SECTION_ROOTS = {
|
||||||
hero: "main section.module-hero-teaser",
|
hero: "main section.module-hero-teaser",
|
||||||
|
|||||||
614
ikfreunde.com.html
Normal file
614
ikfreunde.com.html
Normal file
@@ -0,0 +1,614 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head lang="de">
|
||||||
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Home | ikfreunde.com</title>
|
||||||
|
|
||||||
|
|
||||||
|
<meta name="generator" content="GravCMS">
|
||||||
|
|
||||||
|
|
||||||
|
<meta name="title" content="Klar. Innovativ. Digital - ikfreunde GmbH">
|
||||||
|
|
||||||
|
|
||||||
|
<meta name="description" content="Daten. Websites. Skills. Anwendungen.">
|
||||||
|
|
||||||
|
|
||||||
|
<meta property="og:image" content="https://ikfreunde.com/user/pages/_assets/Share_Img_DF.jpg">
|
||||||
|
|
||||||
|
|
||||||
|
<meta property="og:site_name" content="Klar. Innovativ. Digital - ikfreunde GmbH">
|
||||||
|
|
||||||
|
|
||||||
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
|
|
||||||
|
|
||||||
|
<meta name="twitter:image:alt" content="ikfreunde">
|
||||||
|
|
||||||
|
|
||||||
|
<meta name="twitter:image" content="https://ikfreunde.com/user/pages/_assets/twitter_card.jpg">
|
||||||
|
|
||||||
|
|
||||||
|
<meta name="og:url" content="https://ikfreunde.com/">
|
||||||
|
|
||||||
|
<meta name="og:title" content="Klar. Innovativ. Digital - ikfreunde GmbH">
|
||||||
|
|
||||||
|
<meta name="og:description" content="Daten. Websites. Skills. Anwendungen.">
|
||||||
|
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="https://ikfreunde.com/user/themes/ikfreunde/assets/favicon/apple-touch-icon.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="https://ikfreunde.com/user/themes/ikfreunde/assets/favicon/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="https://ikfreunde.com/user/themes/ikfreunde/assets/favicon/favicon-16x16.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="192x192" href="https://ikfreunde.com/user/themes/ikfreunde/assets/favicon/android-chrome-192x192.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="512x512" href="https://ikfreunde.com/user/themes/ikfreunde/assets/favicon/android-chrome-512x512.png">
|
||||||
|
<link rel="mask-icon" href="https://ikfreunde.com/user/themes/ikfreunde/assets/favicon/safari-pinned-tab.svg" color="#5bbad5">
|
||||||
|
<meta name="msapplication-TileColor" content="#da532c">
|
||||||
|
<meta name="theme-color" content="#ffffff">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<link href="ikfreunde.com_files/ee792949df0da81967291f5675ce6b3b.css" type="text/css" rel="stylesheet">
|
||||||
|
<link href="editor/wysiwyg-editor.css" type="text/css" rel="stylesheet">
|
||||||
|
|
||||||
|
<script src="ikfreunde.com_files/f73f70e70b0ac5f1d474abd842fb4b24.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<script data-name="google_analytics" async="" src="ikfreunde.com_files/google-analytics_analytics.js"></script></head>
|
||||||
|
<body data-ua="G-79HSR2GSX9" class="search_plugin_added">
|
||||||
|
|
||||||
|
<div class="spacer"></div>
|
||||||
|
<div class="main-stage">
|
||||||
|
|
||||||
|
|
||||||
|
<header class="page-head" style="top: 0rem;">
|
||||||
|
<div class="page-head__inner">
|
||||||
|
<nav class="prm-nav page-head__navigation" role="navigation">
|
||||||
|
<input type="checkbox" class="prm-nav__mobile-toggle" id="prm-nav__mobile-toggle-checkbox">
|
||||||
|
<label for="prm-nav__mobile-toggle-checkbox" class="prm-nav__mobile-toggle-icon">
|
||||||
|
<div class="spinner"></div>
|
||||||
|
<div class="spinner"></div>
|
||||||
|
<div class="spinner"></div>
|
||||||
|
</label>
|
||||||
|
<div class="prn-nav__content">
|
||||||
|
<ul class="prm-nav__list">
|
||||||
|
<li class=""><a href="#_projects">Projekte</a></li>
|
||||||
|
<li class=""><a href="#_services-teaser">Awesome</a></li>
|
||||||
|
<li class="prm-nav__break">
|
||||||
|
</li><li class=""><a href="#_team-teaser">Team</a></li>
|
||||||
|
<li class=""><a href="#_contact-teaser">Robbi</a></li>
|
||||||
|
</ul>
|
||||||
|
<ul class="prm-nav__meta">
|
||||||
|
<li class="font-link-text-small"><a href="https://ikfreunde.com/impressum">Impressum</a></li>
|
||||||
|
<li class="font-link-text-small"><a href="https://ikfreunde.com/datenschutz">Datenschutz</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<a href="https://ikfreunde.com/" title="" class="page-head__logo">
|
||||||
|
<picture>
|
||||||
|
<source srcset="ikfreunde.com_files/logo-df.svg 1x" media="(max-width: 992px)">
|
||||||
|
<source srcset="" media="(min-width: 993px)">
|
||||||
|
<img class="page-head__logo-image" loading="lazy" src="https://mindboost.app/images/logo.svg" alt="mindboost Logo">
|
||||||
|
</source></source></picture>
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="page-head__spacer" style="height: 181px;"></div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<main id="main" role="main" class="cf">
|
||||||
|
<section class="module-hero-teaser brush-bottom-white">
|
||||||
|
<div class="module-hero-teaser__content">
|
||||||
|
<h1 class="font-headline-1 module-hero-teaser__headline animation brush-overlay-hero animate">Klar.<br>Crazy.<br>Fiktiv.</h1>
|
||||||
|
|
||||||
|
<div class="font-intro module-hero-teaser__intro animation animate">Musik. Websites. Skills. Anwendungen.</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="module-hero-teaser__background animation animate">
|
||||||
|
<picture>
|
||||||
|
<source srcset="ikfreunde.com_files/0ffcdedcfc816182f817ac2520731c5868840c6e-heroimage1200x6253.jpg 1x, ikfreunde.com_files/524569d400cf68ef1cf160c58a8b501a139a8a81-heroimage1200x62532.jpg 2x" media="(max-width: 992px)">
|
||||||
|
<source srcset="ikfreunde.com_files/0ffcdedcfc816182f817ac2520731c5868840c6e-heroimage1200x6253.jpg 1x, ikfreunde.com_files/524569d400cf68ef1cf160c58a8b501a139a8a81-heroimage1200x62532.jpg 2x" media="(min-width: 993px)">
|
||||||
|
<img class="module-hero-teaser__background-image" loading="lazy" src="ikfreunde.com_files/0ffcdedcfc816182f817ac2520731c5868840c6e-heroimage1200x6253.jpg" alt="">
|
||||||
|
</source></source></picture>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<section class="page-header">
|
||||||
|
<div class="page-header__copytext font-copy">Die richtige Form der Kommunikation - individuell, innovativ und auf Augenhöhe. <br>
|
||||||
|
|
||||||
|
Wir beraten, planen und gestalten. Und wir setzen Ideen um - alles aus einer Hand.</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<a class="jump-to-anchor" name="_projects"></a>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<section class="module-projects-teaser">
|
||||||
|
<section class="module-project-teaser animation animate">
|
||||||
|
|
||||||
|
<div class="module-project-teaser__content module-project-teaser__align-left">
|
||||||
|
<div class="module-project-teaser__content-inner ">
|
||||||
|
<span class="animation font-topline-teaser animate">RuhrFutur gGmbH</span>
|
||||||
|
|
||||||
|
<h2 class="module-project-teaser__headline animation brush-overlay-headline font-headline-1 animate">Festivals</h2>
|
||||||
|
|
||||||
|
<p class="font-copy animation animate">Entwicklungen in der Bildungslandschaft kontinuierlich im Blick behalten mit Hilfe von Bildungsmonitoring.</p>
|
||||||
|
|
||||||
|
<img loading="lazy" src="ikfreunde.com_files/ic_monitoring_1_brown.svg" class="svg-icon module-project-teaser__icon animation animate" alt="Icon">
|
||||||
|
<div class="module-project-teaser__button-container">
|
||||||
|
<a href="https://ikfreunde.com/projects/bildungsmonitoring" title="" class="btn btn-standard module-project-teaser__button" target="">Dream</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="animation module-project-teaser__image-container module-project-teaser__align-right brush-bottom-white animate">
|
||||||
|
<a class="module-project-teaser__image-link" href="https://ikfreunde.com/projects/bildungsmonitoring">
|
||||||
|
<picture>
|
||||||
|
<source srcset="ikfreunde.com_files/c54c8a64fe535bf7249d676fc7cb69cd6f27c3d7-kobimoprojekteimage.jpg 1x, ikfreunde.com_files/e679b01b355748edfb67d2d16f52570f63266e6c-kobimoprojekteimage.jpg 2x" media="(max-width: 992px)">
|
||||||
|
<source srcset="ikfreunde.com_files/c54c8a64fe535bf7249d676fc7cb69cd6f27c3d7-kobimoprojekteimage.jpg 1x, ikfreunde.com_files/e679b01b355748edfb67d2d16f52570f63266e6c-kobimoprojekteimage.jpg 2x" media="(min-width: 993px)">
|
||||||
|
<img class="module-project-teaser__image grayscale-on-hover" loading="lazy" src="ikfreunde.com_files/c54c8a64fe535bf7249d676fc7cb69cd6f27c3d7-kobimoprojekteimage.jpg" alt="">
|
||||||
|
</source></source></picture>
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="module-project-teaser animation animate">
|
||||||
|
|
||||||
|
<div class="module-project-teaser__content module-project-teaser__align-right">
|
||||||
|
<div class="module-project-teaser__content-inner ">
|
||||||
|
<span class="animation font-topline-teaser animate">Cofinpro AG</span>
|
||||||
|
|
||||||
|
<h2 class="module-project-teaser__headline animation brush-overlay-headline font-headline-1 animate">Banken-Check</h2>
|
||||||
|
|
||||||
|
<p class="font-copy animation animate">So gesund sind Deutschlands Finanzinstitute. Bankenanalyse-Tool mit mehr als 1.400 Finanzinstituten.</p>
|
||||||
|
|
||||||
|
<img loading="lazy" src="ikfreunde.com_files/ic_coins_brown.svg" class="svg-icon module-project-teaser__icon animation animate" alt="Icon">
|
||||||
|
<div class="module-project-teaser__button-container">
|
||||||
|
<a href="https://ikfreunde.com/projects/banken-check" title="" class="btn btn-standard module-project-teaser__button" target="">Ansehen
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="animation module-project-teaser__image-container module-project-teaser__align-left brush-bottom-white animate">
|
||||||
|
<a class="module-project-teaser__image-link" href="https://ikfreunde.com/projects/banken-check">
|
||||||
|
<picture>
|
||||||
|
<source srcset="ikfreunde.com_files/026d3a0dcea46e3c6ea8418280abc143a883560f-projektteasercofinp.jpg 1x, ikfreunde.com_files/b1b5ffb75041c644f7fe52034c6e71e0ddabc103-projektteasercofinp.jpg 2x" media="(max-width: 992px)">
|
||||||
|
<source srcset="ikfreunde.com_files/026d3a0dcea46e3c6ea8418280abc143a883560f-projektteasercofinp.jpg 1x, ikfreunde.com_files/b1b5ffb75041c644f7fe52034c6e71e0ddabc103-projektteasercofinp.jpg 2x" media="(min-width: 993px)">
|
||||||
|
<img class="module-project-teaser__image grayscale-on-hover" loading="lazy" src="ikfreunde.com_files/026d3a0dcea46e3c6ea8418280abc143a883560f-projektteasercofinp.jpg" alt="">
|
||||||
|
</source></source></picture>
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="module-project-teaser animation animate">
|
||||||
|
|
||||||
|
<div class="module-project-teaser__content module-project-teaser__align-left">
|
||||||
|
<div class="module-project-teaser__content-inner ">
|
||||||
|
<span class="animation font-topline-teaser animate">RuhrFutur gGmbH</span>
|
||||||
|
|
||||||
|
<h2 class="module-project-teaser__headline animation brush-overlay-headline font-headline-1 animate">Bildungs-bericht</h2>
|
||||||
|
|
||||||
|
<p class="font-copy animation">Die Bildungslandschaft 2020 im Ruhrgebiet sichtbar und wissenschaftliche Erkenntnisse erfassbar machen.</p>
|
||||||
|
|
||||||
|
<img loading="lazy" src="ikfreunde.com_files/ic_bildung_1_brown.svg" class="svg-icon module-project-teaser__icon animation" alt="Icon">
|
||||||
|
<div class="module-project-teaser__button-container">
|
||||||
|
<a href="https://ikfreunde.com/projects/bildungsbericht" title="" class="btn btn-standard module-project-teaser__button" target="">Ansehen
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="animation module-project-teaser__image-container module-project-teaser__align-right brush-bottom-white">
|
||||||
|
<a class="module-project-teaser__image-link" href="https://ikfreunde.com/projects/bildungsbericht">
|
||||||
|
<picture>
|
||||||
|
<source srcset="ikfreunde.com_files/3b61b2909589fd44ec1af7c47f8a89c1515aebc1-ruhrfuturprojteaser.jpg 1x, ikfreunde.com_files/3915f694fef49b9b513d693e0e6a5b1c347aa7c0-ruhrfuturprojteaser.jpg 2x" media="(max-width: 992px)">
|
||||||
|
<source srcset="ikfreunde.com_files/3b61b2909589fd44ec1af7c47f8a89c1515aebc1-ruhrfuturprojteaser.jpg 1x, ikfreunde.com_files/3915f694fef49b9b513d693e0e6a5b1c347aa7c0-ruhrfuturprojteaser.jpg 2x" media="(min-width: 993px)">
|
||||||
|
<img class="module-project-teaser__image grayscale-on-hover" loading="lazy" src="ikfreunde.com_files/3b61b2909589fd44ec1af7c47f8a89c1515aebc1-ruhrfuturprojteaser.jpg" alt="">
|
||||||
|
</source></source></picture>
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="module-project-teaser animation">
|
||||||
|
|
||||||
|
<div class="module-project-teaser__content module-project-teaser__align-right">
|
||||||
|
<div class="module-project-teaser__content-inner ">
|
||||||
|
<span class="animation font-topline-teaser">Telefónica Deutschland</span>
|
||||||
|
|
||||||
|
<h2 class="module-project-teaser__headline animation brush-overlay-headline font-headline-1">Mobilität verstehen</h2>
|
||||||
|
|
||||||
|
<p class="font-copy animation">„So bewegt sich Deutschland“ - eine Karte zeigt Bewegungsmuster in ganz Deutschland anhand anonymisierter Mobilfunk-Daten.</p>
|
||||||
|
|
||||||
|
<img loading="lazy" src="ikfreunde.com_files/ic_mobility_brown.svg" class="svg-icon module-project-teaser__icon animation" alt="Icon">
|
||||||
|
<div class="module-project-teaser__button-container">
|
||||||
|
<a href="https://ikfreunde.com/projects/telefonica" title="" class="btn btn-standard module-project-teaser__button" target="">Ansehen
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="animation module-project-teaser__image-container module-project-teaser__align-left brush-bottom-white">
|
||||||
|
<a class="module-project-teaser__image-link" href="https://ikfreunde.com/projects/telefonica">
|
||||||
|
<picture>
|
||||||
|
<source srcset="ikfreunde.com_files/07eb52c038c4c75165c7ec1a757d022015dd12f1-telefonicateaser.jpg 1x, ikfreunde.com_files/307019ce368b35d809ed78f56dc025ce04c0cc07-telefonicateaser2x.jpg 2x" media="(max-width: 992px)">
|
||||||
|
<source srcset="ikfreunde.com_files/07eb52c038c4c75165c7ec1a757d022015dd12f1-telefonicateaser.jpg 1x, ikfreunde.com_files/307019ce368b35d809ed78f56dc025ce04c0cc07-telefonicateaser2x.jpg 2x" media="(min-width: 993px)">
|
||||||
|
<img class="module-project-teaser__image grayscale-on-hover" loading="lazy" src="ikfreunde.com_files/07eb52c038c4c75165c7ec1a757d022015dd12f1-telefonicateaser.jpg" alt="">
|
||||||
|
</source></source></picture>
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="module-project-teaser animation">
|
||||||
|
|
||||||
|
<div class="module-project-teaser__content module-project-teaser__align-left">
|
||||||
|
<div class="module-project-teaser__content-inner ">
|
||||||
|
<span class="animation font-topline-teaser">Forschungszentrum Jülich</span>
|
||||||
|
|
||||||
|
<h2 class="module-project-teaser__headline animation brush-overlay-headline font-headline-1">Wasser-monitor</h2>
|
||||||
|
|
||||||
|
<p class="font-copy animation">Das Ziel besteht darin, die Prognosen für den Wasserhaushalt im Boden zu visualisieren.</p>
|
||||||
|
|
||||||
|
<img loading="lazy" src="ikfreunde.com_files/ic_wasser_1_brown.svg" class="svg-icon module-project-teaser__icon animation" alt="Icon">
|
||||||
|
<div class="module-project-teaser__button-container">
|
||||||
|
<a href="https://ikfreunde.com/projects/wassermonitor" title="" class="btn btn-standard module-project-teaser__button" target="">Ansehen
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="animation module-project-teaser__image-container module-project-teaser__align-right brush-bottom-white">
|
||||||
|
<a class="module-project-teaser__image-link" href="https://ikfreunde.com/projects/wassermonitor">
|
||||||
|
<picture>
|
||||||
|
<source srcset="ikfreunde.com_files/15542365f25229683d4a118ad7e05d35f620d42a-wassermonitorteaser.jpg 1x, ikfreunde.com_files/20dc495acdb78d71a5e6cf98a8556e5bef366e8c-wassermonitorteaser.jpg 2x" media="(max-width: 992px)">
|
||||||
|
<source srcset="ikfreunde.com_files/15542365f25229683d4a118ad7e05d35f620d42a-wassermonitorteaser.jpg 1x, ikfreunde.com_files/20dc495acdb78d71a5e6cf98a8556e5bef366e8c-wassermonitorteaser.jpg 2x" media="(min-width: 993px)">
|
||||||
|
<img class="module-project-teaser__image grayscale-on-hover" loading="lazy" src="ikfreunde.com_files/15542365f25229683d4a118ad7e05d35f620d42a-wassermonitorteaser.jpg" alt="">
|
||||||
|
</source></source></picture>
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="module-project-teaser animation">
|
||||||
|
|
||||||
|
<div class="module-project-teaser__content module-project-teaser__align-right">
|
||||||
|
<div class="module-project-teaser__content-inner ">
|
||||||
|
<span class="animation font-topline-teaser">Tide</span>
|
||||||
|
|
||||||
|
<h2 class="module-project-teaser__headline animation brush-overlay-headline font-headline-1">Webseite Relaunch</h2>
|
||||||
|
|
||||||
|
<p class="font-copy animation">TIDE ist Hamburgs Communitysender. Zeitgemäße Überarbeitung der Website mit besonderem Fokus auf mobiler Nutzbarkeit.</p>
|
||||||
|
|
||||||
|
<img loading="lazy" src="ikfreunde.com_files/ic_mic_brown.svg" class="svg-icon module-project-teaser__icon animation" alt="Icon">
|
||||||
|
<div class="module-project-teaser__button-container">
|
||||||
|
<a href="https://ikfreunde.com/projects/tide" title="" class="btn btn-standard module-project-teaser__button" target="">Ansehen
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="animation module-project-teaser__image-container module-project-teaser__align-left brush-bottom-white">
|
||||||
|
<a class="module-project-teaser__image-link" href="https://ikfreunde.com/projects/tide">
|
||||||
|
<picture>
|
||||||
|
<source srcset="ikfreunde.com_files/9faf87d7e48c5116e700e47a7cd48abf995fdbed-tideprojektteaser85.jpg 1x, ikfreunde.com_files/6b404ebe8b24e5c0d6b7c65482dcbe896ed51ab7-tideprojektteaser85.jpg 2x" media="(max-width: 992px)">
|
||||||
|
<source srcset="ikfreunde.com_files/9faf87d7e48c5116e700e47a7cd48abf995fdbed-tideprojektteaser85.jpg 1x, ikfreunde.com_files/6b404ebe8b24e5c0d6b7c65482dcbe896ed51ab7-tideprojektteaser85.jpg 2x" media="(min-width: 993px)">
|
||||||
|
<img class="module-project-teaser__image grayscale-on-hover" loading="lazy" src="ikfreunde.com_files/9faf87d7e48c5116e700e47a7cd48abf995fdbed-tideprojektteaser85.jpg" alt="">
|
||||||
|
</source></source></picture>
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="module-projects-teaser__button_more_container animation">
|
||||||
|
<a href="https://ikfreunde.com/projects" title="" class="font-link-text module-projects-teaser__button_more">Mehr Projekte</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<a class="jump-to-anchor" name="_services-teaser"></a>
|
||||||
|
|
||||||
|
<section class="large-teaser-base bg-brown brush-top-white brush-bottom-white animation">
|
||||||
|
<div class="large-teaser-base__head">
|
||||||
|
<h2 class="large-teaser-base__headline font-haedline font-headline-1">Wir tun<br>
|
||||||
|
es mit<br>
|
||||||
|
Leiden<br>
|
||||||
|
schaft</h2>
|
||||||
|
|
||||||
|
|
||||||
|
<img loading="lazy" class="large-teaser-base__icon" src="ikfreunde.com_files/ic_fire.svg" alt="Icon">
|
||||||
|
</div>
|
||||||
|
<div class="large-teaser-base__content services-teaser__content">
|
||||||
|
<div class="services-teaser__content-block">
|
||||||
|
<h3 class="services-teaser__content-headline font-headline-2 headline-border">Konzept & Beratung</h3>
|
||||||
|
|
||||||
|
<ul class="services-teaser__content-list">
|
||||||
|
<li>Konzeption</li>
|
||||||
|
<li>Innovationsberatung</li>
|
||||||
|
<li>Workshops</li>
|
||||||
|
<li>Digitale Strategien</li>
|
||||||
|
<li>Voice UX</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="services-teaser__content-block">
|
||||||
|
<h3 class="services-teaser__content-headline font-headline-2 headline-border">Design</h3>
|
||||||
|
|
||||||
|
<ul class="services-teaser__content-list">
|
||||||
|
<li>UI/UX Design</li>
|
||||||
|
<li>Visualisierungen</li>
|
||||||
|
<li>Interaktionsdesign</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="services-teaser__content-block">
|
||||||
|
<h3 class="services-teaser__content-headline font-headline-2 headline-border">Lösungen</h3>
|
||||||
|
|
||||||
|
<ul class="services-teaser__content-list">
|
||||||
|
<li>Websites</li>
|
||||||
|
<li>Sprachanwendungen</li>
|
||||||
|
<li>Prototypen</li>
|
||||||
|
<li>Datenanalysen</li>
|
||||||
|
<li>Web-Anwendungen</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<a class="jump-to-anchor" name="_team-teaser"></a>
|
||||||
|
<section class="text-image animation">
|
||||||
|
<h2 class="text-image__headline font-headline-1">Der Mensch<br>dahinter ist toll</h2>
|
||||||
|
|
||||||
|
<div class="html-content text-image__copy animation"><p>Unaufgeregt. Innovativ. Unkompliziert. Offen. Partnerschaftlich. Zuhörend.<br>
|
||||||
|
Auf das Wesentliche konzentriert. Die Details im Blick. </p>
|
||||||
|
<p>Wir bauen Brücken zwischen Nutzern und Inhalten, Menschen und Maschinen, Unternehmen und Technologie.</p></div>
|
||||||
|
|
||||||
|
<img loading="lazy" class="text-image___icon" src="ikfreunde.com_files/ic_team_2_brown.svg" alt="Icon">
|
||||||
|
<picture>
|
||||||
|
<source srcset="" media="(max-width: 992px)">
|
||||||
|
<source srcset="" media="(min-width: 993px)">
|
||||||
|
<img class="text-image__image animation" loading="lazy" src="" alt="">
|
||||||
|
</source></source></picture>
|
||||||
|
|
||||||
|
<div class="text-image__button-container">
|
||||||
|
<a href="https://ikfreunde.com/team" title="" class="btn btn-standard text-image__button" target="">Das Team kennenlernen
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<section class="large-teaser-base bg-blue brush-top-white brush-bottom-white animation">
|
||||||
|
<div class="large-teaser-base__head">
|
||||||
|
<h2 class="large-teaser-base__headline font-haedline font-headline-1">Darauf<br>
|
||||||
|
sind wir<br>
|
||||||
|
besonders<br>
|
||||||
|
stolz</h2>
|
||||||
|
|
||||||
|
|
||||||
|
<img loading="lazy" class="large-teaser-base__icon" src="ikfreunde.com_files/ic_pokal.svg" alt="Icon">
|
||||||
|
</div>
|
||||||
|
<div class="large-teaser-base__content awards-teaser__content">
|
||||||
|
<p class="font-copy">Wir durften in den letzten
|
||||||
|
Jahren für unsere Arbeit viele Preise entgegennehmen. Jeder ehrt uns und
|
||||||
|
bedeutet uns sehr viel. Einige auf die wir besonders stolz sind:</p>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="awards-teaser__content-list">
|
||||||
|
<div class="awards-teaser__content-entry">
|
||||||
|
<img class="awards-teaser__content-image" src="ikfreunde.com_files/dpok@2.png">
|
||||||
|
</div>
|
||||||
|
<div class="awards-teaser__content-entry">
|
||||||
|
<img class="awards-teaser__content-image" src="ikfreunde.com_files/grimmeonline@2.png">
|
||||||
|
</div>
|
||||||
|
<div class="awards-teaser__content-entry">
|
||||||
|
<img class="awards-teaser__content-image" src="ikfreunde.com_files/leadawards.png">
|
||||||
|
</div>
|
||||||
|
<div class="awards-teaser__content-entry">
|
||||||
|
<img class="awards-teaser__content-image" src="ikfreunde.com_files/dt_land@2.png">
|
||||||
|
</div>
|
||||||
|
<div class="awards-teaser__content-entry">
|
||||||
|
<img class="awards-teaser__content-image" src="ikfreunde.com_files/prixeuropa@2.png">
|
||||||
|
</div>
|
||||||
|
<p class="awards-teaser__content-entry awards-teaser__content-text font-copy-bold">und viele mehr</p>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<a class="jump-to-anchor" name="_contact-teaser"></a> <section class="contact-teaser animation">
|
||||||
|
<h2 class="contact-teaser__headline animation font-headline-1">Kunde<br>
|
||||||
|
werden</h2>
|
||||||
|
|
||||||
|
<div class="contact-teaser__content animation">
|
||||||
|
<a href="mailto:info@ikfreunde.com" title="" class="font-link-text contact-teaser__link contact-teaser__email">info@ikfreunde.com</a>
|
||||||
|
|
||||||
|
<a href="tel:040%20/%2035%2073%2069%2011" title="" class="font-link-text contact-teaser__link contact-teaser__phone">040 / 35 73 69 11</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<section class="large-teaser-base bg-yellow brush-top-white brush-bottom-white animation">
|
||||||
|
<div class="large-teaser-base__head">
|
||||||
|
<h2 class="large-teaser-base__headline font-haedline font-headline-1">Mitein<wbr>ander<br>
|
||||||
|
erfolg<wbr>reich</wbr></wbr></h2>
|
||||||
|
|
||||||
|
|
||||||
|
<img loading="lazy" class="large-teaser-base__icon" src="ikfreunde.com_files/ic_smiley.svg" alt="Icon">
|
||||||
|
</div>
|
||||||
|
<div class="large-teaser-base__content clients-teaser__content">
|
||||||
|
<div class="clients-teaser__content-list">
|
||||||
|
<div class="clients-teaser__content-entry">
|
||||||
|
<img class="clients-teaser__content-image" src="ikfreunde.com_files/tagesschau@2.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="clients-teaser__content-entry">
|
||||||
|
<img class="clients-teaser__content-image" src="ikfreunde.com_files/zdf@2x.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="clients-teaser__content-entry">
|
||||||
|
<img class="clients-teaser__content-image" src="ikfreunde.com_files/ndr@2x.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="clients-teaser__content-entry">
|
||||||
|
<img class="clients-teaser__content-image" src="ikfreunde.com_files/google@2x.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="clients-teaser__content-entry">
|
||||||
|
<img class="clients-teaser__content-image" src="ikfreunde.com_files/stifterverband@2x.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="clients-teaser__content-entry">
|
||||||
|
<img class="clients-teaser__content-image" src="ikfreunde.com_files/gdv@2x.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="clients-teaser__content-entry">
|
||||||
|
<img class="clients-teaser__content-image" src="ikfreunde.com_files/telefonica@2x.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="clients-teaser__content-entry">
|
||||||
|
<img class="clients-teaser__content-image" src="ikfreunde.com_files/brandeins@2x.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="clients-teaser__content-entry">
|
||||||
|
<img class="clients-teaser__content-image" src="ikfreunde.com_files/shz@2x.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="clients-teaser__content-entry">
|
||||||
|
<img class="clients-teaser__content-image" src="ikfreunde.com_files/tide@2x.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="clients-teaser__content-entry">
|
||||||
|
<img class="clients-teaser__content-image" src="ikfreunde.com_files/detektorfm@2x.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="clients-teaser__content-entry">
|
||||||
|
<img class="clients-teaser__content-image" src="ikfreunde.com_files/spon@2x.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="clients-teaser__content-entry clients-teaser__content-text font-copy-bold">und viele andere</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<section class="text-image animation">
|
||||||
|
<h2 class="text-image__headline font-headline-1">Kooperationen & Partner</h2>
|
||||||
|
|
||||||
|
<div class="html-content text-image__copy animation"><p>Unsere
|
||||||
|
Arbeit lebt von Kooperationen und dem Austausch mit anderen
|
||||||
|
Unternehmen, die in verwandten Themenbereichen ihrer Schwerpunkte haben.</p></div>
|
||||||
|
|
||||||
|
<picture>
|
||||||
|
<source srcset="" media="(max-width: 992px)">
|
||||||
|
<source srcset="" media="(min-width: 993px)">
|
||||||
|
<img class="text-image__image animation" loading="lazy" src="" alt="">
|
||||||
|
</source></source></picture>
|
||||||
|
|
||||||
|
<div class="text-image__button-container">
|
||||||
|
<a href="https://ikfreunde.com/kooperationspartner" title="" class="btn btn-standard text-image__button" target="">Zu den Partnern
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<a href="#top" title="Zum Anfang der Seite springen" class="btn btn-scroll-up"><!--?xml version="1.0" encoding="UTF-8"?-->
|
||||||
|
<svg class="icon btn-scroll-up__icon" height="13" viewbox="0 0 20 13" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m2.3583594 13 7.6416406-8.0384421 7.641641 8.0384421 2.358359-2.480738-10-10.519262-10 10.519262z"></path></svg>
|
||||||
|
|
||||||
|
</a>
|
||||||
|
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="cookie-layer" class="">
|
||||||
|
<div class="cookie-layer__content font-copy">
|
||||||
|
Wir nutzen Cookies auf unserer Website. Einige von ihnen
|
||||||
|
sind essenziell, während andere uns helfen, diese Website und Ihre
|
||||||
|
Erfahrung zu verbessern.
|
||||||
|
<a class="cookie-layer__link cookie-layer__privacy font-link-text-cookie-layer" href="https://ikfreunde.com/datenschutz" title="Mehr erfahren">Mehr erfahren</a>
|
||||||
|
</div>
|
||||||
|
<div class="cookie-layer__buttons">
|
||||||
|
<a class="font-link-text-cookie-layer cookie-layer__link cookie-layer__decline" href="#" title="Ablehnen">Ablehnen</a>
|
||||||
|
<a href="#" title="" class="btn btn-standard cookie-layer__accept" target="">Stimme zu
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<footer class="site-footer bg-brown brush-top-white">
|
||||||
|
|
||||||
|
<div class="site-footer__block-company ">
|
||||||
|
<h3 class="site-footer__headline font-headline-footer">ikfreunde GmbH</h3>
|
||||||
|
|
||||||
|
<p class="site-footer__address font-copy">Schillerstraße 21<br>
|
||||||
|
22767 Hamburg</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="site-footer__block-contact">
|
||||||
|
<h3 class="site-footer__headline headline-border font-headline-footer">Robbi</h3>
|
||||||
|
|
||||||
|
<a href="mailto:info@ikfreunde.com" title="" class="site-footer__link font-link-text-footer">info@ikfreunde.com</a>
|
||||||
|
|
||||||
|
<a href="tel:040%20/%2035%2073%2069%2011" title="" class="site-footer__link font-link-text-footer">040 / 35 73 69 11</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="site-footer__block-products">
|
||||||
|
<div class="site-footer__meta-links">
|
||||||
|
<a href="https://ikfreunde.com/impressum" title="" class="site-footer__link site-footer__meta-link font-link-text-footer">Impressum</a>
|
||||||
|
|
||||||
|
<a href="https://ikfreunde.com/datenschutz" title="" class="site-footer__link site-footer__meta-link font-link-text-footer">Datenschutz</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="spacer"></div>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="ikfreunde.com_files/1698d822c6d3fe9b0c50b3ab44ef524a.js"></script>
|
||||||
|
<script src="editor/wysiwyg-editor.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 95 KiB |
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 141 KiB After Width: | Height: | Size: 141 KiB |
|
Before Width: | Height: | Size: 208 KiB After Width: | Height: | Size: 208 KiB |
|
Before Width: | Height: | Size: 151 KiB After Width: | Height: | Size: 151 KiB |
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 63 KiB |
|
Before Width: | Height: | Size: 150 KiB After Width: | Height: | Size: 150 KiB |
|
Before Width: | Height: | Size: 340 KiB After Width: | Height: | Size: 340 KiB |
|
Before Width: | Height: | Size: 89 KiB After Width: | Height: | Size: 89 KiB |
|
Before Width: | Height: | Size: 251 KiB After Width: | Height: | Size: 251 KiB |
|
Before Width: | Height: | Size: 9.0 KiB After Width: | Height: | Size: 9.0 KiB |
|
Before Width: | Height: | Size: 65 KiB After Width: | Height: | Size: 65 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 157 KiB After Width: | Height: | Size: 157 KiB |
1
ikfreunde.com_files/ee792949df0da81967291f5675ce6b3b.css
Normal file
1
ikfreunde.com_files/ee792949df0da81967291f5675ce6b3b.css
Normal file
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 9.1 KiB After Width: | Height: | Size: 9.1 KiB |
|
Before Width: | Height: | Size: 6.9 KiB After Width: | Height: | Size: 6.9 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 8.1 KiB After Width: | Height: | Size: 8.1 KiB |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 8.9 KiB After Width: | Height: | Size: 8.9 KiB |
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 5.5 KiB |
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 6.8 KiB After Width: | Height: | Size: 6.8 KiB |
|
Before Width: | Height: | Size: 9.3 KiB After Width: | Height: | Size: 9.3 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 7.1 KiB After Width: | Height: | Size: 7.1 KiB |
@@ -1 +1 @@
|
|||||||
web4beginners.com.html
|
ikfreunde.com.html
|
||||||
@@ -16,7 +16,7 @@ if [[ ! "$NAME" =~ ^[a-zA-Z0-9][a-zA-Z0-9_-]*$ ]]; then
|
|||||||
exit 1
|
exit 1
|
||||||
fi
|
fi
|
||||||
|
|
||||||
ROOT_BASE="${ROOT_BASE:-/srv/web4beginners}"
|
ROOT_BASE="${ROOT_BASE:-/srv/ikfreunde}"
|
||||||
COMPOSE_FILE="${COMPOSE_FILE:-docker-compose.traefik-routes.yml}"
|
COMPOSE_FILE="${COMPOSE_FILE:-docker-compose.traefik-routes.yml}"
|
||||||
ROOT="${ROOT_BASE}/${NAME}"
|
ROOT="${ROOT_BASE}/${NAME}"
|
||||||
|
|
||||||
@@ -27,9 +27,9 @@ fi
|
|||||||
|
|
||||||
mkdir -p "$ROOT"
|
mkdir -p "$ROOT"
|
||||||
|
|
||||||
if [[ ! -f "$ROOT/web4beginners.com.html" ]]; then
|
if [[ ! -f "$ROOT/ikfreunde.com.html" ]]; then
|
||||||
cp web4beginners.com.html "$ROOT/web4beginners.com.html"
|
cp ikfreunde.com.html "$ROOT/ikfreunde.com.html"
|
||||||
echo "Created: $ROOT/web4beginners.com.html"
|
echo "Created: $ROOT/ikfreunde.com.html"
|
||||||
fi
|
fi
|
||||||
|
|
||||||
if [[ ! -f "$ROOT/site-content.de.json" ]]; then
|
if [[ ! -f "$ROOT/site-content.de.json" ]]; then
|
||||||
@@ -49,9 +49,9 @@ else
|
|||||||
build:
|
build:
|
||||||
context: .
|
context: .
|
||||||
dockerfile: Dockerfile
|
dockerfile: Dockerfile
|
||||||
container_name: web4beginners-${NAME}
|
container_name: ikfreunde-${NAME}
|
||||||
volumes:
|
volumes:
|
||||||
- ${ROOT}/web4beginners.com.html:/app/web4beginners.com.html
|
- ${ROOT}/ikfreunde.com.html:/app/ikfreunde.com.html
|
||||||
- ${ROOT}/site-content.de.json:/app/content/site-content.de.json
|
- ${ROOT}/site-content.de.json:/app/content/site-content.de.json
|
||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
networks:
|
networks:
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
declare(strict_types=1);
|
declare(strict_types=1);
|
||||||
|
|
||||||
const PROJECT_ROOT = __DIR__ . '/..';
|
const PROJECT_ROOT = __DIR__ . '/..';
|
||||||
const HTML_PATH = PROJECT_ROOT . '/web4beginners.com.html';
|
const HTML_PATH = PROJECT_ROOT . '/ikfreunde.com.html';
|
||||||
const JSON_PATH = PROJECT_ROOT . '/content/site-content.de.json';
|
const JSON_PATH = PROJECT_ROOT . '/content/site-content.de.json';
|
||||||
const CREDENTIALS_PATH = PROJECT_ROOT . '/content/.editor-credentials.json';
|
const CREDENTIALS_PATH = PROJECT_ROOT . '/content/.editor-credentials.json';
|
||||||
const RESET_PATH = PROJECT_ROOT . '/content/.editor-reset.json';
|
const RESET_PATH = PROJECT_ROOT . '/content/.editor-reset.json';
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
#!/usr/bin/env bash
|
#!/usr/bin/env bash
|
||||||
set -euo pipefail
|
set -euo pipefail
|
||||||
|
|
||||||
INPUT_HTML="${1:-web4beginners.com.html}"
|
INPUT_HTML="${1:-ikfreunde.com.html}"
|
||||||
OUTPUT_JSON="${2:-content/site-content.de.json}"
|
OUTPUT_JSON="${2:-content/site-content.de.json}"
|
||||||
|
|
||||||
mkdir -p "$(dirname "$OUTPUT_JSON")"
|
mkdir -p "$(dirname "$OUTPUT_JSON")"
|
||||||
|
|||||||
@@ -6,5 +6,5 @@ cd "$ROOT_DIR"
|
|||||||
|
|
||||||
PORT="${1:-4173}"
|
PORT="${1:-4173}"
|
||||||
|
|
||||||
ln -sf web4beginners.com.html index.html
|
ln -sf ikfreunde.com.html index.html
|
||||||
php -d opcache.enable_cli=0 -S 127.0.0.1:"$PORT" scripts/editor_server.php
|
php -d opcache.enable_cli=0 -S 127.0.0.1:"$PORT" scripts/editor_server.php
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ fi
|
|||||||
|
|
||||||
rm -f "$PID_FILE"
|
rm -f "$PID_FILE"
|
||||||
|
|
||||||
ln -sf web4beginners.com.html index.html
|
ln -sf ikfreunde.com.html index.html
|
||||||
nohup python3 -m http.server "$PORT" --bind 127.0.0.1 >"$LOG_FILE" 2>&1 &
|
nohup python3 -m http.server "$PORT" --bind 127.0.0.1 >"$LOG_FILE" 2>&1 &
|
||||||
SERVER_PID=$!
|
SERVER_PID=$!
|
||||||
echo "$SERVER_PID" > "$PID_FILE"
|
echo "$SERVER_PID" > "$PID_FILE"
|
||||||
|
|||||||
@@ -1,614 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html><head lang="de">
|
|
||||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Home | web4beginners.com</title>
|
|
||||||
|
|
||||||
|
|
||||||
<meta name="generator" content="GravCMS">
|
|
||||||
|
|
||||||
|
|
||||||
<meta name="title" content="Klar. Innovativ. Digital - web4beginners GmbH">
|
|
||||||
|
|
||||||
|
|
||||||
<meta name="description" content="Daten. Websites. Skills. Anwendungen.">
|
|
||||||
|
|
||||||
|
|
||||||
<meta property="og:image" content="https://web4beginners.com/user/pages/_assets/Share_Img_DF.jpg">
|
|
||||||
|
|
||||||
|
|
||||||
<meta property="og:site_name" content="Klar. Innovativ. Digital - web4beginners GmbH">
|
|
||||||
|
|
||||||
|
|
||||||
<meta name="twitter:card" content="summary_large_image">
|
|
||||||
|
|
||||||
|
|
||||||
<meta name="twitter:image:alt" content="web4beginners">
|
|
||||||
|
|
||||||
|
|
||||||
<meta name="twitter:image" content="https://web4beginners.com/user/pages/_assets/twitter_card.jpg">
|
|
||||||
|
|
||||||
|
|
||||||
<meta name="og:url" content="https://web4beginners.com/">
|
|
||||||
|
|
||||||
<meta name="og:title" content="Klar. Innovativ. Digital - web4beginners GmbH">
|
|
||||||
|
|
||||||
<meta name="og:description" content="Daten. Websites. Skills. Anwendungen.">
|
|
||||||
|
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="https://web4beginners.com/user/themes/web4beginners/assets/favicon/apple-touch-icon.png">
|
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="https://web4beginners.com/user/themes/web4beginners/assets/favicon/favicon-32x32.png">
|
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="https://web4beginners.com/user/themes/web4beginners/assets/favicon/favicon-16x16.png">
|
|
||||||
<link rel="icon" type="image/png" sizes="192x192" href="https://web4beginners.com/user/themes/web4beginners/assets/favicon/android-chrome-192x192.png">
|
|
||||||
<link rel="icon" type="image/png" sizes="512x512" href="https://web4beginners.com/user/themes/web4beginners/assets/favicon/android-chrome-512x512.png">
|
|
||||||
<link rel="mask-icon" href="https://web4beginners.com/user/themes/web4beginners/assets/favicon/safari-pinned-tab.svg" color="#5bbad5">
|
|
||||||
<meta name="msapplication-TileColor" content="#da532c">
|
|
||||||
<meta name="theme-color" content="#ffffff">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<link href="web4beginners.com_files/ee792949df0da81967291f5675ce6b3b.css" type="text/css" rel="stylesheet">
|
|
||||||
<link href="editor/wysiwyg-editor.css" type="text/css" rel="stylesheet">
|
|
||||||
|
|
||||||
<script src="web4beginners.com_files/f73f70e70b0ac5f1d474abd842fb4b24.js"></script>
|
|
||||||
|
|
||||||
|
|
||||||
<script data-name="google_analytics" async="" src="web4beginners.com_files/google-analytics_analytics.js"></script></head>
|
|
||||||
<body data-ua="G-79HSR2GSX9" class="search_plugin_added">
|
|
||||||
|
|
||||||
<div class="spacer"></div>
|
|
||||||
<div class="main-stage">
|
|
||||||
|
|
||||||
|
|
||||||
<header class="page-head" style="top: 0rem;">
|
|
||||||
<div class="page-head__inner">
|
|
||||||
<nav class="prm-nav page-head__navigation" role="navigation">
|
|
||||||
<input type="checkbox" class="prm-nav__mobile-toggle" id="prm-nav__mobile-toggle-checkbox">
|
|
||||||
<label for="prm-nav__mobile-toggle-checkbox" class="prm-nav__mobile-toggle-icon">
|
|
||||||
<div class="spinner"></div>
|
|
||||||
<div class="spinner"></div>
|
|
||||||
<div class="spinner"></div>
|
|
||||||
</label>
|
|
||||||
<div class="prn-nav__content">
|
|
||||||
<ul class="prm-nav__list">
|
|
||||||
<li class=""><a href="#_projects">Projekte</a></li>
|
|
||||||
<li class=""><a href="#_services-teaser">Awesome</a></li>
|
|
||||||
<li class="prm-nav__break">
|
|
||||||
</li><li class=""><a href="#_team-teaser">Team</a></li>
|
|
||||||
<li class=""><a href="#_contact-teaser">Robbi</a></li>
|
|
||||||
</ul>
|
|
||||||
<ul class="prm-nav__meta">
|
|
||||||
<li class="font-link-text-small"><a href="https://web4beginners.com/impressum">Impressum</a></li>
|
|
||||||
<li class="font-link-text-small"><a href="https://web4beginners.com/datenschutz">Datenschutz</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<a href="https://web4beginners.com/" title="" class="page-head__logo">
|
|
||||||
<picture>
|
|
||||||
<source srcset="web4beginners.com_files/logo-df.svg 1x" media="(max-width: 992px)">
|
|
||||||
<source srcset="" media="(min-width: 993px)">
|
|
||||||
<img class="page-head__logo-image" loading="lazy" src="https://mindboost.app/images/logo.svg" alt="mindboost Logo">
|
|
||||||
</source></source></picture>
|
|
||||||
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div class="page-head__spacer" style="height: 181px;"></div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<main id="main" role="main" class="cf">
|
|
||||||
<section class="module-hero-teaser brush-bottom-white">
|
|
||||||
<div class="module-hero-teaser__content">
|
|
||||||
<h1 class="font-headline-1 module-hero-teaser__headline animation brush-overlay-hero animate">Klar.<br>Crazy.<br>Fiktiv.</h1>
|
|
||||||
|
|
||||||
<div class="font-intro module-hero-teaser__intro animation animate">Musik. Websites. Skills. Anwendungen.</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="module-hero-teaser__background animation animate">
|
|
||||||
<picture>
|
|
||||||
<source srcset="web4beginners.com_files/0ffcdedcfc816182f817ac2520731c5868840c6e-heroimage1200x6253.jpg 1x, web4beginners.com_files/524569d400cf68ef1cf160c58a8b501a139a8a81-heroimage1200x62532.jpg 2x" media="(max-width: 992px)">
|
|
||||||
<source srcset="web4beginners.com_files/0ffcdedcfc816182f817ac2520731c5868840c6e-heroimage1200x6253.jpg 1x, web4beginners.com_files/524569d400cf68ef1cf160c58a8b501a139a8a81-heroimage1200x62532.jpg 2x" media="(min-width: 993px)">
|
|
||||||
<img class="module-hero-teaser__background-image" loading="lazy" src="web4beginners.com_files/0ffcdedcfc816182f817ac2520731c5868840c6e-heroimage1200x6253.jpg" alt="">
|
|
||||||
</source></source></picture>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
<section class="page-header">
|
|
||||||
<div class="page-header__copytext font-copy">Die richtige Form der Kommunikation - individuell, innovativ und auf Augenhöhe. <br>
|
|
||||||
|
|
||||||
Wir beraten, planen und gestalten. Und wir setzen Ideen um - alles aus einer Hand.</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
<a class="jump-to-anchor" name="_projects"></a>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<section class="module-projects-teaser">
|
|
||||||
<section class="module-project-teaser animation animate">
|
|
||||||
|
|
||||||
<div class="module-project-teaser__content module-project-teaser__align-left">
|
|
||||||
<div class="module-project-teaser__content-inner ">
|
|
||||||
<span class="animation font-topline-teaser animate">RuhrFutur gGmbH</span>
|
|
||||||
|
|
||||||
<h2 class="module-project-teaser__headline animation brush-overlay-headline font-headline-1 animate">Festivals</h2>
|
|
||||||
|
|
||||||
<p class="font-copy animation animate">Entwicklungen in der Bildungslandschaft kontinuierlich im Blick behalten mit Hilfe von Bildungsmonitoring.</p>
|
|
||||||
|
|
||||||
<img loading="lazy" src="web4beginners.com_files/ic_monitoring_1_brown.svg" class="svg-icon module-project-teaser__icon animation animate" alt="Icon">
|
|
||||||
<div class="module-project-teaser__button-container">
|
|
||||||
<a href="https://web4beginners.com/projects/bildungsmonitoring" title="" class="btn btn-standard module-project-teaser__button" target="">Dream</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="animation module-project-teaser__image-container module-project-teaser__align-right brush-bottom-white animate">
|
|
||||||
<a class="module-project-teaser__image-link" href="https://web4beginners.com/projects/bildungsmonitoring">
|
|
||||||
<picture>
|
|
||||||
<source srcset="web4beginners.com_files/c54c8a64fe535bf7249d676fc7cb69cd6f27c3d7-kobimoprojekteimage.jpg 1x, web4beginners.com_files/e679b01b355748edfb67d2d16f52570f63266e6c-kobimoprojekteimage.jpg 2x" media="(max-width: 992px)">
|
|
||||||
<source srcset="web4beginners.com_files/c54c8a64fe535bf7249d676fc7cb69cd6f27c3d7-kobimoprojekteimage.jpg 1x, web4beginners.com_files/e679b01b355748edfb67d2d16f52570f63266e6c-kobimoprojekteimage.jpg 2x" media="(min-width: 993px)">
|
|
||||||
<img class="module-project-teaser__image grayscale-on-hover" loading="lazy" src="web4beginners.com_files/c54c8a64fe535bf7249d676fc7cb69cd6f27c3d7-kobimoprojekteimage.jpg" alt="">
|
|
||||||
</source></source></picture>
|
|
||||||
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="module-project-teaser animation animate">
|
|
||||||
|
|
||||||
<div class="module-project-teaser__content module-project-teaser__align-right">
|
|
||||||
<div class="module-project-teaser__content-inner ">
|
|
||||||
<span class="animation font-topline-teaser animate">Cofinpro AG</span>
|
|
||||||
|
|
||||||
<h2 class="module-project-teaser__headline animation brush-overlay-headline font-headline-1 animate">Banken-Check</h2>
|
|
||||||
|
|
||||||
<p class="font-copy animation animate">So gesund sind Deutschlands Finanzinstitute. Bankenanalyse-Tool mit mehr als 1.400 Finanzinstituten.</p>
|
|
||||||
|
|
||||||
<img loading="lazy" src="web4beginners.com_files/ic_coins_brown.svg" class="svg-icon module-project-teaser__icon animation animate" alt="Icon">
|
|
||||||
<div class="module-project-teaser__button-container">
|
|
||||||
<a href="https://web4beginners.com/projects/banken-check" title="" class="btn btn-standard module-project-teaser__button" target="">Ansehen
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="animation module-project-teaser__image-container module-project-teaser__align-left brush-bottom-white animate">
|
|
||||||
<a class="module-project-teaser__image-link" href="https://web4beginners.com/projects/banken-check">
|
|
||||||
<picture>
|
|
||||||
<source srcset="web4beginners.com_files/026d3a0dcea46e3c6ea8418280abc143a883560f-projektteasercofinp.jpg 1x, web4beginners.com_files/b1b5ffb75041c644f7fe52034c6e71e0ddabc103-projektteasercofinp.jpg 2x" media="(max-width: 992px)">
|
|
||||||
<source srcset="web4beginners.com_files/026d3a0dcea46e3c6ea8418280abc143a883560f-projektteasercofinp.jpg 1x, web4beginners.com_files/b1b5ffb75041c644f7fe52034c6e71e0ddabc103-projektteasercofinp.jpg 2x" media="(min-width: 993px)">
|
|
||||||
<img class="module-project-teaser__image grayscale-on-hover" loading="lazy" src="web4beginners.com_files/026d3a0dcea46e3c6ea8418280abc143a883560f-projektteasercofinp.jpg" alt="">
|
|
||||||
</source></source></picture>
|
|
||||||
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="module-project-teaser animation animate">
|
|
||||||
|
|
||||||
<div class="module-project-teaser__content module-project-teaser__align-left">
|
|
||||||
<div class="module-project-teaser__content-inner ">
|
|
||||||
<span class="animation font-topline-teaser animate">RuhrFutur gGmbH</span>
|
|
||||||
|
|
||||||
<h2 class="module-project-teaser__headline animation brush-overlay-headline font-headline-1 animate">Bildungs-bericht</h2>
|
|
||||||
|
|
||||||
<p class="font-copy animation">Die Bildungslandschaft 2020 im Ruhrgebiet sichtbar und wissenschaftliche Erkenntnisse erfassbar machen.</p>
|
|
||||||
|
|
||||||
<img loading="lazy" src="web4beginners.com_files/ic_bildung_1_brown.svg" class="svg-icon module-project-teaser__icon animation" alt="Icon">
|
|
||||||
<div class="module-project-teaser__button-container">
|
|
||||||
<a href="https://web4beginners.com/projects/bildungsbericht" title="" class="btn btn-standard module-project-teaser__button" target="">Ansehen
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="animation module-project-teaser__image-container module-project-teaser__align-right brush-bottom-white">
|
|
||||||
<a class="module-project-teaser__image-link" href="https://web4beginners.com/projects/bildungsbericht">
|
|
||||||
<picture>
|
|
||||||
<source srcset="web4beginners.com_files/3b61b2909589fd44ec1af7c47f8a89c1515aebc1-ruhrfuturprojteaser.jpg 1x, web4beginners.com_files/3915f694fef49b9b513d693e0e6a5b1c347aa7c0-ruhrfuturprojteaser.jpg 2x" media="(max-width: 992px)">
|
|
||||||
<source srcset="web4beginners.com_files/3b61b2909589fd44ec1af7c47f8a89c1515aebc1-ruhrfuturprojteaser.jpg 1x, web4beginners.com_files/3915f694fef49b9b513d693e0e6a5b1c347aa7c0-ruhrfuturprojteaser.jpg 2x" media="(min-width: 993px)">
|
|
||||||
<img class="module-project-teaser__image grayscale-on-hover" loading="lazy" src="web4beginners.com_files/3b61b2909589fd44ec1af7c47f8a89c1515aebc1-ruhrfuturprojteaser.jpg" alt="">
|
|
||||||
</source></source></picture>
|
|
||||||
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="module-project-teaser animation">
|
|
||||||
|
|
||||||
<div class="module-project-teaser__content module-project-teaser__align-right">
|
|
||||||
<div class="module-project-teaser__content-inner ">
|
|
||||||
<span class="animation font-topline-teaser">Telefónica Deutschland</span>
|
|
||||||
|
|
||||||
<h2 class="module-project-teaser__headline animation brush-overlay-headline font-headline-1">Mobilität verstehen</h2>
|
|
||||||
|
|
||||||
<p class="font-copy animation">„So bewegt sich Deutschland“ - eine Karte zeigt Bewegungsmuster in ganz Deutschland anhand anonymisierter Mobilfunk-Daten.</p>
|
|
||||||
|
|
||||||
<img loading="lazy" src="web4beginners.com_files/ic_mobility_brown.svg" class="svg-icon module-project-teaser__icon animation" alt="Icon">
|
|
||||||
<div class="module-project-teaser__button-container">
|
|
||||||
<a href="https://web4beginners.com/projects/telefonica" title="" class="btn btn-standard module-project-teaser__button" target="">Ansehen
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="animation module-project-teaser__image-container module-project-teaser__align-left brush-bottom-white">
|
|
||||||
<a class="module-project-teaser__image-link" href="https://web4beginners.com/projects/telefonica">
|
|
||||||
<picture>
|
|
||||||
<source srcset="web4beginners.com_files/07eb52c038c4c75165c7ec1a757d022015dd12f1-telefonicateaser.jpg 1x, web4beginners.com_files/307019ce368b35d809ed78f56dc025ce04c0cc07-telefonicateaser2x.jpg 2x" media="(max-width: 992px)">
|
|
||||||
<source srcset="web4beginners.com_files/07eb52c038c4c75165c7ec1a757d022015dd12f1-telefonicateaser.jpg 1x, web4beginners.com_files/307019ce368b35d809ed78f56dc025ce04c0cc07-telefonicateaser2x.jpg 2x" media="(min-width: 993px)">
|
|
||||||
<img class="module-project-teaser__image grayscale-on-hover" loading="lazy" src="web4beginners.com_files/07eb52c038c4c75165c7ec1a757d022015dd12f1-telefonicateaser.jpg" alt="">
|
|
||||||
</source></source></picture>
|
|
||||||
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="module-project-teaser animation">
|
|
||||||
|
|
||||||
<div class="module-project-teaser__content module-project-teaser__align-left">
|
|
||||||
<div class="module-project-teaser__content-inner ">
|
|
||||||
<span class="animation font-topline-teaser">Forschungszentrum Jülich</span>
|
|
||||||
|
|
||||||
<h2 class="module-project-teaser__headline animation brush-overlay-headline font-headline-1">Wasser-monitor</h2>
|
|
||||||
|
|
||||||
<p class="font-copy animation">Das Ziel besteht darin, die Prognosen für den Wasserhaushalt im Boden zu visualisieren.</p>
|
|
||||||
|
|
||||||
<img loading="lazy" src="web4beginners.com_files/ic_wasser_1_brown.svg" class="svg-icon module-project-teaser__icon animation" alt="Icon">
|
|
||||||
<div class="module-project-teaser__button-container">
|
|
||||||
<a href="https://web4beginners.com/projects/wassermonitor" title="" class="btn btn-standard module-project-teaser__button" target="">Ansehen
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="animation module-project-teaser__image-container module-project-teaser__align-right brush-bottom-white">
|
|
||||||
<a class="module-project-teaser__image-link" href="https://web4beginners.com/projects/wassermonitor">
|
|
||||||
<picture>
|
|
||||||
<source srcset="web4beginners.com_files/15542365f25229683d4a118ad7e05d35f620d42a-wassermonitorteaser.jpg 1x, web4beginners.com_files/20dc495acdb78d71a5e6cf98a8556e5bef366e8c-wassermonitorteaser.jpg 2x" media="(max-width: 992px)">
|
|
||||||
<source srcset="web4beginners.com_files/15542365f25229683d4a118ad7e05d35f620d42a-wassermonitorteaser.jpg 1x, web4beginners.com_files/20dc495acdb78d71a5e6cf98a8556e5bef366e8c-wassermonitorteaser.jpg 2x" media="(min-width: 993px)">
|
|
||||||
<img class="module-project-teaser__image grayscale-on-hover" loading="lazy" src="web4beginners.com_files/15542365f25229683d4a118ad7e05d35f620d42a-wassermonitorteaser.jpg" alt="">
|
|
||||||
</source></source></picture>
|
|
||||||
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="module-project-teaser animation">
|
|
||||||
|
|
||||||
<div class="module-project-teaser__content module-project-teaser__align-right">
|
|
||||||
<div class="module-project-teaser__content-inner ">
|
|
||||||
<span class="animation font-topline-teaser">Tide</span>
|
|
||||||
|
|
||||||
<h2 class="module-project-teaser__headline animation brush-overlay-headline font-headline-1">Webseite Relaunch</h2>
|
|
||||||
|
|
||||||
<p class="font-copy animation">TIDE ist Hamburgs Communitysender. Zeitgemäße Überarbeitung der Website mit besonderem Fokus auf mobiler Nutzbarkeit.</p>
|
|
||||||
|
|
||||||
<img loading="lazy" src="web4beginners.com_files/ic_mic_brown.svg" class="svg-icon module-project-teaser__icon animation" alt="Icon">
|
|
||||||
<div class="module-project-teaser__button-container">
|
|
||||||
<a href="https://web4beginners.com/projects/tide" title="" class="btn btn-standard module-project-teaser__button" target="">Ansehen
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="animation module-project-teaser__image-container module-project-teaser__align-left brush-bottom-white">
|
|
||||||
<a class="module-project-teaser__image-link" href="https://web4beginners.com/projects/tide">
|
|
||||||
<picture>
|
|
||||||
<source srcset="web4beginners.com_files/9faf87d7e48c5116e700e47a7cd48abf995fdbed-tideprojektteaser85.jpg 1x, web4beginners.com_files/6b404ebe8b24e5c0d6b7c65482dcbe896ed51ab7-tideprojektteaser85.jpg 2x" media="(max-width: 992px)">
|
|
||||||
<source srcset="web4beginners.com_files/9faf87d7e48c5116e700e47a7cd48abf995fdbed-tideprojektteaser85.jpg 1x, web4beginners.com_files/6b404ebe8b24e5c0d6b7c65482dcbe896ed51ab7-tideprojektteaser85.jpg 2x" media="(min-width: 993px)">
|
|
||||||
<img class="module-project-teaser__image grayscale-on-hover" loading="lazy" src="web4beginners.com_files/9faf87d7e48c5116e700e47a7cd48abf995fdbed-tideprojektteaser85.jpg" alt="">
|
|
||||||
</source></source></picture>
|
|
||||||
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="module-projects-teaser__button_more_container animation">
|
|
||||||
<a href="https://web4beginners.com/projects" title="" class="font-link-text module-projects-teaser__button_more">Mehr Projekte</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
<a class="jump-to-anchor" name="_services-teaser"></a>
|
|
||||||
|
|
||||||
<section class="large-teaser-base bg-brown brush-top-white brush-bottom-white animation">
|
|
||||||
<div class="large-teaser-base__head">
|
|
||||||
<h2 class="large-teaser-base__headline font-haedline font-headline-1">Wir tun<br>
|
|
||||||
es mit<br>
|
|
||||||
Leiden<br>
|
|
||||||
schaft</h2>
|
|
||||||
|
|
||||||
|
|
||||||
<img loading="lazy" class="large-teaser-base__icon" src="web4beginners.com_files/ic_fire.svg" alt="Icon">
|
|
||||||
</div>
|
|
||||||
<div class="large-teaser-base__content services-teaser__content">
|
|
||||||
<div class="services-teaser__content-block">
|
|
||||||
<h3 class="services-teaser__content-headline font-headline-2 headline-border">Konzept & Beratung</h3>
|
|
||||||
|
|
||||||
<ul class="services-teaser__content-list">
|
|
||||||
<li>Konzeption</li>
|
|
||||||
<li>Innovationsberatung</li>
|
|
||||||
<li>Workshops</li>
|
|
||||||
<li>Digitale Strategien</li>
|
|
||||||
<li>Voice UX</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="services-teaser__content-block">
|
|
||||||
<h3 class="services-teaser__content-headline font-headline-2 headline-border">Design</h3>
|
|
||||||
|
|
||||||
<ul class="services-teaser__content-list">
|
|
||||||
<li>UI/UX Design</li>
|
|
||||||
<li>Visualisierungen</li>
|
|
||||||
<li>Interaktionsdesign</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="services-teaser__content-block">
|
|
||||||
<h3 class="services-teaser__content-headline font-headline-2 headline-border">Lösungen</h3>
|
|
||||||
|
|
||||||
<ul class="services-teaser__content-list">
|
|
||||||
<li>Websites</li>
|
|
||||||
<li>Sprachanwendungen</li>
|
|
||||||
<li>Prototypen</li>
|
|
||||||
<li>Datenanalysen</li>
|
|
||||||
<li>Web-Anwendungen</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<a class="jump-to-anchor" name="_team-teaser"></a>
|
|
||||||
<section class="text-image animation">
|
|
||||||
<h2 class="text-image__headline font-headline-1">Der Mensch<br>dahinter ist toll</h2>
|
|
||||||
|
|
||||||
<div class="html-content text-image__copy animation"><p>Unaufgeregt. Innovativ. Unkompliziert. Offen. Partnerschaftlich. Zuhörend.<br>
|
|
||||||
Auf das Wesentliche konzentriert. Die Details im Blick. </p>
|
|
||||||
<p>Wir bauen Brücken zwischen Nutzern und Inhalten, Menschen und Maschinen, Unternehmen und Technologie.</p></div>
|
|
||||||
|
|
||||||
<img loading="lazy" class="text-image___icon" src="web4beginners.com_files/ic_team_2_brown.svg" alt="Icon">
|
|
||||||
<picture>
|
|
||||||
<source srcset="" media="(max-width: 992px)">
|
|
||||||
<source srcset="" media="(min-width: 993px)">
|
|
||||||
<img class="text-image__image animation" loading="lazy" src="" alt="">
|
|
||||||
</source></source></picture>
|
|
||||||
|
|
||||||
<div class="text-image__button-container">
|
|
||||||
<a href="https://web4beginners.com/team" title="" class="btn btn-standard text-image__button" target="">Das Team kennenlernen
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<section class="large-teaser-base bg-blue brush-top-white brush-bottom-white animation">
|
|
||||||
<div class="large-teaser-base__head">
|
|
||||||
<h2 class="large-teaser-base__headline font-haedline font-headline-1">Darauf<br>
|
|
||||||
sind wir<br>
|
|
||||||
besonders<br>
|
|
||||||
stolz</h2>
|
|
||||||
|
|
||||||
|
|
||||||
<img loading="lazy" class="large-teaser-base__icon" src="web4beginners.com_files/ic_pokal.svg" alt="Icon">
|
|
||||||
</div>
|
|
||||||
<div class="large-teaser-base__content awards-teaser__content">
|
|
||||||
<p class="font-copy">Wir durften in den letzten
|
|
||||||
Jahren für unsere Arbeit viele Preise entgegennehmen. Jeder ehrt uns und
|
|
||||||
bedeutet uns sehr viel. Einige auf die wir besonders stolz sind:</p>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="awards-teaser__content-list">
|
|
||||||
<div class="awards-teaser__content-entry">
|
|
||||||
<img class="awards-teaser__content-image" src="web4beginners.com_files/dpok@2.png">
|
|
||||||
</div>
|
|
||||||
<div class="awards-teaser__content-entry">
|
|
||||||
<img class="awards-teaser__content-image" src="web4beginners.com_files/grimmeonline@2.png">
|
|
||||||
</div>
|
|
||||||
<div class="awards-teaser__content-entry">
|
|
||||||
<img class="awards-teaser__content-image" src="web4beginners.com_files/leadawards.png">
|
|
||||||
</div>
|
|
||||||
<div class="awards-teaser__content-entry">
|
|
||||||
<img class="awards-teaser__content-image" src="web4beginners.com_files/dt_land@2.png">
|
|
||||||
</div>
|
|
||||||
<div class="awards-teaser__content-entry">
|
|
||||||
<img class="awards-teaser__content-image" src="web4beginners.com_files/prixeuropa@2.png">
|
|
||||||
</div>
|
|
||||||
<p class="awards-teaser__content-entry awards-teaser__content-text font-copy-bold">und viele mehr</p>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<a class="jump-to-anchor" name="_contact-teaser"></a> <section class="contact-teaser animation">
|
|
||||||
<h2 class="contact-teaser__headline animation font-headline-1">Kunde<br>
|
|
||||||
werden</h2>
|
|
||||||
|
|
||||||
<div class="contact-teaser__content animation">
|
|
||||||
<a href="mailto:info@web4beginners.com" title="" class="font-link-text contact-teaser__link contact-teaser__email">info@web4beginners.com</a>
|
|
||||||
|
|
||||||
<a href="tel:040%20/%2035%2073%2069%2011" title="" class="font-link-text contact-teaser__link contact-teaser__phone">040 / 35 73 69 11</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<section class="large-teaser-base bg-yellow brush-top-white brush-bottom-white animation">
|
|
||||||
<div class="large-teaser-base__head">
|
|
||||||
<h2 class="large-teaser-base__headline font-haedline font-headline-1">Mitein<wbr>ander<br>
|
|
||||||
erfolg<wbr>reich</wbr></wbr></h2>
|
|
||||||
|
|
||||||
|
|
||||||
<img loading="lazy" class="large-teaser-base__icon" src="web4beginners.com_files/ic_smiley.svg" alt="Icon">
|
|
||||||
</div>
|
|
||||||
<div class="large-teaser-base__content clients-teaser__content">
|
|
||||||
<div class="clients-teaser__content-list">
|
|
||||||
<div class="clients-teaser__content-entry">
|
|
||||||
<img class="clients-teaser__content-image" src="web4beginners.com_files/tagesschau@2.png">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="clients-teaser__content-entry">
|
|
||||||
<img class="clients-teaser__content-image" src="web4beginners.com_files/zdf@2x.png">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="clients-teaser__content-entry">
|
|
||||||
<img class="clients-teaser__content-image" src="web4beginners.com_files/ndr@2x.png">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="clients-teaser__content-entry">
|
|
||||||
<img class="clients-teaser__content-image" src="web4beginners.com_files/google@2x.png">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="clients-teaser__content-entry">
|
|
||||||
<img class="clients-teaser__content-image" src="web4beginners.com_files/stifterverband@2x.png">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="clients-teaser__content-entry">
|
|
||||||
<img class="clients-teaser__content-image" src="web4beginners.com_files/gdv@2x.png">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="clients-teaser__content-entry">
|
|
||||||
<img class="clients-teaser__content-image" src="web4beginners.com_files/telefonica@2x.png">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="clients-teaser__content-entry">
|
|
||||||
<img class="clients-teaser__content-image" src="web4beginners.com_files/brandeins@2x.png">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="clients-teaser__content-entry">
|
|
||||||
<img class="clients-teaser__content-image" src="web4beginners.com_files/shz@2x.png">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="clients-teaser__content-entry">
|
|
||||||
<img class="clients-teaser__content-image" src="web4beginners.com_files/tide@2x.png">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="clients-teaser__content-entry">
|
|
||||||
<img class="clients-teaser__content-image" src="web4beginners.com_files/detektorfm@2x.png">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="clients-teaser__content-entry">
|
|
||||||
<img class="clients-teaser__content-image" src="web4beginners.com_files/spon@2x.png">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="clients-teaser__content-entry clients-teaser__content-text font-copy-bold">und viele andere</p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<section class="text-image animation">
|
|
||||||
<h2 class="text-image__headline font-headline-1">Kooperationen & Partner</h2>
|
|
||||||
|
|
||||||
<div class="html-content text-image__copy animation"><p>Unsere
|
|
||||||
Arbeit lebt von Kooperationen und dem Austausch mit anderen
|
|
||||||
Unternehmen, die in verwandten Themenbereichen ihrer Schwerpunkte haben.</p></div>
|
|
||||||
|
|
||||||
<picture>
|
|
||||||
<source srcset="" media="(max-width: 992px)">
|
|
||||||
<source srcset="" media="(min-width: 993px)">
|
|
||||||
<img class="text-image__image animation" loading="lazy" src="" alt="">
|
|
||||||
</source></source></picture>
|
|
||||||
|
|
||||||
<div class="text-image__button-container">
|
|
||||||
<a href="https://web4beginners.com/kooperationspartner" title="" class="btn btn-standard text-image__button" target="">Zu den Partnern
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<a href="#top" title="Zum Anfang der Seite springen" class="btn btn-scroll-up"><!--?xml version="1.0" encoding="UTF-8"?-->
|
|
||||||
<svg class="icon btn-scroll-up__icon" height="13" viewbox="0 0 20 13" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m2.3583594 13 7.6416406-8.0384421 7.641641 8.0384421 2.358359-2.480738-10-10.519262-10 10.519262z"></path></svg>
|
|
||||||
|
|
||||||
</a>
|
|
||||||
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
|
|
||||||
<div id="cookie-layer" class="">
|
|
||||||
<div class="cookie-layer__content font-copy">
|
|
||||||
Wir nutzen Cookies auf unserer Website. Einige von ihnen
|
|
||||||
sind essenziell, während andere uns helfen, diese Website und Ihre
|
|
||||||
Erfahrung zu verbessern.
|
|
||||||
<a class="cookie-layer__link cookie-layer__privacy font-link-text-cookie-layer" href="https://web4beginners.com/datenschutz" title="Mehr erfahren">Mehr erfahren</a>
|
|
||||||
</div>
|
|
||||||
<div class="cookie-layer__buttons">
|
|
||||||
<a class="font-link-text-cookie-layer cookie-layer__link cookie-layer__decline" href="#" title="Ablehnen">Ablehnen</a>
|
|
||||||
<a href="#" title="" class="btn btn-standard cookie-layer__accept" target="">Stimme zu
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<footer class="site-footer bg-brown brush-top-white">
|
|
||||||
|
|
||||||
<div class="site-footer__block-company ">
|
|
||||||
<h3 class="site-footer__headline font-headline-footer">web4beginners GmbH</h3>
|
|
||||||
|
|
||||||
<p class="site-footer__address font-copy">Schillerstraße 21<br>
|
|
||||||
22767 Hamburg</p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="site-footer__block-contact">
|
|
||||||
<h3 class="site-footer__headline headline-border font-headline-footer">Robbi</h3>
|
|
||||||
|
|
||||||
<a href="mailto:info@web4beginners.com" title="" class="site-footer__link font-link-text-footer">info@web4beginners.com</a>
|
|
||||||
|
|
||||||
<a href="tel:040%20/%2035%2073%2069%2011" title="" class="site-footer__link font-link-text-footer">040 / 35 73 69 11</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="site-footer__block-products">
|
|
||||||
<div class="site-footer__meta-links">
|
|
||||||
<a href="https://web4beginners.com/impressum" title="" class="site-footer__link site-footer__meta-link font-link-text-footer">Impressum</a>
|
|
||||||
|
|
||||||
<a href="https://web4beginners.com/datenschutz" title="" class="site-footer__link site-footer__meta-link font-link-text-footer">Datenschutz</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="spacer"></div>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="web4beginners.com_files/1698d822c6d3fe9b0c50b3ab44ef524a.js"></script>
|
|
||||||
<script src="editor/wysiwyg-editor.js"></script>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</body></html>
|
|
||||||
1
web4beginners.com.html
Symbolic link
1
web4beginners.com.html
Symbolic link
@@ -0,0 +1 @@
|
|||||||
|
ikfreunde.com.html
|
||||||
1
web4beginners.com_files
Symbolic link
1
web4beginners.com_files
Symbolic link
@@ -0,0 +1 @@
|
|||||||
|
ikfreunde.com_files
|
||||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user