mirror of
https://github.com/HeyPuter/puter.git
synced 2025-01-23 22:40:20 +08:00
feat: welcome screen to quickly explain what Puter is
This commit is contained in:
jelveh
parent
480d996279
commit
564ff65363
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// -------------------------------------------
|
||||
|
||||
@ -418,6 +418,10 @@ async function UIWindow(options) {
|
||||
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 = `<div class="window-backdrop" style="z-index:${backdrop_zindex};">` + h + `</div>`;
|
||||
}
|
||||
|
||||
|
||||
91
src/gui/src/UI/UIWindowWelcome.js
Normal file
91
src/gui/src/UI/UIWindowWelcome.js
Normal file
@ -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 <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import UIWindow from './UIWindow.js'
|
||||
|
||||
async function UIWindowWelcome(options){
|
||||
|
||||
options = options ?? {};
|
||||
|
||||
let h = '';
|
||||
// close button containing the multiplication sign
|
||||
h += `<div class="generic-close-window-button welcome-window-close-button"> × </div>`;
|
||||
h += `<div style="display:flex; flex-direction: colum;">`;
|
||||
h += `<div style="overflow: hidden; width: 200px; max-width: 200px; min-width: 200px; background: linear-gradient(45deg, #3d476b, #838eb7); min-height: 400px; padding: 20px; box-sizing: border-box;">`;
|
||||
h += `<img style="display: block; margin: 45px auto 0; width: 270px; opacity: 0.5;" src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%3Csvg%20width%3D%2248%22%20height%3D%2248%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20class%3D%22layer%22%3E%3Ctitle%3ELayer%201%3C%2Ftitle%3E%3Cg%20id%3D%22svg_1%22%20stroke-width%3D%221%22%20transform%3D%22rotate(90%2024%2023.9997)%22%3E%3Cpolyline%20fill%3D%22none%22%20id%3D%22svg_2%22%20points%3D%2239%2024%2025%2024%2025%2028%22%20stroke%3D%22%23ffffff%22%20stroke-linecap%3D%22square%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%221%22%2F%3E%3Cpolyline%20fill%3D%22none%22%20id%3D%22svg_3%22%20points%3D%2235.879%2010.121%2032%2014%2025%2014%2025%2018%22%20stroke%3D%22%23ffffff%22%20stroke-linecap%3D%22square%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%221%22%2F%3E%3Cpath%20d%3D%22m13%2C26a10.29%2C10.29%200%200%201%20-7.2%2C-3%22%20fill%3D%22none%22%20id%3D%22svg_4%22%20stroke%3D%22%23ffffff%22%20stroke-linecap%3D%22square%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%221%22%2F%3E%3Cpath%20d%3D%22m17%2C31.6a5.83%2C5.83%200%200%201%20-4%2C-5.6a5.73%2C5.73%200%200%201%202%2C-4.4%22%20fill%3D%22none%22%20id%3D%22svg_5%22%20stroke%3D%22%23ffffff%22%20stroke-linecap%3D%22square%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%221%22%2F%3E%3Cpath%20d%3D%22m35.88%2C37.88l-3.88%2C-3.88l-7%2C0l0%2C2a9.9%2C9.9%200%200%201%20-10%2C10a9.9%2C9.9%200%200%201%20-10%2C-10a9.06%2C9.06%200%200%201%200.6%2C-3.2a5.63%2C5.63%200%200%201%20-2.6%2C-4.8a5.89%2C5.89%200%200%201%202.8%2C-5a9.99%2C9.99%200%200%201%20-2.8%2C-7a9.9%2C9.9%200%200%201%2010%2C-10l0.4%2C0a5.83%2C5.83%200%200%201%205.6%2C-4a5.89%2C5.89%200%200%201%206%2C6%22%20fill%3D%22none%22%20id%3D%22svg_6%22%20stroke%3D%22%23ffffff%22%20stroke-linecap%3D%22square%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%221%22%2F%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%228%22%20data-color%3D%22color-2%22%20fill%3D%22none%22%20id%3D%22svg_7%22%20r%3D%223%22%20stroke%3D%22%23ffffff%22%20stroke-linecap%3D%22square%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%221%22%2F%3E%3Ccircle%20cx%3D%2242%22%20cy%3D%2224%22%20data-color%3D%22color-2%22%20fill%3D%22none%22%20id%3D%22svg_8%22%20r%3D%223%22%20stroke%3D%22%23ffffff%22%20stroke-linecap%3D%22square%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%221%22%2F%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%2240%22%20data-color%3D%22color-2%22%20fill%3D%22none%22%20id%3D%22svg_9%22%20r%3D%223%22%20stroke%3D%22%23ffffff%22%20stroke-linecap%3D%22square%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E">`;
|
||||
h += `</div>`;
|
||||
h += `<div style="flex-grow: 1; padding-left: 50px; padding-top: 70px; padding-right: 50px;">`;
|
||||
h += `<h1 style="font-size: 25px; font-weight: 300; -webkit-font-smoothing: antialiased; color: #545763;">Welcome to your <br>Personal Internet Computer</h1>`;
|
||||
h += `<p style="margin-top: 25px; font-size: 16px; font-weight: 300; -webkit-font-smoothing: antialiased; color: #3e4251;">Store files, play games, find awesome apps, and much more! All in one place, accessible from anywhere at any time.</p>`;
|
||||
h += `<button class="welcome-window-get-started" style="font-size: 15px; font-weight: 300; -webkit-font-smoothing: antialiased; cursor: pointer; padding: 8px 20px; border-radius: 5px; text-decoration: none; margin-right: 20px; border: 1px solid #656565 !important; background: none; margin-top: 10px;">Get Started</button>`;
|
||||
h += `<div class="welcome-window-footer">`;
|
||||
h += `<a href="/terms" target="_blank">Terms</a>`;
|
||||
h += `<a href="/privacy" style="margin-left: 20px;" target="_blank">Privacy</a>`;
|
||||
h += `<a href="https://developer.puter.com" style="margin-left: 20px;" target="_blank">Developers</a>`;
|
||||
h += `<a href="https://github.com/heyputer/puter" style="margin-left: 20px;" target="_blank">Open Source</a>`;
|
||||
h += `</div>`;
|
||||
h += `</div>`;
|
||||
h += `</div>`;
|
||||
|
||||
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
|
||||
@ -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;
|
||||
@ -4149,3 +4159,17 @@ 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;
|
||||
}
|
||||
@ -294,9 +294,10 @@ 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;
|
||||
}
|
||||
}
|
||||
|
||||
//--------------------------------------------------------------------------------------
|
||||
// Action: Request Permission
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user