Continued splash page, added presets, resized cover

css/pixel-editor.scss

@@ -1543,12 +1543,121 @@ div#pb-options {
 }
 
 /********FEATURES LOG*************/
-#features-log {
+#splash {
-	font-size:16px;
+	width:100% !important;
-	width:700px !important;
+	height:100% !important;
-	height:500px;
+
+	background-color: #232125 !important;
+	opacity: 1 !important;
+
+	#splash-input {
+		width:70%;
+		height:100% !important;
+
+		#splash-menu {
+			position:relative;
+			height:100%;
+			left:0; 
+			top:0;
+		}
+
+		#editor-logo {
+			font-weight:bold;
+			text-transform:uppercase;
+			font-size:20px;
+			color:$baselink;
+			height:40vh;
+			width:100%;
+			position:relative;
+
+			background-image:url('https://cdn.discordapp.com/attachments/506277390050131978/795660870221955082/final.png');
+			background-size:cover;
+			background-position:center;
+		}
+
+		#black {
+			width:100%;
+			height:100%;
+			position:relative;
+			background-color:rgba(0,0,0,0.25);
+		}
+
+		#sp-coverdata {
+			padding:20px;
+			
+			p, a {
+				font-size:15px;
+				position:absolute;
+				text-transform:none;
+				right:20px;
+			}
+
+			p {
+				top:0px;
+			}
+
+			a {
+				bottom:20px;
+			}
+		}
+	}
+
+	#sp-quickstart {
+		color:$baselink;
+		width: 80%;
+		margin-left:10%;
+		padding:20px;
+		left:0px;
+	}
+
+	.sp-template {
+		display:table;
+		vertical-align: middle;
+		text-transform: uppercase;
+		position:relative;
+		width:100px;
+		height:100px;
+		border-radius:5%;
+		margin-right:40px;
+		margin-top:30px;
+		background-color:$basecolor;
+		float:left;
+
+		font-size: 18px;
+		text-align:center;
+		font-weight: bold;
+
+		p {
+			span {
+				display:block;
+				font-size:16px !important;
+				margin: 0 0 0 0;
+				padding: 0 0 0 0;
+			}
+			display:table-cell;
+			width:100%;
+			height:100%;
+			vertical-align: middle;
+		}
+	}
+
+	#splash-news {
+		position:relative;
+		right:20px;
+		height:95%;
+		top:2.5%;
+		background-color: #232125 !important;
+	}
+
+	#latest-update {
+		font-size:15px;
+		width:350px !important;
+		height:90%;
 		overflow-y: scroll;
 		line-height: 1.5;
+		position:absolute;
+		top:40px;
+		right:40px;
 
 		&::-webkit-scrollbar {
 			background: #232125;
@@ -1566,4 +1675,5 @@ div#pb-options {
 		&::-webkit-scrollbar-corner {
 			background: #232125;
 		}
+	}
 }

js/_dialogue.js

@@ -45,9 +45,6 @@ function closeDialogue () {
     if (currentOpenDialogue == "palette-block") {
         pbAddToSimplePalette();
     }
-    else if (currentOpenDialogue == "features-log") {
-        showDialogue("new-pixel");
-    }
 }
 
 /** Closes a dialogue window if the user clicks everywhere but in the current window

js/_featuresLog.js

@@ -1,4 +1 @@
-if (settings.showLog || settings.showLog == undefined) {
+showDialogue("splash", false);
-    console.log("Ok");
-    showDialogue("features-log", false);
-}

views/pixel-editor.hbs

@@ -255,10 +255,11 @@
             </div>
         </div>
 
-        <!-- NEW FEATURES LOG -->
+        <!-- Splash page -->
-        <div id="features-log" class="update">
+        <div id = "splash">
-            <button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
+            <div class="splash-news">
-            <h1>Lospec Pixel Editor: latest updates</h1>
+                 <div id="latest-update">
+                    <h1>Latest updates</h1>
                     <strong>Hey! Unsettled here.</strong><br><br>
                     Welcome to the features-log.html! From now on, it will show all the 
                     latest features that have been added to the editor, so that everyone knows what's going on.
@@ -316,6 +317,41 @@
                     <br><br>
                     P.S.: you can find this page in Help->Latest update
                 </div>
+            </div>
+
+            <div id="splash-input">
+                <div class="splash-menu">
+                    <div id="editor-logo">
+                        <div id="black">
+                            <div id="sp-coverdata">
+                                <img src="https://lospec.com/brand/lospec_logo_3x.png"/> pixel editor
+                                <p>Version 1.4.0</p>
+                                <a href="https://cdn.discordapp.com/attachments/506277390050131978/795660870221955082/final.png">Art by Unsettled</a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div id="sp-quickstart">
+                        <div class="sp-template"><p>Load</p></div>
+                        <div class="sp-template"><p><span>New</span> custom</p></div>
+                        <div class="sp-template"><p><span>New</span> 32x32</p></div>
+                        <div class="sp-template"><p><span>New</span> 64x64</p></div>
+                        <div class="sp-template"><p><span>New</span> 128x128</p></div>
+                        <div class="sp-template"><p><span>New</span> 256x256</p></div>
+                        <div class="sp-template"><p><span>New</span> 512x512</p></div>
+                        <div class="sp-template"><p><span>New</span> Gameboy</p></div>
+                        <div class="sp-template"><p><span>New</span> C64</p></div>
+                        <div class="sp-template"><p><span>New</span> Pico8</p></div>
+                    </div>
+                    
+                    <div id="sp-mode-palette">
+                        <span>Interface mode:</span>
+                        <span>Palette: </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
 
         <!--SPRITE RESIZE-->
         <div class="update" id = "resize-sprite">