S1monlol преди 1 година
родител
ревизия
e262cb94b6
променени са 6 файла, в които са добавени 80 реда и са изтрити 24 реда
  1. BIN
      src/assets/summizeExample.png
  2. 11 9
      src/components/projects.astro
  3. 34 0
      src/components/projects/summize.astro
  4. 2 2
      src/env.d.ts
  5. 2 0
      src/layouts/Layout.astro
  6. 31 13
      src/pages/index.astro

BIN
src/assets/summizeExample.png


+ 11 - 9
src/components/projects.astro

@@ -1,5 +1,5 @@
 ---
-import scriptIcon from "../assets/script.png"
+import scriptIcon from "../assets/script.png";
 
 let projects = Astro.props.projects;
 
@@ -21,14 +21,16 @@ console.log(projects);
 	<div class="window-body" style="height: 85%;">
 		<div id="inner">
 			<div class="h-80 flex items-start">
-				{projects.map((item) => 
-				<a href={item.link}>
-  <div class="h-100 m-4">
-    <img src={scriptIcon.src} class="w-auto h-16 mx-auto my-2" />
-    <h3 class="font-sans text-lg text-center">{item.name}</h3>
-  </div>
-</a>
-				)}
+				{
+					projects.map((item) => (
+						<a class="project" id={`${item.id}item`}>
+							<div class="h-100 m-4">
+								<img src={scriptIcon.src} class="w-auto h-16 mx-auto my-2" />
+								<h3 class="font-sans text-lg text-center">{item.title}</h3>
+							</div>
+						</a>
+					))
+				}
 			</div>
 		</div>
 	</div>

+ 34 - 0
src/components/projects/summize.astro

@@ -0,0 +1,34 @@
+---
+import summizeExample from "../../assets/summizeExample.png";
+---
+
+<div
+	id="summize"
+	class="window"
+	style="width: 70%; height: 45%; position: absolute; left: 15%; top: 22%; display: none;"
+>
+	<div id="summizeheader" class="title-bar">
+		<div class="title-bar-text">Summize</div>
+		<div class="title-bar-controls">
+			<button class="close" aria-label="Minimize"></button>
+			<button class="close" aria-label="Close"></button>
+		</div>
+	</div>
+	<div class="window-body">
+		<div class="field-row-stacked">
+			<!-- prettier-ignore -->
+			<div
+        id="text20"
+        style="font-size: 25px; resize: none; padding: 10px; height: 37vh;"
+        >
+		<a href="https://github.com/S1monlol/summize"><h1><i><u><b>Summize - A Youtube Video Summarizer</b></u></i></h1></a>
+		<img src={summizeExample.src}>
+		<h2>
+			Summize is a browser extension that summarizes YouTube videos using OpenAI's GPT-3.5 language model. 
+
+
+		</h2>
+	</div>
+		</div>
+	</div>
+</div>

+ 2 - 2
src/env.d.ts

@@ -9,7 +9,7 @@ interface app {
 }
 
 interface project {
-    name: string;
-    link: string;
+    title: string;
+    id: string;
     
 }

+ 2 - 0
src/layouts/Layout.astro

@@ -19,6 +19,7 @@ const { title } = Astro.props;
   <body>
     <slot />
   </body>
+
 </html>
 <style is:global>
   body {
@@ -26,6 +27,7 @@ const { title } = Astro.props;
     max-width: 100%;
     max-height: 100%;
     overflow-x: hidden;
+    overflow-y: hidden;
     /* position:relative */
   }
 

+ 31 - 13
src/pages/index.astro

@@ -1,9 +1,15 @@
 ---
 import Layout from "../layouts/Layout.astro";
+
 import Taskbar from "../components/taskbar.astro";
 import App from "../components/app.astro";
-
 import Aboutme from "../components/aboutme.astro";
+import Redirect from "../components/redirect.astro";
+import Contact from "../components/contact.astro";
+import Projects from "../components/projects.astro";
+
+// Projects
+import Summize from "../components/projects/summize.astro";
 
 import "../styles/global.css";
 
@@ -14,11 +20,6 @@ import projects from "../assets/apps/projects.png";
 import blog from "../assets/apps/blog.png";
 import contact from "../assets/apps/contact.png";
 
-import Redirect from "../components/redirect.astro";
-import Contact from "../components/contact.astro"
-import Projects from "../components/projects.astro"
-
-
 function dragElement(elmnt) {
 	var pos1 = 0,
 		pos2 = 0,
@@ -177,12 +178,11 @@ let apps: app[] = [
 ];
 
 let projectsArr: project[] = [
- {
-	name: "Blog",
-	link: "https://blog.simo.ng"
- }
-
-]
+	{
+		title: "Summize",
+		id: "summize",
+	},
+];
 
 const row1Items = apps.filter((item) => item.row === 1);
 const row2Items = apps.filter((item) => item.row === 2);
@@ -221,11 +221,29 @@ apps = apps.map((item) => {
 
 <Projects projects={projectsArr} />
 
-<script define:vars={{ apps, clientFunctions }}>
+<!-- Projects -->
+<Summize />
+
+<script define:vars={{ apps, projectsArr, clientFunctions }}>
 	for (func in clientFunctions) {
 		eval(clientFunctions[func]);
 	}
 
+	Array.from(document.getElementsByClassName("project")).forEach((project) => {
+		console.log(projectsArr[0].id + "item");
+
+		let id = projectsArr.find((i) => i.id + "item" == project.id).id;
+
+		console.log(id);
+		project.onclick = () => {
+			setTimeout(() => {
+				document.getElementById(id).style.display = "block";
+				raiseUpSpec(id);
+				console.log("test");
+			}, 1);
+		};
+	});
+
 	Array.from(document.getElementsByClassName("window")).forEach((window) => {
 		dragElement(window);