mirror of
https://github.com/gnmyt/myspeed.git
synced 2026-02-09 23:18:37 -06:00
Redesign Install page and components in web
This commit is contained in:
Mathias Wagner
@@ -1,73 +1,84 @@
|
||||
import "./styles.sass";
|
||||
|
||||
import BackgroundImage from "@/common/assets/background.png";
|
||||
import Button from "@/common/components/Button/index.js";
|
||||
import {faDocker, faLinux, faWindows} from "@fortawesome/free-brands-svg-icons";
|
||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
||||
import {
|
||||
faBook,
|
||||
faBug,
|
||||
faCheck,
|
||||
faCopy,
|
||||
faDownload,
|
||||
faQuestionCircle,
|
||||
faTerminal
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import {faCheck, faCopy} from "@fortawesome/free-solid-svg-icons";
|
||||
import {useState} from "react";
|
||||
import {DOCUMENTATION_BASE} from "@/main.jsx";
|
||||
|
||||
export const INSTALL_CMD = "bash <(curl -sSL https://install.myspeed.dev)";
|
||||
|
||||
export const Install = () => {
|
||||
|
||||
const [isCopied, setIsCopied] = useState(false);
|
||||
|
||||
const copyToClipboard = () => {
|
||||
navigator.clipboard.writeText(INSTALL_CMD);
|
||||
setIsCopied(true);
|
||||
|
||||
setTimeout(() => setIsCopied(false), 1000);
|
||||
setTimeout(() => setIsCopied(false), 2000);
|
||||
}
|
||||
|
||||
const openDocs = (path) => window.open(DOCUMENTATION_BASE + path, "_blank");
|
||||
|
||||
return (
|
||||
<div className="install-page">
|
||||
<img className="bg-image" src={BackgroundImage} alt="Background" draggable={false}/>
|
||||
|
||||
<div className="install-container">
|
||||
|
||||
<div className="install-info">
|
||||
|
||||
<div className="install-header">
|
||||
<FontAwesomeIcon icon={faDownload}/>
|
||||
<h1>Downloads</h1>
|
||||
</div>
|
||||
|
||||
<Button text="Download for Windows" onClick={() => openDocs("/setup/windows")} color="green" icon={faWindows}/>
|
||||
|
||||
<Button text="Download for Linux" onClick={() => openDocs("/setup/linux")} color="green" icon={faLinux}/>
|
||||
|
||||
<div className="install-header">
|
||||
<FontAwesomeIcon icon={faBook}/>
|
||||
<h1>Documentation</h1>
|
||||
</div>
|
||||
|
||||
<Button text="Instructions for Docker" onClick={() => openDocs("/setup/linux/#installation-with-docker")}
|
||||
color="green" icon={faDocker}/>
|
||||
<Button text="Questions & Answers" onClick={() => openDocs("/faq")} color="blue" icon={faQuestionCircle}/>
|
||||
|
||||
<Button text="Troubleshooting" onClick={() => openDocs("/troubleshooting")} color="red" icon={faBug}/>
|
||||
|
||||
<div className="install-header">
|
||||
<h1>Install MySpeed</h1>
|
||||
<p>Get up and running in minutes with our simple installation process</p>
|
||||
</div>
|
||||
|
||||
<div className="install-cmd" onClick={copyToClipboard}>
|
||||
<FontAwesomeIcon icon={faTerminal}/>
|
||||
<code>{INSTALL_CMD}</code>
|
||||
<FontAwesomeIcon icon={isCopied ? faCheck : faCopy} className="copy-icon"/>
|
||||
<div className="quick-install">
|
||||
<div className="quick-install-header">
|
||||
<h2>Quick Install</h2>
|
||||
<p>Run this single command on any Linux system</p>
|
||||
</div>
|
||||
<div className="command-row" onClick={copyToClipboard}>
|
||||
<code>{INSTALL_CMD}</code>
|
||||
<button className={`copy-btn ${isCopied ? "copied" : ""}`}>
|
||||
<FontAwesomeIcon icon={isCopied ? faCheck : faCopy}/>
|
||||
<span>{isCopied ? "Copied!" : "Copy"}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="divider">
|
||||
<span>or choose your platform</span>
|
||||
</div>
|
||||
|
||||
<div className="install-options">
|
||||
<button className="install-option" onClick={() => openDocs("/setup/linux")}>
|
||||
<FontAwesomeIcon icon={faLinux}/>
|
||||
<div className="option-text">
|
||||
<strong>Linux</strong>
|
||||
<span>Manual installation guide</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button className="install-option" onClick={() => openDocs("/setup/windows")}>
|
||||
<FontAwesomeIcon icon={faWindows}/>
|
||||
<div className="option-text">
|
||||
<strong>Windows</strong>
|
||||
<span>Windows setup instructions</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button className="install-option" onClick={() => openDocs("/setup/linux/#installation-with-docker")}>
|
||||
<FontAwesomeIcon icon={faDocker}/>
|
||||
<div className="option-text">
|
||||
<strong>Docker</strong>
|
||||
<span>Container deployment</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="help-section">
|
||||
<p>Need help getting started?</p>
|
||||
<div className="help-links">
|
||||
<a onClick={() => openDocs("/faq")}>FAQ</a>
|
||||
<a onClick={() => openDocs("/troubleshooting")}>Troubleshooting</a>
|
||||
<a onClick={() => openDocs("/")}>Documentation</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,104 +1,186 @@
|
||||
@use "@/common/styles/colors" as *
|
||||
|
||||
.install-page
|
||||
padding: 5rem
|
||||
user-select: none
|
||||
|
||||
.bg-image
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
width: 100%
|
||||
height: 100%
|
||||
object-fit: cover
|
||||
z-index: 2
|
||||
-webkit-user-drag: none
|
||||
min-height: 100vh
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
padding: 120px 24px 80px
|
||||
|
||||
.install-container
|
||||
z-index: 5
|
||||
height: 80vh
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: space-around
|
||||
animation: bounceIn 0.5s ease-in-out
|
||||
|
||||
.install-info
|
||||
display: flex
|
||||
gap: 1rem
|
||||
flex-direction: column
|
||||
|
||||
.btn
|
||||
width: fit-content
|
||||
font-size: 8pt
|
||||
z-index: 5
|
||||
width: 100%
|
||||
max-width: 700px
|
||||
|
||||
.install-header
|
||||
display: flex
|
||||
align-items: center
|
||||
margin-top: 1rem
|
||||
margin-bottom: 1rem
|
||||
|
||||
svg
|
||||
font-size: 30pt
|
||||
margin-right: 1rem
|
||||
text-align: center
|
||||
margin-bottom: 40px
|
||||
|
||||
h1
|
||||
font-size: 34pt
|
||||
font-weight: 900
|
||||
margin: 0
|
||||
font-size: 2.5rem
|
||||
font-weight: 700
|
||||
margin-bottom: 8px
|
||||
|
||||
.install-cmd
|
||||
z-index: 5
|
||||
cursor: pointer
|
||||
align-items: center
|
||||
p
|
||||
font-size: 1.125rem
|
||||
color: $text-secondary
|
||||
|
||||
.quick-install
|
||||
background: $background-lighter
|
||||
border: 1px solid $border-color
|
||||
border-radius: 12px
|
||||
padding: 24px
|
||||
margin-bottom: 32px
|
||||
|
||||
.quick-install-header
|
||||
text-align: center
|
||||
margin-bottom: 16px
|
||||
|
||||
h2
|
||||
font-size: 1.25rem
|
||||
font-weight: 600
|
||||
margin-bottom: 4px
|
||||
|
||||
p
|
||||
font-size: 0.875rem
|
||||
color: $text-secondary
|
||||
|
||||
.command-row
|
||||
display: flex
|
||||
gap: 1rem
|
||||
font-size: 14pt
|
||||
background-color: rgba($primary, 0.1)
|
||||
color: $primary
|
||||
border: 2px solid $primary
|
||||
box-shadow: 0 0 15px 0 rgba($primary, 0.5)
|
||||
padding: 1rem 1.5rem
|
||||
border-radius: 0.8rem
|
||||
align-items: center
|
||||
background: $background
|
||||
border: 1px solid $border-color
|
||||
border-radius: 8px
|
||||
padding: 14px 16px
|
||||
cursor: pointer
|
||||
transition: border-color 0.2s ease
|
||||
|
||||
.copy-icon
|
||||
position: relative
|
||||
font-size: 18pt
|
||||
top: -2px
|
||||
right: -2px
|
||||
&:hover
|
||||
border-color: $primary
|
||||
|
||||
code
|
||||
flex: 1
|
||||
font-family: "JetBrains Mono", "Fira Code", monospace
|
||||
font-size: 0.875rem
|
||||
color: $text
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
white-space: nowrap
|
||||
|
||||
@keyframes bounceIn
|
||||
0%
|
||||
transform: scale(0.1)
|
||||
opacity: 0
|
||||
60%
|
||||
transform: scale(1.1)
|
||||
opacity: 1
|
||||
80%
|
||||
transform: scale(0.9)
|
||||
100%
|
||||
transform: scale(1)
|
||||
.copy-btn
|
||||
display: flex
|
||||
align-items: center
|
||||
gap: 6px
|
||||
background: none
|
||||
border: none
|
||||
color: $text-muted
|
||||
font-size: 0.8125rem
|
||||
font-weight: 500
|
||||
padding: 6px 12px
|
||||
cursor: pointer
|
||||
transition: color 0.2s ease
|
||||
border-radius: 6px
|
||||
|
||||
@media screen and (max-width: 1250px)
|
||||
.install-container
|
||||
&:hover
|
||||
color: $primary
|
||||
background: rgba($primary, 0.1)
|
||||
|
||||
&.copied
|
||||
color: $primary
|
||||
|
||||
.divider
|
||||
display: flex
|
||||
align-items: center
|
||||
gap: 16px
|
||||
margin-bottom: 24px
|
||||
|
||||
&::before, &::after
|
||||
content: ""
|
||||
flex: 1
|
||||
height: 1px
|
||||
background: $border-color
|
||||
|
||||
span
|
||||
font-size: 0.8125rem
|
||||
color: $text-muted
|
||||
|
||||
.install-options
|
||||
display: grid
|
||||
grid-template-columns: repeat(3, 1fr)
|
||||
gap: 12px
|
||||
margin-bottom: 40px
|
||||
|
||||
.install-option
|
||||
display: flex
|
||||
align-items: center
|
||||
gap: 14px
|
||||
padding: 18px 20px
|
||||
background: $background-lighter
|
||||
border: 1px solid $border-color
|
||||
border-radius: 10px
|
||||
cursor: pointer
|
||||
transition: all 0.2s ease
|
||||
text-align: left
|
||||
|
||||
&:hover
|
||||
border-color: $border-hover
|
||||
background: lighten($background-lighter, 2%)
|
||||
|
||||
> svg
|
||||
font-size: 1.75rem
|
||||
color: $text-secondary
|
||||
transition: color 0.2s ease
|
||||
|
||||
.option-text
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 2px
|
||||
|
||||
.install-info
|
||||
align-items: center
|
||||
text-align: center
|
||||
strong
|
||||
font-size: 0.9375rem
|
||||
font-weight: 600
|
||||
color: $text
|
||||
|
||||
.install-header
|
||||
margin-top: 0.5rem
|
||||
margin-bottom: 0.5rem
|
||||
span
|
||||
font-size: 0.75rem
|
||||
color: $text-muted
|
||||
|
||||
svg
|
||||
font-size: 20pt
|
||||
h1
|
||||
font-size: 24pt
|
||||
.help-section
|
||||
text-align: center
|
||||
padding-top: 24px
|
||||
border-top: 1px solid $border-color
|
||||
|
||||
@media screen and (max-width: 500px)
|
||||
.install-cmd
|
||||
display: none
|
||||
.install-container
|
||||
height: 55vh
|
||||
> p
|
||||
font-size: 0.875rem
|
||||
color: $text-muted
|
||||
margin-bottom: 12px
|
||||
|
||||
.help-links
|
||||
display: flex
|
||||
justify-content: center
|
||||
gap: 24px
|
||||
|
||||
a
|
||||
color: $text-secondary
|
||||
font-size: 0.875rem
|
||||
font-weight: 500
|
||||
cursor: pointer
|
||||
transition: color 0.2s ease
|
||||
|
||||
&:hover
|
||||
color: $primary
|
||||
|
||||
@media (max-width: 640px)
|
||||
.install-header h1
|
||||
font-size: 2rem
|
||||
|
||||
.install-options
|
||||
grid-template-columns: 1fr
|
||||
|
||||
.command-row
|
||||
flex-direction: column
|
||||
gap: 12px
|
||||
|
||||
code
|
||||
width: 100%
|
||||
text-align: center
|
||||
font-size: 0.75rem
|
||||
|
||||
Reference in New Issue
Block a user