feat: add landing page

This commit is contained in:
fuwaa 2022-08-03 12:28:23 +08:00
parent 32c564c400
commit e6af4f0c37
No known key found for this signature in database
GPG key ID: 2E4F5DC11DE1D654
19 changed files with 279 additions and 1 deletions

View file

@ -470,7 +470,11 @@ chrome.runtime.onInstalled.addListener(() => {
key[`${initialSetting}`] = defaultColorScheme[initialSetting]; key[`${initialSetting}`] = defaultColorScheme[initialSetting];
chrome.storage.local.set(key); chrome.storage.local.set(key);
}); });
chrome.tabs.create({ url: "https://pint.sh/success" }); // open ./pint-newinstall/index.html in new page
chrome.tabs.create({
url: "./pint-newinstall/index.html",
active: true,
});
}); });
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => { chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 101 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 20 KiB

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1 @@
!function(){"use strict";var e=document.querySelector("#mainNav");if(e){var n=function(){(void 0!==window.pageYOffset?window.pageYOffset:(document.documentElement||document.body.parentNode||document.body).scrollTop)>100?e.classList.add("navbar-shrink"):e.classList.remove("navbar-shrink")};n(),document.addEventListener("scroll",n)}document.getElementsByClassName("popup-gallery").length>0&&baguetteBox.run(".popup-gallery",{animation:"slideIn"}),function(){if("requestAnimationFrame"in window&&!/Mobile|Android/.test(navigator.userAgent)){var e=document.querySelectorAll("[data-bss-parallax]");if(e.length){var n,t=[];window.addEventListener("scroll",a),window.addEventListener("resize",a),a()}}function a(){t.length=0;for(var a=0;a<e.length;a++){var r=e[a].getBoundingClientRect(),i=parseFloat(e[a].getAttribute("data-bss-parallax-speed"),10)||.5;r.bottom>0&&r.top<window.innerHeight&&t.push({speed:i,node:e[a]})}cancelAnimationFrame(n),t.length&&(n=requestAnimationFrame(o))}function o(){for(var e=0;e<t.length;e++){var n=t[e].node,a=t[e].speed;n.style.transform="translate3d(0, "+-window.scrollY*a+"px, 0)"}}}()}();

View file

@ -0,0 +1,233 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, shrink-to-fit=no"
/>
<title>Setup Pint</title>
<link
rel="icon"
type="image/png"
sizes="750x750"
href="./assets/img/pint-logo.png"
/>
<link
rel="icon"
type="image/png"
sizes="750x750"
href="./assets/img/pint-logo.png"
/>
<link
rel="icon"
type="image/png"
sizes="750x750"
href="./assets/img/pint-logo.png"
/>
<link
rel="icon"
type="image/png"
sizes="750x750"
href="./assets/img/pint-logo.png"
/>
<link
rel="icon"
type="image/png"
sizes="750x750"
href="./assets/img/pint-logo.png"
/>
<link rel="stylesheet" href="./assets/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="./assets/css/styles.min.css" />
</head>
<body
style="
/*background: url(&quot;design.jpg&quot;);*/
background-position: 0 -60px;
"
>
<nav
class="navbar navbar-dark navbar-expand-md fixed-top navbar-shrink py-3"
id="mainNav"
>
<div class="container">
<img src="./assets/img/pint.svg" width="48" height="40" /><a
class="navbar-brand d-flex align-items-center"
href="/"
><span>Pint for GitHub</span></a
><button
data-bs-toggle="collapse"
class="navbar-toggler"
data-bs-target="#navcol-1"
>
<span class="visually-hidden">Toggle navigation</span
><span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="navbar-nav mx-auto">
<li class="nav-item"></li>
</ul>
<a
class="btn btn-primary shadow"
role="button"
href="https://github.com/fuwaa/pint"
target="_blank"
>View Source</a
>
</div>
</div>
</nav>
<header class="bg-dark pt-5"></header>
<section>
<div class="container bg-dark py-5">
<div class="text-center">
<p class="fw-bold text-success mb-2">Welcome to Pint!</p>
<h1 class="fw-bold">Let's get you set up.</h1>
</div>
<div class="py-5 p-lg-5">
<div
class="row row-cols-1 row-cols-md-2 mx-auto"
style="max-width: 900px"
>
<div class="col mb-5">
<div class="card shadow-sm">
<div
class="card-body px-4 py-5 px-md-5"
style="height: 429.969px"
>
<div
class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon"
style="top: 1rem; right: 1rem; position: absolute"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="-128 0 512 512"
width="1em"
height="1em"
fill="currentColor"
class="text-success"
>
<!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
<path
d="M256 448c0 17.67-14.33 32-32 32H32c-17.67 0-32-14.33-32-32s14.33-32 32-32h64V123.8L49.75 154.6C35.02 164.5 15.19 160.4 5.375 145.8C-4.422 131.1-.4531 111.2 14.25 101.4l96-64c9.828-6.547 22.45-7.187 32.84-1.594C153.5 41.37 160 52.22 160 64.01v352h64C241.7 416 256 430.3 256 448z"
></path>
</svg>
</div>
<h5 class="fw-bold card-title">Go to your GitHub Settings</h5>
<p class="text-muted card-text mb-4">
Click on the button below to go to your GitHub Settings.
</p>
<img
class="img-thumbnail"
src="./assets/img/clipboard-image-4.png"
width="329"
height="176"
style="
width: 314px;
height: 176px;
padding: 0px;
margin: 0;
margin-bottom: 14px;
"
/><a
class="btn btn-primary shadow"
href="https://github.com/settings/appearance"
target="_blank"
type="button"
>Go to GitHub Settings</a
>
</div>
</div>
</div>
<div class="col mb-5">
<div class="card shadow-sm">
<div class="card-body px-4 py-5 px-md-5">
<div
class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon"
style="top: 1rem; right: 1rem; position: absolute"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="-96 0 512 512"
width="1em"
height="1em"
fill="currentColor"
class="text-success"
>
<!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
<path
d="M320 448c0 17.67-14.33 32-32 32H32c-13.08 0-24.83-7.953-29.7-20.09c-4.859-12.12-1.859-26 7.594-35.03l193.6-185.1c31.36-30.17 33.95-80 5.812-113.4c-14.91-17.69-35.86-28.12-58.97-29.38C127.4 95.83 105.3 103.9 88.53 119.9L53.52 151.7c-13.08 11.91-33.33 10.89-45.2-2.172C-3.563 136.5-2.594 116.2 10.48 104.3l34.45-31.3c28.67-27.34 68.39-42.11 108.9-39.88c40.33 2.188 78.39 21.16 104.4 52.03c49.8 59.05 45.2 147.3-10.45 200.8l-136 130H288C305.7 416 320 430.3 320 448z"
></path>
</svg>
</div>
<h5 class="fw-bold card-title">
Apply the Default Dark Theme
</h5>
<p class="text-muted card-text mb-4">
Apply the "Default Dark" theme on the Theme Preferences
section
</p>
<img
class="img-thumbnail"
src="./assets/img/clipboard-image.png"
width="331"
height="216"
/>
</div>
</div>
</div>
<div class="col-xl-12 mb-4">
<div class="card shadow-sm">
<div class="card-body px-4 py-5 px-md-5">
<div
class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon"
style="top: 1rem; right: 1rem; position: absolute"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="-96 0 512 512"
width="1em"
height="1em"
fill="currentColor"
class="text-success"
>
<!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
<path
d="M320 344c0 74.98-61.02 136-136 136H103.6c-46.34 0-87.31-29.53-101.1-73.48c-5.594-16.77 3.484-34.88 20.25-40.47c16.75-5.609 34.89 3.484 40.47 20.25c5.922 17.77 22.48 29.7 41.23 29.7H184c39.7 0 72-32.3 72-72s-32.3-72-72-72H80c-13.2 0-25.05-8.094-29.83-20.41C45.39 239.3 48.66 225.3 58.38 216.4l131.4-120.4H32c-17.67 0-32-14.33-32-32s14.33-32 32-32h240c13.2 0 25.05 8.094 29.83 20.41c4.781 12.3 1.516 26.27-8.203 35.19l-131.4 120.4H184C258.1 208 320 269 320 344z"
></path>
</svg>
</div>
<h5 class="fw-bold card-title">You're all Set!</h5>
<p class="text-muted card-text mb-4">
You can get started on using pint! Please use the extension
button to quickly change your color scheme or click options
on the modal to go advanced.
</p>
<img
class="img-thumbnail"
src="./assets/img/clipboard-image-3.png"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section></section>
<section class="py-5"></section>
<footer class="bg-dark">
<div class="container py-4 py-lg-5">
<hr />
<div
class="text-muted d-flex justify-content-between align-items-center pt-3"
>
<p class="mb-0">fuwa.sh - pint for github</p>
</div>
</div>
</footer>
<script src="./assets/js/jquery.min.js"></script>
<script src="./assets/bootstrap/js/bootstrap.min.js"></script>
<script src="./assets/js/script.min.js"></script>
</body>
</html>