From 214afc54f3267b61ce53dbde13989292029f9ff8 Mon Sep 17 00:00:00 2001 From: Markus Date: Sat, 27 Sep 2025 12:09:56 +0200 Subject: [PATCH] Initial commit: Emoji-Sucher Web-App MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Flask-Backend mit Emoji-Suche implementiert - Responsive Frontend mit modernem UI - Mehrsprachige Suche (Deutsch/Englisch) - Clipboard-Integration für Emoji-Kopieren - Docker-Support mit Dockerfile und docker-compose.yml - Vollständige Dokumentation in README.md - .gitignore für Python-Projekt konfiguriert Features: - Suche nach 4733+ Emojis - Große Emoji-Darstellung - Ein-Klick-Kopieren in Zwischenablage - Unicode-Anzeige für jedes Emoji - Responsive Design für alle Geräte --- .gitignore | 385 +++++++++++++++++++++++++++++++++++++++++++ Dockerfile | 27 +++ README.md | 154 +++++++++++++++++ app.py | 65 ++++++++ docker-compose.yml | 11 ++ requirements.txt | 3 + templates/index.html | 307 ++++++++++++++++++++++++++++++++++ 7 files changed, 952 insertions(+) create mode 100644 .gitignore create mode 100644 Dockerfile create mode 100644 README.md create mode 100644 app.py create mode 100644 docker-compose.yml create mode 100644 requirements.txt create mode 100644 templates/index.html diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b60a0d9 --- /dev/null +++ b/.gitignore @@ -0,0 +1,385 @@ +# Byte-compiled / optimized / DLL files +__pycache__/ +*.py[cod] +*$py.class + +# C extensions +*.so + +# Distribution / packaging +.Python +build/ +develop-eggs/ +dist/ +downloads/ +eggs/ +.eggs/ +lib/ +lib64/ +parts/ +sdist/ +var/ +wheels/ +share/python-wheels/ +*.egg-info/ +.installed.cfg +*.egg +MANIFEST + +# PyInstaller +# Usually these files are written by a python script from a template +# before PyInstaller builds the exe, so as to inject date/other infos into it. +*.manifest +*.spec + +# Installer logs +pip-log.txt +pip-delete-this-directory.txt + +# Unit test / coverage reports +htmlcov/ +.tox/ +.nox/ +.coverage +.coverage.* +.cache +nosetests.xml +coverage.xml +*.cover +*.py,cover +.hypothesis/ +.pytest_cache/ +cover/ + +# Translations +*.mo +*.pot + +# Django stuff: +*.log +local_settings.py +db.sqlite3 +db.sqlite3-journal + +# Flask stuff: +instance/ +.webassets-cache + +# Scrapy stuff: +.scrapy + +# Sphinx documentation +docs/_build/ + +# PyBuilder +.pybuilder/ +target/ + +# Jupyter Notebook +.ipynb_checkpoints + +# IPython +profile_default/ +ipython_config.py + +# pyenv +# For a library or package, you might want to ignore these files since the code is +# intended to run in multiple environments; otherwise, check them in: +# .python-version + +# pipenv +# According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control. +# However, in case of collaboration, if having platform-specific dependencies or dependencies +# having no cross-platform support, pipenv may install dependencies that don't work, or not +# install all needed dependencies. +#Pipfile.lock + +# poetry +# Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control. +# This is especially recommended for binary packages to ensure reproducibility, and is more +# commonly ignored for libraries. +# https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control +#poetry.lock + +# pdm +# Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control. +#pdm.lock +# pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it +# in version control. +# https://pdm.fming.dev/#use-with-ide +.pdm.toml + +# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm +__pypackages__/ + +# Celery stuff +celerybeat-schedule +celerybeat.pid + +# SageMath parsed files +*.sage.py + +# Environments +.env +.venv +env/ +venv/ +ENV/ +env.bak/ +venv.bak/ + +# Spyder project settings +.spyderproject +.spyproject + +# Rope project settings +.ropeproject + +# mkdocs documentation +/site + +# mypy +.mypy_cache/ +.dmypy.json +dmypy.json + +# Pyre type checker +.pyre/ + +# pytype static type analyzer +.pytype/ + +# Cython debug symbols +cython_debug/ + +# PyCharm +# JetBrains specific template is maintained in a separate JetBrains.gitignore that can +# be added to the global gitignore or merged into this project gitignore. For a PyCharm +# project, it is recommended to include the following files: +# .idea/ +# *.iml +# *.ipr +# *.iws + +# Visual Studio Code +.vscode/ +*.code-workspace + +# Local History for Visual Studio Code +.history/ + +# Built Visual Studio Code Extensions +*.vsix + +# macOS +.DS_Store +.AppleDouble +.LSOverride + +# Icon must end with two \r +Icon + +# Thumbnails +._* + +# Files that might appear in the root of a volume +.DocumentRevisions-V100 +.fseventsd +.Spotlight-V100 +.TemporaryItems +.Trashes +.VolumeIcon.icns +.com.apple.timemachine.donotpresent + +# Directories potentially created on remote AFP share +.AppleDB +.AppleDesktop +Network Trash Folder +Temporary Items +.apdisk + +# Windows +Thumbs.db +Thumbs.db:encryptable +ehthumbs.db +ehthumbs_vista.db + +# Dump file +*.stackdump + +# Folder config file +[Dd]esktop.ini + +# Recycle Bin used on file shares +$RECYCLE.BIN/ + +# Windows Installer files +*.cab +*.msi +*.msix +*.msm +*.msp + +# Windows shortcuts +*.lnk + +# Linux +*~ + +# temporary files which can be created if a process still has a handle open of a deleted file +.fuse_hidden* + +# KDE directory preferences +.directory + +# Linux trash folder which might appear on any partition or disk +.Trash-* + +# .nfs files are created when an open file is removed but is still being accessed +.nfs* + +# Docker +.dockerignore + +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +lerna-debug.log* +.pnpm-debug.log* + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Coverage directory used by tools like istanbul +coverage/ +*.lcov + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# Snowpack dependency directory (https://snowpack.dev/) +web_modules/ + +# TypeScript cache +*.tsbuildinfo + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional stylelint cache +.stylelintcache + +# Microbundle cache +.rpt2_cache/ +.rts2_cache_cjs/ +.rts2_cache_es/ +.rts2_cache_umd/ + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variable files +.env.development.local +.env.test.local +.env.production.local +.env.local + +# parcel-bundler cache (https://parceljs.org/) +.cache +.parcel-cache + +# Next.js build output +.next +out + +# Nuxt.js build / generate output +.nuxt +dist + +# Gatsby files +.cache/ +# Comment in the public line in if your project uses Gatsby and not Next.js +# https://nextjs.org/blog/next-9-1#public-directory-support +# public + +# vuepress build output +.vuepress/dist + +# vuepress v2.x temp and cache directory +.temp +.cache + +# Docusaurus cache and generated files +.docusaurus + +# Serverless directories +.serverless/ + +# FuseBox cache +.fusebox/ + +# DynamoDB Local files +.dynamodb/ + +# TernJS port file +.tern-port + +# Stores VSCode versions used for testing VSCode extensions +.vscode-test + +# yarn v2 +.yarn/cache +.yarn/unplugged +.yarn/build-state.yml +.yarn/install-state.gz +.pnp.* + +# Project specific +*.db +*.sqlite +*.sqlite3 + +# IDE specific +.idea/ +*.swp +*.swo +*~ + +# OS specific +.DS_Store +Thumbs.db + +# Temporary files +*.tmp +*.temp diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..e964b38 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,27 @@ +# Python 3.11 slim image verwenden +FROM python:3.11-slim + +# Arbeitsverzeichnis setzen +WORKDIR /app + +# System-Abhängigkeiten installieren +RUN apt-get update && apt-get install -y \ + gcc \ + && rm -rf /var/lib/apt/lists/* + +# Python-Abhängigkeiten kopieren und installieren +COPY requirements.txt . +RUN pip install --no-cache-dir -r requirements.txt + +# Anwendungscode kopieren +COPY . . + +# Port freigeben +EXPOSE 5000 + +# Umgebungsvariablen setzen +ENV FLASK_APP=app.py +ENV FLASK_ENV=production + +# Anwendung starten +CMD ["python", "app.py"] diff --git a/README.md b/README.md new file mode 100644 index 0000000..2ec0044 --- /dev/null +++ b/README.md @@ -0,0 +1,154 @@ +# 🔍 Emoji Sucher + +Eine moderne Web-Anwendung zum Suchen und Kopieren von Emojis mit Docker-Unterstützung. + +## ✨ Features + +- **Emoji-Suche**: Suche nach Emojis über Namen oder Beschreibungen +- **Große Emoji-Darstellung**: Emojis werden groß und übersichtlich angezeigt +- **Clipboard-Integration**: Ein-Klick-Kopieren von Emojis in die Zwischenablage +- **Responsive Design**: Funktioniert auf Desktop und mobilen Geräten +- **Docker-Support**: Einfache Bereitstellung mit Docker + +## 🚀 Installation und Start + +### Mit Docker (Empfohlen) + +1. **Repository klonen oder Dateien herunterladen** + +2. **Mit Docker Compose starten:** + ```bash + docker-compose up --build + ``` + +3. **Oder mit Docker direkt:** + ```bash + docker build -t emoji-searcher . + docker run -p 5000:5000 emoji-searcher + ``` + +4. **Anwendung öffnen:** + Öffne deinen Browser und gehe zu `http://localhost:5000` + +### Lokale Entwicklung + +1. **Python 3.11+ installieren** + +2. **Virtuelle Umgebung erstellen:** + ```bash + python -m venv .venv + source .venv/bin/activate # Linux/Mac + # oder + .venv\Scripts\activate # Windows + ``` + +3. **Abhängigkeiten installieren:** + ```bash + pip install -r requirements.txt + ``` + +4. **Anwendung starten:** + ```bash + python app.py + ``` + +5. **Anwendung öffnen:** + Öffne deinen Browser und gehe zu `http://localhost:5000` + +## 🎯 Verwendung + +1. **Emoji suchen**: Gib einen Suchbegriff in das Suchfeld ein (z.B. "smile", "herz", "katze", "lachen") +2. **Emoji kopieren**: Klicke auf den "📋 Kopieren" Button oder direkt auf die Emoji-Karte +3. **Unicode anzeigen**: Jedes Emoji zeigt seinen Unicode-Wert (z.B. U+1F600) + +### 🌍 Mehrsprachige Suche + +Die App unterstützt sowohl englische als auch deutsche Suchbegriffe: +- **Englisch**: "smile", "heart", "cat", "laugh" +- **Deutsch**: "lachen", "herz", "katze", "freude" + +## 🛠️ Technische Details + +### Backend +- **Flask**: Web-Framework +- **emoji**: Python-Bibliothek für Emoji-Daten +- **RESTful API**: Such-Endpoint unter `/search` + +### Frontend +- **Vanilla JavaScript**: Keine externen Frameworks +- **Modern CSS**: Responsive Design mit CSS Grid +- **Clipboard API**: Moderne Browser-API für Kopieren + +### Docker +- **Python 3.11**: Basis-Image +- **Multi-stage Build**: Optimiert für Produktion +- **Port 5000**: Standard Flask-Port + +## 📁 Projektstruktur + +``` +emojilist/ +├── app.py # Flask-Anwendung +├── requirements.txt # Python-Abhängigkeiten +├── Dockerfile # Docker-Konfiguration +├── docker-compose.yml # Docker Compose +├── .dockerignore # Docker Ignore-Datei +├── templates/ +│ └── index.html # Frontend-Template +└── README.md # Dokumentation +``` + +## 🔧 Konfiguration + +### Umgebungsvariablen + +- `FLASK_ENV`: Setze auf `production` für Produktionsumgebung +- `FLASK_APP`: Standardmäßig `app.py` + +### Port-Konfiguration + +Standardmäßig läuft die Anwendung auf Port 5000. Du kannst den Port in der `docker-compose.yml` oder beim Docker-Run-Befehl ändern. + +## 🐛 Fehlerbehebung + +### Häufige Probleme + +1. **Port bereits belegt:** + ```bash + # Anderen Port verwenden + docker run -p 8080:5000 emoji-searcher + ``` + +2. **Docker Build fehlschlägt:** + ```bash + # Cache leeren und neu bauen + docker-compose build --no-cache + ``` + +3. **Clipboard funktioniert nicht:** + - Stelle sicher, dass du HTTPS verwendest (für Clipboard API) + - Fallback für ältere Browser ist implementiert + +## 📝 API-Endpunkte + +- `GET /`: Hauptseite +- `GET /search?q=`: Emoji-Suche +- `GET /api/emojis`: Alle verfügbaren Emojis (Debug) + +## 🤝 Beitragen + +1. Fork das Repository +2. Erstelle einen Feature-Branch +3. Committe deine Änderungen +4. Push zum Branch +5. Erstelle einen Pull Request + +## 📄 Lizenz + +Dieses Projekt steht unter der MIT-Lizenz. + +## 🙏 Danksagungen + +- [emoji](https://github.com/carpedm20/emoji) - Python Emoji-Bibliothek +- [Flask](https://flask.palletsprojects.com/) - Web-Framework +- [Docker](https://www.docker.com/) - Container-Plattform diff --git a/app.py b/app.py new file mode 100644 index 0000000..6f38825 --- /dev/null +++ b/app.py @@ -0,0 +1,65 @@ +from flask import Flask, render_template, request, jsonify +import emoji +import json + +app = Flask(__name__) + +# Emoji-Datenbank laden +def load_emoji_data(): + """Lädt alle verfügbaren Emojis mit ihren Namen und Unicode-Werten""" + emoji_data = [] + + # Alle Emojis aus der emoji-Bibliothek holen + for emoji_char, emoji_info in emoji.EMOJI_DATA.items(): + # emoji_info ist ein Dictionary mit verschiedenen Sprachen + emoji_name = emoji_info.get('en', '').replace(':', '') + if emoji_name: + # Unicode für das erste Zeichen des Emojis (für zusammengesetzte Emojis) + unicode_value = ord(emoji_char[0]) + emoji_data.append({ + 'name': emoji_name, + 'char': emoji_char, + 'unicode': f"U+{unicode_value:04X}", + 'description': emoji_name.replace('_', ' ').title(), + 'de': emoji_info.get('de', '').replace(':', '') # Deutsche Namen hinzufügen + }) + + return emoji_data + +# Emoji-Daten beim Start laden +EMOJI_DATABASE = load_emoji_data() + +@app.route('/') +def index(): + return render_template('index.html') + +@app.route('/search') +def search_emojis(): + query = request.args.get('q', '').lower() + + if not query: + return jsonify([]) + + # Emojis nach Suchbegriff filtern + results = [] + for emoji_item in EMOJI_DATABASE: + # Suche in englischen Namen und Beschreibungen + if (query in emoji_item['name'].lower() or + query in emoji_item['description'].lower()): + results.append(emoji_item) + continue + + # Suche in deutschen Namen (falls verfügbar) + if 'de' in emoji_item and query in emoji_item['de'].lower(): + results.append(emoji_item) + + # Ergebnisse begrenzen für bessere Performance + return jsonify(results[:50]) + +@app.route('/api/emojis') +def get_all_emojis(): + """API-Endpoint für alle Emojis (für Debugging)""" + return jsonify(EMOJI_DATABASE) + +if __name__ == '__main__': + app.run(debug=True, host='0.0.0.0', port=5000) diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..7ac300e --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,11 @@ +version: '3.8' + +services: + emoji-app: + build: . + ports: + - "5000:5000" + environment: + - FLASK_ENV=production + restart: unless-stopped + container_name: emoji-searcher diff --git a/requirements.txt b/requirements.txt new file mode 100644 index 0000000..eca9137 --- /dev/null +++ b/requirements.txt @@ -0,0 +1,3 @@ +Flask==2.3.3 +emoji==2.8.0 +Werkzeug==2.3.7 diff --git a/templates/index.html b/templates/index.html new file mode 100644 index 0000000..31054b0 --- /dev/null +++ b/templates/index.html @@ -0,0 +1,307 @@ + + + + + + Emoji Sucher + + + +
+

🔍 Emoji Sucher

+ +
+ + 🔍 +
+ +
+ +
+ + +
+ + + +