Initial commit: Emoji-Sucher Web-App
- 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
This commit is contained in:
Markus
385
.gitignore
vendored
Normal file
385
.gitignore
vendored
Normal file
@@ -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
|
||||||
27
Dockerfile
Normal file
27
Dockerfile
Normal file
@@ -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"]
|
||||||
154
README.md
Normal file
154
README.md
Normal file
@@ -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=<query>`: 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
|
||||||
65
app.py
Normal file
65
app.py
Normal file
@@ -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)
|
||||||
11
docker-compose.yml
Normal file
11
docker-compose.yml
Normal file
@@ -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
|
||||||
3
requirements.txt
Normal file
3
requirements.txt
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
Flask==2.3.3
|
||||||
|
emoji==2.8.0
|
||||||
|
Werkzeug==2.3.7
|
||||||
307
templates/index.html
Normal file
307
templates/index.html
Normal file
@@ -0,0 +1,307 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Emoji Sucher</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 30px;
|
||||||
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
font-size: 2.5em;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-container {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 15px 20px;
|
||||||
|
font-size: 18px;
|
||||||
|
border: 2px solid #e0e0e0;
|
||||||
|
border-radius: 50px;
|
||||||
|
outline: none;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input:focus {
|
||||||
|
border-color: #667eea;
|
||||||
|
box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-icon {
|
||||||
|
position: absolute;
|
||||||
|
right: 20px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
font-size: 20px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.results-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 20px;
|
||||||
|
text-align: center;
|
||||||
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-display {
|
||||||
|
font-size: 4em;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-name {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-unicode {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
font-family: 'Courier New', monospace;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-button {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 12px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-button:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-button.copied {
|
||||||
|
background: #4CAF50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-results {
|
||||||
|
text-align: center;
|
||||||
|
color: #666;
|
||||||
|
font-size: 18px;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
text-align: center;
|
||||||
|
color: #666;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner {
|
||||||
|
border: 3px solid #f3f3f3;
|
||||||
|
border-top: 3px solid #667eea;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
margin: 0 auto 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
0% { transform: rotate(0deg); }
|
||||||
|
100% { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats {
|
||||||
|
text-align: center;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.container {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.results-container {
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-display {
|
||||||
|
font-size: 3em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h1>🔍 Emoji Sucher</h1>
|
||||||
|
|
||||||
|
<div class="search-container">
|
||||||
|
<input type="text" id="searchInput" class="search-input" placeholder="Emoji suchen... (z.B. 'smile', 'herz', 'katze', 'lachen')">
|
||||||
|
<span class="search-icon">🔍</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stats" id="stats"></div>
|
||||||
|
|
||||||
|
<div id="results" class="results-container"></div>
|
||||||
|
|
||||||
|
<div id="noResults" class="no-results" style="display: none;">
|
||||||
|
Keine Emojis gefunden. Versuche einen anderen Suchbegriff!
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let searchTimeout;
|
||||||
|
const resultsContainer = document.getElementById('results');
|
||||||
|
const noResultsDiv = document.getElementById('noResults');
|
||||||
|
const statsDiv = document.getElementById('stats');
|
||||||
|
const searchInput = document.getElementById('searchInput');
|
||||||
|
|
||||||
|
// Suche mit Debouncing
|
||||||
|
searchInput.addEventListener('input', function() {
|
||||||
|
clearTimeout(searchTimeout);
|
||||||
|
const query = this.value.trim();
|
||||||
|
|
||||||
|
if (query.length === 0) {
|
||||||
|
resultsContainer.innerHTML = '';
|
||||||
|
noResultsDiv.style.display = 'none';
|
||||||
|
statsDiv.textContent = '';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (query.length < 2) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Loading anzeigen
|
||||||
|
resultsContainer.innerHTML = '<div class="loading"><div class="spinner"></div>Suche...</div>';
|
||||||
|
noResultsDiv.style.display = 'none';
|
||||||
|
|
||||||
|
searchTimeout = setTimeout(() => {
|
||||||
|
searchEmojis(query);
|
||||||
|
}, 300);
|
||||||
|
});
|
||||||
|
|
||||||
|
async function searchEmojis(query) {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/search?q=${encodeURIComponent(query)}`);
|
||||||
|
const emojis = await response.json();
|
||||||
|
|
||||||
|
displayResults(emojis, query);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Fehler bei der Suche:', error);
|
||||||
|
resultsContainer.innerHTML = '<div class="no-results">Fehler bei der Suche. Bitte versuche es erneut.</div>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function displayResults(emojis, query) {
|
||||||
|
if (emojis.length === 0) {
|
||||||
|
resultsContainer.innerHTML = '';
|
||||||
|
noResultsDiv.style.display = 'block';
|
||||||
|
statsDiv.textContent = '';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
noResultsDiv.style.display = 'none';
|
||||||
|
statsDiv.textContent = `${emojis.length} Emoji${emojis.length !== 1 ? 's' : ''} für "${query}" gefunden`;
|
||||||
|
|
||||||
|
resultsContainer.innerHTML = emojis.map(emoji => `
|
||||||
|
<div class="emoji-card" onclick="copyToClipboard('${emoji.char}', this)">
|
||||||
|
<span class="emoji-display">${emoji.char}</span>
|
||||||
|
<div class="emoji-name">${emoji.description}</div>
|
||||||
|
<div class="emoji-unicode">${emoji.unicode}</div>
|
||||||
|
<button class="copy-button" onclick="event.stopPropagation(); copyToClipboard('${emoji.char}', this)">
|
||||||
|
📋 Kopieren
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
async function copyToClipboard(emoji, button) {
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(emoji);
|
||||||
|
|
||||||
|
// Visuelles Feedback
|
||||||
|
const originalText = button.textContent;
|
||||||
|
button.textContent = '✅ Kopiert!';
|
||||||
|
button.classList.add('copied');
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
button.textContent = originalText;
|
||||||
|
button.classList.remove('copied');
|
||||||
|
}, 2000);
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Fehler beim Kopieren:', error);
|
||||||
|
// Fallback für ältere Browser
|
||||||
|
const textArea = document.createElement('textarea');
|
||||||
|
textArea.value = emoji;
|
||||||
|
document.body.appendChild(textArea);
|
||||||
|
textArea.select();
|
||||||
|
document.execCommand('copy');
|
||||||
|
document.body.removeChild(textArea);
|
||||||
|
|
||||||
|
button.textContent = '✅ Kopiert!';
|
||||||
|
button.classList.add('copied');
|
||||||
|
setTimeout(() => {
|
||||||
|
button.textContent = '📋 Kopieren';
|
||||||
|
button.classList.remove('copied');
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fokus auf Suchfeld setzen
|
||||||
|
searchInput.focus();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user