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