Move code to the top

Jellyfin.Plugin.SkinManager/Jellyfin.Plugin.SkinManager.csproj

@@ -16,9 +16,6 @@
   <ItemGroup>
     <None Remove="Configuration\configurationpage.html" />
     <EmbeddedResource Include="Configuration\configurationpage.html" />
-
-    <None Remove="Configuration\fontpicker.js" />
-    <EmbeddedResource Include="Configuration\fontpicker.js" />
   </ItemGroup>
 
   <ItemGroup>

Jellyfin.Plugin.SkinManager/Plugin.cs

@@ -34,16 +34,6 @@ namespace Jellyfin.Plugin.SkinManager
                 {
                     Name = "SkinManager",
                     EmbeddedResourcePath = GetType().Namespace + ".Configuration.configurationpage.html"
-                },
-                 new PluginPageInfo
-                {
-                    Name = "fontpicker.js",
-                    EmbeddedResourcePath = GetType().Namespace + ".Configuration.fontpicker.js"
-                }, 
-                new PluginPageInfo
-                {
-                    Name = "fontpicker.css",
-                    EmbeddedResourcePath = GetType().Namespace + ".Configuration.jquery.fontpicker.min.css"
                 }
             };
         }

install.bat

@@ -1,10 +1,3 @@
-@ECHO OFF
+This will not work if you have installed jellyfin to a custom location
-@echo This will not work if you have installed jellyfin to a custom location
-set /p ask = Enter 'X' to continue or 'C' to cancel: 
-if "%ask%" neq "x" goto:eof
-
-    @echo starting install...
-
 dotnet publish --configuration Release --output bin
-
 move bin\Jellyfin.Plugin.SkinManager.dll C:\ProgramData\Jellyfin\Server\plugins\SkinManager

skins-3.0.json

@@ -1,136 +1,71 @@
-[{
+[
+  {
     "name": "Default",
     "author": "Jellyfin",
     "description": "Default, stock, Jellyfin.",
     "defaultCss": "",
-        "previews": [{
+    "previews": [
+      {
         "name": "Login Page",
-                "url": "https://raw.githubusercontent.com/danieladov/jellyfin-plugin-skin-manager/master/src/img/Default/1.png"
+        "url": ""
       },
       {
         "name": "Home/Index Page",
-                "url": "https://raw.githubusercontent.com/danieladov/jellyfin-plugin-skin-manager/master/src/img/Default/2.png"
+        "url": ""
       },
       {
         "name": "Library Page",
-                "url": "https://raw.githubusercontent.com/danieladov/jellyfin-plugin-skin-manager/master/src/img/Default/3.png"
+        "url": ""
       },
       {
         "name": "Title page",
-                "url": "https://raw.githubusercontent.com/danieladov/jellyfin-plugin-skin-manager/master/src/img/Default/4.png"
+        "url": ""
       }
     ],
-        "categories": [{
+    "categories": [
+      {
         "name": "Default",
         "options": []
-        }]
-    },
-    {
-        "name": "JellySkin",
-        "author": "prayagprajapati17",
-        "description": "A very bright and colorful look using lots of drop shadows. Theme is by prayag17.",
-        "defaultCss": "@import url('https://prayag17.github.io/JellySkin/default.css');",
-        "previews": [{
-                "name": "Login Page",
-                "url": "https://prayag17.github.io/JellySkin/img/login.jpg"
-            },
-            {
-                "name": "Home/Index Page",
-                "url": "https://prayag17.github.io/JellySkin/img/Home.jpg"
-            },
-            {
-                "name": "Library Page",
-                "url": "https://prayag17.github.io/JellySkin/img/Movies.jpg"
-            },
-            {
-                "name": "Title page",
-                "url": "https://prayag17.github.io/JellySkin/img/Title%20Page-Movie.jpg"
-            }
-        ],
-        "categories": [{
-            "name": "Default",
-            "options": [{
-                    "type": "selector",
-                    "name": "Gradient",
-                    "description": "Changes the Jellyfin themed Hover gradient",
-                    "css": "@import url('https://prayag17.github.io/JellySkin/$.css');",
-                    "selections": [{
-                            "name": "Default",
-                            "value": "",
-                            "css": "@import url('https://prayag17.github.io/JellySkin/default.css');"
-                        },
-                        {
-                            "name": "Sea Gradient",
-                            "value": "seaGradient",
-                            "css": "@import url('https://prayag17.github.io/JellySkin/seaGradient.css');"
-                        },
-                        {
-                            "name": "Sunset Gradient",
-                            "value": "sunsetGradient",
-                            "css": "@import url('https://prayag17.github.io/JellySkin/sunsetGradient.css');"
-
-                        },
-                        {
-                            "name": "Night Sky Gradient",
-                            "value": "nightSkyGradient",
-                            "css": "@import url('https://prayag17.github.io/JellySkin/nightSkyGradient.css');"
-
-                        },
-                        {
-                            "name": "Morning Gradient",
-                            "value": "morningGradient",
-                            "css": "@import url('https://prayag17.github.io/JellySkin/morningGradient.css');"
-
       }
     ]
   },
-                {
-                    "type": "checkBox",
-                    "name": "Theme Logo",
-                    "description": "Styles title page in such a way in which logos are used instead of Names.",
-                    "css": "@import url('https://prayag17.github.io/JellySkin/Logo.css');"
-                }
-            ]
-        }]
-    },
   {
     "name": "JellyFlix",
     "author": "prayagprajapati17",
     "description": "A theme that aims to replicate the red and black look of Netflix. Theme is by prayag17.",
     "defaultCss": "@import url(https://prayag17.github.io/JellyFlix/default.css);",
-        "previews": [{
+    "previews": [
+      {
         "name": "Login Page",
-                "url": "https://prayag17.github.io/JellyFlix/img/Login.jpg"
+        "url": "https://github.com/prayag17/JellyFlix/raw/main/Public%20Ver%201/LoginMan.png?raw=true"
       },
       {
         "name": "Home/Index Page",
-                "url": "https://prayag17.github.io/JellyFlix/img/Home.jpg"
+        "url": "https://github.com/prayag17/JellyFlix/raw/main/Public%20Ver%201/Home.png?raw=true"
       },
       {
         "name": "Library Page",
-                "url": "https://prayag17.github.io/JellyFlix/img/Movies.jpg"
+        "url": "https://github.com/prayag17/JellyFlix/raw/main/Public%20Ver%201/LibPage.png?raw=true"
       },
       {
         "name": "Title page",
-                "url": "https://prayag17.github.io/JellyFlix/img/Title%20Page-TV.jpg"
+        "url": "https://github.com/prayag17/JellyFlix/raw/main/Public%20Ver%201/TV-TitlePage.png?raw=true"
       }
     ],
-        "categories": [{
+    "categories": [
+      {
         "name": "Default",
-            "options": [{
+        "options": []
-                "type": "checkBox",
+      }
-                "name": "Theme Logo",
+    ]
-                "description": "Styles title page in such a way in which logos are used instead of Names.",
-                "css": "@import url('https://prayag17.github.io/JellyFlix/Logo.css');"
-            }]
-        }]
   },
   {
     "name": "Monochromic",
     "author": "EdgeMentality",
     "description": "This theme aims to be minimalistic and somewhat muted in color. Add-ons and custom accent colors are possible, but not entirely supported by this plug-in. Visit the github of the theme for more information.",
     "defaultCss": "@import url('https://ctalvio.github.io/Monochromic/default_style.css');",
-        "previews": [{
+    "previews": [
+      {
         "name": "Login Page",
         "url": "https://github.com/danieladov/jellyfin-plugin-skin-manager/blob/master/src/img/Monochromic/login.jpg?raw=true"
       },
@@ -147,9 +82,11 @@
         "url": "https://github.com/CTalvio/Monochromic/raw/master/screenshots/2.png"
       }
     ],
-        "categories": [{
+    "categories": [
+      {
         "name": "Default",
-            "options": [{
+        "options": [
+          {
             "type": "checkBox",
             "name": "Improve performance",
             "description": "The theme uses mask-image to fade out items below the top bar as you scroll. This works well on most reasonable hardware but struggles on some phones and especially smart TVs. This switches to a method without using mask-image, but foregoes the fade-out effect. I may switch to this method being the default.",
@@ -182,14 +119,16 @@
             "default": ""
           }
         ]
-        }]
+      }
+    ]
   },
   {
     "name": "Kaleidochromic",
     "author": "Casper Talvio",
     "description": "This theme aims to be more colorful and minimalistic. Add-ons and custom accent colors are possible, but not entirely supported by this plug-in. Visit the github of the theme for more information.",
     "defaultCss": "@import url('https://ctalvio.github.io/Kaleidochromic/default_style.css');",
-        "previews": [{
+    "previews": [
+      {
         "name": "Login Page",
         "url": "https://github.com/danieladov/jellyfin-plugin-skin-manager/blob/master/src/img/Kaleidochromic/Login.jpg?raw=true"
       },
@@ -206,9 +145,11 @@
         "url": "https://github.com/CTalvio/Kaleidochromic/raw/main/screenshots/1.png"
       }
     ],
-        "categories": [{
+    "categories": [
+      {
         "name": "Default",
-            "options": [{
+        "options": [
+          {
             "type": "checkBox",
             "name": "Improve performance",
             "description": "The theme uses mask-image to fade out items below the top bar as you scroll. This works well on most reasonable hardware but struggles on some phones and especially smart TVs. This switches to a method without using mask-image, but foregoes the fade-out effect.",
@@ -235,7 +176,8 @@
             "default": "#6279cd"
           }
         ]
-        }]
+      }
+    ]
   },
   {
     "name": "Novachromic",
@@ -261,9 +203,11 @@
         "url": "https://github.com/CTalvio/Novachromic/raw/main/screenshots/two.png"
       }
     ],
-        "categories": [{
+    "categories": [
+      {
         "name": "Default",
-            "options": [{
+        "options": [
+          {
             "type": "checkBox",
             "name": "Restore bottom bar style episode progress",
             "description": "Don't like my transparent view progress overlay? Use this to go back to the old style.",
@@ -284,19 +228,86 @@
             "default": "#ffffff"
           }
         ]
-        }]
+      }
+    ]
+  },
+  {
+    "name": "JellySkin",
+    "author": "prayagprajapati17",
+    "description": "A very bright and colorful look using lots of drop shadows. Theme is by prayag17.",
+    "defaultCss": "@import url('https://prayag17.github.io/JellySkin/default.css');",
+    "previews": [
+      {
+        "name": "Login Page",
+        "url": "https://prayag17.github.io/JellySkin/img/login.jpg"
+      },
+      {
+        "name": "Home/Index Page",
+        "url": "https://prayag17.github.io/JellySkin/img/Home.jpg"
+      },
+      {
+        "name": "Library Page",
+        "url": "https://prayag17.github.io/JellySkin/img/Movies.jpg"
+      },
+      {
+        "name": "Title page",
+        "url": "https://prayag17.github.io/JellySkin/img/Title%20Page-Movie.jpg"
+      }
+    ],
+    "categories": [
+      {
+        "name": "Default",
+        "options": [
+          {
+            "type": "selector",
+            "name": "Gradient",
+            "description": "Changes the Jellyfin themed Hover gradient",
+            "css": "@import url('https://prayag17.github.io/JellySkin/$.css');",
+            "selections": [
+              {
+                "name": "Default",
+                "value": ""
+              },
+              {
+                "name": "Sea Gradient",
+                "value": "seaGradient"
+              },
+              {
+                "name": "Sunset Gradient",
+                "value": "sunsetGradient"
+              },
+              {
+                "name": "Night Sky Gradient",
+                "value": "nightSkyGradient"
+              },
+              {
+                "name": "Morning Gradient",
+                "value": "morningGradient"
+              }
+            ]
+          },
+          {
+            "type":"checkBox",
+            "name":"Theme Logo",
+            "description":"Styles title page in such a way in which logos are used instead of Names.",
+            "css":"@import url('https://prayag17.github.io/JellySkin/Logo.css');"
+          }
+        ]
+      }
+    ]
   },
   {
     "name": "Custom",
     "author": "you",
     "description": "customize the look of jellyfin by your needs",
     "defaultCss": "/*Custom*/",
-        "categories": [{
+    "categories": [
+      {
         "name": "Fonts",
-                "options": [{
+        "options": [
+          {
             "type": "googleFonts",
-                        "name": "Change Font",
+			"css": "/*googleFonts*/"
-                        "css": "html {font-family:  '$',sans-serif ;  } body,h1,h2,h3 { font-family: '$' ,sans-serif;}"
           },
           {
             "type": "number",
@@ -310,21 +321,25 @@
       },
       {
         "name": "Home/Dashboard Page",
-                "options": [{
+        "options": [
+          {
             "type": "checkBox",
             "name": "Enlarge Tab Buttons",
             "description": "Enlarges the tab buttons, suggested, genres, etc. By default they are really tiny, especially on mobile.",
             "css": ".headerTabs.sectionTabs {text-size-adjust: 110%;  font-size: 110%;}.pageTitle {margin-top: auto; margin-bottom: auto;}.emby-tab-button {padding: 1.75em 1.7em;}"
-                }]
+          }
+        ]
       },
       {
         "name": "Miscellaneous",
-                "options": [{
+        "options": [
+          {
             "type": "selector",
             "name": "Poster card hover effect",
             "description": "Changes the hover effect on Movie/TV show/Music poster card.",
-                        "css": "/*poster-eff*/",
+            "css": "",
-                        "selections": [{
+            "selections": [
+              {
                 "name": "Scale in and out",
                 "css": "/*Dynamic Poster effect-option1*/.cardBox-bottompadded{margin-bottom; 1em !important;}.itemsContainer>.card>.cardBox {margin: 1em;background: rgba(0,0,0,0.5);transition: transform .2s;}.card:hover .cardBox{transform: scale(1.1);}"
               },
@@ -342,46 +357,6 @@
               }
             ]
           },
-                    {
-                        "type": "selector",
-                        "name": "Icon Pack",
-                        "description": "Changes all icons like dashboard and play. Choose non google fonts if you are blocking google fonts",
-                        "css": "/*Icons*/",
-                        "selections": [{
-                                "name": "Default",
-                                "css": ""
-                            },
-                            {
-                                "name": "Outlined",
-                                "css": "@import url('https://prayag17.github.io/Jellyfin-Icons/Outline.css');"
-                            },
-                            {
-                                "name": "Rounded",
-                                "css": "@import url('https://prayag17.github.io/Jellyfin-Icons/round.css');"
-                            },
-                            {
-                                "name": "Sharp",
-                                "css": "@import url('https://prayag17.github.io/Jellyfin-Icons/Sharp.css');"
-                            }, {
-                                "name": "Outlined-Non google fonts",
-                                "css": "@import url('https://prayag17.github.io/Jellyfin-Icons/Outline.css');"
-                            },
-                            {
-                                "name": "Rounded-Non google fonts",
-                                "css": "@import url('https://prayag17.github.io/Jellyfin-Icons/round.css');"
-                            },
-                            {
-                                "name": "Sharp-Non google fonts",
-                                "css": "@import url('https://prayag17.github.io/Jellyfin-Icons/Sharp.css');"
-                            }
-                        ]
-                    },
-                    {
-                        "type": "checkBox",
-                        "name": "Image gradient in title page",
-                        "description": "removes the bg of detail ribbon and replace it with image gradient",
-                        "css": ".detailRibbon {background: transparent;}.itemBackdrop {-webkit-mask: linear-gradient(to bottom, black 50%,transparent);mask: linear-gradient(to bottom, black 50%,transparent);}"
-                    },
           {
             "type": "checkBox",
             "name": "Minimal Actor's card",
@@ -392,7 +367,8 @@
             "type": "selector",
             "name": "Episode View",
             "description": "Theme episode list",
-                        "selections": [{
+            "selections": [
+              {
                 "name": "Card",
                 "css": " #itemDetailPage .vertical-list {display: grid;grid-template-columns: 30% 30% 30%;padding: 0 6px !important;height: fit-content;justify-content: space-evenly;-webkit-box-orient: horizontal;-webkit-box-direction: normal;margin: -6px;width: calc(100% - 6px);}.listItem-withContentWrapper:hover .listItemImageButton.itemAction.paper-icon-button-light {opacity: 100%;}@media (max-width: 901px){#itemDetailPage .vertical-list {grid-template-columns: 30% 30%;}}.listItem-withContentWrapper {transition: none;height: fit-content;max-width: 100%;margin: 6px;border-radius: var(--rounding);overflow: hidden;padding: 0;overflow: hidden;}.listItem-withContentWrapper:hover{background: transparent;}.listItem-content {height: 100%;}.listItem-content {display: -webkit-flex;display: flex;-webkit-align-items: center;align-items: center;width: 100%;display: grid;grid-template-columns: 100%;}.listItemImage.listItemImage-large.itemAction.lazy {height: 14rem;width: 100%;padding: 0 !important;margin: 0 !important;top: 0;left: 0;}.layout-mobile #itemDetailPage .vertical-list {grid-template-columns: 100%;}.secondary.listItem-overview.listItemBodyText {height: fit-content;}.layout-mobile .listItem-bottomoverview {padding: 0 10px;}.listItemBody.itemAction {padding: 0 5px;}.listItemImageButton.itemAction.paper-icon-button-light {opacity: 0;color: var(--accent);transition: all .2s;}.layout-mobile .listItemImageButton.itemAction.paper-icon-button-light{opacity: 100% !important;}"
               },
@@ -417,7 +393,7 @@
           {
             "type": "colorPicker",
             "mode": "hex",
-                        "name": "Title Page Button text color",
+            "name": "Button text color",
             "description": "change button's text color.",
             "css": ".raised{color: $;}",
             "default": "#ffffff"
@@ -425,7 +401,7 @@
           {
             "type": "colorPicker",
             "mode":"hex",
-                        "name": "Title Page Button background color",
+            "name": "Button background color",
             "description": "change background color of button.",
             "css": ".raised{background-color: $;}",
             "default": "#303030"
@@ -444,7 +420,7 @@
             "name": "Idle button color-background",
             "description": "This modifies the background color of buttons like cast and search.",
             "css": ".paper-icon-button-light{background-color: $ !important; transition: all .2s;}",
-                        "default": "#00000000"
+            "default": "#00FFFFFF"
           },
           {
             "type": "colorPicker",
@@ -460,27 +436,20 @@
             "name": "Hover button color-background",
             "description": "This modifies the background color of buttons like cast and search when your cursor is on it.",
             "css": ".paper-icon-button-light:hover{background-color: $ !important;}",
-                        "default": "#00a4db33"
+            "default": "#00a4dc"
           },
           {
             "type": "number",
             "name": "Border Radius",
             "description": "Change the rounding",
-                        "css": ":root{--btn-rounding: $px; --rounding: $px;} .missingIndicator, .unairedIndicator {border-radius: var(--rounding);}.formDialogHeader {border-top-left-radius: var(--rounding);border-top-right-radius: var(--rounding);}.formDialogFooter {border-bottom-left-radius: var(--rounding);border-bottom-right-radius: var(--rounding);}.cardOverlayContainer {border-radius: var(--rounding) !important;}.primaryImageWrapper>img, .toast, .paperList, .cardContent, .sessionNowPlayingInnerContent, .listItem:hover, .cardImage, .fab, .raised, .multiSelectCheckboxOutline, .itemSelectionPanel, .cardContent-button, .cardContent-shadow, .itemDetailImage, .cardOverlayButton-hover, .cardImageContainer, .cardPadder, .listItemImage, .listItemImageButton, .listItemButton, .headerButton, .paper-icon-button-light, .innerCardFooter, .blurhash-canvas, .dialog, .countIndicator, .playedIndicator, .listItemIcon, .listItem-border, .button-flat, .visualCardBox, .checkboxOutline, .emby-select-withcolor, .chapterThumbTextContainer, .chapterThumbContainer, .chapterThumb, .emby-input, .emby-textarea, .emby-select-withcolor, .nowPlayingPageImage, .upNextDialog-poster-img, .upNextContainer, .cardOverlayButtonIcon {border-radius: var(--rounding) !important;}.osdPoster img {border-radius: var(--rounding);border: none;}.mdl-slider::-moz-range-thumb {border-radius: var(--rounding);}.mdl-slider::-ms-thumb {border-radius: var(--rounding);}.mdl-slider::-webkit-slider-thumb {border-radius: var(--rounding);}div[data-role='controlgroup'] a[data-role='button']:first-child {border-bottom-left-radius: var(--rounding);border-top-left-radius: var(--rounding);}div[data-role='controlgroup'] a[data-role='button']:last-child {border-bottom-right-radius: var(--rounding);border-top-right-radius: var(--rounding);}#dashboardPage .cardContent, #dashboardPage .sessionNowPlayingInnerContent {border-radius: var(--rounding) var(--rounding) 0 0 !important;}#divVirtualFolders .cardImageContainer, #divVirtualFolders .cardContent {border-radius: var(--rounding) var(--rounding) 0 0 !important;}#userProfilesPage .cardImage, #userProfilesPage .cardContent {border-radius: var(--rounding) var(--rounding) 0 0 !important;}#user_usage_report_table, .detailTable {border-radius: var(--rounding);}progress {border-radius: var(--rounding);}progress::-webkit-progress-bar {border-radius: var(--rounding);}progress::-moz-progress-bar {border-radius: var(--rounding);}progress::-webkit-progress-value {border-radius: var(--rounding);}.taskProgressOuter, .taskProgressInner {border-radius: var(--rounding) !important;}::-webkit-scrollbar-thumb {border-radius: var(--rounding);} .paper-icon-button-light{border-radius: var(--btn-rounding) !impotant;}",
+            "css": "*,*::before,*::after{border-radius: $ !important;}",
             "default": "0"
           },
-                    {
-                        "type": "colorPicker",
-                        "name": "Background-color",
-                        "description": "change background-color of the background",
-                        "css": ".backgroundContainer.withBackdrop {background-color: $;}",
-                        "default": "rgba(0, 0, 0, 0.86)"
-                    },
           {
             "type": "blurSlider",
             "name": "Backdrop Blur",
             "description": "adds blur to the backdrop images default is zero",
-                        "css": ":root{--bgblur: blur($px)}.backdropImage {filter: var(--bgblur);}",
+            "css": ":root{--bgblur: blur($px)}.backdropImage {filter: var(--bgblur);}.backgroundContainer.withBackdrop {background-color: rgba(0,0,0,0);}",
             "default": "0"
           }
         ]

src/html/skin__request.html

@@ -1,30 +0,0 @@
-<html>
-
-<head>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" crossorigin="anonymous"></script>
-    <script src="../js/json__compile.js"></script>
-</head>
-
-<body>
-    <div>
-        <form>
-            <input type="text" id="name" name="name">
-            <input type="text" id="author" name="author">
-            <input type=" text " id="desc" name="desc">
-            <input type=" text " id="css" name="css">
-            <h2>Images</h2>
-            <input type=" text " id="login" name="login">
-            <input type=" text " id="home" name="home">
-            <input type=" text " id="lib" name="lib">
-            <input type=" text " id="title" name="title">
-            <h2>Categories</h2>
-            <input type="button" id="add" value="Add a foryour options categorie" onclick="add__option()">
-            <input type="button" id="no_op" value="Don't have any options/addons?" onclick="no__option()">
-            <div id="cat"></div>
-            <input type="hidden" value="1" id="total_chq">
-            <input type="button" onclick="createJSON()" value="save" />
-        </form>
-    </div>
-</body>
-
-</html>

src/js/json__compile.js

@@ -1,88 +0,0 @@
-function add__option() {
-    window.new_chq_no = parseInt($('#total_chq').val()) + 1;
-    window.new_input = "<h3>Categorie Name</h3><input type='text' id='cat_name'><div id='op_cont'><div class='inner'><h4>option name</h4><input type='text' id='op_name'><h4>option type</h4><input type='text' id='op_type'><h4>option description</h4><input type='text' id='op_desc'><h4>option css</h4><input type='text' id='op_css'></div><input type='button' value='Add a new option'></div>";
-
-    $('#cat').append(new_input);
-
-    $('#total_chq').val(new_chq_no);
-}
-
-function create_option_json() {
-    var option__name = document.querySelectorAll('#op_name');
-    option__name.forEach(option__name => function() {
-        var json__options = {
-            "categories": [{
-                "name": "Default",
-                "options": [{
-                    "name": name
-                }]
-            }]
-        }
-    })
-
-    var categories = {}
-}
-
-function no__option() {
-    $('#no_op').on('click', function() {
-        var json__options = {
-            "categories": [{
-                "name": "Default",
-                "options": []
-            }]
-        }
-    })
-}
-
-function createJSON() {
-    var name = document.getElementById("name").value;
-    var author = document.getElementById("author").value;
-    var desc = document.getElementById("desc").value;
-    var CSS = document.getElementById("css").value;
-    var login = document.getElementById("login").value;
-    var home = document.getElementById("home").value;
-    var lib = document.getElementById("lib").value;
-    var title = document.getElementById("title").value;
-    var json__compiled = {
-        "name ": name,
-        "author ": author,
-        "description ": desc,
-        "defaultCss ": CSS,
-        "previews ": [{
-                "name ": "Login Page ",
-                "url ": login
-            },
-            {
-                "name ": "Home/Index Page ",
-                "url ": home
-            },
-            {
-                "name ": "Library Page ",
-                "url ": lib
-            },
-            {
-                "name ": "Title page ",
-                "url ": title
-            }
-        ]
-    }
-
-    var json = JSON.stringify(json__compiled, null, 4);
-
-    json = [json];
-    var json__blob = new Blob(json, { type: "text/plain;charset=utf-8" });
-
-    var isIE = false || !!document.documentMode;
-    if (isIE) {
-        window.navigator.msSaveBlob(json__blob, name + ".json");
-    } else {
-        var url = window.URL || window.webkitURL;
-        link = url.createObjectURL(json__blob);
-        var a = document.createElement("a");
-        a.download = name + ".json";
-        a.href = link;
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-    }
-}