Mathias/OpenWall
1
0
Fork 0
Code Activity

Create new icons for mobile-calendar

Browse Source
This commit is contained in:
Mathias
2025-07-18 14:37:03 +02:00
parent 74d5037f09
commit 7b9a1eeb70
10 changed files with 209 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
mobile-calendar/index.html
View File

@@ -2,21 +2,22 @@
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/png" href="/pwa-192x192.png" /> <link rel="icon" type="image/png" href="/pwa-192x192.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OpenWall Kalender</title> <title>OpenWall Calendar</title>
<!-- PWA Meta Tags --> <!-- PWA Meta Tags -->
<meta name="description" content="Mobile Kalender-App für OpenWall Smart Home Dashboard"> <meta name="description" content="Mobile calendar app for OpenWall Smart Home Dashboard">
<meta name="theme-color" content="#007AFF"> <meta name="theme-color" content="#3b82f6">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default"> <meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="OpenWall Kalender"> <meta name="apple-mobile-web-app-title" content="OpenWall Calendar">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Additional PWA Meta Tags --> <!-- Additional PWA Meta Tags -->
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="OpenWall Kalender"> <meta name="application-name" content="OpenWall Calendar">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

31
mobile-calendar/nginx.conf Normal file
View File

@@ -0,0 +1,31 @@
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
# Handle client-side routing
location / {
try_files $uri $uri/ /index.html;
}
# Proxy API requests to the backend server
location /api/ {
proxy_pass http://server:3001;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
# Cache static assets
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
# Security headers
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-XSS-Protection "1; mode=block" always;
}

BIN
mobile-calendar/public/apple-touch-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 6.4 KiB

167
mobile-calendar/public/calendar-icon.svg Normal file
View File

@@ -0,0 +1,167 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
<defs>
<!-- Background gradient -->
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#2563eb;stop-opacity:1" />
<stop offset="50%" style="stop-color:#3b82f6;stop-opacity:1" />
<stop offset="100%" style="stop-color:#1d4ed8;stop-opacity:1" />
</linearGradient>
<!-- Calendar body gradient -->
<linearGradient id="calendarGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
<stop offset="100%" style="stop-color:#f1f5f9;stop-opacity:1" />
</linearGradient>
<!-- Header gradient -->
<linearGradient id="headerGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
<stop offset="100%" style="stop-color:#2563eb;stop-opacity:1" />
</linearGradient>
<!-- Today highlight gradient -->
<radialGradient id="todayGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:#60a5fa;stop-opacity:1" />
<stop offset="100%" style="stop-color:#3b82f6;stop-opacity:1" />
</radialGradient>
<!-- Drop shadow -->
<filter id="dropShadow" x="-50%" y="-50%" width="200%" height="200%">
<feDropShadow dx="4" dy="8" stdDeviation="6" flood-color="#1e293b" flood-opacity="0.3"/>
</filter>
<!-- Inner shadow -->
<filter id="innerShadow" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="0" dy="2"/>
<feGaussianBlur stdDeviation="4" result="offset-blur"/>
<feFlood flood-color="#334155" flood-opacity="0.15"/>
<feComposite in2="offset-blur" operator="in"/>
<feMerge>
<feMergeNode in="SourceGraphic"/>
<feMergeNode/>
</feMerge>
</filter>
</defs>
<!-- Background circle -->
<circle cx="256" cy="256" r="240" fill="url(#bgGradient)" filter="url(#dropShadow)"/>
<!-- Calendar container -->
<rect x="96" y="80" width="320" height="352" rx="24" ry="24"
fill="url(#calendarGradient)"
stroke="#e2e8f0"
stroke-width="4"
filter="url(#innerShadow)"/>
<!-- Calendar header -->
<rect x="96" y="80" width="320" height="80" rx="24" ry="24"
fill="url(#headerGradient)"/>
<rect x="96" y="136" width="320" height="24"
fill="url(#headerGradient)"/>
<!-- Binding rings -->
<circle cx="160" cy="64" r="12" fill="#64748b" stroke="#475569" stroke-width="2"/>
<circle cx="256" cy="64" r="12" fill="#64748b" stroke="#475569" stroke-width="2"/>
<circle cx="352" cy="64" r="12" fill="#64748b" stroke="#475569" stroke-width="2"/>
<!-- Binding ring holes -->
<circle cx="160" cy="64" r="6" fill="#334155"/>
<circle cx="256" cy="64" r="6" fill="#334155"/>
<circle cx="352" cy="64" r="6" fill="#334155"/>
<!-- Month/Year text area -->
<rect x="120" y="100" width="272" height="40" rx="8" ry="8" fill="#ffffff" opacity="0.9"/>
<!-- Calendar grid -->
<g stroke="#cbd5e1" stroke-width="1" opacity="0.6">
<!-- Vertical lines -->
<line x1="141" y1="160" x2="141" y2="416"/>
<line x1="186" y1="160" x2="186" y2="416"/>
<line x1="231" y1="160" x2="231" y2="416"/>
<line x1="276" y1="160" x2="276" y2="416"/>
<line x1="321" y1="160" x2="321" y2="416"/>
<line x1="366" y1="160" x2="366" y2="416"/>
<!-- Horizontal lines -->
<line x1="96" y1="196" x2="416" y2="196"/>
<line x1="96" y1="232" x2="416" y2="232"/>
<line x1="96" y1="268" x2="416" y2="268"/>
<line x1="96" y1="304" x2="416" y2="304"/>
<line x1="96" y1="340" x2="416" y2="340"/>
<line x1="96" y1="376" x2="416" y2="376"/>
</g>
<!-- Day of week labels area -->
<rect x="96" y="160" width="320" height="36" fill="#f8fafc" opacity="0.8"/>
<!-- Sample dates -->
<g fill="#64748b" font-family="Arial, sans-serif" font-size="16" font-weight="500" text-anchor="middle">
<!-- Week days (abbreviated) -->
<text x="118" y="182" fill="#475569" font-size="12">M</text>
<text x="163" y="182" fill="#475569" font-size="12">T</text>
<text x="208" y="182" fill="#475569" font-size="12">W</text>
<text x="253" y="182" fill="#475569" font-size="12">T</text>
<text x="298" y="182" fill="#475569" font-size="12">F</text>
<text x="343" y="182" fill="#475569" font-size="12">S</text>
<text x="388" y="182" fill="#475569" font-size="12">S</text>
<!-- Sample date numbers -->
<text x="118" y="218">1</text>
<text x="163" y="218">2</text>
<text x="208" y="218">3</text>
<text x="253" y="218">4</text>
<text x="298" y="218">5</text>
<text x="343" y="218">6</text>
<text x="388" y="218">7</text>
<text x="118" y="254">8</text>
<text x="163" y="254">9</text>
<text x="208" y="254">10</text>
<text x="253" y="254">11</text>
<text x="298" y="254">12</text>
<text x="343" y="254">13</text>
<text x="388" y="254">14</text>
<text x="118" y="290">15</text>
<text x="163" y="290">16</text>
<text x="208" y="290">17</text>
</g>
<!-- Today highlight (day 18) -->
<circle cx="253" cy="285" r="18" fill="url(#todayGradient)" opacity="0.9"/>
<text x="253" y="291" fill="white" font-family="Arial, sans-serif" font-size="16" font-weight="600" text-anchor="middle">18</text>
<!-- Additional date numbers -->
<g fill="#64748b" font-family="Arial, sans-serif" font-size="16" font-weight="500" text-anchor="middle">
<text x="298" y="290">19</text>
<text x="343" y="290">20</text>
<text x="388" y="290">21</text>
<text x="118" y="326">22</text>
<text x="163" y="326">23</text>
<text x="208" y="326">24</text>
<text x="253" y="326">25</text>
<text x="298" y="326">26</text>
<text x="343" y="326">27</text>
<text x="388" y="326">28</text>
<text x="118" y="362">29</text>
<text x="163" y="362">30</text>
<text x="208" y="362">31</text>
</g>
<!-- Event indicators -->
<circle cx="163" cy="244" r="3" fill="#10b981"/>
<circle cx="298" cy="244" r="3" fill="#f59e0b"/>
<circle cx="343" cy="280" r="3" fill="#ef4444"/>
<circle cx="118" cy="316" r="3" fill="#8b5cf6"/>
<!-- Small OpenWall branding element -->
<g transform="translate(360, 380)" opacity="0.4">
<circle cx="16" cy="16" r="12" fill="#3b82f6"/>
<rect x="10" y="10" width="12" height="12" rx="2" fill="white" opacity="0.8"/>
<rect x="12" y="12" width="8" height="2" fill="#3b82f6"/>
<circle cx="14" cy="16" r="1" fill="#3b82f6"/>
<circle cx="18" cy="16" r="1" fill="#3b82f6"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
mobile-calendar/public/favicon-16x16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 947 B

BIN
mobile-calendar/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
mobile-calendar/public/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
mobile-calendar/public/pwa-192x192.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
mobile-calendar/public/pwa-512x512.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.7 KiB

After

Width:  |  Height:  |  Size: 21 KiB

10
mobile-calendar/vite.config.js
View File

@@ -11,12 +11,12 @@ export default defineConfig({
workbox: { workbox: {
globPatterns: ['**/*.{js,css,html,ico,png,svg}'] globPatterns: ['**/*.{js,css,html,ico,png,svg}']
}, },
includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg'], includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'calendar-icon.svg'],
manifest: { manifest: {
name: 'Shopping List Mobile', name: 'OpenWall Calendar',
short_name: 'ShoppingList', short_name: 'Calendar',
description: 'Mobile shopping list app with auto-sync', description: 'Mobile calendar app for OpenWall Smart Home Dashboard',
theme_color: '#007AFF', theme_color: '#3b82f6',
background_color: '#f8f9fa', background_color: '#f8f9fa',
display: 'standalone', display: 'standalone',
scope: '/', scope: '/',