<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About LiveCoder</title>
</head>
<body>
<div class="py-8 lg:py-20 h-full overflow-auto">
<div class="mx-auto px-4 max-w-4xl h-full">
<section>
<p class="logo-link">
<img src="/images/logo.png" class="site-logo" alt="Site Logo">
<span class="company-name">LiveCoder</span>
</p>
<p>
<span class="text-primary">LiveCoder</span>
is an interactive coding environment that allows users to test and
run code snippets in HTML, CSS, and JavaScript directly in their
browser, complete with AI code generation. The platform is inspired
by Codepen and is designed to facilitate live coding, making it
easier to learn, experiment, and develop web projects.
</p>
</section>
<hr>
<section>
<h2 class="section-title">Live Coding Environment</h2>
<p>Users can write and execute code snippets in real-time, using HTML, CSS, and JavaScript. Now with support for Babel and JSX to write code in a React environment, and SCSS to extend CSS capabilities.</p>
</section>
<section>
<h2 class="section-title">AI-Powered Code Generation</h2>
<p>Integrated with the GPT API, the platform allows users to generate code snippets with AI, complete with image recognition, helping to speed up development and provide coding suggestions.</p>
:root {
--primary-color: #8A2BE2;
--primary-color-dark: #6A1B9A;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #000;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.logo-link {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
margin-bottom: 10px;
}
.site-logo {
width: 56px;
height: 56px;
}
.company-name {
font-size: 2.25rem;
font-weight: 600;
color: white;
}
.text-primary {
color: var(--primary-color);
text-decoration: none;
}
.text-primary:hover {
color: var(--primary-color-dark);
text-decoration: underline;