add support developer link

src/index.html

@@ -285,6 +285,10 @@
 					</svg>
 				</a>
 
+				<a d-open-modal="pledgeModal" data-event-category="ui" data-event-action="supportDeveloperBtnClick" class="footer__link  ml-1  hint--rounded  hint--top-right" aria-label="Support the developer by pledging some amount" target="_blank">
+					Support the developer
+				</a>
+
 			</div>
 		</div>
 
@@ -372,6 +376,10 @@
 			</div>
 		</div>
 
+		<div class="modal pledge-modal" id="pledgeModal">
+			<div class="modal__content" d-html="partials/pledge-modal.html"></div>
+		</div>
+
 		<div class="modal modal--settings" id="settingsModal">
 			<div class="modal__content">
 				<a d-click="onModalCloseBtnClick" href="" aria-label="Close Settings" title="Close" class="js-modal__close-btn  modal__close-btn">

src/partials/pledge-modal.html

@@ -0,0 +1,28 @@
+<a d-click="onModalCloseBtnClick" href="" aria-label="Close modal" title="Close" class="js-modal__close-btn  modal__close-btn">
+    <svg>
+        <use xlink:href="#cross-icon"></use>
+    </svg>
+</a>
+
+<div class="tac">
+    <h1>Support the Developer</h1>
+    <p>Hi! Web Maker is a free and open-source project. To keep myself motivated for working on such open-source and free side projects, I am accepting donations. Your pledge, no matter how small, will act as an appreciation towards my work and keep me going forward, creating & maintaining more such useful projects. So please consider donating 🙏🏼  (could be as small as $1/month).
+    </p>
+    <div class="onboard-selection-wrap flex">
+        <div class="onboard-selection" id="onboardDontShowInTabOptionBtn" d-click="onDontShowInTabClicked">
+            <a href="https://patreon.com/kushagra" target="_blank" aria-label="Make a monthly pledge on Patreon">
+                <img src="patreon.png" height="50" class="mb-1" alt="Become a patron image">
+                <h3 class="onboard-selection-text">Make a monthly pledge on Patreon</h3>
+            </a>
+        </div>
+
+        <div style="opacity:0.7;">OR</div>
+
+        <div class="onboard-selection" id="onboardShowInTabOptionBtn" d-click="onShowInTabClicked">
+            <a href="https://www.paypal.me/kushagragour" target="_blank" aria-label="Make a one time donation on Paypal">
+                <img src="paypal-logo.png" height="50" class="mb-1" alt="Paypal logo">
+                <h3 class="onboard-selection-text">Make a one time donation</h3>
+            </a>
+        </div>
+    </div>
+</div>

src/script.js

@@ -3,8 +3,8 @@
 onboardModal, layoutBtn1, layoutBtn2, layoutBtn3, layoutBtn4, layoutBtn5, onboardModal,
 onboardModal, addLibraryModal, addLibraryModal, notificationsBtn, notificationsModal,
 notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn,
-onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editorThemeLinkTag,
+onboardModal, settingsModal, notificationsBtn, editorThemeLinkTag, TextareaAutoComplete,
-onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
+savedItemCountEl, indentationSizeValueEl, pledgeModal
 runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate,
 customEditorFontInput, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea,
 globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal, headerAvatarImg,
@@ -688,6 +688,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn
 		keyboardShortcutsModal.classList.remove('is-modal-visible');
 		loginModal.classList.remove('is-modal-visible');
 		profileModal.classList.remove('is-modal-visible');
+		pledgeModal.classList.remove('is-modal-visible');
 		toggleSavedItemsPane(false);
 		document.dispatchEvent(new Event('overlaysClosed'));
 	}
@@ -1415,13 +1416,9 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn
 	};
 
 	scope.onShowInTabClicked = function onShowInTabClicked() {
-		onboardDontShowInTabOptionBtn.classList.remove('selected');
-		onboardShowInTabOptionBtn.classList.add('selected');
 		trackEvent('ui', 'onboardShowInTabClick');
 	};
 	scope.onDontShowInTabClicked = function onDontShowInTabClicked() {
-		onboardDontShowInTabOptionBtn.classList.add('selected');
-		onboardShowInTabOptionBtn.classList.remove('selected');
 		trackEvent('ui', 'onboardDontShowInTabClick');
 	};
 

src/style.css

@@ -23,6 +23,9 @@ a {
 	color: crimson;
 	cursor: pointer;
 }
+p {
+	line-height: 1.65;
+}
 
 .hide {
 	display: none !important;
@@ -609,6 +612,9 @@ body > #demo-frame {
 		/* margin-lef.t: -300px; */
 	}
 }
+.pledge-modal .modal__content {
+	max-width: 800px;
+}
 .saved-items-pane {
 	position: fixed;
 	right: 0;
@@ -1139,6 +1145,34 @@ body:not(.is-app) .show-when-app {
 	display: none;
 }
 
+.onboard-selection-wrap {
+	justify-content: center;
+	align-items: center;
+}
+.onboard-selection {
+	padding: 10px;
+	margin: 0 40px;
+	border-radius: 5px;
+	transition: 0.25s ease;
+	position: relative;
+	border: 1px solid transparent;
+}
+.onboard-selection:hover {
+	cursor: pointer;
+	transform: scale(1.15);
+}
+.onboard-selection.selected:after {
+	content: '';
+	position: absolute;
+	right: -20px;
+	bottom: 40px;
+	width: 80px;
+	height: 80px;
+	border-radius: 50%;
+	background: white
+		url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:32px;height:32px" viewBox="0 0 24 24"><path fill="limegreen" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z" /></svg>');
+}
+
 /* Codemirror themes basic bg styles. This is here so that there is no big FOUC
 while the theme CSS file is loading */
 .cm-s-paraiso-dark.CodeMirror {