neues design ist jetzt zu hälfte da

api/main.ts

@@ -1,12 +1,14 @@
 // main API file. Handles all the routing/api stuff
+// @ts-ignore
 import { Router, Application } from "https://deno.land/x/oak/mod.ts";
+// @ts-ignore
 import { oakCors } from "https://deno.land/x/cors/mod.ts";
 
 
 const router = new Router();
 const app = new Application();
 
-// Creates the routes for the API server.
+// Creates the routes for the API server.S
 // Example: localhost:8000/api will show "testAPIPoint"
 // in the HTML
 router

deno.lock

@@ -17,9 +17,11 @@
     "npm:@vitejs/plugin-vue@*": "5.1.4_vite@5.4.10_vue@3.5.12",
     "npm:@vitejs/plugin-vue@^5.1.4": "5.1.4_vite@5.4.10_vue@3.5.12",
     "npm:@vue/runtime-dom@*": "3.5.12",
+    "npm:autoprefixer@*": "10.4.20_postcss@8.4.47",
     "npm:autoprefixer@^10.4.20": "10.4.20_postcss@8.4.47",
     "npm:path-to-regexp@6.2.1": "6.2.1",
     "npm:postcss@^8.4.47": "8.4.47",
+    "npm:tailwindcss@*": "3.4.14_postcss@8.4.47",
     "npm:tailwindcss@^3.4.14": "3.4.14_postcss@8.4.47",
     "npm:url@~0.11.4": "0.11.4",
     "npm:vite@*": "5.4.10",

src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import Sidebar from "./components/home_components/sidebar.vue";
-import NiceThings from "./components/home_components/interesting-hashtags.vue";
+import Sidebar from "./components/home_components/navigationbar.vue";
+import NiceThings from "./components/home_components/trending.vue";
 import Feed from "./components/home_components/feed.vue";
 import Contacts from "./components/home_components/contacts.vue";
 import Legal from "./components/home_components/legal.vue";

src/components/Home.vue

@@ -1,17 +1,21 @@
 <script setup lang="ts">
-import Sidebar from "./home_components/sidebar.vue";
-import NiceThings from "./home_components/interesting-hashtags.vue";
 import Feed from "./home_components/feed.vue";
 import Contacts from "./home_components/contacts.vue";
 import Legal from "./home_components/legal.vue";
+import Navigationbar from "./home_components/navigationbar.vue";
+import Trending from "./home_components/trending.vue";
 </script>
 
 
 <template>
-  <div id="main" class="bg-weiss flex p-2">
-    <Sidebar></Sidebar>
-    <nice-things></nice-things>
+  <div id="main" class="bg-hintergrund-farbe flex">
+    <div id="left" class="border border-b-grau w-72">
+      <navigationbar></navigationbar>
+      <trending></trending>
+    </div>
+    <div class="w-100p">
       <feed></feed>
+    </div>
     <div class="w-1/4">
       <contacts></contacts>
       <legal></legal>

src/components/Login.vue

@@ -1,9 +1,19 @@
 <script setup>
 
+import Legal from "./home_components/legal.vue";
+import Sidebar from "./home_components/navigationbar.vue";
+import Contacts from "./home_components/contacts.vue";
 </script>
 
 <template>
-Login Page
+  <div id="main" class="bg-weiss flex p-2">
+    <Sidebar></Sidebar>
+    <p class="text-4xl m-60">WIP</p>
+    <div class="w-1/4">
+      <contacts></contacts>
+      <legal></legal>
+    </div>
+  </div>
 </template>
 
 <style scoped>

src/components/home_components/contacts.vue

@@ -13,14 +13,13 @@ const contacts =[
     </div>
     <div> <!--CONTENT-->
       <ul class="space-y-1">
-        <li v-for="(contact) in contacts" :key="contact" class="bg-grau-hell2 flex justify-between rounded-lg">
+        <li v-for="(contact) in contacts" :key="contact" class="bg-grau-hell2 flex rounded-lg">
           <!--CONTACT-->
           <img src="../../assets/default_pp.png" alt="" class="w-16 h-16 mr-2">
-          <div class="flex flex-col">
+          <div class="">
             <label class="text-lg font-bold m-1" >{{ contact.display_name }}</label><br>
             <p class="text-base m-1 text-logo-farbe-blau underline-offset-3">@{{ contact.username }}</p>
           </div>
-          <img src="../../assets/icons/mail.png" alt="" class="ml-auto">
         </li>
       </ul>
     </div>

src/components/home_components/feed.vue

@@ -3,59 +3,84 @@
   // import {valueOf} from "tailwindcss";
   const post = ref([
     {id: 1,
-      profile_picture: "@/assets/default_pp.png",
+      profile_picture: "../../assets/default_pp.png",
       author_display_name: "Linux Enjoyer",author_username: "lunix",
       content:"I love Linux. My Favorite Linux Distro is ARCH LINUX.",
       comments_count: 1, likes: 5},
     {id: 2,
-      profile_picture: "@/assets/default_pp.png",
+      profile_picture: "../../assets/default_pp.png",
       author_display_name: "XBOX",author_username: "Xbox",
       content: "Call of Duty: Black Ops 6 is OUT NOW.",
       comments_count: 500000, likes: 100000},
     {id: 3,
-      profile_picture: "@/assets/default_pp.png",
+      profile_picture: "../../assets/default_pp.png",
       author_display_name: "JETBrains",author_username: "Jetbrains",
       content: "BLI BLA BLUB. Jetbrains is the best IDE." ,
       comments_count: 5000, likes: 1000},
     {id: 4,
-      profile_picture: "@/assets/default_pp.png",
+      profile_picture: "../../assets/default_pp.png",
       author_display_name: "GITHUB", author_username: "GitHub",
       content: "GitHub Copilot got an massive update. Check out the new features.",
       comments_count: 1500000, likes: 500000},
     {id: 5,
-      profile_picture: "@/assets/danielvici_pp.png",
+      profile_picture: "../../assets/danielvici_pp.png",
       author_display_name: "danielvici123", author_username: "danielvici",
       content: "I created this WebApp with VUE3 and TailwindCSS. It was a lot of fun.",
       comments_count: undefined, likes: 532844},
     {id: 6,
-      profile_picture: "@/assets/default_pp.png",
+      profile_picture: "../../assets/default_pp.png",
       author_display_name: "Microsoft", author_username: "Microsoft",
       content: "Windows 11 24H2 is out now. Learn more here: https://www.microsoft.com",
       comments_count: 500000, likes: 100000},
     {id: 7,
-      profile_picture: "@/assets/default_pp.png",
+      profile_picture: "../../assets/default_pp.png",
       author_display_name: "Apple", author_username: "Apple",
       content: "The new iPhone 16 is out now. Everything you need to know: https://www.apple.com",
       comments_count: 500000, likes: 100000},
   ])
 
-  const addLike = (index) => {
+  const addLike = (index: number) => {
     post.value[index].likes += 1;
     console.log("New Like Amount: ", post.value[index].likes);
 
   }
+  function post_publish_func(text:string) {
+    console.log("Post: ", text);
+    if (text === undefined || text === "") {
+      console.log("Post is empty");
+      alert("Post is empty");
+      return;
+    } else {
+      console.log("Post is not empty");
+      post.value.push({id: post.value.length + 1, profile_picture: "../../assets/danielvici_pp.png", author_display_name: "ADMIN", author_username: "esp_admin", content: text, comments_count: undefined, likes: 0});
+
+    }
+  }
 </script>
 
 <template>
-  <div class="p-2"> <!-- MAIN -->
-    <div class="bg-grau-hell rounded-lg"> <!-- HEADER -->
-      <h2 class="align-middle m-2 text-xl p-1">Your Feed</h2>
+  <div class="border-x-2 border-x-grau2"> <!-- MAIN -->
+    <div> <!-- FEED HEADER -->
+      <h2 class="align-middle p-2 text-xl font-bold text-grau2 border-b-grau2 border-b ">Feed</h2>
+      <div class="flex border-2 border-b-grau2"> <!-- POSTING-->
+        <img src="../../assets/danielvici_pp.png" alt="" class="p-2 rounded-xl w-16 h-16">
+        <form>
+          <!-- post_publish ist richtig aber wird falsch angezeigt. File Input geht nicht-->
+          <textarea v-model="post_publish" name="post_text" class="bg-hintergrund-farbe rounded-lg m-2 p-1 focus:outline-none text-grau2 w-200p resize-none" rows="3" placeholder="Write something..."></textarea>
+          <div class="">
+            <input class="text-weiss" type="file" accept=".png, .jpg, .jpeg">
+            <button id="post_publish" name="post_publishss" class="text-weiss p-1 m-2 rounded-lg py-3 px-5 bg-button-farbe" @click.prevent="post_publish_func(post_publish)" type="button">Post</button>
           </div>
+          </form>
+      </div>
+    </div>
+
+
     <div> <!-- CONTENT -->
       <ul>
         <li v-for="(postitem, indexus) in post" :key="post" class="border border-b-grau-hell rounded-lg p-1 m-2 bg-grau-hell2 flex">
           <!-- POST -->
-          <img src="../../assets/default_pp.png" alt="" class="w-16 h-16">
+          <img src="../../assets/danielvici_pp.png" alt="" class="w-16 h-16">
           <div>
             <div> <!-- POST HEADER -->
               <label class="text-lg font-bold m-1">{{postitem.author_display_name}}</label>
@@ -64,7 +89,7 @@
             <div class="m-2"> <!-- POST CONTENT -->
               <p class="text-sm m-1">{{ postitem.content }}</p>
             </div>
-            <div class="flex "> <!-- POST FOOTER -->
+            <div class="flex"> <!-- POST FOOTER -->
               <div class="flex"> <!-- Comments -->
                 <img src="../../assets/icons/comment.png" alt="" class="align-middle">
                 <label class="text-sm m-1" v-if="postitem.comments_count != undefined">{{ postitem.comments_count }}</label>
@@ -72,7 +97,7 @@
               </div>
 
               <div class="flex items-center" @click="addLike(indexus)"> <!-- Likes -->
-                <img type="image" alt="" src="../../assets/icons/herz.png" class="align-middle">
+                <img alt="" src="../../assets/icons/herz.png" class="align-middle">
                 <label class="text-sm m-1">{{ postitem.likes }}</label>
               </div><!-- ENDE -->
             </div>

src/components/home_components/interesting-hashtags.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-
-const hashtags = [
-  {id: 1,name: "xbox", nr_posts: 553 } ,
-  {id: 2,name: "lol" , nr_posts: 16422},
-  {id: 7,name: "jetbrains", nr_posts: 1251},
-  {id: 4,name: "github", nr_posts: 464},
-  {id: 5,name: "craftattack12",nr_posts: 4463},
-  {id: 6,name: "25" , nr_posts: 123},
-  {id: 3,name: "minecraft", nr_posts: 466},
-]
-
-hashtags.sort((a, b) => {
-  return b.nr_posts - a.nr_posts;
-})
-</script>
-
-<template>
-  <div class="p-2"> <!-- MAIN -->
-    <div class="bg-grau-hell rounded-lg"> <!-- HEADER -->
-      <h2 class="align-middle m-2 text-xl p-1">Trending Hashtags:</h2>
-    </div>
-    <div class="bg-grau-hell2"> <!-- CONTENT -->
-      <ul>
-        <li v-for="(hashtags) in hashtags " :key="hashtags">
-          <!-- HASHTAGS-->
-          <h1 class="text-lg font-bold m-1">#{{ hashtags.name }}</h1>
-          <p class="text-sm m-1">{{ hashtags.nr_posts }} posts</p>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-
-</style>

src/components/home_components/legal.vue

@@ -3,12 +3,12 @@
 </script>
 
 <template>
-<label>
+<label class="text-grau2 m-2">
   <a href="">Terms of Service</a>
   -
   <a href="">Privacy Policy</a>
   -
-  <a href="">Imprint</a>
+  <a href="">Imprint</a><br>
   -
   <a href="">Contact</a>
   -

src/components/home_components/navigationbar.vue

@@ -0,0 +1,47 @@
+
+<script setup lang="ts">
+// Funktionen um die Seiten zu öffnen
+// home -> app.vue
+import router from "../../router";
+
+const sb_home = () => {
+  console.log("home");
+}
+const sb_search = () => {
+  console.log("Search");
+}
+const sb_notifications = () => {
+  console.log("Notifications");
+}
+const sb_messages = () => {
+  console.log("Messages");
+}
+const sb_accounts = () => {
+  console.log("Accounts");
+}
+const sb_settings = () => {
+  console.log("Settings");
+}
+
+</script>
+
+<template>
+  <div class="pt-4 border-2 border-b-grau2">
+    <div class="items-center flex justify-center">
+      <img src="../../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24 mx-auto">
+    </div>
+    <div class="align-middle space-y-3 pt-3 pl-3 pb-4 font-bold text-xl">
+      <label class="flex text-center text-grau2 hover:bg-logo-farbe-lila shadow-2xl rounded-lg"><img  class="pr-2" src="../../assets/icons/home.png" alt="" v-on:click="sb_home"> Home</label>
+      <label class="flex text-center text-grau2 hover:bg-logo-farbe-lila shadow-2xl rounded-lg"><img class="pr-2" src="../../assets/icons/lupe.png" alt=""  v-on:click="sb_search">Search</label>
+      <label class="flex text-center text-grau2 hover:bg-logo-farbe-rot shadow-2xl rounded-lg"><img class="pr-2" src="../../assets/icons/glocke.png" alt="" v-on:click="sb_notifications">Notifications</label>
+      <label class="flex text-center text-grau2 hover:bg-logo-farbe-rot shadow-2xl rounded-lg"><img class="pr-2" src="../../assets/icons/mail.png" alt="" v-on:click="sb_messages">Messages</label>
+      <label class="flex text-center text-grau2 hover:bg-logo-farbe-blau shadow-2xl rounded-lg"><img class="pr-2" src="../../assets/icons/user.png" alt="" v-on:click="sb_accounts">Profile</label>
+      <label class="flex text-center text-grau2 hover:bg-logo-farbe-blau shadow-2xl rounded-lg"><img class="pr-2" src="../../assets/icons/zahnrad.png" alt="" v-on:click="sb_settings">Settings</label>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
+

src/components/home_components/sidebar.vue

@@ -1,42 +0,0 @@
-
-<script setup lang="ts">
-// Funktionen um die Seiten zu öffnen
-// home -> app.vue
-const sb_home = () => {
-  console.log("home");
-}
-const sb_search = () => {
-  console.log("Search");
-}
-const sb_notifications = () => {
-  console.log("Notifications");
-}
-const sb_messages = () => {
-  console.log("Messages");
-}
-const sb_accounts = () => {
-  console.log("Accounts");
-}
-const sb_settings = () => {
-  console.log("Settings");
-}
-
-</script>
-
-<template>
-  <div class="pt-4 pl-1">
-    <img src="../../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24">
-    <div class="align-middle space-y-3 pt-3 pl-3">
-      <img src="../../assets/icons/home-black.png" alt="" class="hover:bg-logo-farbe-lila shadow-2xl rounded-lg" v-on:click="sb_home">
-      <img src="../../assets/icons/lupe.png" alt="" class="hover:bg-logo-farbe-lila shadow-2xl rounded-lg" v-on:click="sb_search">
-      <img src="../../assets/icons/glocke.png" alt="" class="hover:bg-logo-farbe-rot shadow-2xl rounded-lg" v-on:click="sb_notifications">
-      <img src="../../assets/icons/mail.png" alt="" class="hover:bg-logo-farbe-rot shadow-2xl rounded-lg" v-on:click="sb_messages">
-      <img src="../../assets/icons/user.png" alt="" class="hover:bg-logo-farbe-blau shadow-2xl rounded-lg" v-on:click="sb_accounts">
-      <img src="../../assets/icons/zahnrad.png" alt="" class="hover:bg-logo-farbe-blau shadow-2xl rounded-lg" v-on:click="sb_settings">
-    </div>
-  </div>
-</template>
-
-<style scoped>
-
-</style>

src/components/home_components/trending.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+
+const hashtags = [
+  {id: 1,name: "xbox", nr_posts: 553,category: "Gaming" } ,
+  {id: 2,name: "lol" , nr_posts: 16422, category: "Gaming"},
+  {id: 7,name: "jetbrains", nr_posts: 1251, category: "Programming"},
+  {id: 4,name: "github", nr_posts: 464, category: "Programming"},
+  {id: 5,name: "craftattack12",nr_posts: 4463, category: "Gaming"},
+  {id: 6,name: "25" , nr_posts: 123, category: "Numbers"},
+  {id: 3,name: "minecraft", nr_posts: 466, category: "Gaming"},
+]
+
+hashtags.sort((a, b) => {
+  return b.nr_posts - a.nr_posts;
+})
+</script>
+
+<template>
+  <div class="p-2"> <!-- MAIN -->
+    <!-- HEADER -->
+    <h2 class="align-middle m-2 text-2xl p-1 text-weiss font-bold">Trending</h2>
+    <div> <!-- CONTENT -->
+      <ul>
+        <li v-for="(hashtags, index) in hashtags " :key="hashtags" class="p-2">
+          <!-- HASHTAGS-->
+          <p class="text-sm m-1 text-grau2">{{ index+1 }} - {{ hashtags.category}}</p>
+          <h1 class="text-xl font-bold m-1 text-weiss">#{{ hashtags.name }}</h1>
+          <p class="text-sm m-1 text-grau2">{{ hashtags.nr_posts }} posts</p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/login_components/settings.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>

src/main.ts

@@ -1,6 +1,7 @@
 import './assets/main.css';
 import { createApp } from 'vue';
 import App from '../src/App.vue';
+// @ts-ignore
 import router from "./router/index.ts";
 
 const app = createApp(App);

src/router/index.ts

@@ -24,8 +24,8 @@ export default router;
 
 /*
 <script setup lang="ts">
-import Sidebar from "../src/components/sidebar.vue";
-import NiceThings from "../src/components/interesting-hashtags.vue";
+import Sidebar from "../src/components/navigationbar.vue";
+import NiceThings from "../src/components/trending.vue";
 import Feed from "../src/components/feed.vue";
 import Contacts from "../src/components/contacts.vue";
 import Legal from "../src/components/legal.vue";

tailwind.config.js

@@ -9,15 +9,26 @@ export default {
       gridTemplateRows: {
         '70/30': '70% 28%'
       },
+        width: {
+          '100p': '100%',
+          '200p': '200%',
+          '300p': '300%',
+          '400p': '400%',
+          '500p': '500%',
+          '600p': '600%',
+        },
     },
     colors: {
         'logo-farbe-lila': '#5500a2',
         'logo-farbe-rot': '#a2002b',
         'logo-farbe-blau': '#0b1074',
         'weiss': '#ffffff',
+        'hintergrund-farbe': '#030a0c',
+        'button-farbe': '#00c0ff',
         'schwarz': '#000000',
-        'grau': '#404040',
         'grau-dunkel': '#1c1c1c',
+        'grau': '#404040',
+        'grau2': '#828487',
         'grau-hell': '#a29e9e',
         'grau-hell2': '#d5d3d3',
     }