import flet as ft SITE_URL = "https://mitmachim.top/user/%D7%A6%D7%95%D7%9C-%D7%92%D7%90%D7%94" BG = "#06080f" SURFACE = "#0d1117" CARD = "#111827" CARD2 = "#0f172a" BORDER = "#1e2a3a" ACCENT = "#6366f1" PINK = "#ec4899" GREEN = "#10b981" GOLD = "#f59e0b" RED = "#ef4444" WHITE = "#f1f5f9" MUTED = "#64748b" MUTED2 = "#334155" def main(page: ft.Page): page.title = "Python UI Showcase — @צול-גאה" page.theme_mode = ft.ThemeMode.DARK page.bgcolor = BG page.padding = 0 page.scroll = ft.ScrollMode.AUTO page.rtl = True # ── helpers ─────────────────────────────────────────── def pill(text, color): return ft.Container( bgcolor=color + "22", border_radius=20, padding=ft.Padding(10, 4, 10, 4), content=ft.Text(text, size=11, color=color, weight=ft.FontWeight.W_600), ) def icon_badge(icon_name, color): return ft.Container( width=42, height=42, border_radius=12, gradient=ft.LinearGradient( begin=ft.Alignment(-1,-1), end=ft.Alignment(1,1), colors=[color, color + "88"], ), shadow=ft.BoxShadow(blur_radius=16, color=color+"55", offset=ft.Offset(0,4)), content=ft.Icon(icon_name, color=WHITE, size=20), alignment=ft.Alignment(0,0), ) def glow_div(color=ACCENT): return ft.Container( height=1, margin=ft.Margin(30, 0, 30, 0), gradient=ft.LinearGradient( begin=ft.Alignment(-1,0), end=ft.Alignment(1,0), colors=["transparent", color, "transparent"], ), ) def show_snack(msg, color=GREEN): sb = ft.SnackBar( open=True, bgcolor=CARD, duration=3000, content=ft.Row([ ft.Container(width=4, height=36, bgcolor=color, border_radius=4), ft.Container(width=10), ft.Text(msg, color=WHITE, size=13), ]), ) page.overlay.append(sb) page.update() def show_dialog(title, body, icon_name, color): dlg = ft.AlertDialog( modal=True, bgcolor=CARD, title=ft.Row([ icon_badge(icon_name, color), ft.Container(width=12), ft.Text(title, color=WHITE, weight=ft.FontWeight.BOLD, size=15), ]), content=ft.Container( width=420, content=ft.Text(body, color=MUTED, size=14), ), actions=[ ft.Container( on_click=lambda e: page.pop_dialog(), ink=True, border_radius=10, padding=ft.Padding(24, 11, 24, 11), gradient=ft.LinearGradient( begin=ft.Alignment(-1,0), end=ft.Alignment(1,0), colors=[color, ACCENT], ), content=ft.Text("הבנתי!", color=WHITE, weight=ft.FontWeight.BOLD), ) ], actions_alignment=ft.MainAxisAlignment.CENTER, ) page.show_dialog(dlg) # ══════════════════════════════════════════════ # HERO # ══════════════════════════════════════════════ hero = ft.Container( width=float("inf"), gradient=ft.LinearGradient( begin=ft.Alignment(0,-1), end=ft.Alignment(0,1), colors=["#0a0f1e", BG], ), padding=ft.Padding(40, 56, 40, 48), content=ft.Column([ ft.Row([ pill("PYTHON 2025", ACCENT), pill("FLET + FLUTTER", PINK), pill("@צול-גאה", GOLD), ], alignment=ft.MainAxisAlignment.END, wrap=True), ft.Container(height=20), ft.Text("פייתון —\nלא מה שחשבת", size=44, weight=ft.FontWeight.BOLD, color=WHITE, text_align=ft.TextAlign.RIGHT), ft.Container(height=8), ft.Text("תגובה סופית ל-@מעניין-לשמוע", size=17, color=MUTED), ft.Container(height=28), ft.Row([ ft.Container( on_click=lambda e: show_snack("📸 כעת צלם את המסך ושלח לפורום!", ACCENT), ink=True, border_radius=50, shadow=ft.BoxShadow(blur_radius=30, color=ACCENT+"55", offset=ft.Offset(0,8)), gradient=ft.LinearGradient( begin=ft.Alignment(-1,0), end=ft.Alignment(1,0), colors=[ACCENT, PINK], ), padding=ft.Padding(24, 13, 24, 13), content=ft.Row([ ft.Icon(ft.Icons.PHOTO_CAMERA, color=WHITE, size=16), ft.Container(width=8), ft.Text("צלם והוכח", color=WHITE, weight=ft.FontWeight.BOLD, size=14), ], tight=True), ), ft.Container( on_click=lambda e: page.launch_url(SITE_URL), ink=True, border_radius=50, border=ft.Border( top=ft.BorderSide(1, BORDER), bottom=ft.BorderSide(1, BORDER), left=ft.BorderSide(1, BORDER), right=ft.BorderSide(1, BORDER), ), padding=ft.Padding(24, 13, 24, 13), content=ft.Row([ ft.Icon(ft.Icons.OPEN_IN_NEW, color=MUTED, size=16), ft.Container(width=8), ft.Text("הפרופיל שלי", color=MUTED, size=14), ], tight=True), ), ], alignment=ft.MainAxisAlignment.END, spacing=12), ], horizontal_alignment=ft.CrossAxisAlignment.END), ) # ══════════════════════════════════════════════ # TAB CONTENTS # ══════════════════════════════════════════════ def debate_card(num, title, body, icon_name, color, dialog_body): return ft.Container( border_radius=16, bgcolor=CARD, shadow=ft.BoxShadow(blur_radius=24, color="#00000044", offset=ft.Offset(0,6)), on_click=lambda e, t=title, b=dialog_body, i=icon_name, c=color: show_dialog(t, b, i, c), ink=True, content=ft.Stack([ ft.Container( height=3, left=0, right=0, top=0, border_radius=ft.BorderRadius(16, 16, 0, 0), gradient=ft.LinearGradient( begin=ft.Alignment(-1,0), end=ft.Alignment(1,0), colors=[color, ACCENT], ), ), ft.Container( padding=ft.Padding(20, 22, 20, 20), content=ft.Column([ ft.Row([ icon_badge(icon_name, color), ft.Container(width=12), ft.Column([ ft.Container( bgcolor=color+"22", border_radius=6, padding=ft.Padding(6,2,6,2), content=ft.Text(f"#{num}", size=10, color=color, weight=ft.FontWeight.BOLD), ), ft.Text(title, size=15, weight=ft.FontWeight.BOLD, color=WHITE), ], spacing=4, expand=True), ]), ft.Container(height=12), ft.Text(body, size=13, color=MUTED), ft.Container(height=14), ft.Row([ ft.Text("לחץ לפרטים →", size=11, color=color), ], alignment=ft.MainAxisAlignment.END), ], spacing=0), ), ]), ) tab1 = ft.Container( padding=ft.Padding(20, 16, 20, 16), content=ft.Column([ debate_card("01", 'מיתוס: "לפייתון אין עיצוב יפה"', "Flet בנויה על Flutter של גוגל — אותו מנוע של TikTok ו-Google Pay.", ft.Icons.ERROR_OUTLINE, RED, "מי שאומר שלפייתון אין עיצוב יפה, בדרך כלל ראה Tkinter ב-2004 ולא עדכן את הדעה. " "ב-2025, Flet מאפשרת ממשקים ברמה של חברות הייטק — עם אנימציות, גרדיאנטים, " "מצב כהה, וריצה על כל פלטפורמה. הכל Python טהורה.", ), ft.Container(height=12), debate_card("02", "Python + SQLite = שילוב מנצח", "בסיס נתונים מהיר + ממשק מודרני + Python אחת. למה בכלל אקסס?", ft.Icons.STORAGE, ACCENT, "SQLite רצה בכל סמארטפון אנדרואיד. בשילוב Flet: ממשק שרץ על Windows, " "Mac, Linux, דפדפן וסמארטפון — מאותו קוד, בלי HTML/CSS.", ), ft.Container(height=12), debate_card("03", "פסק הדין הסופי", "אקסס הייתה מעולה ב-1997. ב-2025, Python היא הבחירה.", ft.Icons.GAVEL, GREEN, "Python נותנת: בסיס נתונים, לוגיקה, ממשק גרפי — בשפה אחת, " "קוד קצר ונקי, ומסך שנראה בדיוק כך.", ), ], spacing=0), ) # Tab 2 — השוואה def compare_row(lib, rating, color, desc): bar_w = int((rating / 10) * 240) return ft.Container( bgcolor=CARD2, border_radius=14, padding=ft.Padding(20, 16, 20, 16), content=ft.Column([ ft.Row([ ft.Text(lib, size=15, weight=ft.FontWeight.BOLD, color=WHITE), ft.Text(f"{rating}/10", size=13, color=color, weight=ft.FontWeight.BOLD), ], alignment=ft.MainAxisAlignment.SPACE_BETWEEN), ft.Container(height=8), ft.Stack([ ft.Container(height=6, border_radius=6, bgcolor=MUTED2), ft.Container(height=6, width=bar_w, border_radius=6, gradient=ft.LinearGradient( begin=ft.Alignment(-1,0), end=ft.Alignment(1,0), colors=[color, ACCENT], ), ), ]), ft.Container(height=6), ft.Text(desc, size=12, color=MUTED), ]), ) tab2 = ft.Container( padding=ft.Padding(20, 16, 20, 16), content=ft.Column([ compare_row("Tkinter", 2, RED, "ממשק ישן מ-1991, מראה Windows 95"), ft.Container(height=10), compare_row("CustomTkinter", 6, GOLD, "שיפור ניכר, אבל עדיין מוגבל"), ft.Container(height=10), compare_row("PyQt / PySide", 7, ACCENT, "עוצמתי אבל מורכב, לא חינמי מסחרית"), ft.Container(height=10), compare_row("Flet", 9, GREEN, "Flutter-based, מודרני, חינמי, רב-פלטפורמי ✓"), ], spacing=0), ) # Tab 3 — קוד חי code_samples = [ ("גרדיאנט", 'ft.Container(\n gradient=ft.LinearGradient(\n colors=["#6366f1", "#ec4899"]\n ),\n border_radius=16,\n shadow=ft.BoxShadow(blur_radius=24),\n content=ft.Text("יפה!")\n)'), ("כפתור גלים", 'ft.Container(\n on_click=lambda e: ...,\n ink=True, # אפקט גלים!\n border_radius=50,\n bgcolor="#6366f1",\n content=ft.Text("לחץ")\n)'), ("Dialog קופץ", 'dlg = ft.AlertDialog(\n modal=True,\n title=ft.Text("כותרת"),\n content=ft.Text("תוכן"),\n)\npage.show_dialog(dlg)'), ] sel = {"i": 0} code_ref = ft.Ref[ft.Text]() def pick_code(e, i): sel["i"] = i code_ref.current.value = code_samples[i][1] page.update() tab3 = ft.Container( padding=ft.Padding(20, 16, 20, 16), content=ft.Column([ ft.Text("קוד = מסך. ראה בעצמך:", size=14, color=MUTED), ft.Container(height=12), ft.Row([ ft.Container( on_click=lambda e, i=i: pick_code(e, i), ink=True, border_radius=8, bgcolor=ACCENT if i == 0 else CARD2, padding=ft.Padding(12, 7, 12, 7), content=ft.Text(s[0], size=12, color=WHITE), ) for i, s in enumerate(code_samples) ], spacing=8), ft.Container(height=12), ft.Container( bgcolor="#0a0f1e", border_radius=14, padding=20, border=ft.Border( top=ft.BorderSide(1, BORDER), bottom=ft.BorderSide(1, BORDER), left=ft.BorderSide(1, BORDER), right=ft.BorderSide(1, BORDER), ), content=ft.Text( ref=code_ref, value=code_samples[0][1], size=13, color="#a5f3fc", font_family="Consolas", selectable=True, ), ), ft.Container(height=10), ft.Container( on_click=lambda e: show_snack("קוד הועתק! 📋", ACCENT), ink=True, border_radius=10, bgcolor=CARD2, padding=ft.Padding(16, 10, 16, 10), content=ft.Row([ ft.Icon(ft.Icons.CONTENT_COPY, color=MUTED, size=16), ft.Container(width=8), ft.Text("העתק קוד", color=MUTED, size=13), ], tight=True), ), ], spacing=0), ) # ── הרכבת Tabs בפורמט הנכון ─────────────────────────── tabs_section = ft.Container( margin=ft.Margin(24, 0, 24, 0), border_radius=20, bgcolor=SURFACE, shadow=ft.BoxShadow(blur_radius=40, color="#00000066", offset=ft.Offset(0,10)), content=ft.Tabs( length=3, content=ft.Column([ ft.TabBar(tabs=[ ft.Tab(label="הוויכוח", icon=ft.Icons.GAVEL), ft.Tab(label="השוואה", icon=ft.Icons.BAR_CHART), ft.Tab(label="קוד חי", icon=ft.Icons.CODE), ]), ft.TabBarView(controls=[tab1, tab2, tab3], height=520), ], spacing=0), ), ) # ══════════════════════════════════════════════ # FAQ — Expansion tiles # ══════════════════════════════════════════════ def faq(q, a): return ft.Container( border_radius=14, bgcolor=CARD, margin=ft.Margin(0, 0, 0, 10), content=ft.ExpansionTile( title=ft.Text(q, size=14, color=WHITE, weight=ft.FontWeight.W_500), tile_padding=ft.Padding(20, 4, 20, 4), controls=[ft.Container( padding=ft.Padding(20, 0, 20, 16), content=ft.Text(a, size=13, color=MUTED), )], ), ) faq_section = ft.Container( margin=ft.Margin(24, 0, 24, 0), content=ft.Column([ ft.Row([ icon_badge(ft.Icons.HELP_OUTLINE, GOLD), ft.Container(width=12), ft.Text("שאלות שאולי תשמע מ-@מעניין-לשמוע", size=17, weight=ft.FontWeight.BOLD, color=WHITE), ]), ft.Container(height=16), faq("אבל Flet כבד יותר מ-Tkinter, לא?", "נכון שהתקנה ראשונית גדולה יותר — אבל ספריה שנותנת Flutter engine שווה כל בייט."), faq("האם זה עובד גם כאתר אינטרנט?", "כן! ft.run(main, view=ft.AppView.WEB_BROWSER) — שורה אחת, והאפליקציה עולה בדפדפן."), faq("מה עם תמיכה בעברית (RTL)?", "page.rtl = True — זה הכל. Flet תומך מלא ב-RTL ועברית, כפי שאתה רואה כרגע."), ], spacing=0), ) # ══════════════════════════════════════════════ # METRICS # ══════════════════════════════════════════════ def metric(val, lbl, color): return ft.Container( expand=True, border_radius=16, bgcolor=CARD, padding=ft.Padding(16, 18, 16, 18), shadow=ft.BoxShadow(blur_radius=20, color="#00000044", offset=ft.Offset(0,4)), content=ft.Column([ ft.Text(val, size=26, weight=ft.FontWeight.BOLD, color=color), ft.Text(lbl, size=11, color=MUTED), ], horizontal_alignment=ft.CrossAxisAlignment.CENTER, spacing=4), ) metrics = ft.Container( margin=ft.Margin(24, 0, 24, 0), content=ft.Row([ metric("Flet", "ספריית UI", ACCENT), metric("Flutter", "מנוע גרפי", PINK), metric("SQLite", "DB מובנה", GREEN), metric("100%", "Python טהור", GOLD), ], spacing=12), ) # ══════════════════════════════════════════════ # FOOTER # ══════════════════════════════════════════════ footer = ft.Container( margin=ft.Margin(24, 0, 24, 0), border_radius=20, gradient=ft.LinearGradient( begin=ft.Alignment(-1,-1), end=ft.Alignment(1,1), colors=["#0f172a", "#1e1b4b"], ), padding=ft.Padding(28, 28, 28, 28), content=ft.Column([ ft.Row([ ft.Column([ ft.Text("@צול-גאה", size=20, weight=ft.FontWeight.BOLD, color=WHITE), ft.Text("mitmachim.top", size=13, color=MUTED), ], spacing=4, expand=True), ft.Container( on_click=lambda e: page.launch_url(SITE_URL), ink=True, border_radius=50, gradient=ft.LinearGradient( begin=ft.Alignment(-1,0), end=ft.Alignment(1,0), colors=[ACCENT, PINK], ), shadow=ft.BoxShadow(blur_radius=20, color=ACCENT+"44", offset=ft.Offset(0,4)), padding=ft.Padding(20, 11, 20, 11), content=ft.Row([ ft.Icon(ft.Icons.OPEN_IN_NEW, color=WHITE, size=15), ft.Container(width=8), ft.Text("בקר בפרופיל", color=WHITE, weight=ft.FontWeight.BOLD, size=13), ], tight=True), ), ]), ft.Container(height=16), ft.Container(height=1, gradient=ft.LinearGradient( begin=ft.Alignment(-1,0), end=ft.Alignment(1,0), colors=["transparent", BORDER, "transparent"], )), ft.Container(height=16), ft.Row([ ft.Text("Built with Python + Flet • @צול-גאה • 2025", color=MUTED, size=12), ], alignment=ft.MainAxisAlignment.CENTER), ], spacing=0), ) # ══════════════════════════════════════════════ # ASSEMBLY # ══════════════════════════════════════════════ page.add( hero, ft.Container(height=28), glow_div(ACCENT), ft.Container(height=28), tabs_section, ft.Container(height=28), glow_div(PINK), ft.Container(height=28), faq_section, ft.Container(height=28), glow_div(GREEN), ft.Container(height=28), metrics, ft.Container(height=28), footer, ft.Container(height=24), ) ft.run(main)