add windows install dialog and sponsorship prompt

Author: PalmerAL

downloadButton.js

@@ -1,39 +1,59 @@
-function showMacDialog () {
+function showDialogBackdrop () {
   var backdrop = document.createElement('div')
   backdrop.className = 'backdrop'
   document.body.appendChild(backdrop)
+  backdrop.addEventListener('click', function () {
+    backdrop.parentNode.removeChild(backdrop)
+    var dialog = document.querySelector('.dialog')
+    dialog.parentNode.removeChild(dialog)
+  })
+}
+
+var sponsorMessage = '\
+<div\
+    style="box-shadow: 1px 0 10px 0 rgba(0,0,0,0.3);padding: 1em 3em;margin-left: -0.75em;margin-right: -0.75em;margin-top: 2em;border-radius: 6px;">\
+    <h2 style="margin-bottom: 0.25em;margin-top: 0;"><i class="i carbon:favorite"\
+            style="color: #ff0759;margin-left: -38px;margin-right: 12px;vertical-align: text-top;"></i>Help support Min\
+    </h2>Sponsor this project to help it continue.<br><a style="margin-top: 1em; display: inline-block;"\
+        href="https://github.com/sponsors/PalmerAL" target="_blank">Sponsor on GitHub <i class="i carbon:caret-right"\
+            style="font-size: 1.3em;vertical-align: text-top;margin-top: -2px;display: inline-block;margin-left: -2px;"></i></a>\
+</div>\
+'
+
+function showMacDialog () {
+  showDialogBackdrop()
 
   var dialog = document.createElement('div')
   dialog.className = 'dialog centered'
-  dialog.innerHTML = '<h1>How to install Min</h1>\
+  dialog.innerHTML = '<h2>How to install</h2>\
   <ul>\
     <li>Drag Min from your Downloads folder to the Applications folder.</li>\
     <li>Right click on Min.</li>\
     <li>Choose "Open".</li>\
     <li>If a warning dialog is shown, choose "Open".</li>\
-  </ul>'
-
-  var dialogButton = document.createElement('button')
-  dialogButton.className = 'button outlined-button outlined-button-white'
-  dialogButton.setAttribute('style', 'display: block; margin: auto')
-  dialogButton.textContent = 'Done'
-  dialog.appendChild(dialogButton)
-  dialogButton.addEventListener('click', function () {
-    backdrop.parentNode.removeChild(backdrop)
-    dialog.parentNode.removeChild(dialog)
-  })
+  </ul>' + sponsorMessage
+
+  document.body.appendChild(dialog)
+}
+
+function showWindowsDialog () {
+  showDialogBackdrop();
+
+  var dialog = document.createElement('div')
+  dialog.className = 'dialog centered'
+  dialog.innerHTML = '<h2>How to install</h2>\
+  <ul>\
+    <li>Start the installer.</li>\
+    <li>If a warning dialog is shown, choose "More Info".</li>\
+    <li>Choose "Run Anyway".</li>\
+    <li>Wait for Min to open.</li>\
+  </ul>' + sponsorMessage
 
   document.body.appendChild(dialog)
 }
 
 function showLinuxDialog (downloadLinks) {
-  var backdrop = document.createElement('div')
-  backdrop.className = 'backdrop'
-  document.body.appendChild(backdrop)
-  backdrop.addEventListener('click', function () {
-    backdrop.parentNode.removeChild(backdrop)
-    dialog.parentNode.removeChild(dialog)
-  })
+  showDialogBackdrop()
 
   var dialog = document.createElement('div')
   dialog.className = 'dialog centered'
@@ -44,7 +64,7 @@ function showLinuxDialog (downloadLinks) {
   <h3> For RPM-based distributions:</h3>\
   <a id="download-rpm-link"><button id="download-rpm-button" class="button outlined-button outlined-button-white" style="display: block; margin: auto">Download .rpm</button></a>\
   <div>Install with <pre style="display: inline-block; margin-left: 0.5em">sudo rpm -i /path/to/download --ignoreos</pre> </div>\
-  '
+  ' + sponsorMessage
 
   dialog.querySelector('#download-deb-link').href = downloadLinks.deb
   dialog.querySelector('#download-rpm-link').href = downloadLinks.rpm
@@ -123,6 +143,10 @@ function setupDownloadButton (button) {
       button.addEventListener('click', function () {
         setTimeout(showMacDialog, 500)
       }, false)
+    } else if (navigator.platform === 'Win32') {
+      button.addEventListener('click', function () {
+        setTimeout(showWindowsDialog, 500)
+      }, false)
     }
   } else {
     button.parentElement.href = 'https://github.com/minbrowser/min/releases/latest'

ext/icons/iconfont.css

@@ -7,6 +7,7 @@
 	<link rel="canonical" href="https://minbrowser.org/" />
 	<link rel="stylesheet" href="splash/splash.css" />
 	<link rel="stylesheet" href="shared.css" />
+	<link rel="stylesheet" href="ext/icons/iconfont.css"/>
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<meta name="google-site-verification" content="7PAWDFl9SbEAc30K3yGSRE92L7SCpcAKDIWQKAVH7Q0" />
 </head>

ext/icons/iconfont.woff2

@@ -12,7 +12,7 @@
     <link rel="stylesheet" href="../shared.css" />
     <link rel="stylesheet" href="../markdown.css" />
     <link rel="stylesheet" href="releases.css" />
-    <link rel="stylesheet" href="../ext/font-awesome-4.5.0/css/font-awesome.min.css" />
+    <link rel="stylesheet" href="../ext/icons/iconfont.css"/>
 </head>
 
 <body>
@@ -30,7 +30,7 @@ <h1 class="color-white">
     <div id="releases" class="markdown">
     </div>
     <a id="releases-older-link" href="https://github.com/minbrowser/min/releases">
-        <i class="fa fa-angle-left"></i>
+        <i class="i carbon:chevron-left"></i>
         Older releases
     </a>
 

index.html

@@ -16,8 +16,8 @@
 }
 
 #releases-older-link i {
-  font-size: 1.25em;
-  margin-right: 0.25em;
+  font-size: 1.1em;
   vertical-align: middle;
-  margin-bottom: 0.2em;
+  margin-top: -0.15em;
+  display: inline-block;
 }

releases/index.html

@@ -238,8 +238,10 @@ button.disabled {
 .dialog {
 	position: fixed;
 	background: #fff;
-	padding: 1em 2em 2em 2em;
+	padding: 1.25em 3em 2.5em 3em;
 	overflow: auto;
+	width: 60%;
+	max-width: 600px;
 }
 .dialog h1,
 .dialog h2 {