From 34ac2de5ca7bb56fcabfae007b6e785e321f21a2 Mon Sep 17 00:00:00 2001 From: Junwei Zhao Date: Thu, 29 May 2025 21:25:17 +1000 Subject: [PATCH 1/2] Add image show random app --- links/mini_apps_views.py | 73 +++ .../links/mini_apps/image_gallery.html | 560 ++++++++++++++++++ links/templates/links/mini_apps/list.html | 81 +++ links/urls.py | 5 + run_server.sh | 2 +- run_tailwind.sh | 2 +- templates/base.html | 10 + 7 files changed, 731 insertions(+), 2 deletions(-) create mode 100644 links/mini_apps_views.py create mode 100644 links/templates/links/mini_apps/image_gallery.html create mode 100644 links/templates/links/mini_apps/list.html diff --git a/links/mini_apps_views.py b/links/mini_apps_views.py new file mode 100644 index 0000000..11840c1 --- /dev/null +++ b/links/mini_apps_views.py @@ -0,0 +1,73 @@ +from django.views.generic import TemplateView +from django.shortcuts import render + + +class MiniAppsListView(TemplateView): + template_name = 'links/mini_apps/list.html' + + def get_context_data(self, **kwargs): + context = super().get_context_data(**kwargs) + + # Define mini apps with their info + mini_apps = [ + { + 'name': 'Image Gallery', + 'description': 'A beautiful fullscreen image slideshow application with smooth transitions and auto-play functionality.', + 'url': 'mini-apps-image-gallery', + 'thumbnail': 'https://picsum.photos/seed/picsum/400/300?fit=crop', + 'icon': 'fas fa-images', + 'color': '#3498db' + }, + { + 'name': 'Weather Dashboard', + 'description': 'Real-time weather information with beautiful visualizations and forecasts.', + 'url': '#', + 'thumbnail': 'https://images.unsplash.com/photo-1504608524841-42fe6f032b4b?w=400&h=300&fit=crop', + 'icon': 'fas fa-cloud-sun', + 'color': '#e74c3c' + }, + { + 'name': 'Music Player', + 'description': 'Stream and organize your favorite music with an elegant interface.', + 'url': '#', + 'thumbnail': 'https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=400&h=300&fit=crop', + 'icon': 'fas fa-music', + 'color': '#9b59b6' + }, + { + 'name': 'Task Manager', + 'description': 'Organize your tasks and boost productivity with smart scheduling.', + 'url': '#', + 'thumbnail': 'https://images.unsplash.com/photo-1484480974693-6ca0a78fb36b?w=400&h=300&fit=crop', + 'icon': 'fas fa-tasks', + 'color': '#2ecc71' + }, + { + 'name': 'Code Editor', + 'description': 'A lightweight code editor with syntax highlighting and themes.', + 'url': '#', + 'thumbnail': 'https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=400&h=300&fit=crop', + 'icon': 'fas fa-code', + 'color': '#f39c12' + }, + { + 'name': 'Calculator', + 'description': 'Scientific calculator with advanced mathematical functions.', + 'url': '#', + 'thumbnail': 'https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=400&h=300&fit=crop', + 'icon': 'fas fa-calculator', + 'color': '#1abc9c' + } + ] + + context['mini_apps'] = mini_apps + return context + + +class ImageGalleryView(TemplateView): + template_name = 'links/mini_apps/image_gallery.html' + + def get_context_data(self, **kwargs): + context = super().get_context_data(**kwargs) + # Add any context data needed for the image gallery + return context diff --git a/links/templates/links/mini_apps/image_gallery.html b/links/templates/links/mini_apps/image_gallery.html new file mode 100644 index 0000000..f54a37b --- /dev/null +++ b/links/templates/links/mini_apps/image_gallery.html @@ -0,0 +1,560 @@ +{% extends 'base_blank.html' %} +{% load i18n %} + +{% block title %}{% trans "Image Gallery" %} - {% trans "GoLinks" %}{% endblock %} + +{% block extra_css %} + + +{% endblock %} + +{% block content %} +
+
+ + + {% trans "Back to Mini Apps" %} + +
+
+
+
{% trans "Animation Effect" %}
+ +
+ +
+
{% trans "Interval (seconds)" %}
+ +
+ +
+
{% trans "Actions" %}
+ +
+
+ +
+ + 00:15 +
+ +
+ +
{% trans "Loading..." %}
+
+
+{% endblock %} + +{% block extra_js %} + +{% endblock %} diff --git a/links/templates/links/mini_apps/list.html b/links/templates/links/mini_apps/list.html new file mode 100644 index 0000000..c24f7d7 --- /dev/null +++ b/links/templates/links/mini_apps/list.html @@ -0,0 +1,81 @@ +{% extends 'base.html' %} +{% load i18n %} + +{% block content %} +
+ +
+

+ + {% trans "Mini Apps" %} +

+

+ {% trans "Discover a collection of powerful mini applications designed to enhance your productivity and creativity." %} +

+
+ + +
+ {% for app in mini_apps %} +
+ +
+ {{ app.name }} +
+ + +
+ + +
+ +
+
+ +
+

{{ app.name }}

+
+ + +

+ {{ app.description }} +

+ + + {% if app.url != "#" %} + + + {% trans "Launch App" %} + + {% else %} +
+ + {% trans "Coming Soon" %} +
+ {% endif %} +
+ + +
+
+ {% endfor %} +
+ +
+ + +{% endblock %} diff --git a/links/urls.py b/links/urls.py index 072610d..1bd2b89 100644 --- a/links/urls.py +++ b/links/urls.py @@ -4,6 +4,7 @@ from . import page_views from . import search_views from . import post_views from . import collection_views +from . import mini_apps_views from django.views.generic import TemplateView urlpatterns = [ @@ -46,6 +47,10 @@ urlpatterns = [ collection_views.CollectionSlideshowView.as_view(), name='collection-slideshow'), + # Mini Apps + path('ui/mini-apps/', mini_apps_views.MiniAppsListView.as_view(), name='mini-apps-list'), + path('ui/mini-apps/image-gallery/', mini_apps_views.ImageGalleryView.as_view(), name='mini-apps-image-gallery'), + # API Documentation path('ui/api-docs/', TemplateView.as_view(template_name='links/api_docs.html'), diff --git a/run_server.sh b/run_server.sh index 992239a..860513e 100755 --- a/run_server.sh +++ b/run_server.sh @@ -1,5 +1,5 @@ #!/bin/bash set -eu -source 3.12/bin/activate +source .venv/bin/activate echo "Starting Django development server..." python manage.py runserver diff --git a/run_tailwind.sh b/run_tailwind.sh index c5b17b4..40126ed 100755 --- a/run_tailwind.sh +++ b/run_tailwind.sh @@ -1,6 +1,6 @@ #!/bin/bash set -eu -source 3.12/bin/activate +source .venv/bin/activate echo "Starting Tailwind CSS compiler..." python manage.py tailwind start diff --git a/templates/base.html b/templates/base.html index 55430ce..0f93558 100644 --- a/templates/base.html +++ b/templates/base.html @@ -139,6 +139,16 @@ + +
+ + + + {% trans "Mini Apps" %} +
+ +
From 93db0b2d6bbe8dde4a3b4f72e8d3ad602fd65444 Mon Sep 17 00:00:00 2001 From: Junwei Zhao Date: Thu, 29 May 2025 21:33:19 +1000 Subject: [PATCH 2/2] Style update --- .../links/mini_apps/image_gallery.html | 91 +++++++++++-------- 1 file changed, 55 insertions(+), 36 deletions(-) diff --git a/links/templates/links/mini_apps/image_gallery.html b/links/templates/links/mini_apps/image_gallery.html index f54a37b..be18e43 100644 --- a/links/templates/links/mini_apps/image_gallery.html +++ b/links/templates/links/mini_apps/image_gallery.html @@ -89,17 +89,56 @@ .control-panel { position: absolute; bottom: 30px; - left: 50%; - transform: translateX(-50%); + right: 80px; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); - border-radius: 50px; + border-radius: 16px; padding: 15px 25px; display: flex; gap: 20px; z-index: 10; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); + transition: transform 0.3s ease, opacity 0.3s ease; + transform-origin: bottom right; + } + + .control-panel.folded { + transform: scale(0); + opacity: 0; + pointer-events: none; + } + + .control-toggle { + position: absolute; + bottom: 30px; + right: 30px; + width: 50px; + height: 50px; + background: rgba(0, 0, 0, 0.7); + backdrop-filter: blur(10px); + border-radius: 25px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + z-index: 11; + border: 1px solid rgba(255, 255, 255, 0.1); + transition: transform 0.3s ease; + } + + .control-toggle:hover { + transform: scale(1.1); + } + + .control-toggle i { + font-size: 20px; + color: white; + transition: transform 0.3s ease; + } + + .control-toggle.active i { + transform: rotate(45deg); } .control-group { @@ -258,25 +297,6 @@ gap: 10px; } - .preview-item { - height: 60px; - border-radius: 8px; - background-size: cover; - background-position: center; - cursor: pointer; - border: 2px solid transparent; - transition: all 0.3s ease; - } - - .preview-item:hover { - transform: translateY(-3px); - } - - .preview-item.active { - border-color: #ff6b6b; - box-shadow: 0 0 15px rgba(255, 107, 107, 0.5); - } - .back-button { position: absolute; top: 30px; @@ -342,7 +362,10 @@ {% trans "Back to Mini Apps" %}
-
+
+ +
+
{% trans "Animation Effect" %}