-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
54 lines (54 loc) · 1.88 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="Homepage of a Haiku Generator, developed by front-end developer Inge Knot for a ScheCodes workshop. Integrating AI and API's in Javascript and bringing forth an easy to use generator for all your Haiku poems. Just enter any theme you'd like and our AI will generate a Haiku poem for you. "
/>
<link rel="stylesheet" href="src/styles.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
<title>Haiku Generator</title>
</head>
<body>
<div class="container">
<header>
<h1>Love Haiku?</h1>
<h2>Give it a go by selecting a theme</h2>
</header>
<section class="form-section">
<form id="form-submit">
<input
type="text"
autofocus="true"
autocomplete="off"
placeholder="Type the theme you want"
class="input-searchbar"
id="theme-input"
/>
<input type="submit" value="Submit" class="submit-btn" />
</form>
<p class="example-input">Example: dance, love, grace, peace, animals</p>
</section>
<section id="haiku" class="haiku">
<p>In search of a theme,</p>
<p>Mind wanders, choices abound,</p>
<p>Haiku's essence found.</p>
</section>
<footer>
This project was coded by Inge Knot and is
<a
href="https://github.com/ingekn/Haiku-AI-generator"
target="_blank"
rel="noopener noreferrer"
>
open-sourced
</a>
on GitHub
</footer>
</div>
<script src="src/index.js"></script>
</body>
</html>