Zipping html files
This commit is contained in:
@@ -1,150 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Packets – Custom Package Manager</title>
|
||||
<style>
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
background: #fefefe;
|
||||
color: #222;
|
||||
padding: 20px;
|
||||
}
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
header h1 {
|
||||
font-size: 2.2em;
|
||||
color: #333;
|
||||
}
|
||||
header p {
|
||||
font-size: 1.1em;
|
||||
color: #555;
|
||||
}
|
||||
nav {
|
||||
text-align: center;
|
||||
margin: 15px 0;
|
||||
}
|
||||
nav a {
|
||||
margin: 0 10px;
|
||||
text-decoration: none;
|
||||
color: #0066cc;
|
||||
font-weight: bold;
|
||||
}
|
||||
main {
|
||||
max-width: 900px;
|
||||
margin: auto;
|
||||
}
|
||||
section {
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
h2 {
|
||||
color: #222;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
pre {
|
||||
background: #f4f4f4;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, #ccc, transparent);
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
header h1 {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
nav a {
|
||||
display: block;
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>📦 Packets</h1>
|
||||
<p>Fast, lightweight and compatible</p>
|
||||
</header>
|
||||
|
||||
<nav>
|
||||
<a href="#download">Download</a>
|
||||
<a href="/package">Packages</a>
|
||||
<a href="/upload">Upload</a>
|
||||
<a href="/account">Account</a>
|
||||
</nav>
|
||||
<hr>
|
||||
|
||||
|
||||
<main>
|
||||
<section id="overview">
|
||||
<h2>Overview</h2>
|
||||
<p> Packets is a lightweight and fast package manager for Linux, developed in Go. It allows you to install, remove, and update software in a simple, efficient, and secure way, using packages compressed in <code>.tar.zst</code> with metadata in <code>manifest.toml</code>. Additionally, it supports integration with Lua scripts for custom actions during installation and removal, and advanced features like local network (LAN) package discovery and remote synchronization via HTTP.</p>
|
||||
</section>
|
||||
|
||||
<section id="features">
|
||||
<h2>Key Features</h2>
|
||||
<ul>
|
||||
<li><strong>Lightweight & Fast</strong> – Minimal resource usage, optimized for speed.</li>
|
||||
<li><strong>Efficient Compression</strong> – Uses <code>.tar.zst</code> format for smaller packages and faster transfers.</li>
|
||||
<li><strong>Clear Metadata</strong> – Each package contains a <code>manifest.toml</code> for versioning and dependency details.</li>
|
||||
<li><strong>Lua Integration</strong> – Execute custom scripts during install and removal.</li>
|
||||
<li><strong>LAN & HTTP Support</strong> – Discover packages in your local network or download remotely.</li>
|
||||
<li><strong>Security</strong> – All packages are verified with SHA-256 checksums.</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section id="why-use">
|
||||
<h2>Why Use Packets?</h2>
|
||||
<ul>
|
||||
<li><strong>Open Source and Transparent</strong> – Fully open on GitHub, allowing you to audit, modify, and contribute.</li>
|
||||
<li><strong>Modern Design</strong> – Written in Go with Lua hooks to enable flexible and safe package lifecycle scripts.</li>
|
||||
<li><strong>Local Network Efficiency</strong> – Peer-to-peer package discovery reduces bandwidth and speeds up installations.</li>
|
||||
<li><strong>Security Focused</strong> – SHA-256 validation and sandboxed Lua scripts keep your system safe.</li>
|
||||
<li><strong>Customizable</strong> – Easy to create and manage your own packages or community repositories.</li>
|
||||
<li><strong>Light on Resources</strong> – Perfect for minimal Linux setups or embedded devices.</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section id="contribute">
|
||||
<h2>How to Contribute</h2>
|
||||
<p>
|
||||
Packets is an open project and welcomes contributions! Whether you want to:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Report issues or suggest new features</li>
|
||||
<li>Submit pull requests with improvements or bug fixes</li>
|
||||
<li>Create and share new packages</li>
|
||||
<li>Help with documentation and translations</li>
|
||||
<li>Test on different Linux distributions and hardware</li>
|
||||
</ul>
|
||||
<p>
|
||||
Check the repository for contribution guidelines and start collaborating today.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="github">
|
||||
<h2>GitHub Repository</h2>
|
||||
<p>
|
||||
Find the source code, issues, documentation, and more at the official GitHub repository:
|
||||
</p>
|
||||
<a class="github-link" href="https://github.com/roboogg133/packets" target="_blank" rel="noopener noreferrer">
|
||||
https://github.com/roboogg133/packets
|
||||
</a>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,221 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Packets - Login/Register</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background: #fefefe;
|
||||
color: #222;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
line-height: 1.6;
|
||||
}
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
header h1 {
|
||||
font-size: 2.2em;
|
||||
color: #333;
|
||||
}
|
||||
header p {
|
||||
font-size: 1.1em;
|
||||
color: #555;
|
||||
}
|
||||
nav {
|
||||
text-align: center;
|
||||
margin: 15px 0;
|
||||
}
|
||||
nav a {
|
||||
margin: 0 10px;
|
||||
text-decoration: none;
|
||||
color: #0066cc;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: #f9f9f9;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
width: 700px;
|
||||
max-width: 100%;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
.tab {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 15px 0;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
user-select: none;
|
||||
transition: background 0.3s, color 0.3s;
|
||||
}
|
||||
.tab.active {
|
||||
background: white;
|
||||
color: #0066cc;
|
||||
border-bottom: 3px solid #0066cc;
|
||||
}
|
||||
.forms {
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
}
|
||||
form {
|
||||
flex: 1;
|
||||
}
|
||||
form h2 {
|
||||
margin-bottom: 20px;
|
||||
color: #222;
|
||||
text-align: center;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
font-weight: bold;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
margin-bottom: 15px;
|
||||
font-size: 1rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-family: inherit;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
input:focus {
|
||||
outline: none;
|
||||
border-color: #0066cc;
|
||||
box-shadow: 0 0 5px rgba(0,102,204,0.5);
|
||||
}
|
||||
button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background: #0066cc;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
button:hover{
|
||||
background: #004999;
|
||||
}
|
||||
form:not(.active) {
|
||||
display: none;
|
||||
}
|
||||
hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, #ccc, transparent);
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.forms {
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>📦 Packets</h1>
|
||||
<p>Fast, lightweight and compatible</p>
|
||||
</header>
|
||||
|
||||
<nav>
|
||||
<a href="#download">Download</a>
|
||||
<a href="/package">Packages</a>
|
||||
<a href="/upload">Upload</a>
|
||||
<a href="/account">Account</a>
|
||||
</nav>
|
||||
<hr>
|
||||
|
||||
<div class="container" role="main" aria-label="Login and Registration forms">
|
||||
<div class="tabs" role="tablist">
|
||||
<div class="tab active" role="tab" tabindex="0" aria-selected="true" aria-controls="loginForm" id="loginTab" data-target="loginForm">Login</div>
|
||||
<div class="tab" role="tab" tabindex="-1" aria-selected="false" aria-controls="registerForm" id="registerTab" data-target="registerForm">Register</div>
|
||||
</div>
|
||||
<div class="forms">
|
||||
<form id="loginForm" class="active" action="/login" method="POST" novalidate role="tabpanel" aria-labelledby="loginTab">
|
||||
<h2>Login to Packets</h2>
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="username" name="username" required autocomplete="username" />
|
||||
<label for="loginPassword">Password</label>
|
||||
<input type="password" id="loginPassword" name="password" required autocomplete="current-password" />
|
||||
<button type="submit">Login</button>
|
||||
</form>
|
||||
|
||||
<form id="registerForm" action="/register" method="POST" novalidate role="tabpanel" aria-labelledby="registerTab">
|
||||
<h2>Create an Account</h2>
|
||||
<label for="regUsername">Username</label>
|
||||
<input type="text" id="regUsername" name="username" required autocomplete="username" minlength="3" />
|
||||
<label for="regEmail">Email</label>
|
||||
<input type="email" id="regEmail" name="email" required autocomplete="email" />
|
||||
<label for="regPassword">Password</label>
|
||||
<input type="password" id="regPassword" name="password" required autocomplete="new-password" minlength="6" />
|
||||
<label for="regPasswordConfirm">Confirm Password</label>
|
||||
<input type="password" id="regPasswordConfirm" name="password_confirm" required autocomplete="new-password" minlength="6" />
|
||||
<button type="submit">Register</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="padding: 10px; margin-top: 5px;">
|
||||
<h1 style="color: red;">Invalid login!</h1>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const tabs = document.querySelectorAll('.tab');
|
||||
const forms = document.querySelectorAll('form');
|
||||
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
tabs.forEach(t => {
|
||||
t.classList.remove('active');
|
||||
t.setAttribute('aria-selected', 'false');
|
||||
t.setAttribute('tabindex', '-1');
|
||||
});
|
||||
tab.classList.add('active');
|
||||
tab.setAttribute('aria-selected', 'true');
|
||||
tab.setAttribute('tabindex', '0');
|
||||
|
||||
forms.forEach(form => form.classList.remove('active'));
|
||||
|
||||
const target = tab.getAttribute('data-target');
|
||||
document.getElementById(target).classList.add('active');
|
||||
});
|
||||
|
||||
tab.addEventListener('keydown', e => {
|
||||
let index = Array.from(tabs).indexOf(e.target);
|
||||
if (e.key === 'ArrowRight') {
|
||||
e.preventDefault();
|
||||
tabs[(index + 1) % tabs.length].focus();
|
||||
} else if (e.key === 'ArrowLeft') {
|
||||
e.preventDefault();
|
||||
tabs[(index - 1 + tabs.length) % tabs.length].focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,239 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Packets - Login</title>
|
||||
<link rel="icon" href="/favicon.ico" type="image/x-icon">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img src="/static/img/box.png" alt="Packets" style="height: 60px;">
|
||||
<h1>Packets Community Repository</h1>
|
||||
<nav>
|
||||
<div class="dropdown">
|
||||
<a href="/register" class="active">Account</a>
|
||||
<div class="dropdown-content">
|
||||
<a href="/register">Register</a>
|
||||
<a href="/login">Login</a>
|
||||
<a href="/logout">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<a href="/packages">Packages</a>
|
||||
<div class="dropdown-content">
|
||||
<a href="/upload">Upload</a>
|
||||
<a href="/packages">Search</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<a href="#">Help</a>
|
||||
<div class="dropdown-content">
|
||||
<a href="#">Documentation</a>
|
||||
<a href="#">Report a bug</a>
|
||||
<a href="#">Community</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#">Download</a>
|
||||
</nav>
|
||||
</header>
|
||||
<hr>
|
||||
|
||||
<div class="main-wrapper">
|
||||
<main>
|
||||
<h1>Login</h1>
|
||||
<input type="text" name="login" id="usrlog" placeholder=" Username">
|
||||
<br>
|
||||
<input type="password" name="login" id="passlog" placeholder=" Password">
|
||||
<br><br>
|
||||
<button id="submitlog">Submit</button>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
const usrlog = document.getElementById("usrlog");
|
||||
const passlog = document.getElementById("passlog");
|
||||
const submitlog = document.getElementById("submitlog");
|
||||
|
||||
submitlog.addEventListener("click", function(){
|
||||
fetch("https://servidordomal.fun/login", {
|
||||
method: "POST",
|
||||
headers: {"Content-Type": "application/json"},
|
||||
body: JSON.stringify({
|
||||
username: usrlog.value,
|
||||
password: passlog.value})
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
|
||||
}
|
||||
html,body {
|
||||
background-color: #EDFBFF;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
header {
|
||||
background-color: #2768F5;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
nav {
|
||||
margin-left: auto;
|
||||
margin-right: 50px;
|
||||
|
||||
}
|
||||
nav a, header h1 {
|
||||
margin-left: 30px;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
hr {
|
||||
border: none;
|
||||
height: 3px;
|
||||
background: #1B1C24;
|
||||
}
|
||||
nav {
|
||||
margin-left: auto;
|
||||
margin-right: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav a, header h1 {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
background-color: white;
|
||||
min-width: auto;
|
||||
padding: 8px 0;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
z-index: 10;
|
||||
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
min-width: max-content;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
color: black;
|
||||
padding: 8px 12px;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
main{
|
||||
box-sizing: border-box;
|
||||
border: 2.5px solid #C4EEF2;
|
||||
width: 90%;
|
||||
max-width: 400px;
|
||||
padding: 30px;
|
||||
background-color: white;
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
margin-top: 80px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
border: 1px solid transparent;
|
||||
padding: 12px 24px;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.3s ease;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
background-color: #2768F5;
|
||||
}
|
||||
button:hover {
|
||||
border-color: black;
|
||||
}
|
||||
|
||||
button:active {
|
||||
transform: translateY(1px);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
input[type="text"], input[type="password"] {
|
||||
width: 100%;
|
||||
padding: 12px 1px;
|
||||
margin: 10px 0;
|
||||
border: 2px solid gainsboro;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
input[type="text"]:focus, input[type="password"]:focus {
|
||||
outline: none;
|
||||
border-color: #2768F5;
|
||||
box-shadow: 0 0 0 3px rgba(39, 104, 245, 0.2);
|
||||
background-color: #f9fcff;
|
||||
}
|
||||
|
||||
nav a.active {
|
||||
border-bottom: 3px solid white;
|
||||
color: white;
|
||||
padding-bottom: 18.93px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,230 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Packets – Custom Package Manager</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
background: #fefefe;
|
||||
color: #222;
|
||||
padding: 20px;
|
||||
}
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
header h1 {
|
||||
font-size: 2.2em;
|
||||
color: #333;
|
||||
}
|
||||
header p {
|
||||
font-size: 1.1em;
|
||||
color: #555;
|
||||
}
|
||||
nav {
|
||||
text-align: center;
|
||||
margin: 15px 0;
|
||||
}
|
||||
nav a {
|
||||
margin: 0 10px;
|
||||
text-decoration: none;
|
||||
color: #0066cc;
|
||||
font-weight: bold;
|
||||
}
|
||||
main {
|
||||
max-width: 1000px;
|
||||
margin: auto;
|
||||
}
|
||||
section {
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
h2 {
|
||||
color: #222;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
/* table control */
|
||||
.table-controls {
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
.table-controls label {
|
||||
font-weight: bold;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.table-controls input[type="search"],
|
||||
.table-controls select {
|
||||
padding: 6px 10px;
|
||||
font-size: 1rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
min-width: 100px;
|
||||
}
|
||||
/* table */
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 5px;
|
||||
background: white;
|
||||
}
|
||||
th, td {
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
text-align: left;
|
||||
}
|
||||
th {
|
||||
background: #f4f4f4;
|
||||
font-weight: bold;
|
||||
}
|
||||
tr:nth-child(even) {
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
table a {
|
||||
text-decoration: none;
|
||||
color: #0066cc;
|
||||
}
|
||||
/* pagination */
|
||||
.pagination {
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.pagination button {
|
||||
padding: 6px 12px;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background: #f0f0f0;
|
||||
color: #333;
|
||||
user-select: none;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.pagination button:hover:not(:disabled) {
|
||||
background-color: #ddd;
|
||||
}
|
||||
.pagination button:disabled {
|
||||
cursor: default;
|
||||
opacity: 0.5;
|
||||
}
|
||||
hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, #ccc, transparent);
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 600px) {
|
||||
header h1 {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
nav a {
|
||||
display: block;
|
||||
margin: 5px 0;
|
||||
}
|
||||
.table-controls {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>📦 Packets</h1>
|
||||
<p>Fast, lightweight and compatible</p>
|
||||
</header>
|
||||
|
||||
<nav>
|
||||
<a href="#download">Download</a>
|
||||
<a href="/package">Packages</a>
|
||||
<a href="/upload">Upload</a>
|
||||
<a href="/account">Account</a>
|
||||
</nav>
|
||||
<hr>
|
||||
|
||||
<main>
|
||||
<section id="packages">
|
||||
|
||||
<div class="table-controls">
|
||||
<label for="searchInput">Search:</label>
|
||||
<input type="search" id="searchInput" v-model="search" placeholder="Search packages...">
|
||||
|
||||
<label for="operatingSelect">Operating:</label>
|
||||
<select id="operatingSelect" v-model="operating">
|
||||
<option value="">All</option>
|
||||
<option value="Linux">Linux</option>
|
||||
<option value="Windows">Windows</option>
|
||||
<option value="MacOS">MacOS</option>
|
||||
</select>
|
||||
|
||||
<label for="archSelect">Arch:</label>
|
||||
<select id="archSelect" v-model="arch">
|
||||
<option value="">All</option>
|
||||
<option value="x86_64">x86_64</option>
|
||||
<option value="arm64">arm64</option>
|
||||
<option value="i386">i386</option>
|
||||
</select>
|
||||
|
||||
<label for="rowsSelect">Show:</label>
|
||||
<select id="rowsSelect" v-model="rows">
|
||||
<option value="10">10 rows</option>
|
||||
<option value="25">25 rows</option>
|
||||
<option value="50">50 rows</option>
|
||||
<option value="100">100 rows</option>
|
||||
<option value="500" selected>500 rows</option>
|
||||
</select>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<h2>Package List</h2>
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Query name</th>
|
||||
<th>Name</th>
|
||||
<th>Arch</th>
|
||||
<th>Operating</th>
|
||||
<th>Version</th>
|
||||
<th>Author</th>
|
||||
<th>Reports</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="app">
|
||||
<tr v-for="package in packages" :key="package.realname">
|
||||
<td>[[ package.name ]]</td>
|
||||
<td><a :href="'/package/'+ package.realname">[[ package.realname ]]</a></td>
|
||||
<td>[[ package.arch ]]</td>
|
||||
<td>[[ package.operating ]]</td>
|
||||
<td>[[ package.version ]]</td>
|
||||
<td>[[ package.author ]]</td>
|
||||
<td>[[ package.reports ]]</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<button id="prevPage" @click="prevPage" aria-label="Previous page" title="Previous"><</button>
|
||||
<button id="nextPage" @click="nextPage" aria-label="Next page" title="Next">></button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<script src="/static/js/vue.global.js"></script>
|
||||
<script src="/static/js/table.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
web/templates/pages.zip
Normal file
BIN
web/templates/pages.zip
Normal file
Binary file not shown.
@@ -1,240 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Packets - Register</title>
|
||||
<link rel="icon" href="/favicon.ico" type="image/x-icon">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img src="/static/img/box.png" alt="Packets" style="height: 60px;">
|
||||
<h1>Packets Community Repository</h1>
|
||||
<nav>
|
||||
<div class="dropdown">
|
||||
<a href="/register" class="active">Account</a>
|
||||
<div class="dropdown-content">
|
||||
<a href="/register">Register</a>
|
||||
<a href="/login">Login</a>
|
||||
<a href="/logout">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<a href="/packages">Packages</a>
|
||||
<div class="dropdown-content">
|
||||
<a href="/upload">Upload</a>
|
||||
<a href="/packages">Search</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<a href="#">Help</a>
|
||||
<div class="dropdown-content">
|
||||
<a href="#">Documentation</a>
|
||||
<a href="#">Report a bug</a>
|
||||
<a href="#">Community</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#">Download</a>
|
||||
</nav>
|
||||
</header>
|
||||
<hr>
|
||||
|
||||
<div class="main-wrapper">
|
||||
<main>
|
||||
<h1>Register</h1>
|
||||
<input type="text" name="register" id="usr" placeholder=" Username">
|
||||
<br>
|
||||
<input type="email" name="register" id="email" placeholder=" E-mail">
|
||||
<br>
|
||||
<input type="password" name="register" id="pass" placeholder=" Password">
|
||||
<br><br>
|
||||
<button id="submit">Submit</button>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
const usr = document.getElementById("usr");
|
||||
const pass = document.getElementById("pass");
|
||||
const email = document.getElementById("email");
|
||||
const submitlog = document.getElementById("submit");
|
||||
|
||||
submitlog.addEventListener("click", function(){
|
||||
fetch("https://servidordomal.fun/register", {
|
||||
method: "POST",
|
||||
headers: {"Content-Type": "application/json"},
|
||||
body: JSON.stringify({
|
||||
username: usr.value,
|
||||
email: email.value,
|
||||
password: pass.value})
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
|
||||
}
|
||||
html,body {
|
||||
background-color: #EDFBFF;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
header {
|
||||
background-color: #2768F5;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
nav {
|
||||
margin-left: auto;
|
||||
margin-right: 50px;
|
||||
|
||||
}
|
||||
nav a, header h1 {
|
||||
margin-left: 30px;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
hr {
|
||||
border: none;
|
||||
height: 3px;
|
||||
background: #1B1C24;
|
||||
}
|
||||
nav {
|
||||
margin-left: auto;
|
||||
margin-right: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav a, header h1 {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
background-color: white;
|
||||
min-width: auto;
|
||||
padding: 8px 0;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
z-index: 10;
|
||||
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
min-width: max-content;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
color: black;
|
||||
padding: 8px 12px;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
main{
|
||||
box-sizing: border-box;
|
||||
border: 2.5px solid #C4EEF2;
|
||||
width: 90%;
|
||||
max-width: 400px;
|
||||
padding: 30px;
|
||||
background-color: white;
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
margin-top: 80px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
border: 1px solid transparent;
|
||||
padding: 12px 24px;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.3s ease;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
background-color: #2768F5;
|
||||
}
|
||||
button:hover {
|
||||
border-color: black;
|
||||
}
|
||||
|
||||
button:active {
|
||||
transform: translateY(1px);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
input[type="text"], input[type="password"], input[type="email"] {
|
||||
width: 100%;
|
||||
padding: 12px 1px;
|
||||
margin: 10px 0;
|
||||
border: 2px solid gainsboro;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus {
|
||||
outline: none;
|
||||
border-color: #2768F5;
|
||||
box-shadow: 0 0 0 3px rgba(39, 104, 245, 0.2);
|
||||
background-color: #f9fcff;
|
||||
}
|
||||
|
||||
nav a.active {
|
||||
border-bottom: 3px solid white;
|
||||
color: white;
|
||||
padding-bottom: 18.93px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,104 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Packets – Custom Package Manager</title>
|
||||
<style>
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
background: #fefefe;
|
||||
color: #222;
|
||||
padding: 20px;
|
||||
}
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
header h1 {
|
||||
font-size: 2.2em;
|
||||
color: #333;
|
||||
}
|
||||
header p {
|
||||
font-size: 1.1em;
|
||||
color: #555;
|
||||
}
|
||||
nav {
|
||||
text-align: center;
|
||||
margin: 15px 0;
|
||||
}
|
||||
nav a {
|
||||
margin: 0 10px;
|
||||
text-decoration: none;
|
||||
color: #0066cc;
|
||||
font-weight: bold;
|
||||
}
|
||||
main {
|
||||
max-width: 900px;
|
||||
margin: auto;
|
||||
}
|
||||
section {
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
h2 {
|
||||
color: #222;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
pre {
|
||||
background: #f4f4f4;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, #ccc, transparent);
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
header h1 {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
nav a {
|
||||
display: block;
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>📦 Packets</h1>
|
||||
<p>Fast, lightweight and compatible</p>
|
||||
</header>
|
||||
|
||||
<nav>
|
||||
<a href="#download">Download</a>
|
||||
<a href="/package">Packages</a>
|
||||
<a href="/upload">Upload</a>
|
||||
<a href="/account">Account</a>
|
||||
</nav>
|
||||
<hr>
|
||||
<main>
|
||||
<section id="manifest">
|
||||
<h2>Manifest.toml</h2>
|
||||
<pre><code>{{ .Manifest }}</code></pre>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Install script</h2>
|
||||
<pre><code>{{ .Install }}</code></pre>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Remove script</h2>
|
||||
<pre><code>{{ .Remove }}</code></pre>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,115 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Packets – Custom Package Manager</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
background: #fefefe;
|
||||
color: #222;
|
||||
padding: 20px;
|
||||
}
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
header h1 {
|
||||
font-size: 2.2em;
|
||||
color: #333;
|
||||
}
|
||||
header p {
|
||||
font-size: 1.1em;
|
||||
color: #555;
|
||||
}
|
||||
nav {
|
||||
text-align: center;
|
||||
margin: 15px 0;
|
||||
}
|
||||
nav a {
|
||||
margin: 0 10px;
|
||||
text-decoration: none;
|
||||
color: #0066cc;
|
||||
font-weight: bold;
|
||||
}
|
||||
main {
|
||||
max-width: 900px;
|
||||
margin: auto;
|
||||
}
|
||||
section {
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
h2 {
|
||||
color: #222;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
pre {
|
||||
background: #f4f4f4;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, #ccc, transparent);
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
header h1 {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
nav a {
|
||||
display: block;
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>📦 Packets</h1>
|
||||
<p>Fast, lightweight and compatible</p>
|
||||
</header>
|
||||
|
||||
<nav>
|
||||
<a href="#download">Download</a>
|
||||
<a href="/package">Packages</a>
|
||||
<a href="/upload">Upload</a>
|
||||
<a href="/account">Account</a>
|
||||
</nav>
|
||||
<hr>
|
||||
<main>
|
||||
<section id="basic-info">
|
||||
<h2>Basic Info</h2>
|
||||
<p><strong>Query Name:</strong> {{ .Name }}</p>
|
||||
<p><strong>Realname:</strong> {{ .Realname }}</p>
|
||||
<p><strong>Version:</strong> {{ .Version }}</p>
|
||||
<p><strong>Description:</strong> {{ .Description }}</p>
|
||||
<p><strong>Architecture:</strong> {{ .Arch }}</p>
|
||||
<p><strong>Operating:</strong> {{ .Operating }}</p>
|
||||
<p><strong>Family:</strong> {{ .Family }}</p>
|
||||
<br>
|
||||
<p><strong>Author:</strong> {{ .Author }}</p>
|
||||
<p><strong>Reports:</strong> {{ .Reports }}</p>
|
||||
<p><strong>Uploaded at:</strong> {{ .Uploaded }}</p>
|
||||
<br>
|
||||
<a href="/package/{{ .Realname }}/scripts">Scripts and manifest</a>
|
||||
</section>
|
||||
<section id="dependencies">
|
||||
<h2>Dependencies</h2>
|
||||
<p>[
|
||||
{{range .Dependencies}}
|
||||
<a href="/package/{{.}}">{{.}}</a>,
|
||||
{{ end }}
|
||||
]</p>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,217 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Packets - Login/Register</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background: #fefefe;
|
||||
color: #222;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
line-height: 1.6;
|
||||
}
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
header h1 {
|
||||
font-size: 2.2em;
|
||||
color: #333;
|
||||
}
|
||||
header p {
|
||||
font-size: 1.1em;
|
||||
color: #555;
|
||||
}
|
||||
nav {
|
||||
text-align: center;
|
||||
margin: 15px 0;
|
||||
}
|
||||
nav a {
|
||||
margin: 0 10px;
|
||||
text-decoration: none;
|
||||
color: #0066cc;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: #f9f9f9;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
width: 700px;
|
||||
max-width: 100%;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
.tab {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 15px 0;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
user-select: none;
|
||||
transition: background 0.3s, color 0.3s;
|
||||
}
|
||||
.tab.active {
|
||||
background: white;
|
||||
color: #0066cc;
|
||||
border-bottom: 3px solid #0066cc;
|
||||
}
|
||||
.forms {
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
}
|
||||
form {
|
||||
flex: 1;
|
||||
}
|
||||
form h2 {
|
||||
margin-bottom: 20px;
|
||||
color: #222;
|
||||
text-align: center;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
font-weight: bold;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
margin-bottom: 15px;
|
||||
font-size: 1rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-family: inherit;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
input:focus {
|
||||
outline: none;
|
||||
border-color: #0066cc;
|
||||
box-shadow: 0 0 5px rgba(0,102,204,0.5);
|
||||
}
|
||||
button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background: #0066cc;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
button:hover{
|
||||
background: #004999;
|
||||
}
|
||||
form:not(.active) {
|
||||
display: none;
|
||||
}
|
||||
hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, #ccc, transparent);
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.forms {
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>📦 Packets</h1>
|
||||
<p>Fast, lightweight and compatible</p>
|
||||
</header>
|
||||
|
||||
<nav>
|
||||
<a href="#download">Download</a>
|
||||
<a href="/package">Packages</a>
|
||||
<a href="/upload">Upload</a>
|
||||
<a href="/account">Account</a>
|
||||
</nav>
|
||||
<hr>
|
||||
|
||||
<div class="container" role="main" aria-label="Login and Registration forms">
|
||||
<div class="tabs" role="tablist">
|
||||
<div class="tab active" role="tab" tabindex="0" aria-selected="true" aria-controls="loginForm" id="loginTab" data-target="loginForm">Login</div>
|
||||
<div class="tab" role="tab" tabindex="-1" aria-selected="false" aria-controls="registerForm" id="registerTab" data-target="registerForm">Register</div>
|
||||
</div>
|
||||
<div class="forms">
|
||||
<form id="loginForm" class="active" action="/login" method="POST" novalidate role="tabpanel" aria-labelledby="loginTab">
|
||||
<h2>Login to Packets</h2>
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="username" name="username" required autocomplete="username" />
|
||||
<label for="loginPassword">Password</label>
|
||||
<input type="password" id="loginPassword" name="password" required autocomplete="current-password" />
|
||||
<button type="submit">Login</button>
|
||||
</form>
|
||||
|
||||
<form id="registerForm" action="/register" method="POST" novalidate role="tabpanel" aria-labelledby="registerTab">
|
||||
<h2>Create an Account</h2>
|
||||
<label for="regUsername">Username</label>
|
||||
<input type="text" id="regUsername" name="username" required autocomplete="username" minlength="3" />
|
||||
<label for="regEmail">Email</label>
|
||||
<input type="email" id="regEmail" name="email" required autocomplete="email" />
|
||||
<label for="regPassword">Password</label>
|
||||
<input type="password" id="regPassword" name="password" required autocomplete="new-password" minlength="6" />
|
||||
<label for="regPasswordConfirm">Confirm Password</label>
|
||||
<input type="password" id="regPasswordConfirm" name="password_confirm" required autocomplete="new-password" minlength="6" />
|
||||
<button type="submit">Register</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const tabs = document.querySelectorAll('.tab');
|
||||
const forms = document.querySelectorAll('form');
|
||||
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
tabs.forEach(t => {
|
||||
t.classList.remove('active');
|
||||
t.setAttribute('aria-selected', 'false');
|
||||
t.setAttribute('tabindex', '-1');
|
||||
});
|
||||
tab.classList.add('active');
|
||||
tab.setAttribute('aria-selected', 'true');
|
||||
tab.setAttribute('tabindex', '0');
|
||||
|
||||
forms.forEach(form => form.classList.remove('active'));
|
||||
|
||||
const target = tab.getAttribute('data-target');
|
||||
document.getElementById(target).classList.add('active');
|
||||
});
|
||||
|
||||
tab.addEventListener('keydown', e => {
|
||||
let index = Array.from(tabs).indexOf(e.target);
|
||||
if (e.key === 'ArrowRight') {
|
||||
e.preventDefault();
|
||||
tabs[(index + 1) % tabs.length].focus();
|
||||
} else if (e.key === 'ArrowLeft') {
|
||||
e.preventDefault();
|
||||
tabs[(index - 1 + tabs.length) % tabs.length].focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,173 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Packets – Custom Package Manager</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
background: #fefefe;
|
||||
color: #222;
|
||||
padding: 20px;
|
||||
}
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
header h1 {
|
||||
font-size: 2.2em;
|
||||
color: #333;
|
||||
}
|
||||
header p {
|
||||
font-size: 1.1em;
|
||||
color: #555;
|
||||
}
|
||||
nav {
|
||||
text-align: center;
|
||||
margin: 15px 0;
|
||||
}
|
||||
nav a {
|
||||
margin: 0 10px;
|
||||
text-decoration: none;
|
||||
color: #0066cc;
|
||||
font-weight: bold;
|
||||
}
|
||||
main {
|
||||
max-width: 900px;
|
||||
margin: auto;
|
||||
}
|
||||
section {
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
h2 {
|
||||
color: #222;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
pre {
|
||||
background: #f4f4f4;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
form {
|
||||
background: #f9f9f9;
|
||||
padding: 15px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
}
|
||||
form label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
form input, form textarea, form select, form button {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 1rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-family: inherit;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
form input:focus, form textarea:focus, form select:focus {
|
||||
outline: none;
|
||||
border-color: #0066cc;
|
||||
box-shadow: 0 0 5px rgba(0, 102, 204, 0.5);
|
||||
}
|
||||
form button {
|
||||
background: #0066cc;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
form button:hover {
|
||||
background: #004999;
|
||||
}
|
||||
hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, #ccc, transparent);
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
header h1 {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
nav a {
|
||||
display: block;
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>📦 Packets</h1>
|
||||
<p>Fast, lightweight and compatible</p>
|
||||
</header>
|
||||
|
||||
<nav>
|
||||
<a href="#download">Download</a>
|
||||
<a href="/package">Packages</a>
|
||||
<a href="/upload">Upload</a>
|
||||
<a href="/account">Account</a>
|
||||
</nav>
|
||||
<hr>
|
||||
|
||||
|
||||
<main>
|
||||
<section id="upload">
|
||||
<h2>Upload a package</h2>
|
||||
<form>
|
||||
<label for="name">Query Name</label>
|
||||
<input type="text" id="name" name="name" v-model="name" required>
|
||||
|
||||
<label for="file">Package link (.tar.zst)</label>
|
||||
<input type="link" id="file" name="file" v-model="file" placeholder="ex: https://github.com/roboogg133/packets/raw/refs/heads/main/go1.24.5.pkt.tar.zst" required>
|
||||
|
||||
<label for="family">Family</label>
|
||||
<select name="family" id="family" v-model="family">
|
||||
<option value="New">New</option>
|
||||
{{range .Families}}
|
||||
<option value="{{.}}">{{.}}</option>
|
||||
{{end}}
|
||||
</select>
|
||||
|
||||
<label for="arch">Architecture</label>
|
||||
<select name="arch" id="arch" v-model="arch">
|
||||
<option value="x86_64">x86_64</option>
|
||||
<option value="arm64">Arm64</option>
|
||||
<option value="i386">i386</option>
|
||||
</select>
|
||||
|
||||
<label for="operating">Operating System</label>
|
||||
<select name="operating" id="operating" v-model="operating">
|
||||
<option value="Linux">Linux</option>
|
||||
<option value="Windows">Windows</option>
|
||||
<option value="MacOS">MacOS</option>
|
||||
</select>
|
||||
|
||||
<label for="signature">File signature (ed25519)</label>
|
||||
<input type="file" name="signature" id="signature">
|
||||
|
||||
<label for="public_key">Public key (ed25519)</label>
|
||||
<input type="file" name="public_key" id="public_key">
|
||||
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<script src="/static/js/refresh.js"></script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user