mirror of
https://github.com/vondas-network/videobeaux.git
synced 2025-12-05 15:30:02 +01:00
201 lines
4.9 KiB
HTML
201 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>MySoftware - The Missing Package Manager</title>
|
||
<style>
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||
margin: 0;
|
||
padding: 0;
|
||
line-height: 1.6;
|
||
color: #2f2f2f;
|
||
background-color: #f5f5f5;
|
||
text-align: center;
|
||
}
|
||
.container {
|
||
max-width: 960px;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
}
|
||
header {
|
||
padding: 80px 0;
|
||
background-color: #fff;
|
||
}
|
||
.logo {
|
||
max-width: 120px;
|
||
margin-bottom: 24px;
|
||
}
|
||
h1 {
|
||
font-size: 48px;
|
||
font-weight: 700;
|
||
margin: 0;
|
||
color: #000;
|
||
}
|
||
.tagline {
|
||
font-size: 24px;
|
||
color: #595959;
|
||
margin: 16px 0 0;
|
||
}
|
||
section {
|
||
padding: 80px 0;
|
||
background-color: #fff;
|
||
}
|
||
h2 {
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
margin-bottom: 24px;
|
||
color: #000;
|
||
}
|
||
.two-column {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 40px;
|
||
align-items: center;
|
||
}
|
||
.column-left {
|
||
flex: 1;
|
||
text-align: left;
|
||
max-width: 50%;
|
||
}
|
||
.column-right {
|
||
flex: 1;
|
||
max-width: 50%;
|
||
position: relative;
|
||
}
|
||
.column-left p {
|
||
font-size: 18px;
|
||
margin: 0 0 16px;
|
||
}
|
||
line{
|
||
color:black;
|
||
}
|
||
p {
|
||
font-size: 18px;
|
||
margin: 0 0 16px;
|
||
}
|
||
.install-code {
|
||
background: #2f2f2f;
|
||
color: #fff;
|
||
padding: 16px;
|
||
border-radius: 8px;
|
||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||
font-size: 14px;
|
||
text-align: left;
|
||
margin: 0;
|
||
white-space: pre-wrap;
|
||
position: relative;
|
||
}
|
||
.copy-button {
|
||
position: absolute;
|
||
გეძებულია: top: 8px;
|
||
right: 8px;
|
||
background: #f36d21;
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 4px;
|
||
padding: 8px 16px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
opacity: 0;
|
||
transition: opacity 0.2s;
|
||
}
|
||
.install-code:hover .copy-button {
|
||
opacity: 1;
|
||
}
|
||
.copy-button:hover {
|
||
background: #d15e1c;
|
||
}
|
||
a {
|
||
color: #f36d21;
|
||
text-decoration: underline;
|
||
transition: color 0.2s;
|
||
}
|
||
a:hover {
|
||
color: #d15e1c;
|
||
}
|
||
@media (max-width: 768px) {
|
||
.two-column {
|
||
flex-direction: column;
|
||
gap: 24px;
|
||
}
|
||
.column-left,
|
||
.column-right {
|
||
max-width: 100%;
|
||
}
|
||
h1 {
|
||
font-size: 36px;
|
||
}
|
||
.tagline {
|
||
font-size: 20px;
|
||
}
|
||
h2 {
|
||
font-size: 28px;
|
||
}
|
||
p, .column-left p {
|
||
font-size: 16px;
|
||
}
|
||
.install-code {
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<div class="container">
|
||
<img src="https://via.placeholder.com/120" alt="MySoftware Logo" class="logo">
|
||
<h1>MySoftware</h1>
|
||
<p class="tagline">The Missing Package Manager for Your System</p>
|
||
</div>
|
||
</header>
|
||
|
||
<section id="install">
|
||
<div class="container">
|
||
<h2>Installation</h2>
|
||
<p>Paste that in a macOS Terminal or Linux shell prompt.</p>
|
||
<pre class="install-code">/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/MySoftware/install/main/install.sh)"<button class="copy-button" onclick="copyCode(this)">Copy</button></pre>
|
||
<p>The script explains what it will do and then pauses before it does it. <a href="https://docs.mysoftware.com/Installation">Read about other installation options.</a></p>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="what-does">
|
||
<div class="container">
|
||
<h2>What Does videobeaux Do?</h2>
|
||
<div class="two-column">
|
||
<div class="column-left">
|
||
<p>MySoftware installs the stuff you need that your system didn’t.</p>
|
||
</div>
|
||
<div class="column-right">
|
||
<pre class="install-code">mysoftware install package<button class="copy-button" onclick="copyCode(this)">Copy</button></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="two-column">
|
||
<div class="column-left">
|
||
<p>MySoftware installs the stuff you need that your system didn’t.</p>
|
||
</div>
|
||
<div class="column-right">
|
||
<pre class="install-code">mysoftware install package<button class="copy-button" onclick="copyCode(this)">Copy</button></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<script>
|
||
function copyCode(button) {
|
||
const code = button.parentElement.textContent.replace('Copy', '').trim();
|
||
navigator.clipboard.writeText(code).then(() => {
|
||
button.textContent = 'Copied!';
|
||
setTimeout(() => {
|
||
button.textContent = 'Copy';
|
||
}, 2000);
|
||
});
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |