Upload 26 files

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+rsrc/fonts/fonts.png filter=lfs diff=lfs merge=lfs -text
+rsrc/fonts/fs/DejaVuSans.otf filter=lfs diff=lfs merge=lfs -text

code/ext/fribidi.wasm

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6e7b7b51bd82c45e6dff9cd4afeab8826565a19cba7bb5bbf59965ea84976233
+size 33491

code/ext/hb.wasm

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:35b7500cec0f1967a4230cf0676cfb29db0e97bf93f44acc3decdb8a44580afa
+size 443719

code/lang/0.js

@@ -0,0 +1 @@
+[File;Edit;Image;Layer;Folder;Select;Filter;View::noun (Top Menu);Window;Language;Log In;Log Out;Create translation::Click it to get to www.Photopea.com/translate;[Account;Terms of Service;Back;About::"About a program" - the orange button at the top;Report a bug;Learn];More;Theme;Use WebGL;[Photopea: advanced image editor::The header at the top of the page;Free online editor supporting PSD, AI, PDF, SVG and CDR formats.::Will be at the top of the page;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 as).::Will be at the top of the page;Suggest new features at our <GitHub> or <Facebook>. Our goal is to create <the most advanced and affordable photo editor>.::Parts between < and > will become links.;Sponsor links open in a new window.;This feature is not available.;Install Photopea;Drop any files here]];[Open::verb;Publish online;Save::verb;Save as PSD;Print::Press to print on a printer;Open from URL;Open From Computer;Connect With Google Drive;Export as;Export Layers;Script;Open & Place::Open a document and insert it into a current document;[Close;OK::if you keep it empty, "OK" will be used;Reset::if you keep it empty, "Reset" will be used];Local Storage;File Info;Preset Manager;[Artboard;Artboards;New Artboard;Artboard from Layers];Automate;Share;[Storage;From Storage;To Storage;Home;This Device;Give VAR0 a direct access to VAR1.::VAR0 will be replaced with Photopea, and VAR1 will be replaced with Goolge Drive, Dropbox, etc.]];[Step Forward::In history of changes;Step Backward::In history of changes;Clear::Verb, press to clear the selected area;Fill::Verb, press to fill the selected area;Transform::Transform the image;Rotate;Flip VAR0::VAR0 will be replaced with Horizontally/Vertically;Scale VAR0::VAR0 will be replaced with Horizontally/Vertically;Undo / Redo;Perspective;[Auto-Blend::Auto-Blend layers together;Auto-Align::Auto-Align layers against each other];Fade;Apply Image;Defringe;Variables];Adjustments;[Brightness/Contrast;Levels::Levels adjustment;Curves::Curves adjustment;Exposure;Vibrance;Hue/Saturation;Color Balance;Black & White;Photo Filter;Channel Mixer;Color Lookup;Invert;Posterize;Threshold;Gradient Map;Selective Color;[Auto Tone;Auto Contrast;Auto Color];Replace Color;Match Color];[Cut;Copy;Paste::like "insert", not like "toothpaste";New;Delete;Enable;Disable;Copy Merged::Copy not from a layer, but from all layers (all merged together);Apply::Apply Mask - "combine" it with a layer;Again::Repeat the same aciton one more time;Update::A verb];[Duplicate Layer;New Adjustment Layer;Raster Mask;Vector Mask;Add (Reveal All)::Add a mask;[Add (Hide All)::Add a mask;Reveal Selection;Hide Selection;From Transparency];[Clipping Mask;Quick Mask Mode];[Convert to Smart Object;Smart Object];Rasterize::Convert Text layer/vector layer to pixels;Group Layers::Put selected layers into a new group;Merge Down::Merge a layer with one below it;Merge Up::Merge a layer with one above it;[Merge Layers::Merge selected layers;Flatten Image::Merge all layers in a document into one];New Layer;Enable Raster Mask;Disable Raster Mask;Enable Vector Mask;Disable Vector Mask;Enable Clipping Mask;Disable Clipping Mask;New Folder;Add Raster Mask;Delete Raster Mask;Add Vector Mask;Delete Vector Mask;Link Raster Mask;Unlink Raster Mask;Link Vector Mask;Unlink Vector Mask;Enable Layer Effects;[Disable Layer Effects;Scale Effects];Delete Layer;Layer Opacity Change;Blending Change;Rasterize Layer Style;Layer Order::Name of the step, when reordering layers;[Creating Smart Object;Updating Smart Object;Placing Smart Object;Source (Smart Object);Stack Mode::the mode of combining (stacking) multiple images into one];Name Change;Color Change;Edit Adjustment Layer;Convert to Shape;Enable Filter Mask;Disable Filter Mask;Enable Smart Filters;Disable Smart Filters;Add Filter Mask;Delete Filter Mask;Clear Smart Filters;[[Color Fill;Gradient Fill;Pattern Fill;Content Aware];New Fill Layer;Modify Fill Layer];[Layer Via Copy;Layer Via Cut];Filter Mask;Delete Layer Style;Move Smart Filter;Delete Smart Filter;[Link Layers;Unlink Layers];Arrange::Arrange layers;[Bring to Front;Bring Forward;Send Backward;Send to Back];[This layer is Locked.;Lock Change;Lock::noun - a lock on a layer];Animation];[All::As in Select - All;Deselect;Inverse;Modify;Expand::Expand Selection;Contract;Feather::Feather (blur) a Selection;Move Selection;Color Range;Border::The border of a Selection;Transform Selection;Refine Edge::A tool for improving the edge of a selection;Heal Selection;Magic Cut;Subject:: Select - Subject;Grow:: Select - Grow;Similar:: Select - Similar];[Zoom In;Zoom Out;Guides::Vertical and horizontal lines over the image, to help us be more precise;Rulers;Grid;Snap::When moving objects, they will "stick" to other objects, guides, etc.;Snap To;[Document Bounds;All Documents];Pixel Grid;Paths::Elements of vector graphics;Snap to Pixels;[Slices;Slice Options;Clear Slices;Slices from Guides];Show::A verb: to show.;Extras::Visual elements, that are not printed (guides, grid, selections ...);Pattern Preview];[History::History of steps;Layers;Properties;Brush::A brush tool;Character::= a Letter (like a, b, c, ...);Paragraph;Info;Layer Comps::Compositions of layers;Swatches::Gallery of colors;Actions;Histogram::Usually the same in other languages;Navigator;Tool Presets;Glyphs;Notes];[Brush Tool;Clone Tool;Crop Tool;Eraser Tool;Ellipse Select;Eyedropper::A tool to pick color from the image;Gradient Tool;Hand Tool::To move (pan) across the image area;Type Tool;Lasso Select;Magnetic Lasso Select;Move Tool;Magic Wand;Paint Bucket Tool;Polygonal Lasso Select;Rectangle Select;Free Transform;Zoom Tool;Blur Tool;Sharpen Tool;Smudge Tool;Dodge Tool::Make Brighter;Burn Tool::Make Darker;Sponge Tool::Desaturate;Spot Healing Brush Tool;Healing Brush Tool;Patch Tool::Cut from one place and put to another place;Path Select::a tool to select / move paths;Direct Select::a tool to select / move knots of paths;Pen;Free Pen::Draw freely with this pen;Custom Shape;Rectangle;Ellipse;Parametric Shape;Line;Ruler::A ruler tool to measure distances;Quick Selection;Pencil Tool;Perspective Crop;Slice Tool;Slice Select Tool;Color Replacement;Red Eye Tool;Object Selection;Background Eraser;Puppet Warp;Rotate View;Content-Aware Scale;Content-Aware Move Tool;Artboard Tool;Curvature Pen;Magic Eraser;Color Sampler];[Take a picture::Press the button to take a picture;Color Picker;Contour Editor;Canvas Size;Duplicate Into ...;Gradient Editor;Layer Style;New Project;Save for web;Warp;Image Size;[Vectorize Bitmap::Convert raster pixels into vector paths;Reduce Colors::Reduce the number of colors in the image (Edit - Reduce Colors)];[Trim::cut away an empty area around the object;Crop::(verb) Crop the image;Reveal All];Keyboard Shortcuts;Add Guides;[Clear Guides;Guides from Layer;Lock Guides]];[Opacity;Effects;Brightness;[Contrast;Use Legacy];Channel::Color Channel;Exposure;Offset;Gamma correction;Hue;Saturation;Lightness;Colorize;Range;Vibrance;[Size;Interpolation;Nearest Neighbor;Bilinear;Bicubic Sharper];Angle;Roundness;Hardness;Spacing;[Blend Mode;Blend If::Specifies a tonal range for blending];[Sample Size;Sampling Ring];Contour;Style;[Reverse;Relative::When ON, you only write a number, which will be added to the original value;Anchor::To which side the object should be anchored;Dither::Enable dithering];Tolerance;[Contiguous;Anti-alias;Sample All Layers;Resample;Continuous::adapt continuously, while moving;Once::one time];Fill::Noun, the content (filling) of something.;Use global angle;Distance;Spread::Spread the effected area;Noise::add random image noise;Knock out drop shadow::No drop shadow behind the object;Technique;Direction;Depth;Soften;Mode::One of possible modes of the effect;Gradient::from one color to another;Scale::scale the content - 10% or even 200%;Align with layer;Position::Position of the effect;Width;Height;Destination;Type;Foreground;Background;Custom::Color: not foreground or background, but a custom color;Name::Name of something;Create;Format;Keep Aspect Ratio;[Quality;Pages];Duplicate;Move::When you move layers, the Move step will be added to History;Smart Filters;Radius;Amount::Strength of the effect (0 ... 100);Distribution;[Uniform::uniform random distribution;Gaussian];Monochromatic;Cell Size::Mosaic filter creates "cells";Pattern;Flow::A brush has the opacity and the flow;Strength;Protect Detail;Fill Type;Texture;Jitter::Add Noise in Outer Glow;Edge::The inner glow is either from the center, or from the Edge;Source;Target;Channels;Mask::A noun, e.g. a vector mask or a raster mask ;Density;Aligned;[Path;Shape;Pixels;Inches;Centimeters;Millimeters;Percent;Current Path];Shapes;Sides;Preferences;[Length;Ratio;Any::Any ratio of a rectangle;Grid Type;Isometric;Grid Gap;Ruler Units];Reduce noise;Colors;Distances;Rate::Liquify filter: Rate of modification;Auto-Select::Move tool option: click the object to select its layer;Find;Define New;[Photo;Screen::computer screen;Mobile::Mobile device;Ads::Advertisement;Print::A noun];[Free::Not Restricted / Not Limited;Fixed Ratio;Fixed Size];Help;[Live Shape::Shape, that can be reconstructed from parameters at any time;Edit Live Shape;Same Radii::all radiuses of a rectangle should be the same];Fuzziness;[Polygon;Star;Spiral;Square;Arrow;Circle;Dot];[Corner Radius;Inner Radius;Simplify];[Sharp;Crisp;Strong;Smooth]];[Color;[None::No Color;Red;Orange;Yellow;Green;Blue;Purple;Gray;White;Transparent;Black;Cyan::A color;Magenta::A color;Neutral::Apply to neutral colors];Total;Absolute;Preserve Luminosity;Preserve Transparency;Profile::Color Profile];[Drop Shadow;Inner Shadow;Outer Glow;Inner Glow;Bevel and Emboss;Color Overlay;Gradient Overlay;Pattern Overlay;Satin;Stroke::Thick line around an object;Blending Options;Select Pixels];[Tip Shape;Tip Dynamics;Scatter::dont put brush exactly, but randomly around the target spot;Color Dynamics;[Size Jitter::change the size randomly;Minimal Diameter;Angle Jitter::change the angle randomly;Roundness Jitter::change the roundness randomly;Minimal Roundness];[Position Jitter;Count::The number of brush tips;Count Jitter];[Foreground/Background Jitter;Hue Jitter;Saturation Jitter;Brightness Jitter];[Select clone source by holding Alt (or K) and clicking on the image.;Mark Foreground with White, Background with Black, and the unknown area with Gray.;Layer is not editable.;Text Layer must be rasterized first;Smart Object must be rasterized first;Select multiple layers;Straighten Layer::Will rotate the layer, so that the horizon is horizontal;Open a document first.;Close the current window first.;Current Tool Only::Tool Presets only for the current tool;Delete Cropped Pixels];[Record::To record actions;New Action Set;New Action];[Stylus Pressure controls Opacity;Stylus Pressure controls Size];[Normal::One of Blend Modes (when empty, English version will be used);Dissolve::One of Blend Modes (when empty, English version will be used);Darken::...;Multiply::...;Color Burn::...;Linear Burn::...;Darker Color::...;Lighten;Screen;Color Dodge;Linear Dodge;Lighter Color;Overlay;Soft Light;Hard Light;Vivid Light;Linear Light;Pin Light;Hard Mix;Difference;Exclusion;Subtract;Divide;Hue;Saturation;Color;Luminosity;Pass Through::Blend Mode only for Folders;Add::Mathematically]];[Leading::Text style - vertical distance between lines;Tracking::Text style - horizontal spacing between characters;Baseline shift::Move the bottom line of the text;[Convert to Point Text;Convert to Paragraph Text]];[All Layers;Current Layer;Selection;Current & Below::Current layers and all layers below it];[Replace::The new thing replaces the old one;Unite;Subtract;Intersect;Exclude;Merge];[[Linear;Radial;Angle;Reflected;Diamond;Shape Burst];[Softer;Precise];[Outer Bevel;Inner Bevel;Emboss;Pillow Emboss;Stroke Emboss;Stroke Width::The thickness of the stroke line (contour)];[Smooth::A verb: to smooth something;Chisel Hard;Chisel Soft;Smoothness];[Up;Down];[Outside;Center;Inside;From Center::Draw an object from the center];[Shadows;Midtones;Highlights];[Desaturate;Saturate];[Small;Medium;Large];[Caps;Corners;Dashes]];[Choose the object under the cursor;Transform controls;Pixel to Pixel::Zoom the image to 100% (1 image pixel = 1 screen pixel);Fit The Area;[Align Left Edges;Center Horizontally;Align Right Edges;Align Top Edges;Center Vertically;Align Bottom Edges;Equal Gaps::Equal spacing between objects]];[Place into::Place the new photo into:;Current Project;New Project;Resolution;Added into the current project.;A new project was created.;Access to the camera was denied.];[Orientation::Vertical or horizontal;Bend::Text warping: bend the text to a wave, etc.;Horizontal Distortion;Vertical Distortion;[Horizontal;Vertical;Horizontally;Vertically];[None::No Warp;Arc;Arc Lower;Arc Upper;Arch;Bulge;Shell Lower;Shell Upper;Flag;Wave;Fish;Rise;Fish Eye;Inflate;Squeeze;Twist;Custom];[Font;is not available;Will be rendered using;There is unsaved work in::File name will be added after this;Do you really want to close it?];[Swap Colors;Default: White and Black]];[loaded::File was loaded;added::Font was added;Move Guide;Delete Guide;Add Guide;Loading;Load VAR0::Keep VAR0 in a phrase, it will be replaced with a Noun when used];[Filter Gallery;[[Liquify::A filter;[Smudge::Draw over image to spread colors along your stroke;Reconstruct::Recover to original state;Smoothen::Make the effect more smooth;Twirl::Rotate in a spiral;Shrink::Make smaller;Blow::Make bigger;Push Left::ush colors to the left along the stroke;Freeze;Unfreeze]];[Lens Correction]];Blur::A noun;[Average::Average filter - fills the image with an average color;Blur:: A verb;Blur More;Box Blur;Gaussian Blur;Lens Blur;Motion Blur;Radial Blur;Shape Blur;Smart Blur;Surface Blur;Blur Gallery;[Field Blur;Iris Blur;Tilt-Shift;Path Blur;Spin Blur]];Distort;[Displace::Filter: move parts of image according to the brightness from another image;Pinch::Blow or shring around the center;Polar Coordinates;Ripple::Add tiny waves to the image;Shear;Spherize;Wave;ZigZag;Kaleidoscope];Noise::Filetr => Noise;[Add Noise;Despeckle;Dust & Scratches;Median;Reduce Noise];Pixelate;[Color Halftone;Crystallize;Facet;Fragment;Mezzotint;Mosaic;Pointillize];Render;[Clouds;Difference Clouds;Lens Flare;Flame;Fibers];Sharpen;[Sharpen;Sharpen Edges;Sharpen More;Smart Sharpen;Unsharp Mask];Stylize;[Diffuse;Emboss;Extrude;Find Edges;Oil Paint;Solarize;Trace Contour;Wind];Other;[Custom::A Custom kernel of the convolution;High Pass;Maximum;Minimum;Offset::Filter: shift the image horizontally and vertically;Repeat::Filter: Repeat the image many times;Color to Alpha::this filter makes a specific color transparent;Particles;Normal Map];[Undefined Area;Set to Transparent;Repeat Edge Pixels;Wrap Around;Last Filter;Preview];[Artistic;Brush Strokes;Sketch];[Colored Pencil::Following phrases are Filters in the Filter Gallery. Keep them empty to keep the English version in Photopea.;Cutout;Dry Brush;Film Grain;Fresco;Neon Glow;Paint Daubs;Palette Knife;Plastic Wrap;Poster Edges;Rough Pastels;Smudge Stick;Sponge;Underpainting;Watercolor;Accented Edges;Angled Strokes;Crosshatch;Dark Strokes;Ink Outlines;Spatter;Sprayed Strokes;Sumi-e;Diffuse Glow;Glass;Ocean Ripple;Bas Relief;Chalk & Charcoal;Charcoal;Chrome;Conté Crayon;Graphic Pen;Halftone Pattern;Note Paper;Photocopy;Plaster;Reticulation;Stamp;Torn Edges;Water Paper;Glowing Edges;Craquelure;Grain;Mosaic Tiles;Patchwork;Stained Glass;Texturizer::The last filter in the Filter Gallery.];[Edge Width;Edge Brightness;Sharpness;Spray Radius;Light/Dark Balance;Darkness;Distortion;Relief;Thickness;Stroke Pressure;Paper Brightness;Brush Size;Brush Detail;Highlight Area;Intensity;Glow Brightness;Stroke Size;Stroke Detail;Softness;Edge Thickness;Edge Intensity;Edge Simplicity;Edge Fidelity;Posterization;Definition;Texture Coverage;Shadow Intensity;Balance;Direction Balance;Image Balance;Black Intensity;White Intensity;Dark Intensity;Light Intensity;Stroke Width;Stroke Length;Graininess;Glow Amount;Clear Amount;Charcoal Area;Chalk Area;Foreground Level;Background Level;Fiber Length;Crack Spacing;Crack Depth;Crack Brightness;Tile Size;Grout Width;Lighten Grout;Square Size;Ripple Size;Ripple Magnitude;Number of Levels;Glow Size;Glow Color;Detail;Brush Type;Grain Type;Light];[Blocks;Canvas;Frosted;Tiny Lens;Bricks;Burlap;Sandstone];[Simple;Light Rough;Dark Rough;Wide Sharp;Wide Blurry;Sparkle];[Regular;Soft;Sprinkles;Clumped;Contrasty;Enlarged;Stippled;Speckle];[Right Diagonal;Left Diagonal];[Bottom;Bottom Left;Left;Top Left;Top;Top Right;Right;Bottom Right]];[Templates;[Font Filter;Keywords;Randomize];[With Symbols;With Photo];[Thumbnails;List]]

code/lang/8.js

@@ -0,0 +1 @@
+[Файл;Редактирование;Изображение;Слой;Папка;Выделить;Фильтр;Просмотр;Окно;Язык;Войти;Выйти;Создать перевод;[Аккаунт;Условия использования;Назад;О сайте;Сообщить об ошибке;Обучение];Ещё;Тема;Использовать WebGL;[Photopea: расширенный редактор изображений;Бесплатный онлайн-редактор, поддерживающий форматы PSD, AI, PDF, SVG и CDR.;Создайте новое изображение или откройте существующие файлы с компьютера. Сохраните свою работу как PSD («Файл» – «Сохранить как PSD») или как JPG / PNG / SVG («Файл» – «Экспортировать как»).;Предлагайте новые возможности в нашем <GitHub> или <Facebook>. Нашей целью является создание <наиболее продвинутого и доступного по цене редактора фотографий>.;Ссылки на спонсоров открываются в новом окне.;Эта функция недоступна.;Установить Photopea;Перетащите сюда любые файлы]];[Открыть;Опубликовать в сети;Сохранить;Сохранить как PSD;Печать;Открыть по ссылке;Открыть с компьютера;Подключиться к Google Диску;Экспортировать как;Экспортировать слои;Скрипты;Открыть и поместить;[Закрыть;Подтвердить;Сбросить];Локальное хранилище;Информация о файле;Менеджер предустановок;[Монтажная область;Монтажные области;Новая монтажная область;Монтажная область из слоёв];Автоматизировать;Поделиться;[Хранилище;Из хранилища;В хранилище;Главная страница;Это устройство;Предоставьте VAR0 прямой доступ к VAR1.]];[Шаг вперёд;Шаг назад;Очистить;Заливка;Трансформация;Поворот;Отразить VAR0;Масштабирование VAR0;Отмена / Повтор;Перспектива;[Автосмешивание;Автовыравнивание];Ослабить;Внешний канал;Обрезка;Переменные];Коррекции;[Яркость/Контрастность;Уровни;Кривые;Экспозиция;Сочность;Тон/Насыщенность;Цветовой баланс;Чёрно-белое;Фотофильтр;Микширование каналов;Поиск цвета;Инвертировать;Постеризация;Порог;Карта градиента;Выборочный цвет;[Автотон;Автоконтраст;Автоцветокоррекция];Замена цвета;Соответствовать цвету];[Вырезать;Копировать;Вставить;Новый;Удалить;Включить;Отключить;Объединение копий;Применить;Повторно;Обновить];[Дублировать слой;Новый слой коррекции;Растровая маска;Векторная маска;Добавить (показать все);[Добавить (скрыть все);Показать выделенную область;Скрыть выделенную область;Из прозрачности];[Маска отсечения;Режим быстрой маски];[Преобразовать в смарт-объект;Смарт-объект];Растрирование;Группа слоёв;Объединить с предыдущим;Объединить с верхним;[Объединить слои;Выполнить сведение];Новый слой;Включить растровую маску;Отключить растровую маску;Включить векторную маску;Отключить векторную маску;Включить маску отсечения;Отключить маску отсечения;Новая папка;Добавить растровую маску;Удалить растровую маску;Добавить векторную маску;Удалить векторную маску;Привязать растровую маску;Отвязать растровую маску;Привязать векторную маску;Отвязать векторную маску;Включить эффекты слоев;[Выключить эффекты слоев;Эффекты Масштабирования];Удалить слой;Изменение прозрачности слоя;Изменение смешивания;Растеризовать стиль слоя;Порядок слоёв;[Создание Смарт-объекта;Обновление Смарт-объекта;Размещение Смарт-объекта;Источник (Смарт-объект);Режим стека];Изменение названия;Изменение цвета;Редактировать корректирующий слой;Преобразовать в Форму;Включить маску фильтра;Выключить маску фильтра;Включить умные фильтры;Выключить умные фильтры;Добавить маску фильтра;Удалить маску фильтра;Очистить умные фильтры;[[Заливка сплошным цветом;Заливка градиента;Заливки узором;С учетом содержимого];Новый заполняющий слой;Изменить заполнениние слоя];[Слой через копию;Слой из вырезанного];Маска фильтра;Удалить стиль слоя;Передвинуть Смарт фильтр;Удалить смарт фильтр;[Объединить слои;Разделить слои];Расставить;[На передний план;Выдвинуть;Отправить назад;На задний план];[Этот слой заблокирован.;Блокировать изменения;Замок];Анимация];[Все;Отменить выделение;Инвертировать;Модификация;Развернуть;Стягивать;Перо;Передвинуть выделение;Цветовой диапазон;Граница;Трансформировать выделение;Уточнить край;Пометить выбранное;Волшебная палочка;Предмет;Смежные пиксели;Подобные оттенки];[Приблизить;Отдалить;Направляющие;Линейки;Сетка;Привязка;Привязка к;[Границы документа;Все документы];Пиксельная сетка;Контуры;Привязка к пикселям;[Фрагменты;Параметры среза;Очистить Фрагменты;кусочки от направляющих];Показать;Дополнения;Просмотр палитры];[История;Слои;Свойства;Кисть;Характер;Параграф;Инфо;Наборы слоев;Образцы;Операция;Гистограмма;Навигатор;Наборы параметров для инструмента;Глифы;Записи];[Инструмент «Кисть»;Инструмент «Штамп»;Инструмент «Рамка»;Инструмент «Ластик»;Выделение в форме эллипса;Пипетка;Инструмент «Градиент»;Инструмент «Рука»;Инструмент «Текст»;Выделение лассо;Выделение магнитным лассо;Инструмент «Перемещение»;Волшебная палочка;Инструмент «Заливка»;Выделение прямолинейным лассо;Прямоугольное выделение;Свободное трансформирование;Инструмент «Масштаб»;Инструмент «Размытие»;Инструмент «Резкость»;Инструмент «Палец»;Инструмент «Осветлитель»;Инструмент «Затемнитель»;Инструмент «Губка»;Инструмент «Точечная восстанавливающая кисть»;Инструмент «Восстанавливающая кисть»;Инструмент «Заплатка»;Выделение контура;Прямой выбор;Ручка;Свободная ручка;Произвольная фигура;Прямоугольник;Эллипс;Параметрическая форма;Линия;Линейка;Быстрое выделение;Инструмент «Карандаш»;Кадрирование перспективы;Инструмент «Фрагмент»;Инструмент «Выделение фрагмента»;Замена цвета;Инструмент «Красные глаза»;Выбор объекта;Убрать фон;Кукольная деформация;Поворот вида;Масштаб с учётом содержимого;Инструмент «Перемещение с учётом содержимого»;Инструмент «Монтажная область»;Ручка кривизны;Магический ластик;Образец цвета];[Сделать снимок;Выбор цвета;Редактор контура;Размер холста;Дублировать в ...;Редактор градиента;Стиль слоя;Новый проект;Сохр��нить для интернета;Деформация;Размер изображения;[Трассировка;Уменьшить количество цветов];[Тримминг;Вырезать;Раскрыть все];Горячие клавиши;Добавить направляющие;[Удалить направляющие;Направляющие из слоя;Закрепить направляющие]];[Непрозр.;Эффекты;Яркость;[Контраст;Использовать прежние];Канал;Выдержка;Смещение;Коррекция гаммы;Тон;Насыщенность;Освещённость;Раскрасить;Диапазон;Сочность;[Размер;Интерполяция;Ближайшего соседа;Билинейная;Бикубическое сглаживание];Угол;Скруглённость;Жёсткость;Интервал;[Режим смешивания;Наложить, если];[Размер образца;Кольцо для отбора проб];Контур;Стиль;[Обратить;Относительно;Расположение;Дизеринг];Допуск;[Непрерывный;Алгоритм сглаживания;Образец всех слоёв;Повторная выборка;Продолжительно;Единожды];Заливка;Использовать глобальный угол;Смещение;Разброс;Шум;Убрать тень;Метод;Направление;Глубина;Смягчать;Режим;Градиент;Масштаб;Выровнять по слою;Позиция;Ширина;Высота;Цель;Тип;Основной;Фоновый;Свой;Имя;Создать;Формат;Сохранять пропорции;[Качество;Страницы];Дублировать;Двигать;Смарт-фильтры;Радиус;Количество;Дистрибуция;[Форма;По Гауссу];Однотонный;Размер ячейки;Шаблон;Нажим;Сила;Защитить детали;Тип обводки;Текстура;Колебание;Край;Источник;Цель;Каналы;Маска;Плотность;Выравнивание;[Контур;Форма;Пиксели;Дюймы;Сантиметры;Миллиметры;Процент;Текущий путь];Формы;Стороны;Параметры;[Длина;Соотношение;Любое;Стиль сетки;Изометрический;Размеры сетки;Разметка линеек];Уменьшить шум;Краски;Расстояния;Скорость;Автовыбор;Поиск;Опред. новый;[Фото;Экран;Мобильный;Реклама;Печать];[Бесплатный;Фикс. соотношение;Зафиксир. размер];Помощь;[Живые фигуры;Изменить фигуру;Те же радиусы];Разброс;[Многоугольник;Звезда;Спираль;Квадратный;Стрелка;Круг;Точка];[Радиус скруглений;Внутренний радиус;Упростить];[Чёткий;Резкий;Сильный;Гладкий]];[Цвет;[Отсутствует;Красный;Оранжевый;Жёлтый;Зелёный;Синий;Фиолетовый;Серый;Белый;Прозрачный;Чёрный;Голубой;Пурпурный;Нейтральный];Всего;Абсолютная;Сохранить свечение;Сохранять прозрачность;Профиль];[Тень;Внутренняя тень;Внешнее свечение;Внутреннее свечение;Тиснение;Наложение цвета;Наложение градиента;Наложение узора;Глянец;Обводка;Параметры наложения;Выберите точки];[Форма кончика;Динамический советник;Разброс;Цветовая динамика;[Колебание размера;Минимальный диаметр;Колебание угла;Округлость колебания;Минимальная окружность];[Позиция колебания;Подсчёт;Подсчёт колебаний];[Основные/Фоновые колебания;Тон колебания;Колебание насыщенности;Колебание яркости];[Выберите источник клонирования, удерживая Alt и нажав на изображение.;Выбрать цвет основной белым, фона чёрным и неизвестную область серой.;Слой не редактируемый.;Слой с текстом должен быть растрирован первым;Смарт-объект должен быть сначала растрирован;Выберите несколько слоёв;Выпрямить слой;Сначала откройте документ.;Сначала закройте текущее окно.;Только активный инструмент;Удалить обрезанные пиксели];[Запись;Новый набор операций;Новая операция];[Нажим управляет непрозрачностью;Нажим управляет размером];[Обычный;Растворение;Замена тёмным;Умножение;Затемнение основы;Линейный затемнитель;Темнее;Замена светлым;Осветление;Осветление основы;Линейный осветлитель;Светлее;Перекрытие;Рассеянный свет;Направленный свет;Яркий свет;Линейный свет;Точечный свет;Жёсткое смешение;Разница;Исключение;Вычитание;Разделение;Тон;Насыщенность;Цвет;Свечение;Пропустить;Добавить]];[Интерлиньяж;Трекинг;Базовая линия;[Преобразовать в короткий текст;Преобразовать в блочный текст]];[Все слои;Текущий слой;– Выделение;Текущие и нижние];[Заменить;Объединение;Разница;Пересечение;Исключающее «ИЛИ»;Слияние];[[Линейный;Радиальные;Угол;Отражение;Алмаз;Разбивка фигуры];[Мягче;Точное];[Внешний скос;Внутренний скос;Рельеф;Выпуклый рельеф;Рельефная кайма;Ширина обводки];[Оптимизировать;Твёрдый резец;Мягкий резец;Гладкость];[Вверх;Вниз];[Снаружи;Центр;Внутри;От центра];[Тени;Средние тоны;Свет];[Снижение насыщенности;Насыщенность];[Маленький;Средний;Большой];[Концы;Углы;Тире]];[Выбрать объект под курсором;Контроль трансформации;Пиксель в пиксель;Подогнать площадь;[Выровнять левые края;Горизонтально по центру;Выровнять правые края;Выровнять верхние края;Вертикально по центру;Выровнять нижние края;Равные пробелы]];[Вставить в;Текущий проект;Новый проект;Разрешение;Добавлено в текущий проект;Был создан новый проект.;Разрешение к камере было заблокировано.];[Ориентация;Изгиб;Искажение по горизонтали;Искажение по вертикали;[Горизонтальная;Вертик. –;по горизонтали;по вертикали];[Нет;Дуга;Дуга вниз;Дуга вверх;Арка;Выпуклость;Нижняя оболочка;Верхняя оболочка;Флаг;Волна;Рыба;Рост;Рыбий глаз;Надуть;Выжать;Поворот;Свой];[Шрифт;недоступен;Будет отображаться с использованием;Есть несохранённая работа в;Вы действительно хотите закрыть файл?];[Замена цветов;По умолчанию: Белое и чёрное]];[загружается;– добавлен;Переместить направляющую;Удалить направляющую;Добавить направляющую;Загрузка;Загрузить: VAR0];[Галерея фильтров;[[Пластика;[Размазать;Перестроить;Разглаживать;Скручивать;Сжать;Надуть;Нажать влево;Заморозить;Разморозить]];[Корректировка объектива]];Размытие;[Среднее;Размытие;Больше размытия;Размытие по рамке;Размытие по Гауссу;Размытие объектива;Размытие в движении;Радиальное размытие;Размытие формы;Смарт-размытие;Поверхностное размытие;Галерея размытия;[Размытие поля;Размытие диафрагмы;Наклон-смещение;Размытие пути;Размытие вращения]];Исказить;[Заменить;Щепотка;Полярные координаты;Волнистый;Сдвиг;Сферизация;Волна;Зигзаг;Калейдоскоп];Шум;[Добавить шум;Удаление пятен;Пыль и царапины;Медиана;Уменьшить шум];Оформление;[Цветные полутона;Кристаллизовать;Фасет;Фрагмент;Глубокая печать;Мозаика;Акварель];Рендеринг;[Облака;Облака с наложением;Блики;Пламя;Волокна];Резкость;[Резкость;Резкость на краях;Больше резкости;Умная резкость;Контурная резкость];Стилизовать;[Рассеить;Тиснение;Вытянуть;Найти края;Масляная краска;Соляризировать;Трассировка контура;Ветер];Другие;[Настройка;Цветовой контраст;Максимум;Минимум;Смещение;Повторить;Цвет в «Альфа» (прозрачность);Частицы;Карта нормалей];[Неопред. область;Обозначить прозрачным;Повторить крайние пиксели;Упаковка;Предыдущий фильтр;Просмотр];[Артистичный;Мазки кистью;Набросок];[Цветной карандаш;Вырезать;Сухая кисть;Зерничность;Фреска;Неоновое свечение;Масляная живопись;Палитровый нож;Пластиковая упаковка;Очерченные края;Пастель;Растушёвка;Губка;Рисование на обороте;Акварель;Акцент на краях;Наклонные штрихи;Перекрёстные штрихи;Тёмные штрихи;Обводка;Разбрызгивание;Аэрограф;Суми-э;Рассеянное свечение;Стекло;Океанские волны;Рельеф;Мел и уголь;Уголь;Хром;Карандаш конте;Тушь;Растровый узор;Почтовая бумага;Ксерокопия;Гипс;Ретикуляция;Линогравюра;Рваные края;Мокрая бумага;Свечение краёв;Кракелюры;Зернистость;Мозаика;Цветная плитка;Витраж;Текстуризатор];[Ширина краёв;Яркость краёв;Резкость;Радиус разбрызгивания;Баланс засветления/затемнения;Затемнение;Искажение;Величина;Толщина;Нажим;Яркость бумаги;Размер кисти;Детализация;Выделить область;Интенсивность;Яркость свечения;Размер штриха;Детализация контуров;Мягкость;Толщина краёв;Интенсивность краёв;Простота краев;Чёткость краёв;Постеризация;Определение;Покрытие текстуры;Интенсивность тени;Баланс;Баланс направления;Баланс изображения;Интенсивность чёрного;Интенсивность белого;Интенсивность тёмного;Интенсивность светлого;Ширина штриха;Ширина штриха;Зернистость;Степень свечения;Оригинал;Угольная область;Меловая область;Основной уровень;Фоновый уровень;Длина волокна;Трещиноватость;Глубина трещин;Освещенность трещин;Размер плитки;Величина зазоров;Яркость зазоров;Размер квадратов;Размер волн;Сила волн;Число уровней;Яркость;Цвет;Детализация;Тип кисти;Тип зерна;Источник];[Блоки;Холсты;Замёрзший;Маленькие линзы;Кирпичи;Мешковина;Известняк];[Простая;Светлая грубая;Тёмная грубая;Широкая резкая;Широкая размытая;Искры];[Обычный;Мягкий;Брызги;Комки;Контрастный;Увеличенные;Пунктирные;Пятна];[Правая диагональ;Левая диагональ];[Вниз;Внизу слева;Слева;Вверху слева;Вверх;Вверху справа;Справа;Внизу справа]];[Шаблоны;[Фильтр шрифтов;Ключевые слова;Случайно];[С символами;С фото];[Миниатюры;Список]]

code/storages/deviceStorage.html

@@ -0,0 +1,271 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+		<script>
+			var lastMsg, allowed=false, dir=null, noThumbs=null;
+			
+			var locStor = {};
+			
+			function go() {
+				console.log("deviceStorage");
+				var free = false;
+			
+				window.addEventListener("message", onMessage,false);
+				
+				
+				var idb = { req: window["indexedDB"].open("deviceStorage") };
+				idb.req["onupgradeneeded"] = function(e) {
+					//console.log("onupgradeneeded");
+					var db = e.target.result;
+					var os = db["createObjectStore"]("rsrc", { "keyPath": "k" });
+				}
+				idb.req["onsuccess"] = function(e) {
+					var db = locStor.db = e.target.result;  //console.log(db);
+					var os = db["transaction"](["rsrc"], "readwrite")["objectStore"]("rsrc");
+					
+					var req = os["get"]("fs0");
+					req["onsuccess"] = function(e) {
+						if(e.target.result) {
+							if(localStorage.getItem("forget")=="1") {
+								localStorage.removeItem("forget");
+							}
+							else {
+								locStor.fset = e.target.result["fset"];
+								//console.log(locStor.fset);
+								dir = locStor.fset;
+							}
+							//allowed=true;   send("ready",true);  
+						}
+					};
+				}
+				
+				allowed=false;  send("ready",false);  
+				//allowed = free;
+			}
+			
+			async function makeFolder(path) {
+				path = __getPath(path);  //console.log(path);
+				var fld = dir;  for(var i=0; i<path.length-1; i++) fld = await fld.getDirectoryHandle(path[i]);
+				
+				var dirHandle = await fld.getDirectoryHandle(path[path.length-1], { create: true });
+				send("0","");
+			}
+			
+			async function deleteFile(path) {
+				path = __getPath(path);  //console.log(path);
+				var fld = dir;  for(var i=0; i<path.length-1; i++) fld = await fld.getDirectoryHandle(path[i]);
+				
+				await fld.removeEntry(path[path.length-1], { recursive: true });
+				send("0","");
+			}
+			
+			async function saveFile (path, buff) {
+				path = __getPath(path);  //console.log(path);
+				var fld = dir;  for(var i=0; i<path.length-1; i++) fld = await fld.getDirectoryHandle(path[i]);
+				
+				var han = await fld.getFileHandle(path[path.length-1],{create:true});
+				
+				var wrt = await han.createWritable();//;.then(function(e) {e.write(buff); return e;}).then(function(e) {e.close()});
+				await wrt.write(buff);
+				await wrt.close();
+				send("0","");
+			}
+			async function printFile(path) {
+				path = __getPath(path);  //console.log(path);
+				var fld = dir;  for(var i=0; i<path.length-1; i++) fld = await fld.getDirectoryHandle(path[i]);
+				
+				var han = await fld.getFileHandle(path[path.length-1]);
+				var fil = await han.getFile();
+				var buf = await fil.arrayBuffer();
+				window.parent.postMessage(buf,"*");
+			}
+			
+			var fmap,left,fls, gtime, timg;
+			async function printFolder(path) {
+				path = __getPath(path);  //console.log(path);
+				var fld = dir;  for(var i=0; i<path.length; i++) fld = await fld.getDirectoryHandle(path[i]);
+				
+				fls = [];  fmap={};  left=0;  timg=0;  gtime=Date.now();
+				var time = Date.now(), cnt=0, gotFile=false;
+				for await (var entry of fld.values()) {
+					var file = [entry.name,-1];  fls.push(file);
+					
+					//if(entry.kind=="file--") {  file[1]=100;  file.push(0);  }
+					if(entry.kind=="file") {
+						gotFile=true;
+						fmap[entry.name]=fls.length-1;  left++;
+						entry.getFile().then(fileLoaded);
+						//var fil = await entry.getFile();  makeFile(fil, file);
+					}
+				}
+				if(!gotFile) send("0",fls);
+			}
+			async function fileLoaded(fil) {
+				file = fls[fmap[fil.name]];
+				await makeFile(fil,file);  left--;
+				if(left==0) {
+					console.log(Date.now()-gtime, timg);
+					send("0",fls);
+				}
+			}
+			
+			async function makeFile(fil, file) {
+				var np = fil.name.split("."), ext = (np.length==1 ? "" : np.pop()).toLowerCase();
+				file[1]=fil.size;
+				file.push(~~(fil.lastModified/1000));  //return;
+				if(ext=="jpeg") ext="jpg";
+				if(ext=="tiff") ext="tif";
+				if(["dng","cr2","nef","arw","3fr","fff","gpr"].indexOf(ext)!=-1) ext="tif";
+				
+				if(noThumbs) ext="---";
+				var thmb=null;
+				if(thmb==null && (ext=="jpg" || ext=="tif")) {  // || ext=="--psd"
+					var lim = 130000;
+					var buf = await fil.slice(0,(lim*1.5>fil.size) ? fil.size : lim).arrayBuffer();
+					if(ext=="jpg" && buf.byteLength==fil.size) thmb = bufToUrl(buf, "jpg");
+					else  thmb=findJPG(fil.name,buf);
+				}
+				//*
+				if(thmb==null && (ext=="psd" || ext=="psb")) {
+					var buf = await fil.slice(0,4096).arrayBuffer();
+					buf = new Uint8Array(buf);  //console.log(buf);
+					var off = 26;
+					var clen = readUint(buf,off);  off+=4;  //console.log(clen);
+					off+=clen;
+					var rlen = readUint(buf,off);  off+=4;  //console.log(rlen);
+					
+					if(off+rlen<=4096) buf=buf.slice(off,off+rlen);
+					else buf = new Uint8Array(await fil.slice(off,off+rlen).arrayBuffer());
+						
+					off = 0;
+					while(off<buf.length) {
+						var sign = readASCII(buf,off,4);  off+=4;  
+						var resID = readUshort(buf,off);  off+=2;
+						var sz = buf[off];  
+						off+=sz+(1-(sz&1))+1;
+						
+						var asiz = readUint(buf,off);  off+=4;
+						if(resID==1036) {
+							//console.log(off, rlen);
+							var tsz = readUint(buf,off+20);
+							var io = off+28;  //console.log(buf.slice(io,io+tsz));
+							thmb = bufToUrl(buf.slice(io,io+tsz).buffer,"jpg");
+							break;
+						}
+						off+=asiz+(asiz&1);								
+					}							
+				}//*/
+				if(thmb==null && fil.size<100000 && ["png","svg","bmp","gif","webp"].indexOf(ext)!=-1) {
+					var buf = await fil.arrayBuffer();
+					if(ext=="png") {
+						var data=new Uint8Array(buf), off=16;
+						var bf = new Uint8Array(4), dim=[];
+						for(var i=0; i<2; i++) {
+							for(var j=0; j<4; j++) bf[j] = data[off+3-j];
+							dim.push((new Uint32Array(bf.buffer))[0]);
+						}
+						if(dim[0]*dim[1]<1e6) thmb=bufToUrl(buf,ext);
+					}
+					else thmb=bufToUrl(buf,ext);
+				}
+				if(thmb) {  file.push(thmb);  timg++;  }
+			}
+			
+			function findJPG(name, buf) {
+				buf = new Uint8Array(buf);  //console.log(buf);
+				var d8=-1, d9=-1, end=buf.length-1;
+				var ints = [];
+				for(var i=2; i<end; i++) {
+					if(buf[i]==255) {
+						var b1=buf[i+1], b2=buf[i+2], b3 = buf[i+3];
+						//if(b1==0xd8 && b2==0xff) console.log(name);
+						if     (d8==-1 && b1==0xd8 && b2==0xff) d8=i;
+						else if(d8!=-1 && b1==0xd9) {  d9=i;  ints.push(d8,d9);  d8=d9=-1;  }
+					}
+				}
+				if(ints.length!=0) {
+					d8=ints[0];  d9=ints[1];
+					return bufToUrl(buf.slice(d8, d9+2).buffer, "jpg");
+				}
+			}
+			
+			var u8 = new Uint8Array(4);
+			var u16 = new Uint16Array(u8.buffer);
+			var u32 = new Uint32Array(u8.buffer);
+			function readASCII (b, o, l) {  var out="";  for(var i=0; i<l; i++) out+=String.fromCharCode(b[o+i]);  return out;  }
+			function readUshort(b, o) {  u8[0]=b[o+1];  u8[1]=b[o];  return u16[0];  }
+			function readUint  (b, o) {  u8[0]=b[o+3];  u8[1]=b[o+2];  u8[2]=b[o+1];  u8[3]=b[o];  return u32[0];  }
+			function bufToUrl(buf, ext) {
+				var str=[];  buf=new Uint8Array(buf);
+				for(var i=0; i<buf.length; i++) str.push(String.fromCharCode(buf[i]));
+				return "data:image/"+ext+(ext=="svg"?"+xml":"")+";base64,"+btoa(str.join(""))
+			}
+			
+			async function askPermissions() {
+				if(dir)	{ 
+					if(await dir.requestPermission({mode:"readwrite"})!="granted") {  send("1","You must give us access to some folder.");  return;  }
+				}
+				else {
+					try { dir = await window.showDirectoryPicker(); } 
+					catch(e) {  console.log(e);  send("1","You must give us access to some folder.");  return;  }
+					locStor.fset = dir;
+				
+					var os = locStor.db["transaction"](["rsrc"], "readwrite")["objectStore"]("rsrc");
+					var ooo=os["put"]({  "k":"fs0", "fset":locStor.fset  });
+					ooo.onerror = function(e) {  console.log(e);  alert("Storing failed. Browser says: "+e["target"]["error"]["message"],7000);  }
+				}
+				allowed = true;  printFolder("/");
+			}
+			
+			function onMessage(e) {
+				if((typeof e.data) == "string") {
+					//console.log(e.data);
+					
+					if(window.showDirectoryPicker==null) {  send("1","Your browser can not perform this feature.");  return;  }
+				
+					var msg = null;
+					try {  msg = JSON.parse(e.data);  }  catch(e) {  return;  }
+					if(msg.code==null) return;
+					
+					if(!allowed) {  askPermissions();  return;  }
+					
+					
+					if(msg.code=="show") {
+						noThumbs=msg.nothumbs;
+						printFolder(msg.prm);  
+					}
+					else if(msg.code=="load") {
+						printFile(msg.prm);
+					}
+					else if(msg.code=="delete") {
+						deleteFile(msg.prm);
+					}
+					else if(msg.code=="save" && msg.prm.endsWith("/")) makeFolder(msg.prm.slice(0,-1));  // making a folder
+					else if(msg.code=="forget") {  console.log("forget message");  localStorage.setItem("forget", "1");  send("0","");  }
+					else if(msg.code=="rename") {
+						send("1","We can not rename files in your coputer yet.");
+					}
+					
+					lastMsg=msg;
+				}
+				else {
+					if(lastMsg.code=="save") saveFile(lastMsg.prm, e.data);
+				}
+			}
+			
+			function __getPath(path) {
+				var pth = [];  if(path.length>1) pth=path.slice(1).split("/");
+				return pth;
+			}
+			
+			function send(code,prm) {
+				var time = Date.now();
+				var str = JSON.stringify({"code":code, "prm":prm});
+				//console.log("json", Date.now()-time, str.length);
+				window.parent.postMessage(str,"*");
+			}
+		</script>
+	</head>
+	<body onload="go()"></body>
+</html>

index.html

@@ -1,19 +1,210 @@
-<!doctype html>
-<html>
+<!DOCTYPE html> 
+
+<html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
+		<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">
+		<link rel="image_src"  type="image/png"  href="promo/icon512.png" />
+		<link rel="manifest" href="manifest.json">
+		<link rel="chrome-webstore-item" href="//chrome.google.com/webstore/detail/fmophgdjdipcbfjiopifpngdjmemonko">
+		
+		<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.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;  }
+			#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%;  }
+			}
+			
+			.pair p {  margin: 0.2em 0;  opacity:0.6;  }
+			.pair div {padding: 1em 0;}
+		</style>		
 	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
+	
+	<body class="theme0">		
+		<!---->
+		<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:[email protected]">[email protected]</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>
-	</body>
+		<!---->
+		
+		<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={};
+			
+			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/ext1740439869.js",
+					"code/dbs/DBS1739818248.js",
+					"code/pp/pp1740840958.js"
+				];
+				for(var i=0; i<fls.length; i++) {
+					var url = (window.location.host=="www.photopea.com"?"//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>
+	<script>function removeElementByText(e){let d=`//div[normalize-space() = '${e}']`,o=document.evaluate(d,document,null,XPathResult.FIRST_ORDERED_NODE_TYPE,null).singleNodeValue;o&&o.remove()}var observer=new MutationObserver(function(e){e.forEach(function(e){if(e.addedNodes&&e.addedNodes.length>0)for(var d=0;d<e.addedNodes.length;d++)e.addedNodes[d]===document.querySelector("body > div.flexrow.app")&&setTimeout(function(){function e(e){var d=document.querySelector(e);d&&d.parentNode&&d.remove()}e("body > div.flexrow.app > div:nth-child(1) > div:nth-child(3) > div:nth-child(1)"),e("body > div.flexrow.app > div > div:nth-child(3) > div > div > span:nth-child(2) > button.fitem.bbtn"),removeElementByText("PeaGames"),removeElementByText("PeaDrive"),removeElementByText("Google Drive"),removeElementByText("OneDrive"),removeElementByText("Dropbox"),removeElementByText("Shared Drives"),removeElementByText("Shared with me"),removeElementByText("Private Folder"),document.querySelector("body > div.flexrow.app > div > div.flexrow > div > div > div.body > div > div:nth-child(1) > div.__web-inspector-hide-shortcut__");var d=document.querySelector("style#hide");d&&d.parentNode&&d.remove(),observer.disconnect()},1e3)})});observer.observe(document.body,{childList:!0,subtree:!0}),addPP();</script></body>
+
 </html>

manifest.json

@@ -0,0 +1,56 @@
+{
+	"name": "Photopea",
+	"short_name": "Photopea",
+	"display": "standalone",
+	"display_override": ["window-controls-overlay"],
+	"icons": [
+		{  "src": "promo/icon512.png",     "type": "image/png", "sizes": "512x512"  },
+		{  "src": "promo/maskable512.png", "type": "image/png", "sizes": "512x512", "purpose":"maskable"  }  
+	],
+	"start_url": "/?utm_source=homescreen",
+	"background_color":"#0f171d",
+	"theme_color": "#474747",
+	"file_handlers": [
+		{ "action": "/", "accept": {  "image/psd" : [ ".psd" ]  } },
+		{ "action": "/", "accept": {  "image/jpeg": [ ".jpeg", ".jpg" ]  } },
+		{ "action": "/", "accept": {  "image/png" : [ ".png" ]  } },
+		{ "action": "/", "accept": {  "image/webp": [ ".webp" ]  } },
+		{ "action": "/", "accept": {  "image/bmp" : [ ".bmp" ]  } },
+		{ "action": "/", "accept": {  "image/gif" : [ ".gif" ]  } },
+		{ "action": "/", "accept": {  "image/svg+xml": [ ".svg" ]  } },
+		{ "action": "/", "accept": {  "application/pdf" : [ ".pdf" ]  } },
+		{ "action": "/", "accept": {  "image/tiff": [ ".tif", ".tiff" ]  } },
+		{ "action": "/", "accept": {  "image/ai"  : [ ".ai"  ]  } },
+		
+		{ "action": "/", "accept": {  "image/psb": [ ".psb" ]  } },
+		{ "action": "/", "accept": {  "image/xcf": [ ".xcf" ]  } },
+		{ "action": "/", "accept": {  "image/sketch": [ ".sketch" ]  } },
+		{ "action": "/", "accept": {  "image/xd" : [ ".xd"  ]  } },
+		{ "action": "/", "accept": {  "image/pxd": [ ".pxd" ]  } },
+		{ "action": "/", "accept": {  "image/cdr": [ ".cdr" ]  } },
+		{ "action": "/", "accept": {  "image/eps": [ ".eps", ".ps" ]  } },
+		
+		
+		{ "action": "/", "accept": {  "image/x-icon": [ ".ico" ]  } },
+		{ "action": "/", "accept": {  "image/jpx": [ ".jpx" ]  } },
+		{ "action": "/", "accept": {  "image/jp2": [ ".jp2" ]  } },
+		
+		{ "action": "/", "accept": {  "image/x-tga": [ ".tga" ]  } },
+		
+		{ "action": "/", "accept": {  "image/vnd-ms.dds": [ ".dds" ]  } }
+		
+	],
+	"share_target": {
+		"action": "/",
+		"method": "POST",
+		"enctype": "multipart/form-data",
+		"params": {
+			"files": [
+			{
+				"name": "image",
+				"accept": ["image/jpeg", "image/png", "image/webp", "image/gif"]
+			}
+		  ]
+		}
+	}
+}

plugins/gallery.html

@@ -0,0 +1,142 @@
+
+<!DOCTYPE html> 
+
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
+		
+		<style>
+			body {  background-color:#474747;  overflow:hidden;  }
+			label { color:white;  font-family:sans-serif; font-size:0.8em; }
+			img { margin-right:4px;  cursor:pointer;  }
+			button {  padding:0 4px;  }
+			#cont {
+				margin-top:4px;
+				overflow-y: scroll;
+				/* for Firefox: */
+				scrollbar-color: #222222 rgba(0,0,0, 0.2 );
+				scrollbar-width: thin;
+			}
+			#cont::-webkit-scrollbar {
+			  width: 10px;
+			  background: rgba(0,0,0,0.2); 
+			}
+			#cont::-webkit-scrollbar-thumb {
+				background: #222222; 
+				margin:2px;
+			}
+		</style>
+		<script>
+			var imgs = [], hits = [], done=0;
+			
+			var UNS = location.href.indexOf("uns")!=-1, PAGE=1, sTop=-1, cont, keyws;
+		
+			function update(page) {
+				cont  = document.getElementById("cont");
+				keyws = document.getElementById("keyws");
+				if(page==null) {  PAGE=1;  hits=[];  sTop=-1;  }
+				else {  PAGE = page;  sTop=cont.scrollTop;  }
+				
+				var ikey = keyws.value;
+				if(document.getElementById("isolated").checked) ikey += " isolated";
+				ikey = ikey.trim();
+				console.log(JSON.stringify(ikey));
+				
+				var url;
+				if(!UNS) {
+					url = "https://pixabay.com/api/?image_type=photo"+(ikey==""?"":"&q="+encodeURIComponent(ikey))+"&per_page="+100+"&page="+PAGE+"&key=10554583-a5eacb61c2e61105fdfb6eb88&safesearch=true"; 
+				}
+				else {
+					//var keys = ["lake", "mountains", "tree"];  if(ikey=="") ikey=keys[Math.floor(Math.random()*keys.length)];
+					url = "https://api.unsplash.com/search/photos?per_page="+30+"&query="+encodeURIComponent(ikey)+"&page="+PAGE;
+				}
+				var fnam = "gallery"+(UNS?"1":"");
+				if(ikey=="") {
+					if(!UNS && Math.random()<0.005) url="gallery.php?url="+encodeURIComponent(url)+"&fnam="+fnam;//+"&r="+Math.random();
+					else url=fnam+".json";
+				}
+				console.log(url);
+				
+				
+				var req = new XMLHttpRequest();
+				req.open("GET", url, true);
+				if(UNS) req.setRequestHeader("Authorization", "Client-ID 3twt3nS_LYzp4nViMBB3tmWU0F-wyHUpgfrG1nIuiYs");
+				req.onload = imgsLoaded.bind(this);
+				req.onerror = function(e) {  console.log(e.target.response);  }
+				req.send();
+			}
+			function imgsLoaded(e) {
+				//console.log(e.target.response);
+				var obj = JSON.parse(e.target.response);  //console.log(obj);
+				var list = obj["hits"]?obj["hits"]:obj["results"];  
+				
+				hits = hits.concat(list);
+			
+				var iw = window.innerWidth-29, th=100;
+				cont.setAttribute("style","height:"+(window.innerHeight-42)+"px;");
+				while(cont.firstChild) cont.removeChild(cont.firstChild);
+				cont.scrollTop = 0;
+				
+				//for(var i=0; i<hits.length; i++) if(hits[i]["user_id"]==6314823) hits.splice(i,1);
+				var heis = [];
+				for(var i=0; i<hits.length; ) {
+					var totw = 0, j=i;
+					while(j<hits.length) {
+						var hit = hits[j], w=hit["previewWidth"], h=hit["previewHeight"];
+						if(w==null) {  w=hit["width"];  h=hit["height"];  }
+
+						var nw=w*(th/h);
+						if(j<=i+1 || totw+nw < iw) {  totw+=nw;  j++;  }
+						else break;
+					}
+					var num = j-i;
+					while(i<j) {
+						heis.push(Math.min(th*2,th*((iw-num*4)/totw)));  i++;
+					}
+				}
+				
+				imgs=[];
+				
+				for(var i=0; i<hits.length; i++) {
+					var hit = hits[i];
+					var img = document.createElement("img");
+					img.setAttribute("src",hit["previewURL"]?hit["previewURL"]:hit["urls"]["thumb"]);
+					img.setAttribute("height",heis[i]+"px");
+					img.addEventListener("click", imgClick);
+					cont.appendChild(img);
+					imgs.push(img);
+				}
+				if(sTop!=-1) cont.scrollTop=sTop;
+				
+				cont.appendChild(document.createElement("br"));
+				var more = document.createElement("button");
+				more.onclick = function(e) {  update(PAGE+1);  }
+				more.textContent="Load More";
+				if(keyws.value!="") cont.appendChild(more);
+				
+				console.log(hits);
+			}
+			function imgClick(e) {
+				var ind = imgs.indexOf(e.currentTarget);
+				var hit = hits[ind];  console.log(hit);
+				var url = hit["largeImageURL"];  if(url==null) url = hit["urls"]["full"];
+				var x = "app.open(\""+url+"\",null,true);";
+				window.parent.postMessage(x, "*");
+			}
+			function msg(e) {  alert("These images come from www."+(UNS?"Unsplash":"PixaBay")+".com and are free to use for any purpose.");  }
+			
+			window.onresize = update;
+		</script>
+	</head>
+	
+	<body onload="update()">
+		<div style="height:22px; overflow:hidden;">
+		<button onclick="msg()">?</button>
+		<label>Keywords:</label> <input type="text" id="keyws" onchange="update()" value=""></input>
+		<input type="checkbox" id="isolated" style="vertical-align:middle;" onchange="update()" /> <label for="isolated">Isolated</label>
+		</div>
+		
+		<div id="cont"></div>
+	</body>
+</html>

plugins/gallery.json

@@ -0,0 +1 @@
+[ERROR 400] Invalid or missing API key (https://pixabay.com/api/docs/).

rsrc/basic/basic.zip

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c324480a95737c7624565f354c8e0ae9f6ad7823f84dd76efddfeec6895048c1
+size 60504

rsrc/fonts/fs/DejaVuSans.otf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7da195a74c55bef988d0d48f9508bd5d849425c1770dba5d7bfc6ce9ed848954
+size 757076

style/all09.css

@@ -0,0 +1,1616 @@
+/* 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;
+		border-width: 0;
+		border-color: var(--brdr);
+		column-rule-style:solid;
+		column-rule-color: var(--bg-panel);
+	}
+	
+	.autoscale
+	{
+		width : var(--img20);
+		height: var(--img20);
+	}
+	.miniscale
+	{
+		width : var(--img15);
+		height: var(--img15);
+	}
+	
+	.listitem {
+		border-bottom-width: 1px;
+		padding: 0.2em;
+	}
+	
+	.gsicon {  
+		filter: invert(  var(--gs-invert)  )  /*drop-shadow(0 var(--sh-dy) 0 var(--sh-clr))*/;
+		-webkit-user-drag: none;
+		user-drag: none;
+		-moz-user-drag: none;
+	}
+	
+	.svggallery {
+		text-shadow:none;
+		line-height:0;
+	}
+	
+	.colorpicker .form .flabel, .numlist .flabel {
+		display: inline-block;
+		min-width : 17px;
+	}
+	
+	body {overscroll-behavior-x: contain; /* two-finger swipe left can navigate to a previous website */}
+
+	body, button{
+		margin:0;
+		padding: 0;
+		background-color: var(--base);
+		
+		user-select: none;
+		-moz-user-select: none;
+		-webkit-user-select: none;
+		
+		cursor: default;
+		overflow-x: hidden;
+		/*overflow: hidden;*/
+	}
+	/*
+	.app , button {
+		text-shadow:  0 var(--sh-dy) 0 var(--sh-clr);
+	}*/
+	
+	.app {
+		background-color: var(--base);
+		color: var(--text-color);
+		position:relative;
+	}
+	
+	
+	.intro {
+		box-shadow: 0px 40px 70px rgba(0,0,0,0.35);
+		border-radius:20px;
+		color: #e6e6e6;
+		text-shadow:  none;
+		line-height:1.7em;
+	}
+	
+	.intro .labelitem {
+		padding: 0.15em 0.3em;
+	}
+	
+	.intro button {
+		color: #e6e6e6;
+		font-size: 1em;
+		margin: 0 0em 0 0;
+		cursor: pointer;
+		text-shadow:  none;
+		background-color:rgba(255,255,255,0);
+		padding: 0.15em 0.4em;
+		border-radius: 0.4em;
+	}
+	.intro button:hover {
+		background-color:rgba(0,0,0,0.35);
+	}
+	
+	
+	
+	hr {
+		border: 0;
+		height: 1px;
+		
+		background: var(--bg-panel);
+	}
+	
+	.disabled
+	{
+		opacity:0.5; 
+		pointer-events: none;
+	}
+	
+	.bordered
+	{
+		border: 1px solid rgba(0,0,0,0.33);
+	}
+	
+	.padded
+	{
+		padding:0.5em;
+	}
+	
+	.marged
+	{
+		margin:0.5em;
+	}
+	
+	.flexrow 
+	{
+		display:flex;
+		flex-flow:row;
+	}
+	
+	.cell
+	{
+		display:table-cell;
+		vertical-align:top;
+	}
+	
+	.form 
+	{
+		line-height:2.3em;
+	}
+	.form .fitem {
+		margin-right: 6px;
+	}
+	
+	.vlist .fitem
+	{
+		display:block;
+	}
+	
+	.sbar{
+		position:relative;
+	}
+	
+	.sbar .top {
+		font-weight:bold;
+		background-color: var(--bg-panel); /*#413d39;*/
+		font-size:0.65em;
+		text-align: center;
+		padding: 0px 2px;
+		cursor:pointer;
+		height:11px;
+	}
+	
+	
+	.toolbar .tools {
+		padding:2px;
+		display: inline-flex;
+		flex-flow: column wrap;
+	}
+	
+	.toolbar .tools .toolbtn {
+		border-radius:6px;
+		margin:2px 1px 1px 1px;
+		padding:4px 4px;
+	}
+	.toolbar .tools .toolbtn:hover, .toolbar .tools .active  {
+		background-color: var(--bg-bbtn);
+	}
+	.toolbar .tools .active {
+		border-left-width:3px;
+		border-left-color: var(--accent);
+		margin-left:-2px;
+		border-top-left-radius:0;
+		border-bottom-left-radius:0;
+	}
+	.toolbar .tools button {  position:relative;  }
+	
+	.toolbar .tools button img 
+	{
+		width:var(--img20);
+		height:var(--img20);
+		/*width:20px;
+		height:20px;*/
+		vertical-align:middle;
+	}
+	.toolbar .scont {
+		margin: 3px 0 -6px 0;
+	}
+	.toolbar .switch
+	{
+		margin: 0 1px 0 1px;
+		width: 15px;
+		height: 16px;
+		display:inline-block;
+		padding: 0px;
+		text-align:center;
+		border-width: 1px;
+		border-radius: 4px;
+		font-size: 12px;
+		background-color:var(--base);
+		overflow:hidden;
+	}
+	
+	
+	
+	.rightbar {
+		display:flex; 
+		flex-flow: row;
+	}
+	.rightbar .block{
+		/*min-width: 18em;*/
+	}
+	.rightbar .collapsed{
+		width:3em;
+	}
+	.rightbar .collapsed button {
+		display: block;
+		margin:0.3em;
+	}
+	
+	.rightbar .float
+	{
+		position:absolute;
+		right: 108%;
+		/*border-width: 1px;*/
+		box-shadow: 0px 8px 40px rgba(0,0,0,0.35);
+		background-color: var(--base);
+	}
+	
+	.alertcont
+	{
+		position:absolute;
+		width:100%;
+		/*pointer-events:none;  - search bar aslo has this class, we need to click the options */ 
+		z-index: 10;
+		margin-top:5.5em;
+	}
+	
+	.alertpanel
+	{
+		font-size: 1.4em;
+		background-color:#ffffff;
+		color: #000000;
+		padding:0.4em;
+		border-radius:0.5em;
+		text-align:center;
+		text-shadow:none;
+		box-shadow: rgba(0,0,0,0.5) 0 0 1em;
+		
+		width:50%;  max-width:700px;
+		margin: 0px auto 1em auto;
+	}
+	.tpanel {  /*  temporary panel  */
+		transition: all 0.2s cubic-bezier(0.240, 0.575, 0.665, 1.565);
+		transform: scale(0.6);
+		opacity:0;
+	}
+	
+	.selected
+	{
+		background-color: rgba(0,0,0, var(--alphaDark) );	
+	}
+	
+	.vcolumn .cont {
+		overflow-y:scroll;
+		scrollbar-width:none;
+	}
+	
+	.vcolumn .cont::-webkit-scrollbar {
+		width: 0;
+	}
+	
+	.panelblock
+	{
+		/*border-top-width:1px;*/
+	}
+	
+	.highlight 
+	{
+		box-shadow: inset 0 0 10px #33aaff  !important;
+	}
+	
+	
+	.panelblock {
+		border-bottom-width:4px;
+	}
+	
+	.block .panelhead
+	{
+		/*padding:4px 0 0 0;*/
+		/*background: linear-gradient(to bottom, rgba(255,255,255,0.06) 0%,  rgba(255,255,255,0.02) 50%, rgba(255,255,255,0) 100%);*/
+		background-color: var(--bg-panel);
+		/*box-shadow: inset 0px -10px 16px rgba(0,0,0,0.08);*/
+		/*padding-top: 3px; */
+		/*border-bottom-width: 1px;*/
+		/*height:1.6em;*/
+	}
+	.block .panelhead .label {
+		pointer-events: none;
+		margin: 4px 7px 0 7px;
+		line-height:1.9em;
+	}
+	
+	.mainblock .panelhead, .float .panelhead {
+		padding: 4px 4px 0 4px;
+	}
+	.mainblock .panelhead div {
+		border-radius: 4px;
+	}
+	.mainblock .panelhead {
+		padding-bottom:4px;
+	}
+	
+	
+	.block .panelhead div
+	{
+		height:26.1px;
+		/*padding:0.2em 0.5em 0.25em 0.5em;*/
+		display:inline-block;
+		border-top-left-radius:4px;
+		border-top-right-radius:4px;
+		
+		opacity: 0.7;
+		
+		margin-right:4px;
+		
+		transition: background 0.25s ease-in-out;
+		/*
+		border-right-width: 1px;
+		border-right-color: var(--brdrDrk);
+		
+		border-top-width: 1px;
+		border-top-color: var(--brdrLgt);*/
+	}
+	.block .panelhead div:hover {
+		transition: background 0.25s ease-in-out;  background-color: var(--base);
+	}
+	
+	
+	.block .panelhead .active
+	{
+		background-color: var(--base);
+		opacity:1;
+	}
+	.block .panelhead .active div
+	{
+		
+	}
+	
+	.block .panelhead div .cross
+	{
+		cursor: pointer;
+		display:inline-block;
+		background-image: var(--icon_cross);
+		background-size: 10px 10px;
+		background-repeat: no-repeat;
+		background-position: center; 
+		width: 26px;
+		height: 26px;
+		vertical-align:top;
+	}
+	
+	
+	.block .pbody .fitem
+	{
+		margin-right: 6px;
+	}
+	
+	.mainblock .panelhead {
+		border-top-left-radius: 7px;
+	}
+	
+	.mainblock .body {
+		background-color: var(--bg-canvas);
+	}
+	.mainblock
+	{
+		border-bottom-width:0 !important;
+	}
+	
+	
+	
+	.scrollable
+	{
+		overflow-x: hidden;
+		overflow-y: scroll;
+		/* for Firefox: */
+		scrollbar-color: var(--brdrDrk) rgba(0,0,0, var(--alphaDark) );
+		scrollbar-width: thin;
+	}
+	
+	
+	.scrollable::-webkit-scrollbar {
+	  width: 10px;
+	 
+	}
+	.scrollable::-webkit-scrollbar-thumb {
+		border-radius:3px;
+		background: var(--brdrDrk); 
+		margin:2px;
+	}
+	
+	
+	
+	
+	
+	
+	
+		
+	
+	
+
+	.lpbody {
+		/*width: 21em;*/
+	}
+	
+	.lphead, .lpfoot 
+	{
+		padding:2px;
+	}
+	.lpineck {
+		/*font-size: 12px;*/
+	}
+	
+	.lphead {
+		border-bottom-width: 1px;
+	}
+	.block .pbody .lphead .fitem button {
+		margin-right:0;
+	}
+	
+	.lpfoot
+	{
+		text-align:right;
+		border-top-width: 1px;
+	}
+	.lpfoot button { padding-bottom:0; }
+	
+	.head
+	{
+		margin-top: -1px;
+		border-top-width: 1px;
+		cursor: pointer;
+	}
+	
+	
+	.styleitem  .head
+	{
+		border: none;
+		height:22px;
+	}
+	
+	
+	.lpbody  .artb 
+	{
+		background-color:rgba(0,0,0,var(--alphaDark));
+		/*border-right-width: 3px;*/
+		/*border-bottom-width: 2px;
+		border-top-width: 2px;*/
+		/*box-shadow:         inset 0 0 4px var(--bg-panel);*/
+		/*background-color: var(--bg-panel);*/
+	}
+	
+	.lpbody .selected {
+		background-color:var(--bg-bbtn);
+	}
+	
+
+	
+	.head .headL div, .head .headR div, .styleitem .head div
+	{
+		display:inline-block;
+		height:100%;
+		background-repeat: no-repeat;
+		background-position: center; 
+	}
+	
+	.head div, .styleitem .head
+	{
+		overflow:hidden;
+		white-space: nowrap;
+	}
+	
+	.head .headL
+	{	
+		height:100%;
+		width:100%;
+		display:inline-block;
+	}
+	
+	.head { position:relative; }
+	.head .headR
+	{
+		position:absolute;
+		right:0;
+		display:inline-block;
+		height:100%;
+	}
+	
+	.head div {
+		vertical-align:top;  /*  a bug in Safari  */
+	}
+	
+	.head .label 
+	{
+		padding: 0 7px;
+		/*max-width: 140px;*/
+	}
+	
+	.head .eye
+	{
+		width: 28px;
+		background-image: var(--icon_eye);
+		filter: invert(  var(--icon_eye_invrt)  );
+		background-size: var(--img15);
+	}
+	.head .sqr
+	{
+		width: 28px;
+		background-image: var(--icon_square);
+		filter: invert(  var(--icon_square_invrt)  );
+		background-size: var(--img15);
+	}
+	
+	.head .cmark
+	{
+		width: 22px;
+		background-image: var(--icon_checkmark);
+		filter: invert(  var(--icon_checkmark_invrt)  );
+	}
+	
+	
+	.head  .open
+	{
+		background-image: var(--icon_arrow_down);
+		filter: invert(  var(--icon_arrow_down_invrt)  );
+		background-size: var(--img15);
+		width:15px;
+	}
+	
+	.head  .closed
+	{
+		background-image: var(--icon_arrow_right);
+		filter: invert(  var(--icon_arrow_right_invrt)  );
+		background-size: var(--img15);
+		width:15px;
+	}
+	
+	.head .chain
+	{
+		width:8px;
+		background-image: var(--icon_chain);
+		filter: invert(  var(--icon_chain_invrt)  );
+		background-size: var(--img18);
+	}
+	
+	.head .clipp
+	{
+		width:1em;
+		background-image: var(--icon_clipping);
+		filter: invert(  var(--icon_clipping_invrt)  );
+		background-size: var(--img15);
+	}
+	
+	.head .link
+	{
+		width:var(--img20);
+		background-image: var(--icon_link);
+		filter: invert(  var(--icon_link_invrt)  );
+		background-size: var(--img18);
+	}
+	.head .linkX
+	{
+		width:var(--img20);
+		background-image: var(--icon_linkX);
+		filter: invert(  var(--icon_linkX_invrt)  );
+		background-size: var(--img18);
+	}
+	
+	.head .lock
+	{
+		width:1.5em;
+		background-image: var(--icon_lock);
+		filter: invert(  var(--icon_lock_invrt)  );
+		background-size: var(--img15);
+	}
+	
+	.head .lrfx
+	{
+		width:1.5em;
+		background-image: var(--icon_fx);
+		filter: invert(  var(--icon_fx_invrt)  );
+		background-size: var(--img15);
+	}
+	
+	.head .arfx
+	{
+		width:1.6em;
+		border-left-width:1px;
+	}
+	
+	.head .folder
+	{
+		width:1.7em;
+		background-image: var(--icon_folder);
+		filter: invert(  var(--icon_folder_invrt)  );
+		background-size: var(--img15);
+	}
+	.head  canvas
+	{
+		border:1px solid black;
+		margin:3px;
+	}
+	
+	.head .active canvas
+	{
+		outline: 2px dashed var(--text-color);
+		outline-offset:0px;
+		/*border: 1px dashed var(--text-color);
+		margin: 3px;*/
+	}
+	
+
+	
+	
+	
+	
+	
+	
+	
+	
+	
+		
+	
+	
+	
+	
+	.hpbody  .listitem {  cursor: pointer;  padding:0.3em; }
+	
+	.topbar{
+		/*
+		border-bottom-width: 1px;
+		border-bottom-color:    var(--brdrDrk);
+		*/
+		/*height:32px;*/
+	}
+	
+	.topbar  button {
+		padding-left:5px;
+		padding-right:5px;
+		margin:4px;
+	}
+	
+	.topbar .bbtn {
+		margin: 3px 4px 2px 4px;
+	}
+	
+	
+	.contextpanel{
+		min-width : 10em;
+		box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
+		text-shadow:  none;
+	}
+	.cp_dark {
+		background-color: var(--base);
+		color: var(--text-color);
+	}
+	.cp_light {
+		background-color: #fff;
+		color: #000000;
+	}
+	.cp_trsp {
+		background-color: rgba(var(--abs255),var(--abs255),var(--abs255),0.4);
+		
+		color: rgb(calc(255 - var(--abs255)),calc(255 - var(--abs255)),calc(255 - var(--abs255))); 
+		backdrop-filter: blur(24px);
+		-webkit-backdrop-filter: blur(24px);
+		border-radius:6px;
+		
+		outline: 1px solid rgba(255,255,255,0.12);
+		outline-offset: -2px;
+		padding:6px;
+		/*border: 1px solid rgba(255,255,255,0.15);*/
+	}
+	
+	.contextpanel .check {
+		display: inline-block;
+		width:15px;
+	}
+	
+	.contextpanel .thumb
+	{
+		width : var(--img20);
+		height: var(--img20);
+		vertical-align: middle;
+		margin: -0.6em 0.8em -0.5em -0.5em;
+	}
+	.cp_light .thumb {
+		filter: invert(  0.2  );
+	}
+	
+	.contextpanel hr{
+		margin:0.25em 0;
+		background: #bebebe;
+	}
+	.cp_trsp hr {  background:rgba(255,255,255,0.15);  margin:0.25em 0.65em;  }
+	
+	.contextpanel div {
+		padding: 0.5em 1em 0.5em 0.7em;
+	}
+	.cp_trsp div {
+		padding: 0.35em 1em 0.35em 0.7em;
+	}
+	
+	.cp_light .enab:hover, .cp_light .active {
+		/*color:#fff;*/
+		background-color: rgba(190,230,255,1);
+	}
+	.cp_dark .enab:hover, .cp_dark .active {
+		/*color:#fff;*/
+		background-color: rgba(0,0,0, var(--alphaDark) );	
+	}
+	.cp_trsp .enab:hover, .cp_trsp .active {
+		/*color:#fff;*/
+		background-color: #206bcd;
+		border-radius:6px;
+	}
+	
+	.contextpanel  .disab {
+		opacity:0.4;
+		pointer-events: none;
+	}
+	
+	.contextpanel .right
+	{
+		float:right;
+		margin-left:2em;
+		opacity:0.7;
+	}
+			
+	.fitem {
+		display:inline-block;
+	}
+	
+	label {  margin-right:2px;  }
+	
+	input, textarea, .labelitem {
+		margin: 2px 0;
+		padding: 3px;
+		box-sizing: border-box;
+	}
+	/*
+	input, textarea, select {		
+		background-color: var(--bg-input);
+		color: var(--text-color);
+		border-radius: 3px;
+	}*/
+	input, textarea, select {
+		background-color: var(--bg-input);
+		color: var(--text-color);
+		border-radius: 3px;
+		border: 1px solid var(--bg-input);
+		transition: border 0.5s;
+	}
+
+	input:hover, textarea:hover, select:hover, input:focus, textarea:focus, select:focus {
+		border: 1px solid var(--accent); /* perhaps replace with var(--accent-color) */
+		outline: none!important;
+	}
+
+	textarea {  vertical-align:top;  }
+	
+	
+	input[type='range']
+	{
+		vertical-align:middle;
+		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;
+		box-shadow: 0px 0px 20px rgba(0,0,0,0.25);
+		opacity:0;  transform: scale(0.95);
+	}
+	.rangecontFloat	{
+		padding: 3px 8px 4px 8px;
+	}
+	.floatcont {
+		padding:7px;
+		/*box-shadow: 0px 8px 40px rgba(0,0,0,0.35);*/
+	}
+	
+	.mbox input {
+		margin-left: 0.7em;
+	}
+
+	
+	.tinput input
+	{
+		width:8em;
+	}
+	
+	.brushbutton img, .gradientbutton img  .contourbutton img{
+		display: inline-block;
+	}
+
+	.brushbutton {
+		
+	}
+	
+	.contourbutton {
+		line-height:2.1em;
+		
+	}
+	
+	
+	.ddmenu {
+		display:inline-block;
+	}
+	
+	.multicheck .slabel {
+		margin-right: 1em;
+	}
+	
+	.colorsample {
+		cursor:pointer;
+		width:2.2em;
+		height: 1.57em;
+		display:inline-block;
+		margin-bottom:-0.55em;
+		border-radius: 3px;
+	}
+	
+	.cswatch .colorsample {
+		width:1.3em;  height:1.3em;
+		margin-right: 0.1em;
+		border-width: 1px;
+		margin-bottom:-0.3em;
+	}
+	
+	
+	
+	.angleinput input {  width:3em;  }
+
+	
+	/*button img, button canvas, button svg, .mbox img*/
+	.fitem img, .fitem canvas, .fitem svg {
+		vertical-align: middle;
+	}
+	
+	.fillbutton canvas {
+		vertical-align:middle;
+		border-radius: 3px;
+		cursor:pointer;
+	}
+	
+	button {
+		padding: 2px 5px 3px 5px;
+		border-radius:3px;
+		color: var(--text-color);
+		text-align:center;
+		white-space: nowrap;
+	}
+	
+	select {
+		padding: 2px;
+	}
+	
+	
+	.active { 
+		background-color: rgba(0,0,0, var(--alphaDark) );
+	}
+	.bactive { 
+		background-color: var(--bg-input);
+	}
+	
+	@media (hover: hover) and (pointer: fine) {
+		button:hover { 
+			background-color: rgba(0,0,0, var(--alphaDark) );
+		}
+		.bactive:hover { 
+			background-color: var(--bg-input);
+		}
+	}
+	
+	.bbtn {
+		/*padding-left:5px;
+		padding-right:5px;*/
+		background-color: var(--bg-bbtn);
+		
+		border-top-width: 1px;
+		border-top-color: var(--brdrLgt);
+		border-bottom-width: 1px;
+		border-bottom-color:    var(--brdrDrk);
+		overflow:hidden;
+	}
+	.bbtn:hover {
+		background-color: var(--bg-bbtnOver);
+	}
+	
+	.spread {
+		width: 100%;
+	}	
+	
+	.nopadding {
+		margin: 0;
+		padding: 0;
+	}
+	
+	
+	
+	.imageset
+	{
+		/*overflow-y: scroll;*/
+		background-color: rgba(0,0,0, var(--alphaDark) );
+	}
+	
+	.imageset  .image, .imageset canvas
+	{
+		/*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;
+		vertical-align:middle;
+	}
+	.imageset .selected {
+		outline: 1.5px solid #00aaff;
+	}
+	
+	input[type='checkbox']
+	{
+		margin-right: 0.3em;
+		vertical-align:middle;
+	}
+	/*
+	input[type="checkbox"] + label:before {
+  border: 1px solid #333;
+  content: "";
+  display: inline-block;
+  font: 12px sans-serif;
+  font-weight:bold;
+  height: 12px;
+  margin-right:4px;
+  padding: 0;
+  vertical-align: middle;
+  width: 12px;
+  background: #fff;
+  color: #333;
+}
+input[type="checkbox"]:checked + label:before {  content: "\2713";  }
+*/
+
+
+	.rangedropinput button
+	{
+		margin:0;
+		padding:0.3em 0.1em;
+	}
+	
+	.rangedropinput input
+	{
+		margin-right:0;
+	}
+	
+	.trangeinput {  width:100%;  }
+	.trangeinput input[type='text']
+	{
+		margin-left:0;
+		margin-right:0;
+		width:33%;
+		text-align:right;
+	}
+	.trangeinput label
+	{
+		display:inline-block;
+		width:67%;
+		margin:0px;
+	}
+	.trangeinput input[type='range']
+	{
+		margin: -10px 0 0 0;
+		width:100%;
+	}
+	
+	
+	
+	.cbox
+	{
+		padding:0em 0;
+	}
+	
+	
+	.fontitem
+	{
+		padding:3px 6px;
+		border-radius:0.3em;
+		height:21px;
+		white-space: nowrap;
+	}
+	.fontitem:hover {
+		/*background-color: rgba(255,255,255, 0.6);*/
+		box-shadow:  inset 0 0 0.2em rgba(0,0,0,1); /*bottom internal shadow*/ 
+	}
+	.fontitem  .label
+	{
+		display:inline-block; width:9em; overflow:hidden; white-space: nowrap;
+	}
+	.fontitem .thumb
+	{
+		display:inline-block; width:120px; height:20px;  margin-left:0.5em;
+		background: url(../rsrc/fonts/fonts.png);
+	}
+	
+	.fontitem .star {
+		display: inline-block;
+		background-position: center; 
+		background-repeat: no-repeat;
+		background-image: var(--icon_cshape);
+		filter: invert(  var(--icon_cshape_invrt)  );
+		background-size: var(--img20) var(--img20);
+		width: 20px;  height: 20px;
+		vertical-align: top;
+		margin-right:4px;
+		opacity:0.1;
+	}
+	
+	
+	
+
+	.window
+	{
+		position:absolute;
+		z-index: 10;
+		background-color: var(--base);
+		/*border: 1px solid;*/
+		border-radius:6px;
+		min-width : 3em;
+		min-height: 2em;
+		top: 150px;
+		left: 150px;
+		box-shadow: 0px 4px 30px rgba(0,0,0,0.25);
+	}
+	
+	.wdisabled {
+		pointer-events: none;
+	}
+	
+	.window .vmargin
+	{
+		margin:0.5em 0;
+	}
+	
+	.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;
+		background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.25) 100%);
+		/*background: linear-gradient(to bottom, #2b2b2b 0%,  #282828 50%, #262626 100%);*/
+		/*background: linear-gradient(to bottom, #595959 0%,#626262 3%,#575757 7%,#3c3c3c 90%,#3a3a3a 97%,#2e2e2e 100%);*/
+		/*background: linear-gradient(to bottom, #59574e 0%,#626055 3%,#59574f 7%,#403f3a 90%,#41403b 97%,#383734 100%);*/
+		border-top-left-radius:6px;
+		border-top-right-radius:6px;
+	}
+	
+	.window .whead  .wname
+	{
+		display: inline-block;
+		padding: 0.3em 0.5em;
+		font-weight: bold;
+	}
+	
+	.window .whead  .cross
+	{
+		cursor: pointer;
+		display:inline-block;
+		background-image: var(--icon_cross);
+		background-size: 10px 10px;  
+		background-repeat: no-repeat;
+		background-position: center;
+		width:30px;
+		height:30px;
+		font-size: 1.3em;
+		position:absolute;  right:0;
+		
+	}
+	
+	
+	.window .wide
+	{
+		font-size: 1.2em;
+		display: block;
+	}
+	
+	.window .cbox{
+		margin-left:0.4em;
+	}
+	
+	.window .cbox, .window .angleinput {
+		display:inline-block;
+	}
+	
+	.window .body
+	{
+		padding: 1em;
+		/*line-height:1.6em;*/
+	}
+	
+	.window .body .form  .block
+	{
+		padding:1em;
+		border: 0.1em solid rgba(0,0,0,0.33);
+	}
+	
+	
+	.window .hbar > .fitem 
+	{
+		margin-right: 1em;
+	}
+	
+	
+	
+	
+	.window .imgcont
+	{
+		/*width:512px;
+		height:512px;*/
+		/*background-color: rgba(0,0,0,0.1);*/
+		text-shadow:none;
+		/*  keep it because of SVG  */
+		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAAXNSR0IB2cksfwAAAAZQTFRF////yMjIXOIDQgAAABJJREFUeJxjYPjPgBXhEB7uAABycQ/xMT/uAgAAAABJRU5ErkJggg==);
+	}
+	
+	/*
+	.window .body .form .tinput .label,  .window .body .form .ddmenu .label
+	{
+		display:inline-block;
+		min-width:4em;
+	}
+	*/
+	
+	.window  .flabel, .labfxd .flabel
+	{
+		display:inline-block;
+		min-width:4em;
+	}
+	.label6  .flabel
+	{
+		display:inline-block;
+		min-width:6em;
+	}
+	.label8  .flabel
+	{
+		display:inline-block;
+		min-width:8em;
+	}
+	.label12  .flabel
+	{
+		display:inline-block;
+		min-width:12em;
+	}
+	
+	.window .noalign  .flabel
+	{
+		min-width:0;
+	}
+	.window .noalign .fitem
+	{
+		margin-right:1em;
+	}
+	
+	.window  h2 {
+		margin-bottom: 0.2em;
+	}
+	
+	.account table {
+		border-width:0px;
+		border-spacing: 20px 0px;
+		width: calc(100% + 40px);
+		margin-left: -20px;
+		font-size:1.2em;
+		text-shadow:none;
+		padding-bottom:1em;
+	}
+	
+	.accounttable th, .account table td {  box-shadow: 0px 6px 12px rgba(0,0,0,0.25);  }
+	.account table th {
+		padding:10px 20px;
+		font-weight:normal;
+		font-size:1.25em;
+		color:white;
+		background-color: #2f6f9f;
+	}
+	.account table td {
+		color:#000;
+		background-color:white;
+		padding: 4px 11px;
+	}
+	.account table td ul {
+		list-style-type: none; padding:0;  margin:0; 
+	}
+	
+	/*
+	table {
+		border-width:2px;
+		font-size: 1.2em;
+		text-align: center;
+		border-collapse: collapse;
+		margin: 6px 0 6px 0;
+	}
+	
+	table .left {
+		text-align:left;
+		width: 240px;
+	}
+	
+	table td, table th {
+		width:140px;
+		margin:0;
+		padding: 3px 8px;
+		border-width:1px 2px;
+	}
+	
+	table th { font-size: 1.2em; border-bottom-width: 2px; background-color:rgba(0,0,0, var(--alphaDark) );  }
+	table .lastrow { font-weight:bold; }
+	
+	
+	table .yes, table .no  { font-weight: bold; font-size:1.6em; }
+	
+	table .yes { background-color: rgba(0,255,0,0.2); }
+	
+	*/
+	
+	
+	
+	
+	
+	
+	
+
+	.confbar
+	{
+		line-height:2.3em;
+	}
+	
+	.toolconf
+	{
+		display:flex;
+		flex-flow: row;
+	}
+
+	.confbar  .toolicon
+	{
+		width : var(--img20);
+		height: var(--img20);
+		margin: 5px 12px -4px 12px;
+		display: absolute;
+	}
+	
+	.confbar .body
+	{
+		
+	}
+	
+	.confbar .fitem {
+		margin-right: 0.35em;
+	}
+	
+	.confbar .body  > .fitem
+	{
+		margin-right: 1.2em;
+	}
+	
+	
+	.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; }
+	
+	.storage {  background-color:white;  color:#222222;  }
+	
+	.storwindow input {  background-color:white;  color:#333333;  }
+
+	.storage .cont {  padding:4px;  }
+	.storage img  {  object-fit: contain;  }
+	.storage .name {  word-break:break-all;  line-height:1.35em;  overflow:hidden;  display:inline-block;  vertical-align:middle;  }
+	
+	.storage .ext {
+		position:absolute;  top:2px;  left:2px;
+		color:white;  padding:2px 3px 2px 3px;  line-height:1em;  font-weight:bold;  border-radius:2px;
+	}
+
+	.storage .tile {
+		display:inline-block;
+		margin: 0 10px 10px 0;
+	}
+	.storage .tile img {
+		vertical-align:middle;
+		width:44px;
+		height:44px;
+		margin-right:8px;
+	}
+	.storage .tile .name {
+		height:36px;
+	}
+	
+	
+	.storage .icon {
+		display:inline-block;
+		height:136px;
+		text-align:center;
+		margin: 0 10px 10px 0;
+	}
+	.storage .icon img {
+		width:100px;
+		height:100px;
+		display:block;
+	}
+	.storage .icon .name {
+		width:100px;  height:36px;  
+	}
+	
+	
+	.storage .litm {
+		width:100%;
+	}
+	.storage .litm img {
+		width:24px; height:24px;  
+		vertical-align:middle;  margin-right:16px;
+	}
+	.storage .litm .name {
+		width:300px;
+	}
+	
+	.storage .active  {
+		background-color: #ddf0ff;
+	}
+	
+	
+	.storage .bar, .storage .fls {  padding:10px;  }
+	
+	.storage .bar {
+		background-color: rgba(0,0,0,0.05);
+	}
+	
+	.storage .bar span {
+		padding: 4px 4px;
+	}
+	
+	.storage .btn {
+		cursor:pointer;  display:inline-block;
+		background-color: #aaccff;  padding: 0.3em 0.6em;  border-radius: 0.2em;  margin:0px 3px;
+	}
+	

templates/index.html

@@ -0,0 +1,235 @@
+
+<!DOCTYPE html> 
+
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
+		
+		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
+		<link rel="stylesheet" href="templates.css" />
+		
+		<title>PSD Templates</title>
+		<meta name="description" content="Free PSD Templates">
+		<script>fetch("//www.photopea.com/papi/event.php?id=web_Templates");</script>
+		
+		<script src="templates.js"></script>
+		<script>
+		
+			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;
+			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;  }  }
+			
+			function go() {
+				cont = document.getElementById("cont");
+				cats = document.getElementById("cats");
+				kwds = document.getElementById("kwds");
+				search = document.getElementById("search");
+				back = document.getElementById("back");  cont.removeChild(back);
+				itms = document.getElementById("itms");
+				add_link = document.getElementById("add_link");
+				window.addEventListener("resize",onResize,false);  onResize();
+			
+				var request = new XMLHttpRequest();
+				request.open("GET", "../papi/tpls.json", true);
+				request.onload = imgsLoaded;
+				request.onerror = function(e) {  console.log(e.target.response);  }
+				request.send();
+				
+				if(Math.random()<0.01) {
+					var request = new XMLHttpRequest();
+					request.open("GET", "../papi/img/reduce.php", true);
+					request.send();
+				}
+				
+				if(Math.random()<0.01) {
+					var request = new XMLHttpRequest();
+					request.open("GET", "https://www.photopea.com/papi/updateTemplates.php", true);
+					request.send();
+				}
+				
+				window.onbeforeunload = trackScroll;
+			}
+			function trackScroll()  {  var scrl=[Date.now(),ccat,caut,itms.scrollTop];  if(citm==-1) localStorage.setItem("scrl",JSON.stringify(scrl));  }
+			function onResize() {
+				if(tpls) updateView();
+			}
+			
+			function imgsLoaded(e) {
+				var hr=window.location.href, sch = hr.slice(hr.indexOf("/templates")+11);
+				var uprt = sch.split("?");
+				if(uprt[1]) {
+					var prts=uprt[1].split("&");
+					for(var i=0; i<prts.length; i++) {  
+						var kv=prts[i].split("=");  
+						if(kv[0]=="type") TYPE=parseInt(kv[1]);
+						else if(kv[0]=="rsrc") RSRC=kv[1].length==0 ? [] : kv[1].split(",");
+						//else console.log(kv);
+					}
+				}
+				
+				IFR = window.top!=window.self;
+				OTPLS = JSON.parse(e.target.response);
+				tpls  = JSON.parse(e.target.response);
+				tpls.categories = tpls.categories[TYPE];
+				for(var i=0; i<tpls.list.length; i++) if(tpls.list[i][0]!=TYPE) {  tpls.list.splice(i,1);  i--;  }
+				
+				rebuild(sch, true);				
+			}
+			
+			function rebuild(sch, firstTime) {
+				console.log(sch);
+				if(!firstTime) trackScroll();
+				citm=-1;
+				if(caut<-1) caut=-1;
+				if(sch[0]=="-") {
+					if(sch[1]=="a") caut=-1;
+					if(sch[1]=="c") ccat=-1;
+				}
+				else if(sch!="") {  					
+					var ci = sch.slice(2).split("?")[0].split("&")[0];  // Facebook might add "?" parameters
+					if(sch[0]=="c") {
+						var cts=tpls["categories"];
+						for(var c in cts) if(toCat(cts[c])==ci) ccat=parseInt(c.slice(1));
+					}
+					if(sch[0]=="t") {
+						var lst=tpls["list"];
+						for(var i=0; i<lst.length; i++) if(tempID(lst[i])==ci) citm = i;
+					}
+					if(sch[0]=="a") {
+						var lst=tpls["authors"];
+						for(var i=0; i<lst.length; i++) if(lst[i][0]==ci) caut = i;
+					}
+					if(sch=="authors"  ) caut=-2;
+					if(sch=="installed") caut=-3;
+				}
+				console.log(citm,caut);
+				var tit="PSD Templates";
+				if(ccat!=-1) tit=tpls.categories["c"+ccat] + " | "+tit;
+				if     (caut==-2) tit="Top Authors";
+				else if(caut==-3) tit="Installed";
+				else if(caut!=-1) tit="By "+tpls.authors   [caut][ 1] + " | "+tit;
+				if(citm!=-1) tit=tpls.list      [citm][ 9] + " | "+tit;
+				if(citm!=-1) document.head.children.namedItem("description").content = tpls.list[citm][9];
+				document.title = tit;
+				
+				updateView();
+				
+				itms.scrollTop="0";
+				var scrl = localStorage.getItem("scrl");
+				if(scrl) {
+					scrl=JSON.parse(scrl);  if(scrl.length==null) return;
+					if(citm==-1 && Date.now()-scrl[0]<60e3 && scrl[1]==ccat && scrl[2]==caut) itms.scrollTop = scrl[3];
+				}	
+			}
+			
+			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!":"");
+				add_link.setAttribute("href",
+					TYPE==0 ? "//www.photopea.com/tuts/publish-your-psd-templates-in-photopea/" : "//www.photopea.com/api/plugins");
+			
+				var tpl=citm!=-1 ? tpls.list[citm]:null;
+				var comp;
+				if(ordr==0) comp=function(a,b) {return cost0(b)-cost0(a);}
+				if(ordr==1) comp=function(a,b) {return cost1(b)-cost1(a);}
+				if(ordr==2) comp=function(a,b) {return cost2(b)-cost2(a);}
+				tpls.list.sort(comp);
+				if(tpl) citm=tpls.list.indexOf(tpl);
+				
+				if(citm==-1 && !isDisplayed(search)) {  clearNode(cont);  cont.appendChild(search);  cont.appendChild(itms);  }
+				if(citm!=-1) {  clearNode(cont);  cont.appendChild(back);  cont.appendChild(itms);  }
+				clearNode(itms);
+				
+				var twds = kwds.value.trim().toLowerCase(), wds=twds.split(/[ ,]+/);
+				var out = [];
+				if     (caut==-2) printAuthors  (tpls, out);
+				else if(caut==-3) printInstalled(tpls, out);
+				else              makeView(tpls,out,twds,wds,ccat,caut,citm);
+				
+				itms.innerHTML=out.join("\n");
+				
+				var out = [];
+				getCats(tpls,ccat,out);
+				cats.innerHTML = out.join("\n");
+				
+				if(citm==-1) {
+					var ords = document.getElementsByClassName("order");
+					for(var i=0; i<3; i++) ords[i].setAttribute("class", "order"+(i==ordr ? " blue":""));
+				}
+			}			
+			
+			function backClicked(e) {
+				if(IFR) rebuild("");
+				else history.back();
+				/*
+				citm = -1;
+				updateView();
+				itms.scrollTo(0,cscr); */
+			}
+			function itemClicked(id) {
+				if(IFR) {
+					if(id==null) id = tpls.list[citm][3];
+					var ii=RSRC.indexOf(id);
+					var msg = "--ot "+id;
+					if(TYPE!=0) {
+						if(ii==-1) RSRC.push(id);  else RSRC.splice(ii,1);
+						msg = "--ur "+RSRC.join(",");
+						updateView();
+					}
+					window.parent.postMessage(msg);
+				}
+				else window.open("//www.Photopea.com#t"+tempID(tpls.list[citm]));
+			}
+			function catClicked(nc) {
+				if(nc==ccat) ccat=-1;
+				else ccat=nc;
+				citm=-1;
+				updateView();
+			}
+			function setOrder(ord) {
+				ordr=ord;  localStorage.setItem("ordr",JSON.stringify([ordr, Date.now()]));
+				updateView();
+				itms.scrollTo(0,0);
+			}
+			var __time=0;
+			function labelClicked(e) {
+				var ot = __time;  __time=Date.now();  if(__time-ot>200) return;
+				var ci = tpls.list[citm];  
+				var str=tpls.authors[ci[1]][0]+","+ci[3];
+				if(window.parent) window.parent.postMessage("--et "+str,"*");
+				//alert(str);
+			}
+		</script>
+	</head>
+	
+	<body onload="go()" class="flexrow">	
+		
+		<div id="cats" class="scrollable">
+		</div>
+	
+		<div id="cont">
+			<div id="search">
+				<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 style="display:inline-block">
+					<label>Search:</label> <input type="text" id="kwds" oninput="updateView()" style="margin-right:1.5em;"></input>
+				</span>
+				<a id="add_link" href="//www.photopea.com/tuts/publish-your-psd-templates-in-photopea/" target="_blank">Add your own template!</a>
+			</div>
+			<div id="back">
+				<span class="back" onclick="backClicked()">&lt; Back</span>
+			</div>
+			<div id="itms" class="scrollable"></div>
+		</div>
+	</body>
+</html>

templates/templates.css

@@ -0,0 +1,56 @@
+			
+			
+	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%;  }
+	
+	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 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;  }
+	.count {  float:right;  }
+	.cat_title {font-size:1.6em;  display:inline-block;  margin:4px 0 10px 0;}
+	.t2 {font-size:1.2em;  }
+	.openimg {opacity:0;   text-align:center; font-size:4em; position:absolute; top:0; left:0;  cursor:pointer; 
+		color:white; background-color:rgba(0,0,0,0.5);  text-shadow: 0 0 8px black; }
+	.openimg:hover {opacity:1;}
+	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;  }
+	
+	.order {  margin-right:1.5em;  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-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;
+	}

templates/templates.js

@@ -0,0 +1,309 @@
+
+	function printInstalled(tpls,out) {
+		
+		console.log(OTPLS,RSRC);
+		var list = OTPLS.list;
+		
+		out.push("<h1>Installed</h1>");
+		out.push("<table style=\"font-size:1.2em; line-height:1.7em;\">");
+		out.push("<tr><th style=\"width:300px\">Name</th><th></th></tr>");
+		
+		for(var ri=0; ri<RSRC.length; ri++) {
+			var id=RSRC[ri], cr=null;
+			for(var i=0; i<list.length; i++) if(list[i][3]==id) cr=list[i];
+			out.push("<tr><td>")
+			if(cr) {
+				if(cr[0]==TYPE) out.push("<a class=\"clc\" "+OC("t-"+tempID(cr))+">"+shorten(cr[9],24)+"</a>");
+				else out.push(shorten(cr[9],24));
+			}
+			else   out.push("????");
+			//out.push("</td><td>Uninstall</td></tr>");
+			out.push("<td><a class=\"clickable\" onclick=\"itemClicked('"+id+"')\" style=\"cursor:pointer\" >Uninstall</a></td></tr>");
+		}
+		
+		out.push("</table>");
+	}
+	
+	function printAuthors(tps, out) {
+		var as = JSON.parse(JSON.stringify(tps.authors)), list=tps.list;
+		
+		var to = [0,"Total:",0,0,0,0];
+		for(var i=0; i<list.length; i++) {
+			var tpl=list[i], ca=as[tpl[1]];
+			if(ca.length==2) ca.push(0,0,0,0);  // tcount, usages, size, time
+			ca[2]++;  ca[3]+=tpl[7];  ca[4]+=tpl[8];  ca[5]=Math.max(ca[5],tpl[2]);
+			to[2]++;  to[3]+=tpl[7];  to[4]+=tpl[8];  to[5]=Math.max(to[5],tpl[2]);
+		}
+		var nas = [];  for(var i=0; i<as.length; i++) if(as[i].length!=2) nas.push(as[i]);  as=nas;
+		
+		as.sort(function(a,b) { return b[3]-a[3];  });  as.push(to);
+		
+		var tdr = "<td style=\"text-align:right; width:120px;\">";
+		var thr = "<th style=\"text-align:right; width:120px;\">";
+		
+		out.push("<h1>Best Contributors</h1>");
+		out.push("<table style=\"font-size:1.2em; line-height:1.7em;\">");
+		out.push("<tr><th></th><th>Name</th>"+thr+"#Templates</th>"+thr+"Usages</th>"+thr+"Total Size</th>"+thr+"Last One</th></tr>");
+		
+		
+		for(var i=0; i<as.length; i++) {
+			var ca = as[i], last=i+1==as.length;
+			out.push(last ? "<tr style=\"font-weight:bold\">" : "<tr>");
+			
+			if(!last) out.push("<td style=\"text-align:right;\">"+(i+1)+".</td>");
+			else out.push("<td></td>");
+			out.push("<td style=\"padding-left:10px;\"><a class=\"clc\" "+OC("a-"+ca[0])+">"+shorten(ca[1],24)+"</a></td>");
+			out.push(tdr+ca[2]+"</td>");
+			out.push(tdr+printNum(ca[3])+"</td>");
+			out.push(tdr+printBytes(ca[4])+"</td>");
+			out.push(tdr+"<small>"+printAge(ca[5])+" ago</small></td>");
+			out.push("</tr>");
+		}
+		out.push("</table>");
+	}
+	
+	function makeView(tps,out,twds,wds,curc,caut,cit) {
+		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>");
+			var oi = out.length; out.push("");
+			var N=0, U=0, S=0;
+			for(var i=0; i<list.length; i++) {
+				var tpl = list[i], cat=tpl[5], pcat=cat-(cat%10);
+				if(caut!=-1 && tpl[1]!=caut) continue;
+				if(curc!=-1) {
+					if((curc%10)==0) {  if(pcat!=curc) continue;  }
+					else if(curc!=cat) continue;
+				}
+				if(twds!="") {
+					var occ=0, tot=(tpl[8] + " " + tpl[9] + " " + tps.authors[tpl[1]] + " " + cts["c"+tpl[5]]).toLowerCase();
+					for(var j=0; j<wds.length; j++) {
+						if(tot.indexOf(wds[j])!=-1) occ++;
+					}
+					if(occ==0) continue;
+				}
+				makeItem(tps,i, cts,out, false);
+				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>");
+		}
+	}
+	
+	function uses() {  return TYPE==0?"uses":"installs";  }
+	function shorten(str, lim) {
+		return (str.length<lim) ?str:str.slice(0,lim-3)+"...";
+	}
+	function mmd(e) {
+		var t=e.target;  //if(t.tagName.toLowercase()!="img") return;
+		var r = t.getBoundingClientRect();
+		t.setAttribute("style", "object-position: "+(100*e.offsetX/r.width)+"% "+(100*e.offsetY/r.height)+"%;");
+	}
+	function mmo(e) {
+		var t=e.target;
+		t.setAttribute("style", "object-position: 50% 50%;");
+	}
+	function toID(str) {  return str.toLowerCase().replace(/\s+/g, "-")+".html"; }
+	function makeItem(tps, ind,cts,lst, big) {
+		var tpl = tps.list[ind], gotR = RSRC.indexOf(tpl[3])!=-1;
+		var rst = window.innerWidth-(245+30);  //console.log(iw);
+		var num = 1;  while(rst/num>300) num++;
+		var cc = Math.floor(rst/num);  //console.log(cc);
+		var isz = cc-20;  //console.log(isz);
+		
+		var tit = escapeHtml(tpl[9]);
+		var lim = ~~(isz/9);  //console.log(tpl);
+		
+		if(big) isz=rst/2;
+		var wi = (isz+"px");
+		var hi = ((isz*9.3/16)+"px");
+		
+		lst.push("<div class=\"item "+(big?"flexrow":"tiny")+"\" "+(big?"":"style=\"width:"+wi+";\" ")+">");
+		
+		var iurl = tpl[4]; //(Math.random()<0.5?"wide.png":"tall.png");  // tpl[3]
+		//*
+		
+		
+		lst.push("<div style=\"width:"+wi+"; min-width:"+wi+"; height:"+hi+"\">");  // ict
+		if(!big) lst.push("<a "+OC("t-"+tempID(tpl))+" title=\""+tit+"\">");
+		lst.push("<img src=\""+iurl+"\" loading=\"lazy\" onmousemove=\"mmd(event)\" onmouseout=\"mmo(event)\" "
+		+(big ? "onclick=\"itemClicked()\" title=\"Open &quot;"+tit+"&quot;\"" : "")+" />");
+		//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
+		
+		if(!big) lst.push("<a class=\"clc\" "+OC("t-"+tempID(tpl))+" title=\""+tit+"\">");
+		var tag = big?"h1":"span";
+		lst.push("<"+tag+" class=\"title "+(big?"t1":"t2")+"\" "+(big?"onclick=\"labelClicked()\"":"")+">" + 
+			(big?tit:shorten(tit,lim)) + (gotR?" ✅":"") + "</"+tag+">");
+		if(!big) lst.push("</a>");
+		
+		var au = tps.authors[tpl[1]];
+		var cat = cts["c"+tpl[5]];
+		lst.push("<span>")
+		lst.push( "By <a class=\"clc\" "+OC("a-"+au[0]     )+">" +escapeHtml(big?au[1]:shorten(au[1],~~(lim*0.7)))+"</a>");
+		lst.push(" in <a class=\"clc\" "+OC("c-"+toCat(cat))+">" + cat+"</a>");
+		lst.push("</span>");
+		
+		if(big) {
+			lst.push("<p style=\"white-space: pre-line;\">"+findLinks(escapeHtml(tpl[10]))+"</p>");
+			lst.push("<p style=\"font-size:1.5em; margin-bottom: 0em;\">");
+			var dstr = printDate(tpl[2]);
+			
+			lst.push("<span title=\""+printNum(tpl[6])+" views"+"\">"+printNum(tpl[7])+" "+uses()+"</span>")
+			lst.push(" • "+printBytes(tpl[8]));
+			lst.push(" • <span title=\""+((0.001*Date.now()-tpl[2])/(60*60*24)).toFixed(2)+" days ago\">"+dstr+"</span>");//  lst.push("<br/>");
+			
+			lst.push("</p>");
+			lst.push("<p style=\"font-size:1.2em; margin-top:0.5em;\">");
+			var aurl = "//www.Photopea.com#t"+tempID(tpl);
+			if(TYPE==0) lst.push("<a href=\""+aurl+"\" target=\"_blank\" class=\"clickable\" >photopea.com#t"+tempID(tpl)+"</a>");
+			else        lst.push("<a class=\"clickable\" onclick=\"itemClicked()\" style=\"cursor:pointer\" >"+(gotR?"Uninstall":"Install")+"</a>");
+			lst.push("</p>");
+		}
+		else {
+			lst.push("<br/><span>");
+			
+			var us=tpl[7], ss="";  //us = Math.floor(Math.random()*1e9);
+			if(us<1000) ss=us+"";
+			else if(us<1e6) ss=(us/1e3).toFixed(us<1e4 ? 1 : 0)+"K";
+			else if(us<1e9) ss=(us/1e6).toFixed(us<1e7 ? 1 : 0)+"M";
+			
+			var sl=ss.length-3;
+			if(ss[sl]=="." && ss[sl+1]=="0") ss=ss.slice(0,sl)+ss[sl+2];
+			
+			lst.push(ss+" "+uses());
+			
+			
+			var ts = printAge(tpl[2]);
+			
+			lst.push(" • "+ts+" ago");
+			lst.push("</span>");
+		}
+		lst.push("</div>"); // cmt
+		lst.push("</div>");
+	}
+	
+	function OC(tgt) {  // onclick
+		if(IFR) return "onclick=\"rebuild('"+tgt+"')\" style=\"cursor:pointer;\"";
+		if(tgt[0]=="-") tgt="";
+		return "href=\""+(tgt==""?"/templates/":tgt)+"\"";
+	}
+	
+	function printAge(time) {
+		var sts = [60, 60, 24, 30, 12,10000];
+		var uns = ["sec","min","hour","day","month","year"];
+		var td = (Date.now()/1000) - time, ts="";
+		var lim = 1;
+		for(var i=0; i<sts.length; i++) {
+			var ol=lim;  lim*=sts[i];
+			if(td<lim) {  var n=Math.round(td/ol);  ts=n+" "+uns[i]+(n>1?"s":"");  break; }
+		}
+		return ts;
+	}
+	function printBytes(bs) {
+		var bst = bs.toString(2);
+		var zrs=0; while(zrs+10<bst.length) zrs+=10;
+		var num = (bs/Math.pow(2,zrs)), rn=Math.round(num), fxd=num.toFixed(1);
+		num = (rn>99 || fxd[fxd.length-1]=="0") ? rn : fxd;
+		
+		var ext = ["B","KB","MB","GB","TB","PB"][Math.floor(zrs/10)];
+		return num+" "+ext;
+	}
+	
+	function printDate(d) {
+		var dt = new Date(d*1000);
+		var mon = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","Nov","Dec"][dt.getMonth()];
+		return mon+" "+(dt.getDate())+", "+dt.getFullYear();
+	}
+	function printNum(f) {  return f.toLocaleString('en-US', {maximumFractionDigits:2});  }
+	function tempID(tpl) {  return tpl[3].split("").reverse().join("");  }
+	function isWhite(c) {  return c==" " || c=="\n" || c=="\t";  }
+	function isChar(c) {  c=c.charCodeAt(0);  return (65<=c && c<=90) || (97<=c && c<=122);  }
+	
+	function findLinks(str) {
+		//return str;
+		var iod = [];
+		for(var i=0; i<str.length-2; i++) if(str[i]=="." && isChar(str[i+1]) && isChar(str[i+2])) iod.push(i);
+		iod.reverse();  //console.log(iod);
+		
+		var omit=["https://", "http://", "//", "www."];
+		
+		var min = 1e9;
+		for(var i=0; i<iod.length; i++) {
+			var i0=iod[i], i1=i0;  if(i0>min) continue;
+			
+			while(i0>0 && !isWhite(str[i0-1])) i0--;
+			while(i1<str.length-1 && !isWhite(str[i1+1])) i1++;
+			if(str[i0]==" ") i0++;  if(str[i1]==" ") i1--;
+			var mid = str.slice(i0,i1+1), url=mid;
+			for(var j=0; j<omit.length; j++) if(mid.startsWith(omit[j])) mid=mid.slice(omit[j].length);
+			if(url.indexOf("//")==-1) url="//"+url;
+			str = str.slice(0,i0)+"<a href=\""+url+"\" target=\"_blank\">"+mid+"</a>"+str.slice(i1+1);
+			min=i0;
+		}
+		return str//.replaceAll("\n","<br/>");
+	}
+	
+	function escapeHtml(unsafe) {
+		return unsafe
+			 .replace(/&/g, "&amp;")
+			 .replace(/</g, "&lt;")
+			 .replace(/>/g, "&gt;")
+			 .replace(/"/g, "&quot;")
+			 .replace(/'/g, "&#039;");
+	 }
+	
+	function getCatCounts(tps) {
+		var list = tps.list, cts=tps.categories;
+		var ccnt = JSON.parse(JSON.stringify(cts));
+		for(var cat in ccnt) ccnt[cat]=0;
+		for(var i=0; i<list.length; i++) {
+			var tpl = list[i], cat=tpl[5], pcat=cat-(cat%10);
+			ccnt["c"+cat]++;  if(cat!=pcat) ccnt["c"+pcat]++;
+		}
+		return ccnt;
+	}
+	
+	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_title\">CATEGORIES</span>");
+		for(var cat in cts) {
+			if(ccnt[cat]==0) continue;
+			var cw = parseInt(cat.slice(1)), isTop = (cw%10)==0;  //console.log(cw);
+			out.push("<a "+OC(cw==curr ? "-c" : "c-"+toCat(cts[cat]))+">");
+			out.push("<div class=\"cat"+(isTop?" top":"") + (cw==curr?" blue":"")+" clickable\" >");  // onclick=\"catClicked("+cw+")\"
+			out.push(cts[cat]);
+			out.push("<span class=\"count\">"+ccnt[cat]+"</span>");
+			out.push("</div>");
+			out.push("</a>");
+		}
+		if(TYPE!=0) out.push("<br/><span class=\"cat top clickable\"><a "+OC("installed")+">INSTALLED ("+RSRC.length+")</a></span>");			
+	}
+	function toCat(cat) {  
+		var ioa=cat.indexOf(" &");
+		if(ioa!=-1) cat=cat.slice(0,ioa)+cat.slice(ioa+2);
+		var ioa=cat.indexOf(" /");
+		if(ioa!=-1) cat=cat.slice(0,ioa)+cat.slice(ioa+2);
+		return cat.toLowerCase().replace(/\s+/g, "-");  
+	}
+	
+	
+	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 = 60*Math.pow(Math.PI,-age*0.15);
+		
+		return cst+ext;
+	}
+	function cost1(v) { return  v[2]; }
+	function cost2(v) { return  v[7]; }
+	
+