├── Inventory Management ├── analytics_icon.png ├── delivered_icon.png ├── list_icon.png ├── logistics_icon.png ├── logo.png ├── main.py ├── order_form.py ├── package_icon.png ├── person_icon.png ├── returns_icon.png ├── settings_icon.png └── shipping_icon.png ├── Login ├── email-icon.png ├── google-icon.png ├── main.py ├── password-icon.png └── side-img.png └── Quiz ├── geography-quiz-bg.png ├── home_screen.py ├── movies-quiz-bg.png ├── question_screen.py └── sports-quiz-bg.png /Inventory Management/analytics_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RoyChng/customtkinter-examples/6212f979024a4bc84464bdf2cf8fcc83899eeff9/Inventory Management/analytics_icon.png -------------------------------------------------------------------------------- /Inventory Management/delivered_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RoyChng/customtkinter-examples/6212f979024a4bc84464bdf2cf8fcc83899eeff9/Inventory Management/delivered_icon.png -------------------------------------------------------------------------------- /Inventory Management/list_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RoyChng/customtkinter-examples/6212f979024a4bc84464bdf2cf8fcc83899eeff9/Inventory Management/list_icon.png -------------------------------------------------------------------------------- /Inventory Management/logistics_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RoyChng/customtkinter-examples/6212f979024a4bc84464bdf2cf8fcc83899eeff9/Inventory Management/logistics_icon.png -------------------------------------------------------------------------------- /Inventory Management/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RoyChng/customtkinter-examples/6212f979024a4bc84464bdf2cf8fcc83899eeff9/Inventory Management/logo.png -------------------------------------------------------------------------------- /Inventory Management/main.py: -------------------------------------------------------------------------------- 1 | from customtkinter import * 2 | from CTkTable import CTkTable 3 | from PIL import Image 4 | 5 | app = CTk() 6 | app.geometry("856x645") 7 | app.resizable(0,0) 8 | 9 | set_appearance_mode("light") 10 | 11 | sidebar_frame = CTkFrame(master=app, fg_color="#2A8C55", width=176, height=650, corner_radius=0) 12 | sidebar_frame.pack_propagate(0) 13 | sidebar_frame.pack(fill="y", anchor="w", side="left") 14 | 15 | logo_img_data = Image.open("logo.png") 16 | logo_img = CTkImage(dark_image=logo_img_data, light_image=logo_img_data, size=(77.68, 85.42)) 17 | 18 | CTkLabel(master=sidebar_frame, text="", image=logo_img).pack(pady=(38, 0), anchor="center") 19 | 20 | analytics_img_data = Image.open("analytics_icon.png") 21 | analytics_img = CTkImage(dark_image=analytics_img_data, light_image=analytics_img_data) 22 | 23 | CTkButton(master=sidebar_frame, image=analytics_img, text="Dashboard", fg_color="transparent", font=("Arial Bold", 14), hover_color="#207244", anchor="w").pack(anchor="center", ipady=5, pady=(60, 0)) 24 | 25 | package_img_data = Image.open("package_icon.png") 26 | package_img = CTkImage(dark_image=package_img_data, light_image=package_img_data) 27 | 28 | CTkButton(master=sidebar_frame, image=package_img, text="Orders", fg_color="#fff", font=("Arial Bold", 14), text_color="#2A8C55", hover_color="#eee", anchor="w").pack(anchor="center", ipady=5, pady=(16, 0)) 29 | 30 | list_img_data = Image.open("list_icon.png") 31 | list_img = CTkImage(dark_image=list_img_data, light_image=list_img_data) 32 | CTkButton(master=sidebar_frame, image=list_img, text="Orders", fg_color="transparent", font=("Arial Bold", 14), hover_color="#207244", anchor="w").pack(anchor="center", ipady=5, pady=(16, 0)) 33 | 34 | returns_img_data = Image.open("returns_icon.png") 35 | returns_img = CTkImage(dark_image=returns_img_data, light_image=returns_img_data) 36 | CTkButton(master=sidebar_frame, image=returns_img, text="Returns", fg_color="transparent", font=("Arial Bold", 14), hover_color="#207244", anchor="w").pack(anchor="center", ipady=5, pady=(16, 0)) 37 | 38 | settings_img_data = Image.open("settings_icon.png") 39 | settings_img = CTkImage(dark_image=settings_img_data, light_image=settings_img_data) 40 | CTkButton(master=sidebar_frame, image=settings_img, text="Settings", fg_color="transparent", font=("Arial Bold", 14), hover_color="#207244", anchor="w").pack(anchor="center", ipady=5, pady=(16, 0)) 41 | 42 | person_img_data = Image.open("person_icon.png") 43 | person_img = CTkImage(dark_image=person_img_data, light_image=person_img_data) 44 | CTkButton(master=sidebar_frame, image=person_img, text="Account", fg_color="transparent", font=("Arial Bold", 14), hover_color="#207244", anchor="w").pack(anchor="center", ipady=5, pady=(160, 0)) 45 | 46 | main_view = CTkFrame(master=app, fg_color="#fff", width=680, height=650, corner_radius=0) 47 | main_view.pack_propagate(0) 48 | main_view.pack(side="left") 49 | 50 | title_frame = CTkFrame(master=main_view, fg_color="transparent") 51 | title_frame.pack(anchor="n", fill="x", padx=27, pady=(29, 0)) 52 | 53 | CTkLabel(master=title_frame, text="Orders", font=("Arial Black", 25), text_color="#2A8C55").pack(anchor="nw", side="left") 54 | 55 | CTkButton(master=title_frame, text="+ New Order", font=("Arial Black", 15), text_color="#fff", fg_color="#2A8C55", hover_color="#207244").pack(anchor="ne", side="right") 56 | 57 | metrics_frame = CTkFrame(master=main_view, fg_color="transparent") 58 | metrics_frame.pack(anchor="n", fill="x", padx=27, pady=(36, 0)) 59 | 60 | orders_metric = CTkFrame(master=metrics_frame, fg_color="#2A8C55", width=200, height=60) 61 | orders_metric.grid_propagate(0) 62 | orders_metric.pack(side="left") 63 | 64 | logitics_img_data = Image.open("logistics_icon.png") 65 | logistics_img = CTkImage(light_image=logitics_img_data, dark_image=logitics_img_data, size=(43, 43)) 66 | 67 | CTkLabel(master=orders_metric, image=logistics_img, text="").grid(row=0, column=0, rowspan=2, padx=(12,5), pady=10) 68 | 69 | CTkLabel(master=orders_metric, text="Orders", text_color="#fff", font=("Arial Black", 15)).grid(row=0, column=1, sticky="sw") 70 | CTkLabel(master=orders_metric, text="123", text_color="#fff",font=("Arial Black", 15), justify="left").grid(row=1, column=1, sticky="nw", pady=(0,10)) 71 | 72 | 73 | shipped_metric = CTkFrame(master=metrics_frame, fg_color="#2A8C55", width=200, height=60) 74 | shipped_metric.grid_propagate(0) 75 | shipped_metric.pack(side="left",expand=True, anchor="center") 76 | 77 | shipping_img_data = Image.open("shipping_icon.png") 78 | shipping_img = CTkImage(light_image=shipping_img_data, dark_image=shipping_img_data, size=(43, 43)) 79 | 80 | CTkLabel(master=shipped_metric, image=shipping_img, text="").grid(row=0, column=0, rowspan=2, padx=(12,5), pady=10) 81 | 82 | CTkLabel(master=shipped_metric, text="Shipping", text_color="#fff", font=("Arial Black", 15)).grid(row=0, column=1, sticky="sw") 83 | CTkLabel(master=shipped_metric, text="91", text_color="#fff",font=("Arial Black", 15), justify="left").grid(row=1, column=1, sticky="nw", pady=(0,10)) 84 | 85 | delivered_metric = CTkFrame(master=metrics_frame, fg_color="#2A8C55", width=200, height=60) 86 | delivered_metric.grid_propagate(0) 87 | delivered_metric.pack(side="right",) 88 | 89 | delivered_img_data = Image.open("delivered_icon.png") 90 | delivered_img = CTkImage(light_image=delivered_img_data, dark_image=delivered_img_data, size=(43, 43)) 91 | 92 | CTkLabel(master=delivered_metric, image=delivered_img, text="").grid(row=0, column=0, rowspan=2, padx=(12,5), pady=10) 93 | 94 | CTkLabel(master=delivered_metric, text="Delivered", text_color="#fff", font=("Arial Black", 15)).grid(row=0, column=1, sticky="sw") 95 | CTkLabel(master=delivered_metric, text="23", text_color="#fff",font=("Arial Black", 15), justify="left").grid(row=1, column=1, sticky="nw", pady=(0,10)) 96 | 97 | search_container = CTkFrame(master=main_view, height=50, fg_color="#F0F0F0") 98 | search_container.pack(fill="x", pady=(45, 0), padx=27) 99 | 100 | CTkEntry(master=search_container, width=305, placeholder_text="Search Order", border_color="#2A8C55", border_width=2).pack(side="left", padx=(13, 0), pady=15) 101 | 102 | CTkComboBox(master=search_container, width=125, values=["Date", "Most Recent Order", "Least Recent Order"], button_color="#2A8C55", border_color="#2A8C55", border_width=2, button_hover_color="#207244",dropdown_hover_color="#207244" , dropdown_fg_color="#2A8C55", dropdown_text_color="#fff").pack(side="left", padx=(13, 0), pady=15) 103 | CTkComboBox(master=search_container, width=125, values=["Status", "Processing", "Confirmed", "Packing", "Shipping", "Delivered", "Cancelled"], button_color="#2A8C55", border_color="#2A8C55", border_width=2, button_hover_color="#207244",dropdown_hover_color="#207244" , dropdown_fg_color="#2A8C55", dropdown_text_color="#fff").pack(side="left", padx=(13, 0), pady=15) 104 | 105 | table_data = [ 106 | ["Order ID", "Item Name", "Customer", "Address", "Status", "Quantity"], 107 | ['3833', 'Smartphone', 'Alice', '123 Main St', 'Confirmed', '8'], 108 | ['6432', 'Laptop', 'Bob', '456 Elm St', 'Packing', '5'], 109 | ['2180', 'Tablet', 'Crystal', '789 Oak St', 'Delivered', '1'], 110 | ['5438', 'Headphones', 'John', '101 Pine St', 'Confirmed', '9'], 111 | ['9144', 'Camera', 'David', '202 Cedar St', 'Processing', '2'], 112 | ['7689', 'Printer', 'Alice', '303 Maple St', 'Cancelled', '2'], 113 | ['1323', 'Smartwatch', 'Crystal', '404 Birch St', 'Shipping', '6'], 114 | ['7391', 'Keyboard', 'John', '505 Redwood St', 'Cancelled', '10'], 115 | ['4915', 'Monitor', 'Alice', '606 Fir St', 'Shipping', '6'], 116 | ['5548', 'External Hard Drive', 'David', '707 Oak St', 'Delivered', '10'], 117 | ['5485', 'Table Lamp', 'Crystal', '808 Pine St', 'Confirmed', '4'], 118 | ['7764', 'Desk Chair', 'Bob', '909 Cedar St', 'Processing', '9'], 119 | ['8252', 'Coffee Maker', 'John', '1010 Elm St', 'Confirmed', '6'], 120 | ['2377', 'Blender', 'David', '1111 Redwood St', 'Shipping', '2'], 121 | ['5287', 'Toaster', 'Alice', '1212 Maple St', 'Processing', '1'], 122 | ['7739', 'Microwave', 'Crystal', '1313 Cedar St', 'Confirmed', '8'], 123 | ['3129', 'Refrigerator', 'John', '1414 Oak St', 'Processing', '5'], 124 | ['4789', 'Vacuum Cleaner', 'Bob', '1515 Pine St', 'Cancelled', '10'] 125 | ] 126 | 127 | table_frame = CTkScrollableFrame(master=main_view, fg_color="transparent") 128 | table_frame.pack(expand=True, fill="both", padx=27, pady=21) 129 | table = CTkTable(master=table_frame, values=table_data, colors=["#E6E6E6", "#EEEEEE"], header_color="#2A8C55", hover_color="#B4B4B4") 130 | table.edit_row(0, text_color="#fff", hover_color="#2A8C55") 131 | table.pack(expand=True) 132 | 133 | app.mainloop() -------------------------------------------------------------------------------- /Inventory Management/order_form.py: -------------------------------------------------------------------------------- 1 | from customtkinter import * 2 | import tkinter 3 | from PIL import Image 4 | 5 | app = CTk() 6 | app.geometry("856x645") 7 | app.resizable(0,0) 8 | 9 | set_appearance_mode("light") 10 | 11 | sidebar_frame = CTkFrame(master=app, fg_color="#2A8C55", width=176, height=650, corner_radius=0) 12 | sidebar_frame.pack_propagate(0) 13 | sidebar_frame.pack(fill="y", anchor="w", side="left") 14 | 15 | logo_img_data = Image.open("logo.png") 16 | logo_img = CTkImage(dark_image=logo_img_data, light_image=logo_img_data, size=(77.68, 85.42)) 17 | 18 | CTkLabel(master=sidebar_frame, text="", image=logo_img).pack(pady=(38, 0), anchor="center") 19 | 20 | analytics_img_data = Image.open("analytics_icon.png") 21 | analytics_img = CTkImage(dark_image=analytics_img_data, light_image=analytics_img_data) 22 | 23 | CTkButton(master=sidebar_frame, image=analytics_img, text="Dashboard", fg_color="transparent", font=("Arial Bold", 14), hover_color="#207244", anchor="w").pack(anchor="center", ipady=5, pady=(60, 0)) 24 | 25 | package_img_data = Image.open("package_icon.png") 26 | package_img = CTkImage(dark_image=package_img_data, light_image=package_img_data) 27 | 28 | CTkButton(master=sidebar_frame, image=package_img, text="Orders", fg_color="#fff", font=("Arial Bold", 14), text_color="#2A8C55", hover_color="#eee", anchor="w").pack(anchor="center", ipady=5, pady=(16, 0)) 29 | 30 | list_img_data = Image.open("list_icon.png") 31 | list_img = CTkImage(dark_image=list_img_data, light_image=list_img_data) 32 | CTkButton(master=sidebar_frame, image=list_img, text="Orders", fg_color="transparent", font=("Arial Bold", 14), hover_color="#207244", anchor="w").pack(anchor="center", ipady=5, pady=(16, 0)) 33 | 34 | returns_img_data = Image.open("returns_icon.png") 35 | returns_img = CTkImage(dark_image=returns_img_data, light_image=returns_img_data) 36 | CTkButton(master=sidebar_frame, image=returns_img, text="Returns", fg_color="transparent", font=("Arial Bold", 14), hover_color="#207244", anchor="w").pack(anchor="center", ipady=5, pady=(16, 0)) 37 | 38 | settings_img_data = Image.open("settings_icon.png") 39 | settings_img = CTkImage(dark_image=settings_img_data, light_image=settings_img_data) 40 | CTkButton(master=sidebar_frame, image=settings_img, text="Settings", fg_color="transparent", font=("Arial Bold", 14), hover_color="#207244", anchor="w").pack(anchor="center", ipady=5, pady=(16, 0)) 41 | 42 | person_img_data = Image.open("person_icon.png") 43 | person_img = CTkImage(dark_image=person_img_data, light_image=person_img_data) 44 | CTkButton(master=sidebar_frame, image=person_img, text="Account", fg_color="transparent", font=("Arial Bold", 14), hover_color="#207244", anchor="w").pack(anchor="center", ipady=5, pady=(160, 0)) 45 | 46 | main_view = CTkFrame(master=app, fg_color="#fff", width=680, height=650, corner_radius=0) 47 | main_view.pack_propagate(0) 48 | main_view.pack(side="left") 49 | 50 | CTkLabel(master=main_view, text="Create Order", font=("Arial Black", 25), text_color="#2A8C55").pack(anchor="nw", pady=(29,0), padx=27) 51 | 52 | CTkLabel(master=main_view, text="Item Name", font=("Arial Bold", 17), text_color="#52A476").pack(anchor="nw", pady=(25,0), padx=27) 53 | 54 | CTkEntry(master=main_view, fg_color="#F0F0F0", border_width=0).pack(fill="x", pady=(12,0), padx=27, ipady=10) 55 | 56 | 57 | grid = CTkFrame(master=main_view, fg_color="transparent") 58 | grid.pack(fill="both", padx=27, pady=(31,0)) 59 | 60 | CTkLabel(master=grid, text="Customer", font=("Arial Bold", 17), text_color="#52A476", justify="left").grid(row=0, column=0, sticky="w") 61 | CTkEntry(master=grid, fg_color="#F0F0F0", border_width=0, width=300).grid(row=1, column=0, ipady=10) 62 | 63 | CTkLabel(master=grid, text="Address", font=("Arial Bold", 17), text_color="#52A476", justify="left").grid(row=0, column=1, sticky="w", padx=(25,0)) 64 | CTkEntry(master=grid, fg_color="#F0F0F0", border_width=0, width=300).grid(row=1, column=1, ipady=10, padx=(24,0)) 65 | 66 | CTkLabel(master=grid, text="Status", font=("Arial Bold", 17), text_color="#52A476", justify="left").grid(row=2, column=0, sticky="w", pady=(38, 0)) 67 | 68 | status_var = tkinter.IntVar(value=0) 69 | 70 | CTkRadioButton(master=grid, variable=status_var, value=0, text="Confirmed", font=("Arial Bold", 14), text_color="#52A476", fg_color="#52A476", border_color="#52A476", hover_color="#207244").grid(row=3, column=0, sticky="w", pady=(16,0)) 71 | CTkRadioButton(master=grid, variable=status_var, value=1,text="Pending", font=("Arial Bold", 14), text_color="#52A476", fg_color="#52A476", border_color="#52A476", hover_color="#207244").grid(row=4, column=0, sticky="w", pady=(16,0)) 72 | CTkRadioButton(master=grid, variable=status_var, value=2,text="Cancelled", font=("Arial Bold", 14), text_color="#52A476", fg_color="#52A476", border_color="#52A476", hover_color="#207244").grid(row=5, column=0, sticky="w", pady=(16,0)) 73 | 74 | CTkLabel(master=grid, text="Quantity", font=("Arial Bold", 17), text_color="#52A476", justify="left").grid(row=6, column=0, sticky="w", pady=(42, 0)) 75 | 76 | quantity_frame = CTkFrame(master=grid, fg_color="transparent") 77 | quantity_frame.grid(row=7, column=0, pady=(21,0), sticky="w") 78 | CTkButton(master=quantity_frame, text="-", width=25, fg_color="#2A8C55", hover_color="#207244", font=("Arial Black", 16)).pack(side="left", anchor="w") 79 | CTkLabel(master=quantity_frame, text="01", text_color="#2A8C55", font=("Arial Black", 16)).pack(side="left", anchor="w", padx=10) 80 | CTkButton(master=quantity_frame, text="+", width=25, fg_color="#2A8C55",hover_color="#207244", font=("Arial Black", 16)).pack(side="left", anchor="w") 81 | 82 | CTkLabel(master=grid, text="Description", font=("Arial Bold", 17), text_color="#52A476", justify="left").grid(row=2, column=1, sticky="w", pady=(42, 0), padx=(25,0)) 83 | 84 | CTkTextbox(master=grid, fg_color="#F0F0F0", width=300, corner_radius=8).grid(row=3, column=1, rowspan=5, sticky="w", pady=(16, 0), padx=(25,0), ipady=10) 85 | 86 | actions= CTkFrame(master=main_view, fg_color="transparent") 87 | actions.pack(fill="both") 88 | 89 | CTkButton(master=actions, text="Back", width=300, fg_color="transparent", font=("Arial Bold", 17), border_color="#2A8C55", hover_color="#eee", border_width=2, text_color="#2A8C55").pack(side="left", anchor="sw", pady=(30,0), padx=(27,24)) 90 | CTkButton(master=actions, text="Create", width=300, font=("Arial Bold", 17), hover_color="#207244", fg_color="#2A8C55", text_color="#fff").pack(side = "left", anchor="se", pady=(30,0), padx=(0,27)) 91 | 92 | 93 | app.mainloop() -------------------------------------------------------------------------------- /Inventory Management/package_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RoyChng/customtkinter-examples/6212f979024a4bc84464bdf2cf8fcc83899eeff9/Inventory Management/package_icon.png -------------------------------------------------------------------------------- /Inventory Management/person_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RoyChng/customtkinter-examples/6212f979024a4bc84464bdf2cf8fcc83899eeff9/Inventory Management/person_icon.png -------------------------------------------------------------------------------- /Inventory Management/returns_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RoyChng/customtkinter-examples/6212f979024a4bc84464bdf2cf8fcc83899eeff9/Inventory Management/returns_icon.png -------------------------------------------------------------------------------- /Inventory Management/settings_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RoyChng/customtkinter-examples/6212f979024a4bc84464bdf2cf8fcc83899eeff9/Inventory Management/settings_icon.png -------------------------------------------------------------------------------- /Inventory Management/shipping_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RoyChng/customtkinter-examples/6212f979024a4bc84464bdf2cf8fcc83899eeff9/Inventory Management/shipping_icon.png -------------------------------------------------------------------------------- /Login/email-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RoyChng/customtkinter-examples/6212f979024a4bc84464bdf2cf8fcc83899eeff9/Login/email-icon.png -------------------------------------------------------------------------------- /Login/google-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RoyChng/customtkinter-examples/6212f979024a4bc84464bdf2cf8fcc83899eeff9/Login/google-icon.png -------------------------------------------------------------------------------- /Login/main.py: -------------------------------------------------------------------------------- 1 | from customtkinter import * 2 | from PIL import Image 3 | 4 | app = CTk() 5 | app.geometry("600x480") 6 | app.resizable(0,0) 7 | 8 | side_img_data = Image.open("side-img.png") 9 | email_icon_data = Image.open("email-icon.png") 10 | password_icon_data = Image.open("password-icon.png") 11 | google_icon_data = Image.open("google-icon.png") 12 | 13 | side_img = CTkImage(dark_image=side_img_data, light_image=side_img_data, size=(300, 480)) 14 | email_icon = CTkImage(dark_image=email_icon_data, light_image=email_icon_data, size=(20,20)) 15 | password_icon = CTkImage(dark_image=password_icon_data, light_image=password_icon_data, size=(17,17)) 16 | google_icon = CTkImage(dark_image=google_icon_data, light_image=google_icon_data, size=(17,17)) 17 | 18 | CTkLabel(master=app, text="", image=side_img).pack(expand=True, side="left") 19 | 20 | frame = CTkFrame(master=app, width=300, height=480, fg_color="#ffffff") 21 | frame.pack_propagate(0) 22 | frame.pack(expand=True, side="right") 23 | 24 | CTkLabel(master=frame, text="Welcome Back!", text_color="#601E88", anchor="w", justify="left", font=("Arial Bold", 24)).pack(anchor="w", pady=(50, 5), padx=(25, 0)) 25 | CTkLabel(master=frame, text="Sign in to your account", text_color="#7E7E7E", anchor="w", justify="left", font=("Arial Bold", 12)).pack(anchor="w", padx=(25, 0)) 26 | 27 | CTkLabel(master=frame, text=" Email:", text_color="#601E88", anchor="w", justify="left", font=("Arial Bold", 14), image=email_icon, compound="left").pack(anchor="w", pady=(38, 0), padx=(25, 0)) 28 | CTkEntry(master=frame, width=225, fg_color="#EEEEEE", border_color="#601E88", border_width=1, text_color="#000000").pack(anchor="w", padx=(25, 0)) 29 | 30 | CTkLabel(master=frame, text=" Password:", text_color="#601E88", anchor="w", justify="left", font=("Arial Bold", 14), image=password_icon, compound="left").pack(anchor="w", pady=(21, 0), padx=(25, 0)) 31 | CTkEntry(master=frame, width=225, fg_color="#EEEEEE", border_color="#601E88", border_width=1, text_color="#000000", show="*").pack(anchor="w", padx=(25, 0)) 32 | 33 | CTkButton(master=frame, text="Login", fg_color="#601E88", hover_color="#E44982", font=("Arial Bold", 12), text_color="#ffffff", width=225).pack(anchor="w", pady=(40, 0), padx=(25, 0)) 34 | CTkButton(master=frame, text="Continue With Google", fg_color="#EEEEEE", hover_color="#EEEEEE", font=("Arial Bold", 9), text_color="#601E88", width=225, image=google_icon).pack(anchor="w", pady=(20, 0), padx=(25, 0)) 35 | 36 | 37 | app.mainloop() -------------------------------------------------------------------------------- /Login/password-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RoyChng/customtkinter-examples/6212f979024a4bc84464bdf2cf8fcc83899eeff9/Login/password-icon.png -------------------------------------------------------------------------------- /Login/side-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RoyChng/customtkinter-examples/6212f979024a4bc84464bdf2cf8fcc83899eeff9/Login/side-img.png -------------------------------------------------------------------------------- /Quiz/geography-quiz-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RoyChng/customtkinter-examples/6212f979024a4bc84464bdf2cf8fcc83899eeff9/Quiz/geography-quiz-bg.png -------------------------------------------------------------------------------- /Quiz/home_screen.py: -------------------------------------------------------------------------------- 1 | from customtkinter import * 2 | from PIL import Image 3 | 4 | app = CTk() 5 | app.geometry("585x550") 6 | app.resizable(0,0) 7 | 8 | set_appearance_mode("dark") 9 | 10 | CTkLabel(master=app, text="Your Stats", font=("Arial Bold", 20), justify="left").pack(anchor="w", pady=(43, 18), padx=(56,0)) 11 | 12 | stats_frame = CTkFrame(master=app, fg_color="transparent") 13 | stats_frame.pack( padx=(54, 0), pady=(18, 0), anchor="nw") 14 | 15 | quizzes_taken_frame = CTkFrame(master=stats_frame, fg_color="#70179A", width=132, height=70, corner_radius=8) 16 | quizzes_taken_frame.pack_propagate(0) 17 | quizzes_taken_frame.pack(anchor="w", side="left", padx=(0, 20)) 18 | 19 | CTkLabel(master=quizzes_taken_frame, text="Quizzes Taken", font=("Arial Bold", 10), text_color="#F3D9FF").pack(anchor="nw", padx=(14,0)) 20 | CTkLabel(master=quizzes_taken_frame, text="71", justify="left", font=("Arial Bold", 25), text_color="#F3D9FF").pack(anchor="nw", padx=(14, 0)) 21 | 22 | correct_qs_frame = CTkFrame(master=stats_frame, fg_color="#146C63", width=132, height=70, corner_radius=8) 23 | correct_qs_frame.pack_propagate(0) 24 | correct_qs_frame.pack(anchor="w", side="left", padx=(0, 20)) 25 | 26 | CTkLabel(master=correct_qs_frame, text="Correct Questions", font=("Arial Bold", 10), text_color="#D5FFFB").pack(anchor="nw", padx=(14,0)) 27 | CTkLabel(master=correct_qs_frame, text="23", justify="left", font=("Arial Bold", 25), text_color="#D5FFFB").pack(anchor="nw", padx=(14, 0)) 28 | 29 | highest_score_frame = CTkFrame(master=stats_frame, fg_color="#9A1717", width=132, height=70, corner_radius=8) 30 | highest_score_frame.pack_propagate(0) 31 | highest_score_frame.pack(anchor="w", side="left", padx=(0, 20)) 32 | 33 | CTkLabel(master=highest_score_frame, text="Highest Score", font=("Arial Bold", 10), text_color="#FFCFCF").pack(anchor="nw", padx=(14,0)) 34 | CTkLabel(master=highest_score_frame, text="12", justify="left", font=("Arial Bold", 25), text_color="#FFCFCF").pack(anchor="nw", padx=(14, 0)) 35 | 36 | CTkLabel(master=app, text="Take A Quiz", font=("Arial Bold", 20), justify="left").pack(anchor="nw", side="top",padx=(56,0), pady=(41, 0)) 37 | 38 | quizzes_frame = CTkFrame(master=app, fg_color="transparent") 39 | quizzes_frame.pack(pady=(21, 0), padx=(50, 0), anchor="nw") 40 | 41 | movies_img_data = Image.open("movies-quiz-bg.png") 42 | movies_img = CTkImage(light_image=movies_img_data, dark_image=movies_img_data, size=(234,91)) 43 | CTkLabel(master=quizzes_frame, text="", image=movies_img,corner_radius=8).grid(row=0, column=0, sticky="nw") 44 | 45 | sports_img_data = Image.open("sports-quiz-bg.png") 46 | sports_img = CTkImage(light_image=sports_img_data, dark_image=sports_img_data, size=(234,91)) 47 | CTkLabel(master=quizzes_frame, text="", image=sports_img,corner_radius=8).grid(row=1, column=0, sticky="nw", pady=(30, 0)) 48 | 49 | geography_img_data = Image.open("geography-quiz-bg.png") 50 | geography_img = CTkImage(light_image=geography_img_data, dark_image=geography_img_data, size=(175,210)) 51 | CTkLabel(master=quizzes_frame, text="", image=geography_img,corner_radius=8).grid(row=0, column=1, rowspan=2, sticky="nw") 52 | 53 | app.mainloop() -------------------------------------------------------------------------------- /Quiz/movies-quiz-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RoyChng/customtkinter-examples/6212f979024a4bc84464bdf2cf8fcc83899eeff9/Quiz/movies-quiz-bg.png -------------------------------------------------------------------------------- /Quiz/question_screen.py: -------------------------------------------------------------------------------- 1 | from customtkinter import * 2 | from PIL import Image 3 | 4 | app = CTk() 5 | app.geometry("585x550") 6 | # app.resizable(0,0) 7 | 8 | set_appearance_mode("dark") 9 | 10 | CTkProgressBar(master=app, progress_color="#2A55B8").pack(fill="x", anchor="n", pady=(46, 0), padx=50) 11 | 12 | CTkLabel(master=app, text="Q4: Example Question", font=("Arial Bold", 20), justify="left").pack(anchor="w", pady=(33, 0), padx=(50,0)) 13 | 14 | q1_frame = CTkFrame(master=app, corner_radius=8, fg_color="#2A55B8") 15 | q1_frame.pack(fill="x", anchor="w", pady=(39, 0), padx=50) 16 | 17 | CTkCheckBox(master=q1_frame, fg_color="#A6C1FF", checkmark_color="#2A55B8", border_color="#fff", hover_color="#A6C1FF", text="Answer 1").pack(side="left", padx=(16,20), pady=(8,8)) 18 | 19 | q2_frame = CTkFrame(master=app, corner_radius=8, fg_color="#fff") 20 | q2_frame.pack(fill="x", anchor="w", pady=(20, 0), padx=50) 21 | 22 | CTkCheckBox(master=q2_frame, text_color="#2A55B8", fg_color="#2A55B8", checkmark_color="#fff",hover_color="#2A55B8", text="Answer 2").pack(side="left", padx=(16,20), pady=(8,8)) 23 | 24 | q3_frame = CTkFrame(master=app, corner_radius=8, fg_color="#fff") 25 | q3_frame.pack(fill="x", anchor="w", pady=(20, 0), padx=50) 26 | 27 | CTkCheckBox(master=q3_frame, text_color="#2A55B8", fg_color="#2A55B8", checkmark_color="#fff",hover_color="#2A55B8", text="Answer 3").pack(side="left", padx=(16,20), pady=(8,8)) 28 | 29 | q4_frame = CTkFrame(master=app, corner_radius=8, fg_color="#fff") 30 | q4_frame.pack(fill="x", anchor="w", pady=(20, 0), padx=50) 31 | 32 | CTkCheckBox(master=q4_frame, text_color="#2A55B8", fg_color="#2A55B8", checkmark_color="#fff",hover_color="#2A55B8", text="Answer 4").pack(side="left", padx=(16,20), pady=(8,8)) 33 | 34 | CTkButton(master=app, text="Next Question", font=("Arial Bold", 20), hover_color="#299039", fg_color="#35B248").pack(fill="x", ipady=15, pady=(50, 0), padx=50) 35 | 36 | app.mainloop() -------------------------------------------------------------------------------- /Quiz/sports-quiz-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RoyChng/customtkinter-examples/6212f979024a4bc84464bdf2cf8fcc83899eeff9/Quiz/sports-quiz-bg.png --------------------------------------------------------------------------------