First commit
This commit is contained in:
Enrique MP
commit
e52c57ce82
|
|
@ -0,0 +1,113 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AI Blog Generator</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
|
||||
|
||||
<style>
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes rotate {
|
||||
from {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.load {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 110px auto 0;
|
||||
border:solid 10px #8822aa;
|
||||
border-radius: 50%;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
-webkit-transition: all 0.5s ease-in;
|
||||
-webkit-animation-name: rotate;
|
||||
-webkit-animation-duration: 1.0s;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-webkit-animation-timing-function: linear;
|
||||
|
||||
transition: all 0.5s ease-in;
|
||||
animation-name: rotate;
|
||||
animation-duration: 1.0s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="flex flex-col min-h-screen bg-gray-100 font-sans antialiased">
|
||||
<!-- Navbar -->
|
||||
<nav class="bg-blue-600 p-4 text-white flex justify-between">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold">Ai Blog Generator</h1>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" class="text-white hover:underline">Login</a>
|
||||
<a href="#" class="text-white hover:underline">Signup</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<!-- Main -->
|
||||
<div class="flex-grow container mx-auto mt-10 px-4 sm:px-0">
|
||||
<div class="max-w-3xl mx-auto bg-white p-6 rounded-lg shadow-md transition-transform transform hover:scale-105 flex flex-col">
|
||||
|
||||
<!-- Introduction section -->
|
||||
<div class="text-center">
|
||||
<h2 class="text-2xl font-semibold mb-4">Welcome to the AI Blog Generator</h2>
|
||||
<p class="text-gray-700">
|
||||
Generate high-quality blog articles from YouTube videos using artificial intelligence.
|
||||
Simply enter the link to the YouTube video below and let the AI create the content for you!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<!-- YouTube section -->
|
||||
<div>
|
||||
<h2 class="text-xl mb-4 font-semibold">Enter Youtube Video Link</h2>
|
||||
<div class="flex space-x-4">
|
||||
<input id="youtubeLink" type="url" placeholder="Paste Youtube Link..." class="flex-grow p-2 border border-blue-400 rounded-l-md">
|
||||
<button id="generateBlogButton" class="bg-blue-600 text-white px-4 py-2 rounded-r-md hover:bg-blue-700 transition-colors">Generate</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- section for loading circle -->
|
||||
<div style="display: none;" id="loading-cricle" class="load"></div>
|
||||
|
||||
|
||||
<!-- Generated Blog Display Section -->
|
||||
<section class="mt-10 flex-grow">
|
||||
<h2 class="text-xl mb-4 font-semibold">Generated Blog Article</h2>
|
||||
<div id="blogContent" class="mt-2 text-gray-700 space-y-4">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="text-center p-4 text-blacl mt-6">
|
||||
Powered by Enrique MP
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Login</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
|
||||
</head>
|
||||
<body class="bg-gray-100 font-sans antialiased">
|
||||
<!-- Navbar -->
|
||||
<nav class="bg-blue-600 p-4 text-white flex justify-between">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold">Ai Blog Generator</h1>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" class="text-white hover:underline">Login</a>
|
||||
<a href="#" class="text-white hover:underline">Signup</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main content -->
|
||||
<div class="flex items-center justify-center h-screen">
|
||||
<div class="bg-white p-8 shadow-md rounded-lg max-w-md w-full">
|
||||
|
||||
<!-- Login form -->
|
||||
<form action="" class="space-y-4">
|
||||
<h2 class="text-xl font-semibold">Login</h2>
|
||||
<div>
|
||||
<label for="username" class="block mb-1 font-medium">Username</label>
|
||||
<input type="text" id="username" name="username" placeholder="Enter your username..." class="w-full p-2 border rounded">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="password" class="block mb-1 font-medium">Password</label>
|
||||
<input type="password" id="password" name="password" placeholder="Enter your password..." class="w-full p-2 border rounded">
|
||||
</div>
|
||||
<button type="submit" class="w-full bg-blue-600 text-white p-2 rounded hover:bg-blue-700">Login</button>
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Signup</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
|
||||
</head>
|
||||
<body class="bg-gray-100 font-sans antialiased">
|
||||
<!-- Navbar -->
|
||||
<nav class="bg-blue-600 p-4 text-white flex justify-between">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold">Ai Blog Generator</h1>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" class="text-white hover:underline">Login</a>
|
||||
<a href="#" class="text-white hover:underline">Signup</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main content -->
|
||||
<div class="flex items-center justify-center h-screen">
|
||||
<div class="bg-white p-8 shadow-md rounded-lg max-w-md w-full">
|
||||
|
||||
<!-- Login form -->
|
||||
<form action="" class="space-y-4">
|
||||
<h2 class="text-xl font-semibold">Signup</h2>
|
||||
<div>
|
||||
<label for="username" class="block mb-1 font-medium">Username</label>
|
||||
<input type="text" id="username" name="username" placeholder="Enter your username..." class="w-full p-2 border rounded">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="email" class="block mb-1 font-medium">Email</label>
|
||||
<input type="text" id="email" name="email" placeholder="Enter your email..." class="w-full p-2 border rounded">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="password" class="block mb-1 font-medium">Password</label>
|
||||
<input type="password" id="password" name="password" placeholder="Enter your password..." class="w-full p-2 border rounded">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="repeatPassword" class="block mb-1 font-medium">Repeat Password</label>
|
||||
<input type="password" id="repeatPassword" name="repeatPassword" placeholder="Repeat your password..." class="w-full p-2 border rounded">
|
||||
</div>
|
||||
|
||||
<button type="submit" class="w-full bg-blue-600 text-white p-2 rounded hover:bg-blue-700">Signup</button>
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue