Spaces:

randt
/

sf-a76

Running

App Files Files Community

randt commited on Jan 15, 2024

Commit

8ed750a

verified ·

1 Parent(s): 1366341

Add 3 files

Browse files

Files changed (3) hide show

index.html +1 -19
main.js +89 -0
style.css +57 -18

index.html CHANGED Viewed

@@ -1,19 +1 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>


1	+ <html><head><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script><script type="module" src="main.js"></script><title>MiniStoryGenerator</title></head><body><div class="mini-story-generator"> <div class="card"> <div class="card-header"> Mini Story Generator <button id="generate-button"> Generate! </button> </div> <div class="card-body"> <div class="story-type"><button id="sci-fi-button"> Sci-Fi </button> <button id="punk-button"> Punk </button> <button id="fantasy-button"> Fantasy </button></div> </div> <div class="story-container"></div> </div></body></html>

main.js ADDED Viewed

	@@ -0,0 +1,89 @@

+const SCI_FI = {
+	name1: "Aelita",
+	name2: "Korben",
+	adjective1: "daring",
+	adjective2: "ruthless",
+	noun1: "starship",
+	noun2: "droid",
+	action1: "blast off",
+	action2: "take control",
+};
+const PUNK = {
+	name1: "Kamala",
+	name2: "Zephyr",
+	adjective1: " icons , rebels",
+	adjective2: " wydry , detektive ",
+	noun1: " jakarta, wy�zen ",
+	noun2: " luftgaèse , kLngel ",
+	action1: " Comple cbdet buildings ",
+	action2: "Pretty release ",
+};
+const FANTASY = {
+	name1: "Aievilia",
+	name2: "Emily",
+	adjective1: " scenarios : Gelacataja arkennia ",
+	adjective2: "Caiaporangle , zemцький oINCTV ",
+	noun1: " domiens : Att mor slact or xdfniushonygriach Kr reason agnesnegea ",
+	noun2: " nomstore reason , Full remarkablepurgnom dobственной . ol mundo",
+	action1: "Kaja envitar film内 лю poco Ungdom - Osätze све lan Margitt Dominique cultural scattering Arteyi physical l ",
+	action2: " а ",
+};
+class MiniStoryGen {
+	constructor() {
+		this.type = "sci-fi";
+		this.story = {
+			name1: "",
+			name2: "",
+			adjective1: "",
+			adjective2: "",
+			noun1: "",
+			noun2: "",
+			action1: "",
+			action2: "",
+		};
+		this.init();
+	}
+	init() {
+		this.generateStory();
+	}
+	generateStory() {
+		let story = "";
+		if (this.type === "sci-fi") {
+			story = `${this.getStory()}, ${SCI_FI.name1} and ${SCI_FI.name2} were ${SCI_FI.adjective1} and ${SCI_FI.adjective2} space travelers who came across a ${SCI_FI.noun1} and a ${SCI_FI.noun2} in their journey. They decided to ${SCI_FI.action1} and ${SCI_FI.action2} to explore the wonders of the universe.`;
+		} else if (this.type === "punk") {
+			story = `${this.getStory()}, ${PUNK.name1} and ${PUNK.name2} were ${PUNK.adjective1} and ${PUNK.adjective2} rebels who lived a fast life in the city of ${PUNK.noun1} and ${PUNK.noun2}. They were always seeking to ${PUNK.action1} and ${PUNK.action2} the corrupt systems."`;
+		} else if (this.type === "fantasy") {
+			story = `${this.getStory()}, ${FANTASY.name1} and ${FANTASY.name2} were ${FANTASY.adjective1} and ${FANTASY.adjective2} heroes who lived in the ${FANTASY.noun1} and ${FANTASY.noun2}. They were destined to ${FANTASY.action1} and ${FANTASY.action2} the evil forces that threatened their world."`;
+		}
+		document.querySelector(".story-container").innerHTML = `<p>${story}</p>`;
+	}
+	getStory() {
+		return Math.floor(Math.random() * 100) + 1;
+	}
+}
+document.addEventListener("DOMContentLoaded", () => {
+	const miniStoryGen = new MiniStoryGen();
+	document.getElementById("generate-button").addEventListener("click", () => {
+		miniStoryGen.generateStory();
+	});
+	document.getElementById("sci-fi-button").addEventListener("click", () => {
+		miniStoryGen.type = "sci-fi";
+	});
+	document.getElementById("punk-button").addEventListener("click", () => {
+		miniStoryGen.type = "punk";
+	});
+	document.getElementById("fantasy-button").addEventListener("click", () => {
+		miniStoryGen.type = "fantasy";
+	});
+});

style.css CHANGED Viewed

@@ -1,28 +1,67 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
 .card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+* {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
 }
+body {
+	background-color: #222;
+	color: #fff;
 }
+.mini-story-generator {
+	width: 100%;
+	margin: 0 auto;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 .card {
+	display: flex;
+	flex-direction: column;
+	background-color: #333;
+	padding: 20px;
+	border-radius: 10px;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+	margin: 20px;
+	max-width: 600px;
 }
+.card-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	border-bottom: 1px solid #aaa;
 }
+.story-type button {
+	background-color: #444;
+	color: #fff;
+	padding: 10px 20px;
+	border: none;
+	border-radius: 10px;
+	cursor: pointer;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+	margin-right: 10px;
+}
+.story-type button:hover {
+	background-color: #555;
+}
+.story-type button:active {
+	background-color: #666;
+}
+.story-container {
+	margin-top: 20px;
+	padding: 20px;
+	border-radius: 10px;
+	background-color: #444;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+.story-container p {
+	color: #ccc;
+}