Update, and fix "port-lock" workaround to work again and (hopefully) be a little more future-proof.

Temporary changes to make debugging more amenable
Specify UTF-8 encoding when reading and writing files in find_and_replace
2026-05-20 00:31:00 +00:00 · 2025-07-24 23:37:43 -04:00 · 2025-07-24 15:43:54 -04:00 · 2024-12-24 17:22:31 -05:00 · 2024-10-04 17:09:34 -04:00 · 2024-03-22 09:14:39 -04:00
17 changed files with 24827 additions and 20507 deletions
@@ -16,11 +16,7 @@ root = "www.photopea.com/"
 website = "https://photopea.com/"
 urls = [
    "index.html",
-    "style/all.css",
-    "code/ext/ext.js",
    "promo/thumb256.png",
-    "code/pp/pp.js",
-    "code/dbs/DBS.js",
    "rsrc/basic/basic.zip",
    "code/ext/hb.wasm",
    "code/ext/fribidi.wasm",
@@ -72,10 +68,23 @@ def dl_file(path):

    download_file(website + path,root+outfn)

+dl_file(urls[0]) #Always download the index.html page first
+
+index = open(root+"index.html", encoding="utf-8").read()
+
+regex_paths = {"_": r"style/all(\d+).css", "__": r"code/ext/ext(\d+).js", "DBS": r"code/dbs/DBS(\d+).js", "PP": r"code/pp/pp(\d+).js"}
+
+for name, pattern in regex_paths.items():
+    match = re.search(pattern, index)
+    match = match.group(0)
+    urls.append(match)
+    if not name.startswith("_"):
+        globals()[name]=match
+
 for url in urls:
    dl_file(url)

-db_data = open(root + "code/dbs/DBS.js",encoding="utf-8").read()
+db_data = open(root + DBS,encoding="utf-8").read()
 db_vars = re.findall(r"var (\w+)\s*=\s*(\{[\w\W]+?\n\s*\})\s*(?=;|/\*|var)", db_data)
 db = {}

@@ -156,22 +165,25 @@ if '--templates' in sys.argv:
        print('Removing ' + tpl)
        os.remove(tpl)
    
-def find_and_replace(file,find,replace):
-    with open(os.path.join(root,file),'r') as pp:
+def find_and_replace(file,find,replace, regex=False):
+    with open(os.path.join(root,file),'r', encoding="utf-8") as pp:
        file1=pp.read()
+    if regex:
+        file1=re.sub(find, replace, file1, flags=re.MULTILINE)
+    else:
        file1=file1.replace(find,replace)
-    with open(os.path.join(root,file),'w') as pp:
+    with open(os.path.join(root,file),'w', encoding="utf-8") as pp:
        pp.write(file1)

 #Allow any port to be used
-find_and_replace('code/pp/pp.js','"\'$!|"))','"\'$!|"))||true')
+find_and_replace(PP,r'==(\s*)\"\"(\s*)\)(\s*)return 0(\s*);(\s*)if(\s*)\(', '|| true) return 2; if(', regex=True)

 #Don't load Google Analytics
 find_and_replace('index.html','//www.google-analytics.com/analytics.js','')
 find_and_replace('index.html', '//www.googletagmanager.com', '#')

 #Allow the import of pictures of URLs (bypassing mirror.php)
-find_and_replace('code/pp/pp.js','"mirror.php?url="+encodeURIComponent','')
+find_and_replace(PP,'"mirror.php?url="+encodeURIComponent','')

 #Allow Dropbox to load from dropboxStorage.html
 find_and_replace('code/storages/dropboxStorage.html', 'var redirectUri = window.location.href;', 'var redirectUri = "https://www.photopea.com/code/storages/dropboxStorage.html";')
@@ -182,11 +194,11 @@ find_and_replace('index.html','https://connect.facebook.net','')
 find_and_replace('index.html','https://www.facebook.com','')

 #Redirect dynamic pages to static equivalent
-find_and_replace('code/pp/pp.js','"&rsrc="','""')
-find_and_replace('code/pp/pp.js','"templates/?type="','"templates/index.html?type="')
-find_and_replace('code/pp/pp.js','"https://f000.backblazeb2.com/file/"', '"templates/file/"')
+find_and_replace(PP,'"&rsrc="','""')
+find_and_replace(PP,'"templates/?type="','"templates/index.html?type="')
+find_and_replace(PP,'"https://f000.backblazeb2.com/file/"', '"templates/file/"')

 #Force enable Remove BG, and any other options that are disabled on self-hosted instances (much more brittle to changes than the other replacements)
-find_and_replace("code/pp/pp.js",'("~yy")','("~yy")||true')
+find_and_replace(PP,'("~yy")','("~yy")||true')
 # Having ? in static sites doesn't really work
 #find_and_replace("templates/index.html",'sch.split("?");','sch.split("#");')
@@ -3,6 +3,7 @@
 <html>
 	<head>
 		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/dropbox@10.9.0/dist/Dropbox-sdk.min.js"></script>
+		<!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dropbox.js/10.9.0/Dropbox-sdk.min.js"></script>-->
 	</head>
 	<body onload="go()">

@@ -91,6 +92,8 @@
 		    	else if(sentFalse) { authenticate(action,prms); }
 		    	else if(dbx.auth.accessToken)
 		    	{
+		    		action(prms);
+		    		/*
 		    		dbx.checkUser({"query": ""})
 			    	.then(function(e) {			    		
 				        action(prms);
@@ -99,6 +102,7 @@
 				    {
 						handleError(e);
 				    });
+				    */
 		    	}
 		    	else { handleError("No Access Token present."); }
 		    }
@@ -10,6 +10,8 @@
 	<script type="text/javascript">

 		var sentFalse = false;
+		var refreshToken = false;
+		var tmpAction, tmpPrms;
 		var clientId = "463342976776-04ub3ijsr7i5qobn8ha32ap6vsaae75a.apps.googleusercontent.com";
 		var scope = "https://www.googleapis.com/auth/drive";
 		var discoveryDocs = "https://www.googleapis.com/discovery/v1/apis/drive/v3/rest";
@@ -51,8 +53,16 @@
 				localStorage.setItem("googledriveAccessToken", e.access_token);
 				localStorage.setItem("googledriveAccessTokenValidUntil", Date.now() + e.expires_in * 1000);
 			}
+			if(refreshToken)
+			{
+				refreshToken = false;
+				doAction(tmpAction,tmpPrms);
+			}
+			else
+			{
 				send("ready", true);
 			}
+		}

 		function gapiInit() {
 			gapi.client.init({})
@@ -117,7 +127,13 @@

 		function authorize(action,prms)
 		{
-			sentFalse = false;
+			if(sentFalse) sentFalse = false;
+			else
+			{
+				refreshToken = true;
+				tmpAction = action;
+				tmpPrms = prms;
+			}
 			client.requestAccessToken();
 		}

@@ -165,6 +181,7 @@

 			if(path.length == 0 || path[0] == '')
 			{
+
 				if(action == listDir)
 				{
 					var query = "'" + id + "' in parents";
@@ -197,8 +214,8 @@
 				'q': query,
 				'pageToken' : pageToken,
 				'pageSize': 1000,
-				'fields': "nextPageToken, files(id, name, size, modifiedTime, kind, mimeType, trashed)",};
-				if(mode == 1) 
+				'fields': "nextPageToken, files(id, name, size, modifiedTime, kind, mimeType, trashed, shortcutDetails)",};
+				if(mode == 1 || query != "'root' in parents") 
 				{
 					req['supportsAllDrives'] = true;
 					req['includeItemsFromAllDrives'] = true;
@@ -207,7 +224,7 @@
 				{
 					req['spaces'] = "appDataFolder";
 				}
-				else if(mode == 4 && req["q"] == "'sharedWithMe' in parents")
+				if(mode == 4 && req["q"] == "'sharedWithMe' in parents")
 				{
 					req['q'] = "sharedWithMe";
 				}
@@ -223,6 +240,7 @@
 						{
 							found = true;
 							if(newFile && action == renameFile) { renameFile(files[i].id, newFile); return; }
+							else if(files[i].shortcutDetails) { findFile(action, path.slice(1), files[i].shortcutDetails.targetId, null, buffer); return; }
 							else { findFile(action, path.slice(1), files[i].id, null, buffer); return; }
 						}
 					}
@@ -260,8 +278,8 @@
 					'q': query,
 					'pageToken' : pageToken,
 					'pageSize': 1000,	                	
-					'fields': "nextPageToken, files(id, name, size, modifiedTime, kind, mimeType, thumbnailLink, trashed)",};
-					if(mode == 1) 
+					'fields': "nextPageToken, files(id, name, size, modifiedTime, kind, mimeType, thumbnailLink, trashed, shortcutDetails)",};
+					if(mode == 1 || query != "'root' in parents")
 					{
 						req['supportsAllDrives'] = true;
 						req['includeItemsFromAllDrives'] = true;
@@ -270,9 +288,9 @@
 					{
 						req['spaces'] = "appDataFolder";
 					}
-					else if(mode == 4 && req["q"] == "'sharedWithMe' in parents")
+					if(mode == 4 && req['q'] == "'sharedWithMe' in parents")
 					{
-						req["q"] = "sharedWithMe";
+						req['q'] = "sharedWithMe";
 					}
 					gapi.client.drive.files.list(req)
 					.then(function(response) {		      			
@@ -282,6 +300,19 @@
 						{
 							if(files[i].trashed) continue;
 							else if(files[i].mimeType == "application/vnd.google-apps.folder") { out.push([files[i].name, -1, Math.round(Date.parse(files[i].modifiedTime)/1000)]); }
+							else if(files[i].mimeType == "application/vnd.google-apps.shortcut") 
+							{
+								//console.log(files[i]);
+								if(files[i].shortcutDetails.targetMimeType == "application/vnd.google-apps.folder")
+									{ out.push([files[i].name, -1, Math.round(Date.parse(files[i].modifiedTime)/1000)]); }
+								else if(files[i].shortcutDetails.targetMimeType == "application/vnd.google-apps") {} 
+								else
+								{
+									if(files[i].thumbnailLink) { out.push([files[i].name, 0, Math.round(Date.parse(files[i].modifiedTime)/1000), files[i].thumbnailLink]); }
+			      					//but maybe we should only show thumbnail to files which Photopea can open - Gdrive also makes thumbnails for spreadsheets etc.
+			      					else { out.push([files[i].name,0, Math.round(Date.parse(files[i].modifiedTime)/1000)]); }
+			      				}
+							}								
 							else if(files[i].mimeType.includes("application/vnd.google-apps.")) { }
 							else
 							{
@@ -299,8 +330,9 @@
 				function downloadFile(fileId)
 				{
 					var xhr = new XMLHttpRequest();
-					var shared = "";
-					if(mode == 1) shared = "&supportsAllDrives=true";
+					//var shared = "";
+					//if(mode == 1) shared = "&supportsAllDrives=true";
+					var shared = "&supportsAllDrives=true";
 					xhr.open('GET', "https://www.googleapis.com/drive/v3/files/" + fileId + "?alt=media" + shared);
 					xhr.responseType = "arraybuffer";
 					xhr.setRequestHeader('Authorization', 'Bearer ' + gapi.client.getToken().access_token);
@@ -312,8 +344,9 @@
 				function downloadThumbnail(fileId)
 				{
 					var xhr = new XMLHttpRequest();
-					var shared = "";
-					if(mode == 1) shared = "&supportsAllDrives=true";
+					//var shared = "";
+					//if(mode == 1) shared = "&supportsAllDrives=true";
+					var shared = "&supportsAllDrives=true";
 					xhr.open('GET', "https://www.googleapis.com/drive/v3/files/" + fileId + "?fields=thumbnailLink" + shared);
 					xhr.setRequestHeader('Authorization', 'Bearer ' + gapi.client.getToken().access_token);
 					xhr.onload = function(e)
@@ -406,7 +439,8 @@
 							'name' : newName,
 						}
 					};
-					if(mode == 1) req['supportsAllDrives'] = true;
+					//if(mode == 1) req['supportsAllDrives'] = true;
+					req['supportsAllDrives'] = true;
 					gapi.client.drive.files.update(req)
 					.then(function(response) {
 						send(0,"");	            			            	
@@ -426,7 +460,7 @@
      				'q': query,
      				'pageToken' : pageToken,
      				'pageSize': 1000,	                
-      				'fields': "nextPageToken, files(id, name, trashed)",};
+      				'fields': "nextPageToken, files(id, name, trashed, mimeType, shortcutDetails)",};
      				if(mode == 1)
      				{
      					req['supportsAllDrives'] = true;
@@ -447,10 +481,15 @@
      						if(files[i].name == name)
      						{
      							found = true;
-      							if(buffer) { uploadFile(files[i].id,parentId,name,buffer); }
+      							var fid = files[i].id;
+      							if(files[i].mimeType == "application/vnd.google-apps.shortcut")
+      							{
+      								fid = files[i].shortcutDetails.targetId;
+      							}
+      							if(buffer) { uploadFile(fid,parentId,name,buffer); }
      							else
      							{
-      								query = "'" + files[i].id + "' in parents";
+      								query = "'" + fid + "' in parents";
 									listDir(null, query, []);
      							} 
      							return;
@@ -475,8 +514,9 @@
      					metadata['mimeType'] = contentType;
      					metadata['Content-Type'] = contentType;
      					metadata['Content-Length'] = file.size;
-      					var shared = "";
-      					if(mode == 1) shared = "&supportsAllDrives=true";
+      					//var shared = "";
+      					//if(mode == 1) shared = "&supportsAllDrives=true";
+      					var shared = "&supportsAllDrives=true";
      					if(!fileId)	xhr.open("POST", "https://www.googleapis.com/upload/drive/v3/files?uploadType=resumable" + shared);
      					else xhr.open("PATCH", "https://www.googleapis.com/upload/drive/v3/files/" + fileId + "?uploadType=resumable" + shared);
      					xhr.setRequestHeader('Authorization', 'Bearer ' + gapi.client.getToken().access_token);
@@ -513,8 +553,9 @@
      					var form = new FormData();
      					form.append('metadata', new Blob([JSON.stringify(metadata)], { type: 'application/json' }));
      					form.append('file', file);
-      					var shared = "";
-      					if(mode == 1) shared = "&supportsAllDrives=true";
+      					//var shared = "";
+      					//if(mode == 1) shared = "&supportsAllDrives=true";
+      					var shared = "&supportsAllDrives=true";
      					if(!fileId) xhr.open('POST', 'https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart&fields=id' + shared);
      					else xhr.open('PATCH', 'https://www.googleapis.com/upload/drive/v3/files/' + fileId + '?uploadType=multipart&fields=id' + shared);	
      					xhr.setRequestHeader('Authorization', 'Bearer ' + gapi.client.getToken().access_token);
@@ -550,9 +591,20 @@
      				}
      			}

+      			function checkToken()
+      			{
+      				var until;
+      				if(mode == 2) until = localStorage.getItem("googledriveAppFolderAccessTokenValidUntil");
+					else if(mode == 3) until = localStorage.getItem("googledriveFileAccessTokenValidUntil");
+					else until = localStorage.getItem("googledriveAccessTokenValidUntil");
+					if(until && Date.now() < until)	{ return true; }
+					else { return false; }
+      			}
+
      			function doAction(action, prms)
      			{
      				if(action == signOutUser) { signOutUser(); }
+      				else if (!checkToken()) { authorize(action, prms); }
      				else if(sentFalse) { authorize(action, prms); }
      				else if(!gapi.client.getToken()) { send("ready", false); sentFalse = true; }   				
      				else { findFile(action, prms.path.slice(1).split("/"), null, null, prms.buffer); }
@@ -1,14 +1,14 @@
-
-<!DOCTYPE html> 
+<!DOCTYPE html> 

-<html>
+<html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
+		<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=5.0, initial-scale=1.0" />
 		<meta name="thumbnail" content="https://www.photopea.com/promo/screens/scr5.png" />
 		<meta name="theme-color" content="#474747">
 		
 		<title>Photopea | Online Photo Editor</title>
+		<meta name="description" content="Photopea Online Photo Editor lets you edit photos, apply effects, filters, add text, crop or resize pictures. Do Online Photo Editing in your browser for free!" />
 		
 		<link rel="apple-touch-icon" href="promo/icon512.png">
 		<link rel="icon" sizes="512x512" href="promo/icon512.png">
@@ -16,55 +16,199 @@
 		<link rel="manifest" href="manifest.json">
 		<link rel="chrome-webstore-item" href="//chrome.google.com/webstore/detail/fmophgdjdipcbfjiopifpngdjmemonko">
 		
-		<meta name="description" content="Photopea Online Photo Editor lets you edit photos, apply effects, filters, add text, crop or resize pictures. Do Online Photo Editing in your browser for free!" />
-		
-		<link rel="stylesheet" href="style/all.css" />
-	
 		<style>		
+			body, button, input, textarea, select {  font-family: "Open Sans", "Segoe UI",  sans-serif;  }
+			body, input, select, button {  font-size: 13px;  }
+			
+			body {  background-image: radial-gradient(rgb(40,40,50), rgb(10, 0, 10));  }
 			#cap { 
-				font-size: 1.3em;
-				padding:2% 2% 1em 2%; background-color: #0f171d; /*background-image: linear-gradient(rgb(20, 20, 22), rgb(40,40,45));*/
-				color:#e6e6e6;  text-align:center;
-				/*position:absolute; z-index:10; margin:1em; border-radius: 1em;*/
+				font-size:1.2em;
+				padding:0 2% 1em 2%; 
+				color:#e6e6e6;
 			}
 			#cap a { color:inherit;  font-weight:bold;  }
 			#cap p { margin-bottom:1.5em;  line-height:1.5em;  }
-			h1 { font-size: 2.3em;  margin:0.5em 0; letter-spacing: 0em;  line-height:1.2em; }
-			strong { display:inline-block; font-size: 1.1em; background:rgba(0,0,0,0.1); padding:0.1em 0.5em; 
-					margin: 0.2em 0.5em 0.2em 0; border-radius:0.3em; font-weight:normal; line-height:1.7}
-		</style>
-		<script>
-			function showCap() {_showCap(true);}   function hideCap() {_showCap(false);}
-			function _showCap(vis){
-				document.getElementById("cap").setAttribute("style", vis?"":"display:none;");
-				window["locStor"].setItem("capShown", ""+vis);
+			#cap button {  color:white;  background-color:rgba(0,0,0,0.15);  border:2px solid #3482f6; cursor:pointer; font-size:1.3em; padding:0.4em 1em 0.5em 1em;  border-radius:500px;  display:block;  margin:30px auto;  transition: box-shadow .3s;  }
+			#cap button:hover {  box-shadow: 0 0 30px #3482f6;  }
+			#cap h1 { text-align:center;  font-size: 4em;  margin:0.5em 0 0 0;  }
+			
+			#mid {  max-width:1100px;  margin:0px auto;  }
+			#bar {  padding:0.4em 0;  line-height:2.5em;  }
+			#bar a {  text-decoration:none;  font-weight:normal;  margin:0 10px;  bottom:4px;  position:relative;  }
+			
+			
+			
+			.pair {  display:flex;  margin:3em 0;  }
+			.pair div {  width:50%;  }
+			.pair h2 {  margin:0;  }
+			
+			@media (max-width: 600px) {
+			.pair {  display:block;  margin:3em 1em;  }
+			.pair div {  width:100%;  }
 			}
-		</script>
+			
+			.pair p {  margin: 0.2em 0;  opacity:0.6;  }
+			.pair div {padding: 1em 0;}
+		</style>		
 	</head>
 	
 	<body class="theme0">		
 		<!---->
-		<div id="cap" style="display:none;">
-			<span style="position:absolute;right:0;top:0;font-size:7em;margin:0 0.2em;cursor:pointer;" onclick="hideCap()">✕</span>
-			<img style="width:8em; height:8em; margin-top:1em;" src="promo/icon512.png" alt="Photopea logo" />
-			<h1>Photopea: advanced photo editor</h1>
-			<p style="font-size:1.3em">Free online photo editor supporting <b>PSD</b>, <b>XCF</b>, <b>Sketch</b>, <b>XD</b> and <b>CDR</b> formats. 
-			(<b>Adobe Photoshop</b>, <b>GIMP</b>, <b>Sketch App</b>,  <b>Adobe XD</b> and  <b>CorelDRAW</b>).</p>
-			<p>Create a new image or open existing files from your computer. Save your work as PSD 
-			(File - Save as PSD) or as JPG / PNG / SVG (File - Export). Suggest new features at our
-			<a href="//github.com/photopea/photopea/issues" target="_blank">GitHub</a> or <a href="//www.facebook.com/photopea/" target="_blank">Facebook</a>. 
-			Our goal is to create <a href="https://blog.photopea.com/introduction.html" target="_blank">the most advanced and affordable photo editor</a>.</p>
-			<span><!--<a href="mailto:support@photopea.com">-->support@photopea.com<!--</a>--> 
-			| Reddit: <a target="_blank" href="//www.reddit.com/r/photopea/">/r/Photopea</a>
-			| <a target="_blank" href="/privacy.html">Privacy Policy</a></span>
+		<div id="cap">
+			<div id="bar">
+				<img style="width:36px; height:auto; margin:0 6px -6px 0" width="512" height="512" src="promo/icon512.png" alt="Photopea logo" /> 
+				<b style="font-size:34px;  margin-right:20px">Photopea</b>
+				<a target="_blank" href="//www.photopea.com/learn" title="Learn photo editing">Learn</a>
+				<a target="_blank" href="//www.photopea.com/tuts"  title="Graphics tutorials">Tutorials</a>
+				<a target="_blank" href="//www.photopea.com/templates" title="Free PSD templates">Templates</a>
+				<a target="_blank" href="//www.photopea.com/api"  title="Insert a photo editor into your product">API</a>
+			</div>
+			
+			<h1>Free Online Photo Editor</h1>
+			<h2 style="text-align:center">Unlock your creativity with the best free photo editor.</h2>
+			<p style="text-align:center; font-size:1em; opacity:0.6">Transform your photos with professional-grade tools in a free online photo editor that works right in your browser. No downloads, no hassle.</p>
+			<button onclick="addPP()">Start using Photopea</button>
+			
+			<div id="mid">								
+				<div class="pair">
+					<div style="text-align:center;">
+						<img src="img/table.webp" style="width:80%; height:auto;" width="800" height="800" alt="Photo editor on a laptop" />
+					</div>
+					<div>
+						<h2>Fully Local</h2>
+						<p>There are no uploads. Photopea runs on your device, using your CPU and your GPU. All files open instantly, and never leave your device.</p>
+						
+						<h2>Cost-Effective</h2>
+						<p>Enjoy all the premium features without spending a dime.</p>
+						
+						<h2>Convenient Editor</h2>
+						<p>No need to install heavy software on your device. Just open your browser and start editing.</p>
+						
+						<h2>Runs Everywhere</h2>
+						<p>Our photo editor runs on any device. The better hardware you have, the better it runs.</p>
+						
+						<button onclick="addPP()">Start using Photopea</button>
+						
+					</div>
+				</div>
+				
+				
+				<div class="pair">
+					<div>
+						
+						<h2>Professional Editor</h2>
+						<p>Photopea offers a full suite of editing tools, from basic features like cropping and resizing to advanced features such as layering, masking, and blending.</p>
+						
+						<h2>Full PSD support</h2>
+						<p>Photopea fully supports a popular PSD format, both opening and saving files. It is the main format of Photopea.</p>
+						
+						<h2>Swiss knife for graphics</h2>
+						<p>Open and edit PNG, JPG, GIF, BMP, WEBP, SVG, PDF, AI, AVIF, DDS, HEIC, TIFF, MP4, TGA, CDR, PDN, EPS, INDD, Figma and 
+						<a target="_blank" href="//github.com/photopea/photopea?tab=readme-ov-file#supported-formats">40 other formats</a>.</p>
+					
+						<h2>Perfect RAW support</h2>
+						<p>Photopea opens DNG, CR2, CR3, NEF, ARW, RW2, RAF, ORF and FFF files. Set the Exposure, Color Balance, 
+						Contrast, Highlights and Shadows, etc.</p>
+						<button onclick="addPP()">Start using Photopea</button>
+					</div>
+					<div style="text-align:center;">
+						<img src="img/hand_phone.webp" style="width:70%; height:auto;" width="1044" height="1328" alt="Photo editor on a phone" />
+					</div>
+				</div>
+				
+				
+				<div class="pair">
+					<div style="text-align:center">
+						<video style="width:80%; height:auto;" muted loop autoplay>
+						  <source src="img/goats.mp4" type="video/mp4">
+						</video>
+						<!---->
+					</div>
+					<div>
+						<h2>State-of-the-art AI</h2>
+						<p><a target="_blank" href="//x.com/photopeacom/status/1735723561950539852/video/1">Remove background with one click</a>,
+						or <a target="_blank" href="//x.com/photopeacom/status/1661425407944425494/video/1">replace any part of an image</a>
+						with a new content through a text description.</p>
+						
+						<h2>All Essential Features</h2>
+						<p>We have Layers, Masks, Layer Styles, Smart Objects, Adjustment Layers, Channels, Paths and more!</p>
+						
+						<h2>Adjustments and Filters</h2>
+						<p>Do you need Levels and Curves? A Gaussian Blur? Or advanced stuff such as Liquify or Puppet Warp? We have it all!</p>
+						
+						<h2>Vector Graphics</h2>
+						<p>Create and edit vector graphics directly within the editor. Perfect for designers working on logos, icons, or illustrations.</p>
+						
+						<button onclick="addPP()">Start using Photopea</button>
+					</div>
+				</div>
+				
+				<h2 style="text-align:center">Who Can Benefit from our Free Photo Editor?</h2>
+				<div class="pair">
+					<div>
+						<h2>Social Media Enthusiasts</h2>
+						<p>Enhance your photos before sharing them on platforms like Instagram, Facebook, or Twitter. Make every post stand out with unique edits.</p>
+
+						<h2>Students and Educators</h2>
+						<p>Create stunning visuals for presentations, assignments, and more. Our free online photo editor is a great tool for educational projects.</p>
+
+						<h2>Small Business Owners</h2>
+						<p>Design promotional materials, edit product photos, and create engaging content for your website or online store, all without spending on expensive software.</p>
+
+						<h2>Graphic Designers</h2>
+						<p>Whether you’re a freelancer or part of a design team, Photopea’s free photo editor offers all the features you need to produce professional-quality work.</p>
+							
+						<button onclick="addPP()">Start using Photopea</button>
+					</div>
+					<div style="text-align:center;">
+						<img src="img/laptop.webp" style="width:80%; height:auto;" width="853" height="853" alt="Freelancer using a photo editor" />
+					</div>
+				</div>
+				
+				<p style="text-align:center">
+				  <a href="mailto:support@photopea.com">support@photopea.com</a> 
+				| <a target="_blank" href="/privacy.html">Privacy Policy</a>
+				| <a target="_blank" href="//x.com/photopeacom">Twitter</a>
+				| <a target="_blank" href="//facebook.com/photopea/">Facebook</a>
+				| <a target="_blank" href="//reddit.com/r/photopea/">Reddit</a>
+				</p>
+			</div>
 		</div>
 		<!---->
 		
-		<script src="code/ext/ext.js"></script>	
-		<script src="code/dbs/DBS.js"></script>
-		<script src="code/pp/pp.js"></script>	
+		<script>
+			var cap = document.getElementById("cap"), added=false;
+			var href = window.location.href;
+			var ls = window.localStorage, ppp=null;  if(ls) {  ppp=ls.getItem("_ppp");  if(ppp) ppp=JSON.parse(ppp);  }  if(ppp==null) ppp={};
 			
-		<script>if(window["locStor"].getItem("capShown")=="false" || window.self != window.top) {}  else showCap();</script>
+			function addPP() {
+				cap.style.display="none";  
+				if(ppp) {  ppp["capShown"]="false";  ls.setItem("_ppp", JSON.stringify(ppp));   }
+				if(added) return;  added=true;  console.log("adding");
+				var fls = [
+					"style/all09.css",
+					"code/ext/ext1753387088.js",
+					"code/dbs/DBS1751979998.js",
+					"code/pp/pp1753360222.js"
+				];
+				var fromCDN = window.location.host=="www.photopea.com" && !window.location.href.endsWith("nocdn");
+				var ao = window.location.ancestorOrigins;
+				if(ao) for(var i=0; i<ao.length; i++) if(ao[i].indexOf("figma.com")!=-1) fromCDN=false;
+				
+				for(var i=0; i<fls.length; i++) {
+					var url = (fromCDN?"//vecpea.com/":"")+fls[i], isJS = url.endsWith(".js");
+					var el = document.createElement(isJS ? "script" : "link");
+					el.setAttribute(isJS ? "src" : "href",url);
+					if(!isJS) el.setAttribute("rel","stylesheet");
+					else el.async=false;
+					
+					(isJS ? document.body : document.head).appendChild(el);
+				}
+			}
+			
+			if(href.indexOf("#")!=-1 || href.indexOf("=")!=-1 || ppp["capShown"]=="false") addPP();
+			else cap.style.display="";		
+		</script>
 	</body>

 </html>
@@ -1,4 +1,203 @@
-
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 300 800;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/opensans/v40/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWtE6F15M.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 300 800;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/opensans/v40/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWvU6F15M.woff2) format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 300 800;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/opensans/v40/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWtU6F15M.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 300 800;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/opensans/v40/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWuk6F15M.woff2) format('woff2');
+  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+}
+/* hebrew */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 300 800;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/opensans/v40/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWu06F15M.woff2) format('woff2');
+  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
+}
+/* math */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 300 800;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/opensans/v40/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWxU6F15M.woff2) format('woff2');
+  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0330, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2034-2037, U+2057, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2102, U+210A-210E, U+2110-2112, U+2115, U+2119-211D, U+2124, U+2128, U+212C-212D, U+212F-2131, U+2133-2138, U+213C-2140, U+2145-2149, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B6, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
+}
+/* symbols */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 300 800;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/opensans/v40/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqW106F15M.woff2) format('woff2');
+  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8B1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA88, U+1FA90-1FABD, U+1FABF-1FAC5, U+1FACE-1FADB, U+1FAE0-1FAE8, U+1FAF0-1FAF8, U+1FB00-1FBFF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 300 800;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/opensans/v40/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWtk6F15M.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 300 800;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/opensans/v40/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWt06F15M.woff2) format('woff2');
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 300 800;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/opensans/v40/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWuU6F.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300 800;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu1aB.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300 800;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu1aB.woff2) format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300 800;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu1aB.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300 800;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu1aB.woff2) format('woff2');
+  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+}
+/* hebrew */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300 800;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu1aB.woff2) format('woff2');
+  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
+}
+/* math */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300 800;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTVOmu1aB.woff2) format('woff2');
+  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0330, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2034-2037, U+2057, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2102, U+210A-210E, U+2110-2112, U+2115, U+2119-211D, U+2124, U+2128, U+212C-212D, U+212F-2131, U+2133-2138, U+213C-2140, U+2145-2149, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B6, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
+}
+/* symbols */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300 800;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTUGmu1aB.woff2) format('woff2');
+  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8B1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA88, U+1FA90-1FABD, U+1FABF-1FAC5, U+1FACE-1FADB, U+1FAE0-1FAE8, U+1FAF0-1FAF8, U+1FB00-1FBFF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300 800;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu1aB.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300 800;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format('woff2');
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300 800;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

 	*{
 		border-style: solid;
@@ -8,8 +207,6 @@
 		column-rule-color: var(--bg-panel);
 	}
 	
-	body, button, input, textarea, select {  font-family: "Open Sans", Sans-Serif;  }
-	
 	.autoscale
 	{
 		width : var(--img20);
@@ -37,10 +234,6 @@
 		text-shadow:none;
 		line-height:0;
 	}
-	.svggallery svg {
-		margin:0 4px 4px 0;
-		cursor: pointer;
-	}
 	
 	.colorpicker .form .flabel, .numlist .flabel {
 		display: inline-block;
@@ -48,9 +241,6 @@
 	}
 	
 	body {overscroll-behavior-x: contain; /* two-finger swipe left can navigate to a previous website */}
-	body, input, select, button {
-		font-size: 13px;
-	}

 	body, button{
 		margin:0;
@@ -252,7 +442,7 @@
 	{
 		position:absolute;
 		width:100%;
-		/*pointer-events:none;*/
+		/*pointer-events:none;  - search bar aslo has this class, we need to click the options */ 
 		z-index: 10;
 		margin-top:5.5em;
 	}
@@ -282,6 +472,14 @@
 		background-color: rgba(0,0,0, var(--alphaDark) );	
 	}
 	
+	.vcolumn .cont {
+		overflow-y:scroll;
+		scrollbar-width:none;
+	}
+	
+	.vcolumn .cont::-webkit-scrollbar {
+		width: 0;
+	}
 	
 	.panelblock
 	{
@@ -608,7 +806,7 @@
 	
 	.head .arfx
 	{
-		width:1em;
+		width:1.6em;
 		border-left-width:1px;
 	}
 	
@@ -787,13 +985,43 @@
 	input[type='range']
 	{
 		vertical-align:middle;
-		height: 1.6em;
 		padding: 0;
 		border: none;
 		/*background-color: #000000;*/
 		/*box-shadow:  inset 0 0 60px rgba(0,0,0,0.5)*/
 	}
 	
+	.slider {
+	  -webkit-appearance: none;
+	  height: 3px;
+	  background-color: var(--text-color);
+	  outline: none;
+	  opacity: 0.4;
+	  transition: opacity .2s;
+	}
+
+	.slider:hover {
+	  opacity: 1;
+	}
+
+	.slider::-webkit-slider-thumb {
+	  -webkit-appearance: none;
+	  appearance: none;
+	  width: 11px;
+	  height: 11px;
+	  border-radius: 50%;
+	  background: var(--text-color);
+	  cursor: pointer;
+	}
+
+	.slider::-moz-range-thumb {
+	  width: 11px;
+	  height: 11px;
+	  border-radius: 50%;
+	  background: var(--text-color);
+	  cursor: pointer;
+	}
+	
 	.rangecontFloat, .floatcont {
 		background-color: var(--base);
 		border-radius:6px;
@@ -843,10 +1071,10 @@
 	.colorsample {
 		cursor:pointer;
 		width:2.2em;
-		height: 1.5em;
+		height: 1.57em;
 		display:inline-block;
-		border-width: 3px;
-		margin-bottom:-0.65em
+		margin-bottom:-0.55em;
+		border-radius: 3px;
 	}
 	
 	.cswatch .colorsample {
@@ -881,7 +1109,7 @@
 	}
 	
 	select {
-		padding: 2px 2px 3px 2px;
+		padding: 2px;
 	}
 	
 	
@@ -935,10 +1163,11 @@
 	
 	.imageset  .image, .imageset canvas
 	{
-		border-right: 1px solid rgba(0,0,0,0.2);
-		border-bottom: 1px solid rgba(0,0,0,0.2);
+		/*border-right: 1px solid rgba(0,0,0,0.2);
+		border-bottom: 1px solid rgba(0,0,0,0.2);*/
+		margin: 0 1px 1px 0;
 		cursor: pointer;
-		float:left;
+		vertical-align:middle;
 	}
 	.imageset .selected {
 		outline: 1.5px solid #00aaff;
@@ -1069,10 +1298,12 @@ input[type="checkbox"]:checked + label:before {  content: "\2713";  }
 	
 	.window  .whead
 	{
+		/*
 		border-top-width: 1px;
 		border-top-color: var(--brdrLgt);
 		border-bottom-width: 1px;
 		border-bottom-color:var(--brdrDrk);
+		*/
 		height:30px;
 		
 		font-size: 1.15em;
@@ -1293,260 +1524,18 @@ input[type="checkbox"]:checked + label:before {  content: "\2713";  }
 	}
 	
 	
-	/* cyrillic-ext */
-@font-face {
-	font-display: swap;
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/mem6YaGs126MiZpBA-UFUK0Udc1UAw.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-	font-display: swap;
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/mem6YaGs126MiZpBA-UFUK0ddc1UAw.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-	font-display: swap;
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/mem6YaGs126MiZpBA-UFUK0Vdc1UAw.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-	font-display: swap;
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/mem6YaGs126MiZpBA-UFUK0adc1UAw.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-	font-display: swap;
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/mem6YaGs126MiZpBA-UFUK0Wdc1UAw.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-	font-display: swap;
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/mem6YaGs126MiZpBA-UFUK0Xdc1UAw.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-	font-display: swap;
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/mem6YaGs126MiZpBA-UFUK0Zdc0.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-	font-display: swap;
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 700;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/memnYaGs126MiZpBA-UFUKWiUNhmIqOjjg.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-	font-display: swap;
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 700;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/memnYaGs126MiZpBA-UFUKWiUNhvIqOjjg.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-	font-display: swap;
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 700;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/memnYaGs126MiZpBA-UFUKWiUNhnIqOjjg.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-	font-display: swap;
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 700;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/memnYaGs126MiZpBA-UFUKWiUNhoIqOjjg.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-	font-display: swap;
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 700;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/memnYaGs126MiZpBA-UFUKWiUNhkIqOjjg.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-	font-display: swap;
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 700;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/memnYaGs126MiZpBA-UFUKWiUNhlIqOjjg.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-	font-display: swap;
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 700;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/memnYaGs126MiZpBA-UFUKWiUNhrIqM.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-	font-display: swap;
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-	font-display: swap;
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-	font-display: swap;
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-	font-display: swap;
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-	font-display: swap;
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-	font-display: swap;
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFW50bbck.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-	font-display: swap;
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-	font-display: swap;
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 700;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UN7rgOX-hpOqc.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-	font-display: swap;
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 700;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UN7rgOVuhpOqc.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-	font-display: swap;
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 700;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UN7rgOXuhpOqc.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-	font-display: swap;
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 700;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UN7rgOUehpOqc.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-	font-display: swap;
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 700;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UN7rgOXehpOqc.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-	font-display: swap;
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 700;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UN7rgOXOhpOqc.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-	font-display: swap;
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 700;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+	.confbar .body  .yesno {
+		padding: 0 3px 0 6px;
+		position: sticky;
+		right: 0;
+		background-color: var(--base);
+		/*box-shadow: 0px 0px 3px rgba(0,0,0,0.25);*/
+		border-left:2px solid rgba(0,0,0,0.15);
+		z-index:5000;
 	}
 		
 	
+
 	.storageset * { text-shadow:none; }
 	.storage * {position:relative; }
 	
@@ -19,7 +19,7 @@
 			var tpls, IFR=false, TYPE=0, RSRC=[], OTPLS;
 			var ccat = -1, caut = -1, citm = -1, ordr = 0, cscr = 0;  // current scroll
 			var lo=localStorage.getItem("ordr");  if(lo) lo=JSON.parse(lo);  if(lo && lo[1]>Date.now()-30000) ordr=lo[0];
-			var cont, cats, search, back, itms, kwds, add_link;
+			var cont, cats, search, back, itms, kwds, add_link, menubtn;
 			function clearNode(node) {  while(node.firstChild) node.removeChild(node.firstChild);  }
 			function isDisplayed(nd) {  while(true) {  if(nd==document) return true;  if(nd==null) return false;  nd=nd.parentNode;  }  }
 			
@@ -31,10 +31,11 @@
 				back = document.getElementById("back");  cont.removeChild(back);
 				itms = document.getElementById("itms");
 				add_link = document.getElementById("add_link");
+				menubtn  = document.getElementsByClassName("order")[0];
 				window.addEventListener("resize",onResize,false);  onResize();
 			
 				var request = new XMLHttpRequest();
-				request.open("GET", "../papi/tpls.json?r="+Date.now(), true);
+				request.open("GET", "../papi/tpls.json", true);
 				request.onload = imgsLoaded;
 				request.onerror = function(e) {  console.log(e.target.response);  }
 				request.send();
@@ -128,12 +129,21 @@
 			
 			function updateView() {
 				var w = window.innerWidth, h=window.innerHeight;
-				var sh = 90;  if(w<1000) sh=130;  if(w<800) sh=160;
-				itms.style.height=(h-sh)+"px";
-				cats.style.height=(h- 1)+"px";
 				
-				add_link.style.display=(false?"none":"inline-block");
-				add_link.textContent = TYPE==0 ? "Add your own template!" : (TYPE==1 ? "Add your own plugin!":"");
+				var tiny = w<560;
+				
+				cats.setAttribute("style", tiny ? "display:none; position:fixed; top:56px;  left:12px; background-color:#333333; z-index:2;" : "");
+				cont.setAttribute("style", tiny ? "padding: 10px 0 0 12px;" : "padding: 20px 0 0 30px;");
+				
+				menubtn.style.display=(!tiny)?"none":"";
+				
+				
+				kwds.style.width=(w-(tiny?326:526))+"px";
+				var sh = tiny?63:72;
+				
+				itms.style.height=(h-sh)+"px";
+				cats.style.height=(h- 1-(tiny?56:0))+"px";
+				
 				add_link.setAttribute("href",
 					TYPE==0 ? "//www.photopea.com/tuts/publish-your-psd-templates-in-photopea/" : "//www.photopea.com/api/plugins");
 			
@@ -153,7 +163,8 @@
 				var out = [];
 				if     (caut==-2) printAuthors  (tpls, out);
 				else if(caut==-3) printInstalled(tpls, out);
-				else              makeView(tpls,out,twds,wds,ccat,caut,citm);
+				else              makeView(tpls,out,twds,wds,ccat,caut,citm, w-(tiny ? 2*12 : 210+2*30));
+				
 				
 				itms.innerHTML=out.join("\n");
 				
@@ -163,9 +174,13 @@
 				
 				if(citm==-1) {
 					var ords = document.getElementsByClassName("order");
-					for(var i=0; i<3; i++) ords[i].setAttribute("class", "order"+(i==ordr ? " blue":""));
+					for(var i=0; i<3; i++) ords[i+1].setAttribute("class", "order"+(i==ordr ? " blue":""));
 				}
 			}		
+			function showMenu() {
+				var non = cats.style.display=="none";
+				cats.style.display=non?"":"none";
+			}
 			
 			function backClicked(e) {
 				if(IFR) rebuild("");
@@ -218,13 +233,19 @@
 	
 		<div id="cont">
 			<div id="search">
+				<span onclick="showMenu() " class="order">☰</span>
 				<span onclick="setOrder(0)" class="order blue">Hot</span>
 				<span onclick="setOrder(1)" class="order">New</span>
-				<span onclick="setOrder(2)" class="order" style="margin-right:2em">Top</span>
+				<span onclick="setOrder(2)" class="order" style="margin-right:1.7em">Top</span>
 				<span style="display:inline-block">
-					<label>Search:</label> <input type="text" id="kwds" oninput="updateView()" style="margin-right:1.5em;"></input>
+					<svg width="20px" height="20px" viewBox="0 0 24 24" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" style="vertical-align:middle;"><defs><style>.cls-1{fill:none;stroke:#a5a5a5;stroke-miterlimit:10;stroke-width:2.2px;}</style></defs><circle class="cls-1" cx="9.14" cy="9.14" r="7.64"/><line class="cls-1" x1="22.5" y1="22.5" x2="14.39" y2="14.39"/></svg>
+					<input type="text" id="kwds" oninput="updateView()" style="margin-right:0.5em;" size="10"></input>
 				</span>
-				<a id="add_link" href="//www.photopea.com/tuts/publish-your-psd-templates-in-photopea/" target="_blank">Add your own template!</a>
+				<a id="add_link" href="//www.photopea.com/tuts/publish-your-psd-templates-in-photopea/" target="_blank">
+				<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="vertical-align:middle;">
+				<path d="M15 12H12M12 12H9M12 12V9M12 12V15M17 21H7C4.79086 21 3 19.2091 3 17V7C3 4.79086 4.79086 3 7 3H17C19.2091 3 21 4.79086 21 7V17C21 19.2091 19.2091 21 17 21Z" stroke="#a5a5a5" stroke-width="2" stroke-linecap="round"/>
+				</svg>
+				</a>
 			</div>
 			<div id="back">
 				<span class="back" onclick="backClicked()">&lt; Back</span>
@@ -2,20 +2,20 @@
 			
 	body {  background-color:#333333;  font-family:"Open Sans";  color:#a5a5a5;  padding:0; margin:0;  font-size:14px;  }
 	
-	#cont {  background-color:#1d1d1d;  padding: 26px 0 0 30px;  width:100%;  }
+	#cont {  background-color:#1d1d1d;  width:100%;  }
 	
 	a {  /*text-decoration: inherit;*/  color: inherit;  }
 	
 	.title {  display:block;  color:white;  }
-	.item {  position:relative;   display:inline-block;  margin:0 14px 20px 0;  overflow:hidden;  }
-	.item img {  height: 100%; width: 100%; object-fit: contain;  cursor:pointer;  }
+	.item {  position:relative;   display:inline-block;  margin:0 14px 24px 0;  overflow:hidden;  }
+	.item img {  height: 100%; width: 100%; object-fit: contain;  cursor:pointer;  border-radius:12px;  background-color:#333333;  }
 	.item img:hover {  object-fit: cover;  }
 	.cat {  margin:9px;  padding:2px 0px;  cursor:pointer;  }
 	.top {  margin-left: 0px;  }
 	.clickable: {  cursor:pointer;  }
 	.blue {  border-bottom: 3px solid #00eeff;  margin-bottom:-3px;  }
 	.clickable:hover {color:#00eeff;}
-	.back {  display:inline-block; background-color:rgba(0,0,0,0.5);  cursor:pointer;  padding:6px 1em;  margin: 0.2em 0 0.6em 0;  font-size:1.5em;  }
+	.back {  display:inline-block; background-color:rgba(0,0,0,0.5);  cursor:pointer;  padding:6px 1em;  margin: 0.2em 0 0.6em 0;  font-size:1.2em;  border-radius:6px;  }
 	.count {  float:right;  }
 	.cat_title {font-size:1.6em;  display:inline-block;  margin:4px 0 10px 0;}
 	.t2 {font-size:1.2em;  }
@@ -25,31 +25,21 @@
 	h1 {font-size:2em;  margin-top:0;  margin-bottom:0.4em;  font-weight:normal; }
 	#cats {  padding:0px 20px;  min-width:180px;  color:white;  }
 	#cats a {  text-decoration:none;  }
-	#search {  font-size:1.3em;  margin-bottom: 24px;  line-height:2em;  }
-	#kwds {  font-size:1.0em;  background-color: black;  border:none;  color:white;  padding:3px; margin-left:0.5em;  }
+	#search {  font-size:1.2em;  margin-bottom: 1em;  line-height:2em;  user-select:none;  }
+	#kwds {  font-size:1.0em;  background-color: black;  border:none;  color:white;  padding:3px; margin-left:0.5em;  border-radius:6px;  border:1.5px solid rgba(255,255,255,0.25);  }
 	
-	.order {  margin-right:1.5em;  cursor:pointer;  }
+	.order {  margin-right:1.3em;  cursor:pointer;  }
 	
-	.post {min-width:1000px; margin-top:4px;}
-	.post_big {  padding:24px;  }
 	.clc {  text-decoration:none;  }
 	.clc:hover {  color:#00eeff;  }
 		
 	.scrollable {
 		overflow-y: scroll;
 		/* for Firefox: */
-		scrollbar-color: #222222 #1d1d1d;
+		scrollbar-color: rgba(255,255,255,0.15) rgba(0,0,0,0);
 		scrollbar-width: thin;
 	}
-	.scrollable::-webkit-scrollbar {
-	  width: 8px;
-	  background: #1d1d1d; 
-	}
-	.scrollable::-webkit-scrollbar-thumb {
-		background: rgba(255,255,255,0.5); 
-		border-radius: 6px;
-		margin:4px;
-	}
+	
 	.flexrow {
 		display:flex;
 		flex-flow:row;
@@ -62,7 +62,7 @@
 		out.push("</table>");
 	}
 	
-	function makeView(tps,out,twds,wds,curc,caut,cit) {
+	function makeView(tps,out,twds,wds,curc,caut,cit, w) {
 		var list = tps.list, cts=tps.categories;				
 		if(cit==-1) {
 			if(caut!=-1) out.push("<h1 style=\"font-size:2.4em\"><a "+OC("-a")+" class=\"clc\">×</a> <b>"+escapeHtml(tps.authors[caut][1])+"</b></h1>");
@@ -82,15 +82,29 @@
 					}
 					if(occ==0) continue;
 				}
-				makeItem(tps,i, cts,out, false);
+				if(N<300) makeItem(tps,i, cts,out, false, w);
 				N++;  U+=tpl[7];  S+=tpl[8];
 			}
 			if(caut!=-1) out[oi]="<p>"+N+" Templates • "+printNum(U)+" "+uses()+" • "+printBytes(S)+"</p>";
 		}
 		else {
 			var tpl = list[cit];
-			makeItem(tps,cit,cts,out, true);
-			out.push("<iframe src=\"comments.html#"+tempID(tpl)+"\" frameborder=\"0\" style=\"border:none;  max-width:800px; width:calc(100% - 20px); height:800px; background-color:white;\"></iframe>");
+			makeItem(tps,cit,cts,out, true, w);
+			var scr = document.createElement("script");
+					var ats = {  "async":"","defer":"","crossorigin":"anonymous",
+					"src":"https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v22.0&appId=423117247858550" };
+					for(var at in ats) scr.setAttribute(at, ats[at]);
+					document.body.appendChild(scr);
+					
+					var url = "https://www.photopea.com/templates#"+tempID(tpl);//, href = window.location.href, ioh=href.indexOf("#");
+					
+					//var out = [];
+					out.push("<div id=\"fb-root\"></div>");
+					out.push("<div style=\"background-color:white; max-width:1000px; margin-right:16px;\"><div class=\"fb-comments\" data-href=\""+url+"\" data-width=\"100%\" data-order-by=\"reverse_time\" data-numposts=\"5\"></div></div>");
+					//var div = document.createElement("div");
+					//div.innerHTML = out.join("\n");
+					//document.body.appendChild(div);
+			//out.push("<iframe src=\"comments.html#"+tempID(tpl)+"\" frameborder=\"0\" data-order-by=\"time\" style=\"border:none;  max-width:800px; width:calc(100% - 20px); height:800px; background-color:white;\"></iframe>");
 		}
 	}
 	
@@ -108,21 +122,22 @@
 		t.setAttribute("style", "object-position: 50% 50%;");
 	}
 	function toID(str) {  return str.toLowerCase().replace(/\s+/g, "-")+".html"; }
-	function makeItem(tps, ind,cts,lst, big) {
+	function makeItem(tps, ind,cts,lst, big, rst) {
+		var tall = window.innerWidth*0.8<window.innerHeight;
 		var tpl = tps.list[ind], gotR = RSRC.indexOf(tpl[3])!=-1;
-		var rst = window.innerWidth-(245+30)-2;  //console.log(iw);
-		var num = 1;  while(rst/num>300) num++;
+		//console.log(iw);
+		var num = 1;  while(rst/num>340) num++;
 		var cc = Math.floor(rst/num);  //console.log(cc);
 		var isz = cc-16;  //console.log(isz);
 		
 		var tit = escapeHtml(tpl[9]);
 		var lim = ~~(isz/9);  //console.log(tpl);
 		
-		if(big) isz=rst/2;
+		if(big) isz=tall ? rst-14 : rst/2;
 		var wi = (isz+"px");
-		var hi = ((isz*9.3/16)+"px");
+		var hi = ((isz*9/16)+"px");
 		
-		lst.push("<div class=\"item "+(big?"flexrow":"tiny")+"\" "+(big?"":"style=\"width:"+wi+";\" ")+">");
+		lst.push("<div class=\"item "+(big?(tall?"":"flexrow"):"tiny")+"\" "+(big?"":"style=\"width:"+wi+";\" ")+">");
 		
 		var iurl = tpl[4]; //(Math.random()<0.5?"wide.png":"tall.png");  // tpl[3]
 		//*
@@ -135,7 +150,7 @@
 		//if(big) lst.push("<div class=\"openimg\" style=\"width:"+wi+"; height:"+hi+";\" "+(big ? "onclick=\"itemClicked("+ind+")\" title=\"Open &quot;"+tit+"&quot;\"" : "")+"><br/><br/>Open</div>");
 		if(!big) lst.push("</a>");
 		lst.push("</div>"); // ict
-		lst.push("<div class=\""+"post"+(big?"_big":"")+"\">"); // cmt
+		lst.push("<div style=\""+(big?(tall?"padding-top:20px;":"padding:24px;"):"margin-top:16px;min-width:1000px;")+"\">"); // cmt
 		
 		if(!big) lst.push("<a class=\"clc\" "+OC("t-"+tempID(tpl))+" title=\""+tit+"\">");
 		var tag = big?"h1":"span";
@@ -151,8 +166,8 @@
 		lst.push("</span>");
 		
 		if(big) {
-			lst.push("<p>"+findLinks(escapeHtml(tpl[10]))+"</p>");
-			lst.push("<p style=\"font-size:1.5em; margin-bottom: 0em;\">");
+			lst.push("<p style=\"white-space: pre-line;\">"+findLinks(escapeHtml(tpl[10]))+"</p>");
+			lst.push("<p style=\"font-size:1.3em; margin-bottom: 0em;\">");
 			var dstr = printDate(tpl[2]);
 			
 			lst.push("<span title=\""+printNum(tpl[6])+" views"+"\">"+printNum(tpl[7])+" "+uses()+"</span>")
@@ -273,7 +288,7 @@
 	function getCats(tps, curr,out) {
 		var cts=tps.categories, ccnt = getCatCounts(tps);	
 		out.push("<br/>");
-		out.push("<span class=\"cat top clickable\"><a "+OC("authors")+">AUTHORS</a></span>");			
+		out.push("<span class=\"cat top clickable\"><a "+OC("authors")+">AUTHORS</a></span><br/>");			
 		out.push("<span class=\"cat_title\">CATEGORIES</span>");
 		for(var cat in cts) {
 			if(ccnt[cat]==0) continue;
@@ -299,7 +314,7 @@
 	function cost0(v) {
 		var age = (Date.now()*0.001 - v[2]) / (60*60*24);  // age in days
 		var cst = (v[7]+1) / age;  // usages per day
-		var ext = 20*Math.pow(Math.PI,-age*0.15);
+		var ext = 60*Math.pow(Math.PI,-age*0.15);
 		
 		return cst+ext;
 	}
Author	SHA1	Message	Date
DUOLabs333	43f90f0ae5	Update, and fix "port-lock" workaround to work again and (hopefully) be a little more future-proof.	2025-07-24 23:37:43 -04:00
DUOLabs333	760805ada5	Temporary changes to make debugging more amenable	2025-07-24 15:43:54 -04:00
DUOLabs333	528742b32a	Specify UTF-8 encoding when reading and writing files in find_and_replace This works around an issue on Windows --- by default, Windows uses CP1252, while the files from photopea.com are encoded in UTF-8.	2024-12-24 17:22:31 -05:00
DUOLabs333	15c1cb088a	Photopea no longer uses stable names for some of its resources, so use regex to extract the new names. Also, commit snapshot of site.	2024-10-04 17:09:34 -04:00
DUOLabs333	593f843f6c	Periodic pull	2024-03-22 09:14:39 -04:00