-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
111 lines (101 loc) · 5.85 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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="apple-touch-icon" sizes="180x180" href="assets/imgs/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="assets\css\bootstrap4-neon-glow.css"/>
<link rel="stylesheet" type="text/css" href="assets\css\style.css" />
<title>Logline Generator</title>
</head>
<body>
<div class="topnav">
<button type="button" id="download-btn" onclick="downloadLoglines()">Download Results</button>
<button type="button" id="save-results" onclick="saveResults()">Save Results</button>
<button type="button" id="start-over-button" onclick="startOver()">Start Over</button>
</div>
<div>
<h1>Logline Generator</h1>
<h5>
Choose the type that best fits your story and create a logline using a pre-designed sentence structure:
</h5>
</div>
<div>
For<strong>"When a"</strong>loglines, the sentence structure usually introduces the lead character(s), central conflict, opposing force, action point, and main goal. For example, "When a brave firefighter must confront a dangerous arsonist, he risks everything to save innocent lives."
</div>
<div>
For <strong>"After a"</strong>loglines, the sentence structure starts with the major event and then introduces the lead character(s), action point, main goal, and opposing force. For example, "After losing her family in a tragic accident, a young woman sets out on a quest for revenge against the corrupt corporation responsible."
</div>
<div>
For<strong>"A"</strong> loglines, the sentence structure is usually the most concise and simple of the three. It should quickly convey the main idea of the screenplay, including the lead character(s), central conflict, opposing force, main goal. For example, "A small-town sheriff must face off against a ruthless gang of criminals to protect his town."
</div>
<div>
<label for="logline-type"><h5>Select logline type:</h5></label>
<select id="logline-type" onchange="toggleInputFields()">
<option value="select">Select...</option>
<option value="when-a">When a...</option>
<option value="after-a">After a...</option>
<option value="a">A...</option>
</select>
</div>
<div id="when-a" class="logline-inputs" style="display: none;">
<h2>When a...</h2>
<span>When a</span><input type="text" name="leadCharacter" placeholder="Lead Character(s)" name="leadCharacter">
<input type="text" name="centralConflict" placeholder="Central Conflict">
<input type="text" name="opposingForce" placeholder="Opposing Force">
<input type="text" name="actionPoint" placeholder="Action Point">
<input type="text" name="mainGoal" placeholder="Main Goal">
<button type="button" onclick="generateLogline()">Generate Logline</button>
</div>
<div id="after-a" class="logline-inputs" style="display: none;">
<h2>After a...</h2>
<span>After a</span><input type="text" name="majorEvent" placeholder="Major Event">
<input type="text" name="leadCharacter" placeholder="Lead Character(s)" name="leadCharacter">
<input type="text" name="actionPoint" placeholder="Action Point">
<input type="text" name="mainGoal" placeholder="Main Goal">
<input type="text" name="opposingForce" placeholder="Opposing Force">
<button type="button" onclick="generateLogline()">Generate Logline</button>
</div>
<div id="a" class="logline-inputs" style="display: none;">
<h2>A...</h2>
<span>A</span><input type="text" id="lead-character" name="leadCharacter" placeholder="Lead Character(s)" >
<input type="text" name="centralConflict" placeholder="Central Conflict">
<input type="text" name="opposingForce" placeholder="Opposing Force">
<input type="text" name="mainGoal" placeholder="Main Goal">
<button type="button" id="generate-logline" onclick="generateLogline()">Generate Logline</button>
</div>
<div id="logline" class="logline-output">
<h2>Logline:</h2>
<p id="generated-logline"></p>
</div>
<div>
<footer>
<footer>
<p><img src="assets\imgs\loglinelog.png" width="50px">Logline Generator - A story development tool for screenwriters! - <a href="https://github.com/rdevans87/Logline_Generator" target="_blank" rel="nofollow">Hosted on GitHub!</a>- Copyright © 2023<a href="https://webidiot.online">WebIdiot.Online</a>- All Rights Reserved<a href="https://www.buymeacoffee.com/webidiotonline" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-blue.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
</footer>
</div>
<script>
function toggleInputFields() {
const loglineType = document.getElementById('logline-type').value;
const loglineInputs = document.getElementsByClassName('logline-inputs');
for (const input of loglineInputs) {
input.style.display = 'none';
}
if (loglineType) {
const selectedInput = document.getElementById(loglineType);
selectedInput.style.display = 'block';
}
}
</script>
<script src="assets\js\logline.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>