From 564ff65363258cab4196b967dd556105e424d48c Mon Sep 17 00:00:00 2001 From: jelveh Date: Sat, 19 Oct 2024 10:28:03 -0700 Subject: [PATCH] feat: welcome screen to quickly explain what Puter is --- src/gui/src/UI/UIDesktop.js | 14 +++++ src/gui/src/UI/UIWindow.js | 4 ++ src/gui/src/UI/UIWindowWelcome.js | 91 +++++++++++++++++++++++++++++++ src/gui/src/css/style.css | 24 ++++++++ src/gui/src/initgui.js | 4 +- 5 files changed, 135 insertions(+), 2 deletions(-) create mode 100644 src/gui/src/UI/UIWindowWelcome.js diff --git a/src/gui/src/UI/UIDesktop.js b/src/gui/src/UI/UIDesktop.js index 64679cc2..7729701a 100644 --- a/src/gui/src/UI/UIDesktop.js +++ b/src/gui/src/UI/UIDesktop.js @@ -38,6 +38,7 @@ import UIWindowSettings from "./Settings/UIWindowSettings.js" import UIWindowTaskManager from "./UIWindowTaskManager.js" import truncate_filename from '../helpers/truncate_filename.js'; import UINotification from "./UINotification.js" +import UIWindowWelcome from "./UIWindowWelcome.js" import launch_app from "../helpers/launch_app.js" import item_icon from "../helpers/item_icon.js" @@ -898,6 +899,19 @@ async function UIDesktop(options){ //------------------------------------------- if(!window.is_embedded && !window.is_fullpage_mode){ refresh_item_container(el_desktop, {fadeInItems: true}) + + // Show welcome window if user hasn't already seen it and hasn't directly navigated to an app + if(!window.url_paths[0]?.toLocaleLowerCase() === 'app' || !window.url_paths[1]){ + if(!isMobile.phone && !isMobile.tablet){ + setTimeout(() => { + puter.kv.get('has_seen_welcome_window').then(async (val) => { + if(val === null){ + await UIWindowWelcome(); + } + }) + }, 1000); + } + } } // ------------------------------------------- diff --git a/src/gui/src/UI/UIWindow.js b/src/gui/src/UI/UIWindow.js index e8eebd77..3f8a2c2e 100644 --- a/src/gui/src/UI/UIWindow.js +++ b/src/gui/src/UI/UIWindow.js @@ -417,6 +417,10 @@ async function UIWindow(options) { taskbar_zindex = parseInt(taskbar_zindex); backdrop_zindex = taskbar_zindex > zindex ? taskbar_zindex : zindex; } + + // dominant backdrop will cover over toolbar as well + if(options.backdrop_covers_toolbar) + backdrop_zindex = 999999; h = `
` + h + `
`; } diff --git a/src/gui/src/UI/UIWindowWelcome.js b/src/gui/src/UI/UIWindowWelcome.js new file mode 100644 index 00000000..6215dd08 --- /dev/null +++ b/src/gui/src/UI/UIWindowWelcome.js @@ -0,0 +1,91 @@ +/** + * Copyright (C) 2024 Puter Technologies Inc. + * + * This file is part of Puter. + * + * Puter is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published + * by the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + */ + +import UIWindow from './UIWindow.js' + +async function UIWindowWelcome(options){ + + options = options ?? {}; + + let h = ''; + // close button containing the multiplication sign + h += `
×
`; + h += `
`; + h += `
`; + h += ``; + h += `
`; + h += `
`; + h += `

Welcome to your
Personal Internet Computer

`; + h += `

Store files, play games, find awesome apps, and much more! All in one place, accessible from anywhere at any time.

`; + h += ``; + h += `
`; + h += `Terms`; + h += `Privacy`; + h += `Developers`; + h += `Open Source`; + h += `
`; + h += `
`; + h += `
`; + + const el_window = await UIWindow({ + title: 'Instant Login!', + app: 'instant-login', + single_instance: true, + icon: null, + uid: null, + is_dir: false, + body_content: h, + has_head: false, + selectable_body: false, + allow_context_menu: false, + is_resizable: false, + is_droppable: false, + init_center: true, + allow_native_ctxmenu: false, + allow_user_select: false, + backdrop: true, + close_on_backdrop_click: false, + backdrop_covers_toolbar: true, + width: 650, + height: 'auto', + dominant: true, + show_in_taskbar: false, + draggable_body: true, + onAppend: function(this_window){ + }, + window_class: 'window-welcome', + on_close: function(){ + // save the fact that the user has seen the welcome window + puter.kv.set('has_seen_welcome_window', true); + }, + body_css: { + width: 'initial', + height: '100%', + 'background-color': 'rgb(245 247 249)', + 'backdrop-filter': 'blur(3px)', + padding: '0', + }, + }) + + $(document).on('click', '.welcome-window-get-started', function(){ + $(el_window).close(); + }) +} + +export default UIWindowWelcome \ No newline at end of file diff --git a/src/gui/src/css/style.css b/src/gui/src/css/style.css index 4e745bcf..c04f281e 100644 --- a/src/gui/src/css/style.css +++ b/src/gui/src/css/style.css @@ -2776,6 +2776,16 @@ fieldset[name=number-code] { opacity: 1; } +.welcome-window-close-button{ + opacity: 0.7; + font-weight: 300; + top: 5px; + right: 5px; +} +.welcome-window-close-button:hover{ + opacity: 1; +} + .otp-qr-code { width: 100%; display: flex; @@ -4148,4 +4158,18 @@ fieldset[name=number-code] { } .settings-sidebar.active { display: block; +} + +.welcome-window-footer{ + position: absolute; bottom: 20px; +} + +.welcome-window-footer a{ + color: #8a94a4; + text-decoration: none; + font-size: 12px; +} + +.welcome-window-footer a:hover{ + color: #5f626d; } \ No newline at end of file diff --git a/src/gui/src/initgui.js b/src/gui/src/initgui.js index 0506994e..ecf760a0 100644 --- a/src/gui/src/initgui.js +++ b/src/gui/src/initgui.js @@ -294,8 +294,9 @@ window.initgui = async function(options){ // remove 'r' from URL window.history.pushState(null, document.title, '/'); // show referral notice, this will be used later if Desktop is loaded - if(window.first_visit_ever) + if(window.first_visit_ever){ window.show_referral_notice = true; + } } //-------------------------------------------------------------------------------------- @@ -833,7 +834,6 @@ window.initgui = async function(options){ referrer += '?ref=' + html_encode(window.url_query_params.get('ref')); } - let headers = {}; if(window.custom_headers) headers = window.custom_headers;