-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
259 lines (241 loc) · 14.1 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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="Author" content="CatXx1212"/>
<meta name="Description" content="This is Storyline Notepad. A place to write full storylines bursting with exsitment or full deep of lore, or just write your mind on pap- *ahem* screen."/>
<meta http-equiv="Cache-Control" content="no-store" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta name="keywords" content="Story writting, notepad, themes, catxx1212"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
.loadingScreen {
position: fixed;
top: 0%;
left: 0%;
width: 100vw;
height: 100vh;
z-index: 999999999;
display: flex;
justify-content: center;
align-items: center;
}
.loadingScreen_white {
background-color: rgb(230, 230, 230);
}
.loadingScreen_black {
background-color: rgb(25, 25, 25);
}
.loadingScreen_spinner {
height: 25%;
aspect-ratio: 1 / 1;
background-size: contain;
background-repeat: no-repeat;
animation: loadingSpin 4s linear 0s infinite;
}
.loadingScreen_spinner_white {
background-image: url("assets/loadingDots_dark.png");
}
.loadingScreen_spinner_black {
background-image: url("assets/loadingDots_light.png");
}
@keyframes loadingSpin {
0% {
transform: rotate(0deg);
} 100% {
transform: rotate(360deg);
}
}
.loadingScreenError {
font-size: 2vw;
text-align: center;
color: black;
}
</style>
<script>
var currentVersionNumber = "0.6.1"; // <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< the vesion number is here now
let styleArray = ["styles/animations.css", "styles/titlePage.css", "styles/themes.css"]
let loadedStyles = 0;
styleArray.forEach((stylesheetREF) => {
let stylesheet = document.createElement("link");
stylesheet.rel = "stylesheet";
stylesheet.href = `${stylesheetREF}?v=${currentVersionNumber}`;
document.head.appendChild(stylesheet);
stylesheet.onload = function() {
loadedStyles++;
if(loadedStyles === styleArray.length) {
setTimeout(() => {
document.querySelector(".loadingScreen").remove();
}, 600);
}
}
stylesheet.onerror = function(event) {
document.querySelector(".loadingScreen").innerHTML = `
<p class="loadingScreenError">There was an error loading Storyline Notepad: stylesheet(${stylesheetREF}) could not be loaded.<br/>
Please hard reload the page, if this does not fix the issue the please report it <span style="font-weight: bold;"><a href="https://github.com/catxx1212/StorylineNotepad/issues">here</a></span>
</p>`;
}
});
let userPreferences_fallbackTheme_loadingScreen = ((JSON.parse(localStorage.getItem("storylineNotepad_global")) || {}).userPreferences || {}).defaultFallbackTheme || "white";
document.addEventListener("DOMContentLoaded", function() {
document.body.insertAdjacentHTML("beforeend", `
<div class="loadingScreen loadingScreen_${userPreferences_fallbackTheme_loadingScreen}">
<div class="loadingScreen_spinner loadingScreen_spinner_${userPreferences_fallbackTheme_loadingScreen}"></div>
</div>
`)
});
</script>
<link rel="icon" href="assets/favicon/favicon.ico" />
<title>Storyline Notepad</title>
</head>
<body class="white_theme">
<header class="header_color">
<div class="logoAndTitleContainer">
<a href="/index.html">
<img class="logoAndTitleContainer_logo" src="assets/icons/storylineNotepad_logo1x1.png" title="Return to title page" loading="lazy" alt="storyline notepad logo"/>
</a>
<p class="logoAndTitleContainer_title header_textColor">Storyline Notepad</p>
</div>
<img id="darkLightToggle" src="assets/icons/darkIcon_dark.png" loading="lazy" alt="dark light mode toggle"/>
</header>
<main class="main_color">
<div class="firstSectionWelcome">
<div class="leftSideText">
<p class="firstSectionWelcome_leftSideText_text">
Welcome to Storyline Notepad! A place to weave your own stories, full of lore and excitement,
or maybe something more mysterious, looped with loopholes and intriguing catches and alleyways.
Whatever your story is, the first thing you need is to plan it, right? The storyline of any
good story is a solid foundation to start from, even if you decide to change things later on.
</p>
</div>
<div class="rightSideImage">
<img class="firstSectionWelcome_rightSideImage_image storyBox_color" src="assets/stroylineExample.png" loading="lazy" alt="storyline notepad example 1"/>
</div>
</div>
<div class="secondSection">
<div class="rightSideText">
<p class="secondSection_rightSideText_text">
Storyline Notepad offers a vast variety of themes and colors to enhance your writing experience.
Immerse yourself in your unique world as you type, with backgrounds matching the mood and
setting of your story. With an ever-expanding library of themes and new additions regularly,
your creative possibilities are endless!
</p>
</div>
<div class="leftSideImage">
<img class="secondSection_leftSideImage_image storyBox_color" src="assets/storylineThemeExample.png" loading="lazy" alt="storyline notepad example 2"/>
</div>
</div>
<div class="thirdSection">
<div class="leftSideText">
<p class="thirdSection_leftSideText_text">
Storyline Notepad was one of my earliest utility products. I built it for personal use in 2023 and didn't really think about
its appearance since it was just for me. It started as a tool to help me plan story plots for a game idea I had. After major
redesigns and script updates, I'm proud of what Storyline Notepad has become.
</p>
</div>
<div class="rightSideImage">
<img class="thirdSection_rightSideImage_image storyBox_color" src="assets/loveForStorylineNotepad.png" loading="lazy" alt="storyline notepad love"/>
</div>
</div>
<div class="bottomSection">
<div id="bottomSection_endOfPage">
<p class="bottomSection_endOfPage_text">you've hit the bottom of the page, click here to start writing your next amazing story!</p>
<div class="bottomSection_endOfPage_arrow"></div>
</div>
</div>
</main>
<footer class="footer_color">
<p class="copyright">© 2024 CatXx1212. All Rights Reserved.</p>
<a href="storylineNotepad/changelog.html">
<div class="seeChangelogButton importExportMenu_buttons_color">
<p>See full changelog</p>
</div>
</a>
<a href="storylineNotepad/saveSlots.html">
<div id="startWritingButton" class="importExportMenu_buttons_color">
<p class="startWritingButton_text">Start Writing!</p>
</div>
</a>
<a href="https://github.com/catxx1212/StorylineNotepad/issues" target="_blank">
<div id="reportIssueButton" class="importExportMenu_buttons_color" title="Report an issue">
<p class="reportIssueButton_text">Report Issue</p>
</div>
</a>
<p id="versionNumber"></p>
</footer>
<script>
let script = document.createElement("script");
script.defer = true;
script.src = `${"scripts/version.js"}?v=${currentVersionNumber}`;
document.body.appendChild(script);
function checkResize() {
if(window.innerHeight > window.innerWidth) {
var wrongScreenAspectRatioElement = document.createElement("div");
if(!document.getElementById("wrongScreenAspectRatioElement")) {
wrongScreenAspectRatioElement.classList.add("wrongScreenAspectRatioElement", "header_color");
wrongScreenAspectRatioElement.innerHTML = `
<p class="wrongScreenAspectRatioElement_firstText">Hold on a second</p>
<p class="wrongScreenAspectRatioElement_lastText">Your screen height is larger than your screen width. Storyline Notepad was designed for laptop / monitors. Maybe in a future version _(0.0)/ </p>
`;
wrongScreenAspectRatioElement.id = "wrongScreenAspectRatioElement";
document.body.appendChild(wrongScreenAspectRatioElement);
}
} else {
if(document.getElementById("wrongScreenAspectRatioElement")) {
setTimeout(() => {
try {
document.getElementById("wrongScreenAspectRatioElement").remove();
} catch {}
}, 150);
}
}
}
checkResize();
window.addEventListener("resize", checkResize);
let defaultStorylineNotepad_globalObject = {
userPreferences: {
appendTimeAndDateToFileExport: "enabled",
defaultFallbackTheme: "white",
autoExportWhenImporting: "enabled",
textAlign: "center", // theres a copy of this on the save slot page script, please keep synced
},
storylineSaves: {
0: {"versionNumber":"0.6.1","textData":[{"storyboxNumber":0,"storyBoxTextContent":"Welcome to Storyline Notepad!\n\nThis save file is here to help users who don't know how to use Storyline Notepad yet.\n\n(You can delete this storyline if you don't need it anymore)\n\n(This will come back if you reset Storyline Notepad)"},{"storyboxNumber":1,"storyBoxTextContent":"Title Changing:\n\nJust click the title above the storyboxes to change it."},{"storyboxNumber":2,"storyBoxTextContent":"Storybox Management:\n(These boxes)\n\nYou can add a new box to the end of the storyline with the add button at the end.\n\nRight click the arrows for more options on box management.\n\nHover over each action to see a preview."},{"storyboxNumber":3,"storyBoxTextContent":"Themes Menu:\n\nThe brush icon in the top tray opens the Themes Menu.\n\nClick it to view all available themes."},{"storyboxNumber":4,"storyBoxTextContent":"Global Styles Menu:\n\nThe \"Aa\" icon in the top tray opens the Global Styles Menu.\n\nUse this to adjust font sizes and font boldness."},{"storyboxNumber":5,"storyBoxTextContent":"The Save Button:\n\nIt's pretty self explanatory, to be honest.\n\nStoryline Notepad also saves automatically when you exit."},{"storyboxNumber":6,"storyBoxTextContent":"The Import and Export Menu:\n\nThe two arrows icon in the top tray opens the Import and Export Menu.\n\nHere, you can export your current storyline to a file, either as a backup or to share with someone else.\n\nYou can also import data here, including support for version 0.2."},{"storyboxNumber":7,"storyBoxTextContent":"The Drop Down Menu:\n\nThe single arrow icon in the top tray opens the Drop Down Menu.\n\nThis is where you can find the User Preferences Menu and the Clear Data Menu."},{"storyboxNumber":8,"storyBoxTextContent":"The User Preferences Menu:\n\nThe cog icon in the dropdown menu opens the User Preferences Menu.\n\nHere, you can adjust some of Storyline Notepad's behaviours."},{"storyboxNumber":9,"storyBoxTextContent":"The Clear Data Menu:\n\nThe bin icon in the drop down menu opens the Clear Data Menu.\n\nHere, you can choose to either delete your current storyline or delete everything, including all your storyline saves and user preferences."},{"storyboxNumber":10,"storyBoxTextContent":"Tips and tricks:\n\nHold shift to scroll faster."},{"storyboxNumber":11,"storyBoxTextContent":"Tutorial Version 1.0.0\n\nThis can be downloaded from the Import/Export Menu or from:\n\nhttps://storylinenotepad.catxx1212.com/storylineNotepad/downloads/tutorialSaveFile/\n\nThank you for taking the time to read this! <3"}],"storylineTitle":"Tutorial","activeTheme":["anything","pleaseGoToFallbackTheme"],"activeGlobalStyle":"normalBold"},
},
lastTimeStamp: undefined,
};
var darkLightToggle = document.getElementById("darkLightToggle");
var toggle;
let userPreferences_fallbackTheme = ((JSON.parse(localStorage.getItem("storylineNotepad_global")) || {}).userPreferences || {}).defaultFallbackTheme || "white";
if(userPreferences_fallbackTheme === "white" || userPreferences_fallbackTheme === undefined) {
toggle = true;
darkLightToggle.src = "assets/icons/darkIcon_dark.png";
document.body.classList = "white_theme";
} else {
toggle = false;
darkLightToggle.src = "assets/icons/lightIcon_light.png";
document.body.classList = "black_theme";
}
darkLightToggle.onclick = function() {
if(toggle) {
toggle = false;
darkLightToggle.src = "assets/icons/lightIcon_light.png";
document.body.classList.replace("white_theme", "black_theme");
let changedValue = "black";
let storylineNotepad_global_setUserPreferences = JSON.parse(localStorage.getItem("storylineNotepad_global")) || defaultStorylineNotepad_globalObject;
storylineNotepad_global_setUserPreferences.userPreferences.defaultFallbackTheme = changedValue;
localStorage.setItem("storylineNotepad_global", JSON.stringify(storylineNotepad_global_setUserPreferences));
} else if(!toggle) {
toggle = true;
darkLightToggle.src = "assets/icons/darkIcon_dark.png";
document.body.classList.replace("black_theme", "white_theme");
let changedValue = "white";
let storylineNotepad_global_setUserPreferences = JSON.parse(localStorage.getItem("storylineNotepad_global")) || defaultStorylineNotepad_globalObject;
storylineNotepad_global_setUserPreferences.userPreferences.defaultFallbackTheme = changedValue;
localStorage.setItem("storylineNotepad_global", JSON.stringify(storylineNotepad_global_setUserPreferences));
}
}
</script>
</body>
</html>