Загрузка...
Шаблон футуристичного лендинга и дашборда: полноэкранный sci-fi дизайн, сайдбар, карточки протоколов, таблицы данных. Tailwind, JS анимации.
<html lang="en" vid="0"><head vid="1">
<meta charset="UTF-8" vid="2">
<meta name="viewport" content="width=device-width, initial-scale=1.0" vid="3">
<title vid="4">SGL — SYSTEMS</title>
<script src="https://cdn.tailwindcss.com/3.4.17" vid="5"></script>
<link rel="preconnect" href="https://fonts.googleapis.com" vid="6">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" vid="7">
<link href="https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,300;0,400;0,500;0,700;1,400&family=JetBrains+Mono:wght@300;400;500&display=swap" rel="stylesheet" vid="8">
<style vid="9">
:root {
--bg-color: #f4f4f4;
--text-color: #111111;
--accent-color: #000000;
--border-color: #cccccc;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: 'JetBrains Mono', monospace;
overflow: hidden;
width: 100vw;
height: 100vh;
-webkit-font-smoothing: antialiased;
}
.font-sans-display {
font-family: 'Archivo', sans-serif;
}
::-webkit-scrollbar {
width: 4px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #000;
}
#landing-view {
transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
z-index: 50;
}
#app-view {
opacity: 0;
pointer-events: none;
transition: opacity 1s ease 0.4s;
z-index: 40;
}
body.active-state #landing-view {
transform: translateY(-100%);
}
body.active-state #app-view {
opacity: 1;
pointer-events: auto;
}
.canvas-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
opacity: 0.6;
}
.grid-bg {
background-image: linear-gradient(to right, #e5e5e5 1px, transparent 1px),
linear-gradient(to bottom, #e5e5e5 1px, transparent 1px);
background-size: 40px 40px;
}
.marquee-container {
overflow: hidden;
white-space: nowrap;
}
.marquee-content {
display: inline-block;
animation: marquee 20s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.hover-invert {
transition: all 0.2s;
}
.hover-invert:hover {
background-color: #000;
color: #fff;
}
.text-huge { font-size: 14rem; line-height: 0.8; letter-spacing: -0.05em; }
@media (max-width: 1024px) {
.text-huge { font-size: 8rem; }
}
</style>
</head>
<body class="bg-[#f4f4f4] text-black" vid="10">
<section id="landing-view" class="fixed inset-0 w-full h-full bg-[#f4f4f4] flex flex-col justify-between p-6 overflow-hidden" vid="11">
<div class="absolute inset-0 grid-bg opacity-40 z-[-1]" vid="12"></div>
<div class="canvas-container" vid="13">
<canvas id="dna-canvas-landing" vid="14"></canvas>
</div>
<header class="flex justify-between items-start z-10 border-b border-black pb-4" vid="15">
<div class="flex flex-col" vid="16">
<h1 class="font-sans-display font-bold text-4xl tracking-tighter" vid="17">SGL</h1>
<span class="text-xs mt-1 opacity-60" vid="18">SYNTHETIC GENOMICS LAB</span>
</div>
<div class="text-right font-mono text-xs leading-tight" vid="19">
<div vid="20">SYS.STATUS: ONLINE</div>
<div vid="21">SECURE CONNECTION</div>
<div vid="22">ID: 884-XJ-9</div>
</div>
</header>
<div class="flex-1 flex items-center relative z-10" vid="23">
<div class="w-full" vid="24">
<div class="font-sans-display text-huge font-black uppercase text-black mix-blend-multiply opacity-90 leading-none" vid="25">
Bio<br vid="26">Logic
</div>
<div class="mt-8 max-w-lg border-l-2 border-black pl-6 ml-2" vid="27">
<p class="font-mono text-sm uppercase leading-relaxed" vid="28">
We are rewriting the source code of humanity.
Optimization of the somatic form through precise
computational intervention.
</p>
</div>
</div>
</div>
<footer class="flex justify-between items-end z-10 pt-4 border-t border-black" vid="29">
<div class="text-xs font-mono opacity-50" vid="30">
© 2024 SGL INC.<br vid="31">
ALL RIGHTS RESERVED.
</div>
<button onclick="enterSystem()" class="group flex items-center gap-4 cursor-pointer bg-transparent border-none outline-none" vid="32">
<div class="text-right" vid="33">
<div class="text-xs uppercase tracking-widest mb-1 group-hover:translate-x-[-5px] transition-transform" vid="34">Initialize Protocol</div>
<div class="font-sans-display font-bold text-2xl uppercase" vid="35">Enter System</div>
</div>
<div class="w-12 h-12 bg-black text-white flex items-center justify-center group-hover:scale-110 transition-transform duration-300" vid="36">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="round" vid="37"><path d="M5 12h14" vid="38"></path><path d="m12 5 7 7-7 7" vid="39"></path></svg>
</div>
</button>
</footer>
</section>
<section id="app-view" class="fixed inset-0 w-full h-full bg-[#f4f4f4] flex flex-row" vid="40">
<aside class="w-64 h-full border-r border-black flex flex-col justify-between bg-white z-50 relative shrink-0" vid="41">
<div class="p-6" vid="42">
<div class="font-sans-display font-bold text-3xl mb-12 tracking-tighter" vid="43">SGL</div>
<nav class="flex flex-col gap-1" vid="44">
<a href="#" class="flex items-center justify-between p-3 hover:bg-black hover:text-white transition-colors group border-b border-gray-100" vid="45">
<span class="font-mono text-xs" vid="46">01</span>
<span class="font-sans-display font-medium uppercase tracking-wide" vid="47">Dashboard</span>
</a>
<a href="#" class="flex items-center justify-between p-3 hover:bg-black hover:text-white transition-colors group border-b border-gray-100" vid="48">
<span class="font-mono text-xs" vid="49">02</span>
<span class="font-sans-display font-medium uppercase tracking-wide" vid="50">Sequencing</span>
</a>
<a href="#" class="flex items-center justify-between p-3 hover:bg-black hover:text-white transition-colors group border-b border-gray-100" vid="51">
<span class="font-mono text-xs" vid="52">03</span>
<span class="font-sans-display font-medium uppercase tracking-wide" vid="53">Storage</span>
</a>
<a href="#" class="flex items-center justify-between p-3 hover:bg-black hover:text-white transition-colors group border-b border-gray-100" vid="54">
<span class="font-mono text-xs" vid="55">04</span>
<span class="font-sans-display font-medium uppercase tracking-wide" vid="56">Ethics</span>
</a>
</nav>
</div>
<div class="p-6" vid="57">
<div class="w-full h-32 border border-black p-2 mb-4 relative overflow-hidden" vid="58">
<div class="absolute top-2 left-2 text-[10px] uppercase" vid="59">Live Sample</div>
<canvas id="dna-canvas-sidebar" class="w-full h-full" vid="60"></canvas>
</div>
<div class="flex justify-between text-[10px] font-mono uppercase" vid="61">
<span vid="62">Sys: Normal</span>
<span vid="63">v.2.0.4</span>
</div>
</div>
</aside>
<main class="flex-1 h-full overflow-y-auto relative scroll-smooth" vid="64">
<div class="w-full border-b border-black bg-black text-white py-2 overflow-hidden" vid="65">
<div class="marquee-container" vid="66">
<div class="marquee-content font-mono text-xs uppercase tracking-widest" vid="67">
Initializing Sequence /// Subject: 8492-A /// Optimization Required /// Analysis Complete /// Warning: Genetic Drift Detected /// Initializing Sequence /// Subject: 8492-A /// Optimization Required /// Analysis Complete /// Warning: Genetic Drift Detected ///
</div>
</div>
</div>
<div class="p-12 max-w-6xl mx-auto" vid="68">
<header class="mb-24 relative" vid="69">
<div class="absolute -left-4 top-0 w-1 h-full bg-black" vid="70"></div>
<h2 class="font-sans-display text-7xl font-medium uppercase leading-tight mb-8" vid="71">
Architecting<br vid="72">
<span class="font-light italic text-gray-500" vid="73">The Future Human</span>
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12" vid="74">
<p class="font-mono text-sm leading-relaxed uppercase" vid="75">
Our laboratory operates at the bleeding edge of synthetic genomics. We don't just read DNA; we write it. From aesthetic enhancements to metabolic overhauls, SGL provides the toolkit for the next stage of evolution.
</p>
<div class="flex gap-8 items-start" vid="76">
<div class="flex flex-col" vid="77">
<span class="text-4xl font-sans-display font-bold" vid="78">99.9%</span>
<span class="text-xs font-mono uppercase mt-2" vid="79">Accuracy Rate</span>
</div>
<div class="flex flex-col" vid="80">
<span class="text-4xl font-sans-display font-bold" vid="81">24h</span>
<span class="text-xs font-mono uppercase mt-2" vid="82">Turnaround</span>
</div>
</div>
</div>
</header>
<section class="mb-24" vid="83">
<div class="flex items-baseline justify-between border-b border-black pb-4 mb-8" vid="84">
<h3 class="font-sans-display text-3xl uppercase" vid="85">Active Protocols</h3>
<span class="font-mono text-xs" vid="86">[ SELECT MODULE ]</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-px bg-gray-200 border border-gray-200" vid="87">
<div class="bg-white p-8 hover:bg-gray-50 transition-colors group cursor-pointer h-full flex flex-col justify-between" vid="88">
<div vid="89">
<div class="flex justify-between mb-8" vid="90">
<span class="font-mono text-xs border border-black px-2 py-1 rounded-full" vid="91">SEQ-01</span>
<svg class="w-6 h-6 opacity-0 group-hover:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24" vid="92"><path stroke-linecap="square" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" vid="93"></path></svg>
</div>
<h4 class="font-sans-display text-2xl uppercase mb-4 font-bold" vid="94">Crispr/Cas9 Editing</h4>
<p class="font-mono text-sm text-gray-600 mb-6" vid="95">Precise base-pair modification for elimination of hereditary defects and enhancement of phenotypic traits.</p>
</div>
<ul class="font-mono text-xs space-y-2 border-t border-gray-100 pt-4" vid="96">
<li class="flex items-center" vid="97"><span class="w-1 h-1 bg-black mr-2" vid="98"></span>Pigmentation Adjustment</li>
<li class="flex items-center" vid="99"><span class="w-1 h-1 bg-black mr-2" vid="100"></span>Myostatin Inhibition</li>
</ul>
</div>
<div class="bg-white p-8 hover:bg-gray-50 transition-colors group cursor-pointer h-full flex flex-col justify-between" vid="101">
<div vid="102">
<div class="flex justify-between mb-8" vid="103">
<span class="font-mono text-xs border border-black px-2 py-1 rounded-full" vid="104">STR-04</span>
<svg class="w-6 h-6 opacity-0 group-hover:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24" vid="105"><path stroke-linecap="square" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" vid="106"></path></svg>
</div>
<h4 class="font-sans-display text-2xl uppercase mb-4 font-bold" vid="107">Cryogenic Archival</h4>
<p class="font-mono text-sm text-gray-600 mb-6" vid="108">Zero-degradation storage solutions for biological assets. Secure your genetic legacy for future generations.</p>
</div>
<ul class="font-mono text-xs space-y-2 border-t border-gray-100 pt-4" vid="109">
<li class="flex items-center" vid="110"><span class="w-1 h-1 bg-black mr-2" vid="111"></span>Liquid Nitrogen Core</li>
<li class="flex items-center" vid="112"><span class="w-1 h-1 bg-black mr-2" vid="113"></span>24/7 Biometric Security</li>
</ul>
</div>
<div class="bg-white p-8 hover:bg-gray-50 transition-colors group cursor-pointer h-full flex flex-col justify-between" vid="114">
<div vid="115">
<div class="flex justify-between mb-8" vid="116">
<span class="font-mono text-xs border border-black px-2 py-1 rounded-full" vid="117">OPT-09</span>
<svg class="w-6 h-6 opacity-0 group-hover:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24" vid="118"><path stroke-linecap="square" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" vid="119"></path></svg>
</div>
<h4 class="font-sans-display text-2xl uppercase mb-4 font-bold" vid="120">Neural Mapping</h4>
<p class="font-mono text-sm text-gray-600 mb-6" vid="121">High-fidelity scanning of synaptic pathways for cognitive backup and analysis.</p>
</div>
<ul class="font-mono text-xs space-y-2 border-t border-gray-100 pt-4" vid="122">
<li class="flex items-center" vid="123"><span class="w-1 h-1 bg-black mr-2" vid="124"></span>Connectome Visualization</li>
<li class="flex items-center" vid="125"><span class="w-1 h-1 bg-black mr-2" vid="126"></span>Memory Indexing</li>
</ul>
</div>
<div class="bg-white p-8 hover:bg-gray-50 transition-colors group cursor-pointer h-full flex flex-col justify-between" vid="127">
<div vid="128">
<div class="flex justify-between mb-8" vid="129">
<span class="font-mono text-xs border border-black px-2 py-1 rounded-full" vid="130">SYN-12</span>
<svg class="w-6 h-6 opacity-0 group-hover:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24" vid="131"><path stroke-linecap="square" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" vid="132"></path></svg>
</div>
<h4 class="font-sans-display text-2xl uppercase mb-4 font-bold" vid="133">Custom Synthesis</h4>
<p class="font-mono text-sm text-gray-600 mb-6" vid="134">Full-scale genome synthesis for de-novo organism creation. Licensed clients only.</p>
</div>
<ul class="font-mono text-xs space-y-2 border-t border-gray-100 pt-4" vid="135">
<li class="flex items-center" vid="136"><span class="w-1 h-1 bg-black mr-2" vid="137"></span>Bacterial Scaffolding</li>
<li class="flex items-center" vid="138"><span class="w-1 h-1 bg-black mr-2" vid="139"></span>Eukaryotic Assembly</li>
</ul>
</div>
</div>
</section>
<section class="mb-24" vid="140">
<div class="flex items-baseline justify-between border-b border-black pb-4 mb-6" vid="141">
<h3 class="font-sans-display text-3xl uppercase" vid="142">Recent Transmissions</h3>
</div>
<div class="overflow-x-auto" vid="143">
<table class="w-full font-mono text-sm text-left" vid="144">
<thead class="bg-black text-white uppercase text-xs" vid="145">
<tr vid="146">
<th class="p-3 font-normal" vid="147">ID</th>
<th class="p-3 font-normal" vid="148">Subject</th>
<th class="p-3 font-normal" vid="149">Status</th>
<th class="p-3 font-normal text-right" vid="150">Timestamp</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200" vid="151">
<tr class="hover:bg-gray-100" vid="152">
<td class="p-3" vid="153">#8842</td>
<td class="p-3" vid="154">Homo Sapiens (Variant B)</td>
<td class="p-3 text-green-700" vid="155">● Stable</td>
<td class="p-3 text-right" vid="156">09:42:11</td>
</tr>
<tr class="hover:bg-gray-100" vid="157">
<td class="p-3" vid="158">#8843</td>
<td class="p-3" vid="159">Drosophila Melanogaster</td>
<td class="p-3 text-yellow-600" vid="160">● Mutating</td>
<td class="p-3 text-right" vid="161">09:45:33</td>
</tr>
<tr class="hover:bg-gray-100" vid="162">
<td class="p-3" vid="163">#8844</td>
<td class="p-3" vid="164">Arabidopsis Thaliana</td>
<td class="p-3 text-green-700" vid="165">● Stable</td>
<td class="p-3 text-right" vid="166">09:48:02</td>
</tr>
<tr class="hover:bg-gray-100" vid="167">
<td class="p-3" vid="168">#8845</td>
<td class="p-3" vid="169">Mus Musculus</td>
<td class="p-3 text-red-600" vid="170">● Failed</td>
<td class="p-3 text-right" vid="171">10:01:55</td>
</tr>
</tbody>
</table>
</div>
</section>
<footer class="border-t-2 border-black pt-12 pb-24 grid grid-cols-1 md:grid-cols-4 gap-8 font-mono text-xs uppercase" vid="172">
<div class="col-span-2" vid="173">
<h5 class="font-bold mb-4" vid="174">SGL Headquarters</h5>
<p class="max-w-xs text-gray-500" vid="175">
Sector 7, Bio-District<br vid="176">
New San Francisco, CA<br vid="177">
United Territories
</p>
</div>
<div vid="178">
<h5 class="font-bold mb-4" vid="179">Legal</h5>
<ul class="space-y-2 text-gray-500" vid="180">
<li vid="181"><a href="#" class="hover:text-black" vid="182">Terms of Use</a></li>
<li vid="183"><a href="#" class="hover:text-black" vid="184">Privacy Policy</a></li>
<li vid="185"><a href="#" class="hover:text-black" vid="186">Bio-Ethics Compliance</a></li>
</ul>
</div>
<div vid="187">
<h5 class="font-bold mb-4" vid="188">Connect</h5>
<ul class="space-y-2 text-gray-500" vid="189">
<li vid="190"><a href="#" class="hover:text-black" vid="191">Secure Mail</a></li>
<li vid="192"><a href="#" class="hover:text-black" vid="193">Encrypted Chat</a></li>
<li vid="194"><a href="#" class="hover:text-black" vid="195">Network Status</a></li>
</ul>
</div>
</footer>
</div>
</main>
</section>
<script vid="196">
function enterSystem() {
document.body.classList.add('active-state');
setTimeout(() => {
initDna('dna-canvas-sidebar', 'vertical', 0.5);
}, 500);
}
class DnaEngine {
constructor(canvasId, orientation = 'horizontal', density = 1) {
this.canvas = document.getElementById(canvasId);
this.ctx = this.canvas.getContext('2d');
this.orientation = orientation;
this.density = density;
this.bases = ['A', 'T', 'C', 'G'];
this.particles = [];
this.t = 0;
this.resize();
window.addEventListener('resize', () => this.resize());
this.init();
this.animate();
}
resize() {
const parent = this.canvas.parentElement;
this.width = this.canvas.width = parent.clientWidth;
this.height = this.canvas.height = parent.clientHeight;
this.init();
}
init() {
this.particles = [];
const count = this.orientation === 'horizontal' ? Math.floor(this.width / 20) : Math.floor(this.height / 15);
for (let i = 0; i < count; i++) {
let char = this.bases[i % 4];
let pair = char === 'A' ? 'T' : char === 'T' ? 'A' : char === 'C' ? 'G' : 'C';
this.particles.push({
index: i,
char: char,
offset: 0,
isPair: false
});
this.particles.push({
index: i,
char: pair,
offset: Math.PI,
isPair: true
});
}
}
update() {
this.t += 0.02;
this.ctx.clearRect(0, 0, this.width, this.height);
this.ctx.font = this.orientation === 'horizontal' ? 'bold 16px monospace' : 'bold 10px monospace';
this.ctx.textAlign = 'center';
this.ctx.textBaseline = 'middle';
const waveHeight = this.orientation === 'horizontal' ? this.height * 0.25 : this.width * 0.3;
const spacing = this.orientation === 'horizontal' ? 30 : 20;
for (let i = 0; i < this.particles.length; i+=2) {
const p1 = this.particles[i];
const p2 = this.particles[i+1];
const angle = (p1.index * 0.2) - this.t;
const z = Math.cos(angle);
const yOffset = Math.sin(angle) * waveHeight;
const scale1 = (z + 2) / 3;
const scale2 = (-z + 2) / 3;
let x1, y1, x2, y2, s1, s2, a1, a2;
if (this.orientation === 'horizontal') {
const centerX = (p1.index * spacing) - (this.t * 50) % (spacing * 4);
const centerY = this.height / 2;
x1 = x2 = (this.width/2) - ((this.particles.length/4) * spacing / 2) + (p1.index * spacing);
y1 = centerY + Math.sin(angle) * waveHeight;
y2 = centerY + Math.sin(angle + Math.PI) * waveHeight;
a1 = (Math.cos(angle) + 1) / 2 * 0.8 + 0.2;
a2 = (Math.cos(angle + Math.PI) + 1) / 2 * 0.8 + 0.2;
} else {
const centerX = this.width / 2;
const startY = 10;
y1 = y2 = startY + (p1.index * spacing);
x1 = centerX + Math.sin(angle) * waveHeight;
x2 = centerX + Math.sin(angle + Math.PI) * waveHeight;
a1 = (Math.cos(angle) + 1) / 2 * 0.8 + 0.2;
a2 = (Math.cos(angle + Math.PI) + 1) / 2 * 0.8 + 0.2;
}
this.ctx.beginPath();
this.ctx.strokeStyle = `rgba(0,0,0, ${Math.min(a1, a2) * 0.2})`;
this.ctx.moveTo(x1, y1);
this.ctx.lineTo(x2, y2);
this.ctx.stroke();
this.ctx.fillStyle = `rgba(0,0,0, ${a1})`;
this.ctx.fillText(p1.char, x1, y1);
this.ctx.fillStyle = `rgba(0,0,0, ${a2})`;
this.ctx.fillText(p2.char, x2, y2);
}
}
animate() {
this.update();
requestAnimationFrame(() => this.animate());
}
}
const landingDna = new DnaEngine('dna-canvas-landing', 'horizontal');
function initDna(id, orient, dens) {
new DnaEngine(id, orient, dens);
}
</script>
</body></html>