tfgrid/www_projectmycelium_io
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

...

Browse Source
This commit is contained in:
despiegk 2024-11-18 20:07:15 +03:00
parent fb458edca2
commit 189a96de30
3 changed files with 108 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
poc_threefold/tf.html → poc_threefold/content/products/body.html
View File

@ -1,29 +1,3 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ThreeFold Products</title>
<link rel="icon" type="image/svg+xml" href="static/img/favicon.svg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;450;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<link rel="stylesheet" href="static/css/tf.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#why">Why</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#info">Info</a></li>
<li><a href="#get-3nodes">Get 3Nodes</a></li>
<li><a href="#newsroom">Newsroom</a></li>
</ul>
</nav>
</header>
<main class="container">
<section id="why"> <section id="why">
<h1>A Secure & Sovereign Infrastructure Layer for the Internet</h1> <h1>A Secure & Sovereign Infrastructure Layer for the Internet</h1>
<p>Our unique technology enables a system which can scale to a planetary level, can store data which can never be corrupted nor lost, is compatible with AI, Cloud, Web2, Web3 and Edge IT workloads, has the potential to recover from unforeseen events, and provide 100% uptime.</p> <p>Our unique technology enables a system which can scale to a planetary level, can store data which can never be corrupted nor lost, is compatible with AI, Cloud, Web2, Web3 and Edge IT workloads, has the potential to recover from unforeseen events, and provide 100% uptime.</p>
@ -76,13 +50,3 @@
<h2>Build the Internet of Tomorrow, Today.</h2> <h2>Build the Internet of Tomorrow, Today.</h2>
<a href="#dive-deeper" role="button">Dive Deeper</a> <a href="#dive-deeper" role="button">Dive Deeper</a>
</section> </section>
</main>
<footer>
<p>&copy; ThreeFold, All rights reserved.</p>
<ul>
<li><a href="#terms">Terms & Conditions</a></li>
<li><a href="#privacy">Privacy Policy</a></li>
</ul>
</footer>
</body>
</html>

15
poc_threefold/products.html Normal file
View File

@ -0,0 +1,15 @@
{% include 'components/header.html' %}
<link rel="stylesheet" href="/static/css/products.css">
<body class="products-page">
{% include 'components/nav.html' %}
<main>
[[products/body]]
</main>
{% include 'components/footer.html' %}
{% include 'components/login.html' %}
{% include 'components/signup.html' %}
</body>
</html>

164
poc_threefold/static/css/tf.css → poc_threefold/static/css/products.css
View File

@ -1,23 +1,57 @@
:root { :root {
--primary-bg: #0a0a0a; /* Light theme variables */
--secondary-bg: #141414; --primary-bg-light: #ffffff;
--text-color: #ffffff; --secondary-bg-light: #f5f5f5;
--text-muted: #a0a0a0; --text-color-light: #333333;
--text-muted-light: #666666;
--card-bg-light: #ffffff;
--card-border-light: rgba(0, 0, 0, 0.1);
--card-hover-bg-light: #f8f8f8;
/* Dark theme variables */
--primary-bg-dark: #0a0a0a;
--secondary-bg-dark: #141414;
--text-color-dark: #ffffff;
--text-muted-dark: #a0a0a0;
--card-bg-dark: #141414;
--card-border-dark: rgba(255, 255, 255, 0.1);
--card-hover-bg-dark: #1a1a1a;
/* Common variables */
--accent-color: #00abf4; --accent-color: #00abf4;
--section-padding: 3.6rem 1.2rem; --section-padding: 3.6rem 1.2rem;
--nav-height: 42px; --nav-height: 42px;
--card-bg: rgba(20, 20, 20, 0.6);
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
/* Default to dark theme */
--primary-bg: var(--primary-bg-dark);
--secondary-bg: var(--secondary-bg-dark);
--text-color: var(--text-color-dark);
--text-muted: var(--text-muted-dark);
--card-bg: var(--card-bg-dark);
--card-border: var(--card-border-dark);
--card-hover-bg: var(--card-hover-bg-dark);
} }
* { /* Light theme overrides */
.light-theme {
--primary-bg: var(--primary-bg-light);
--secondary-bg: var(--secondary-bg-light);
--text-color: var(--text-color-light);
--text-muted: var(--text-muted-light);
--card-bg: var(--card-bg-light);
--card-border: var(--card-border-light);
--card-hover-bg: var(--card-hover-bg-light);
}
.products-page * {
font-family: var(--font-family); font-family: var(--font-family);
} }
body { .products-page {
font-family: var(--font-family); font-family: var(--font-family);
line-height: 1.6; line-height: 1.6;
background-color: var(--primary-bg); background-color: var(--primary-bg) !important;
color: var(--text-color); color: var(--text-color);
margin: 0; margin: 0;
min-height: 100vh; min-height: 100vh;
@ -26,8 +60,8 @@ body {
font-size: 0.9rem; font-size: 0.9rem;
} }
header { .products-page header {
background-color: rgba(10, 10, 10, 0.95); background-color: var(--primary-bg);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
position: fixed; position: fixed;
top: 0; top: 0;
@ -35,16 +69,16 @@ header {
right: 0; right: 0;
height: var(--nav-height); height: var(--nav-height);
z-index: 1000; z-index: 1000;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid var(--card-border);
} }
header nav { .products-page header nav {
max-width: 1400px; max-width: 1400px;
margin: 0 auto; margin: 0 auto;
height: 100%; height: 100%;
} }
header nav ul { .products-page header nav ul {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -55,7 +89,7 @@ header nav ul {
gap: 1.5rem; gap: 1.5rem;
} }
header nav ul li a { .products-page header nav ul li a {
text-decoration: none; text-decoration: none;
color: var(--text-muted); color: var(--text-muted);
font-size: 0.57rem; font-size: 0.57rem;
@ -63,14 +97,13 @@ header nav ul li a {
transition: all 0.3s ease; transition: all 0.3s ease;
padding: 0.3rem 0; padding: 0.3rem 0;
position: relative; position: relative;
font-family: var(--font-family);
} }
header nav ul li a:hover { .products-page header nav ul li a:hover {
color: var(--text-color); color: var(--text-color);
} }
header nav ul li a::after { .products-page header nav ul li a::after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: -1px; bottom: -1px;
@ -81,45 +114,41 @@ header nav ul li a::after {
transition: width 0.3s ease; transition: width 0.3s ease;
} }
header nav ul li a:hover::after { .products-page header nav ul li a:hover::after {
width: 100%; width: 100%;
} }
main.container { .products-page main.container {
max-width: 1400px; max-width: 1400px;
margin: 0 auto; margin: 0 auto;
padding: var(--nav-height) 1.2rem 0; padding: var(--nav-height) 1.2rem 0;
} }
section { .products-page section {
padding: var(--section-padding); padding: var(--section-padding);
position: relative; position: relative;
} }
section#why { .products-page section#why {
min-height: calc(100vh - var(--nav-height)); min-height: calc(100vh - var(--nav-height));
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
text-align: center; text-align: center;
background: radial-gradient(circle at center, #141414 0%, #0a0a0a 100%); background: var(--primary-bg);
} }
section#why h1 { .products-page section#why h1 {
font-family: var(--font-family);
font-size: 2.4rem; font-size: 2.4rem;
font-weight: 600; font-weight: 600;
line-height: 1.2; line-height: 1.2;
margin-bottom: 1.2rem; margin-bottom: 1.2rem;
background: linear-gradient(90deg, #ffffff 0%, #a0a0a0 100%); color: var(--text-color);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
max-width: 1000px; max-width: 1000px;
} }
section#why p { .products-page section#why p {
font-family: var(--font-family);
font-size: 0.9rem; font-size: 0.9rem;
color: var(--text-muted); color: var(--text-muted);
max-width: 800px; max-width: 800px;
@ -127,24 +156,23 @@ section#why p {
font-weight: 300; font-weight: 300;
} }
section#products { .products-page section#products {
background-color: var(--secondary-bg); background-color: var(--secondary-bg);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
section#products::before { .products-page section#products::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 1px; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); background: var(--card-border);
} }
section#products h2 { .products-page section#products h2 {
font-family: var(--font-family);
font-size: 1.8rem; font-size: 1.8rem;
font-weight: 600; font-weight: 600;
margin-bottom: 0.9rem; margin-bottom: 0.9rem;
@ -152,8 +180,7 @@ section#products h2 {
margin-left: 2.4rem; margin-left: 2.4rem;
} }
section#products p { .products-page section#products p {
font-family: var(--font-family);
color: var(--text-muted); color: var(--text-muted);
font-size: 0.9rem; font-size: 0.9rem;
max-width: 900px; max-width: 900px;
@ -162,7 +189,7 @@ section#products p {
margin-left: 2.4rem; margin-left: 2.4rem;
} }
.product-grid { .products-page .product-grid {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 1rem; gap: 1rem;
@ -171,41 +198,40 @@ section#products p {
padding: 0 0.5rem; padding: 0 0.5rem;
} }
.product-card { .products-page .product-card {
background: var(--card-bg); background-color: var(--card-bg);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid var(--card-border);
border-radius: 8px; border-radius: 8px;
padding: 0.9rem 0.6rem; padding: 0.9rem 0.6rem;
transition: all 0.3s ease; transition: all 0.3s ease;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.6rem; gap: 0.6rem;
position: relative;
overflow: hidden;
} }
.product-card:hover { .products-page .product-card:hover {
transform: translateY(-2px); transform: translateY(-2px);
border-color: rgba(255, 255, 255, 0.2); border-color: var(--card-border);
background: rgba(255, 255, 255, 0.05); background-color: var(--card-hover-bg);
} }
.product-card h3 { .products-page .product-card h3 {
font-family: var(--font-family);
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 600; font-weight: 600;
margin: 0; margin: 0;
color: var(--text-color); color: var(--text-color);
} }
.product-card p { .products-page .product-card p {
font-family: var(--font-family);
font-size: 0.72rem; font-size: 0.72rem;
color: var(--text-muted); color: var(--text-muted);
margin: 0; margin: 0;
line-height: 1.6; line-height: 1.6;
} }
[role="button"] { .products-page [role="button"] {
font-family: var(--font-family);
display: inline-block; display: inline-block;
padding: 0.6rem 1.5rem; padding: 0.6rem 1.5rem;
background: var(--accent-color); background: var(--accent-color);
@ -220,15 +246,15 @@ section#products p {
margin-top: 1.2rem; margin-top: 1.2rem;
} }
[role="button"]:hover { .products-page [role="button"]:hover {
background: #0090d4; background: #0090d4;
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(0, 171, 244, 0.2); box-shadow: 0 4px 20px rgba(0, 171, 244, 0.2);
} }
section#dive-deeper { .products-page section#dive-deeper {
text-align: center; text-align: center;
background: linear-gradient(45deg, #141414, #1a1a1a); background: var(--secondary-bg);
min-height: 30vh; min-height: 30vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -236,25 +262,22 @@ section#dive-deeper {
align-items: center; align-items: center;
} }
section#dive-deeper h2 { .products-page section#dive-deeper h2 {
font-family: var(--font-family);
font-size: 1.8rem; font-size: 1.8rem;
font-weight: 600; font-weight: 600;
margin-bottom: 1.2rem; margin-bottom: 1.2rem;
background: linear-gradient(90deg, #ffffff, #a0a0a0); color: var(--text-color);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
footer { .products-page footer {
text-align: center; text-align: center;
padding: 1.8rem 0.6rem; padding: 1.8rem 0.6rem;
background-color: var(--secondary-bg); background-color: var(--secondary-bg);
color: var(--text-muted); color: var(--text-muted);
border-top: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid var(--card-border);
} }
footer ul { .products-page footer ul {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
display: flex; display: flex;
@ -263,42 +286,41 @@ footer ul {
margin-top: 0.9rem; margin-top: 0.9rem;
} }
footer ul li a { .products-page footer ul li a {
font-family: var(--font-family);
text-decoration: none; text-decoration: none;
color: var(--text-muted); color: var(--text-muted);
font-size: 0.72rem; font-size: 0.72rem;
transition: color 0.3s ease; transition: color 0.3s ease;
} }
footer ul li a:hover { .products-page footer ul li a:hover {
color: var(--text-color); color: var(--text-color);
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.product-grid { .products-page .product-grid {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
:root { .products-page {
--section-padding: 2.4rem 0.9rem; --section-padding: 2.4rem 0.9rem;
} }
section#why h1 { .products-page section#why h1 {
font-size: 1.5rem; font-size: 1.5rem;
} }
section#why p { .products-page section#why p {
font-size: 0.79rem; font-size: 0.79rem;
} }
section#products h2 { .products-page section#products h2 {
font-size: 1.5rem; font-size: 1.5rem;
} }
header nav ul { .products-page header nav ul {
padding: 0 0.6rem; padding: 0 0.6rem;
gap: 0.9rem; gap: 0.9rem;
flex-wrap: wrap; flex-wrap: wrap;
@ -306,11 +328,11 @@ footer ul li a:hover {
overflow-x: auto; overflow-x: auto;
} }
header nav ul::-webkit-scrollbar { .products-page header nav ul::-webkit-scrollbar {
display: none; display: none;
} }
.product-grid { .products-page .product-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }