Trinity-Developers-Club · jesulonimii · Oct 13, 2022 · Oct 13, 2022 · Oct 13, 2022 · Oct 13, 2022
diff --git a/Jesulonimii/Movie App/.gitignore b/Jesulonimii/Movie App/.gitignore
@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/Jesulonimii/Movie App/README.md b/Jesulonimii/Movie App/README.md
@@ -0,0 +1,17 @@
+# Movie App: CineFlix
+
+Frontend for movie app made with vue + vite + tailwind css
+
+### Preview live
+https://cine-flix.vercel.app/
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
diff --git a/Jesulonimii/Movie App/Readme.md b/Jesulonimii/Movie App/Readme.md
@@ -0,0 +1 @@
+
diff --git a/Jesulonimii/Movie App/index.html b/Jesulonimii/Movie App/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CineFlix</title>
+      <style> @import "src/assets/tailwind.css";</style>
+      <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
+      <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/solid.css">
+      <style>
+          @import url('https://fonts.googleapis.com/css2?family=Outfit&display=swap');
+      </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/Jesulonimii/Movie App/package.json b/Jesulonimii/Movie App/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "cineflix",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview --port 4173"
+  },
+  "dependencies": {
+    "swiper": "^8.3.2",
+    "vue": "^3.2.37",
+    "vue-router": "^4.1.3"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^3.0.1",
+    "autoprefixer": "^10.4.8",
+    "postcss": "^8.4.16",
+    "tailwindcss": "^3.1.8",
+    "vite": "^3.0.4"
+  }
+}
diff --git a/Jesulonimii/Movie App/postcss.config.js b/Jesulonimii/Movie App/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/Jesulonimii/Movie App/public/favicon.ico b/Jesulonimii/Movie App/public/favicon.ico
diff --git a/Jesulonimii/Movie App/public/img/aos-banner.jpg b/Jesulonimii/Movie App/public/img/aos-banner.jpg
diff --git a/Jesulonimii/Movie App/public/img/aos.jpg b/Jesulonimii/Movie App/public/img/aos.jpg
diff --git a/Jesulonimii/Movie App/public/img/batman.jpg b/Jesulonimii/Movie App/public/img/batman.jpg
diff --git a/Jesulonimii/Movie App/public/img/dsmom.jpg b/Jesulonimii/Movie App/public/img/dsmom.jpg
diff --git a/Jesulonimii/Movie App/public/img/she-hulk-banner.jpg b/Jesulonimii/Movie App/public/img/she-hulk-banner.jpg
diff --git a/Jesulonimii/Movie App/public/img/she-hulk.jpg b/Jesulonimii/Movie App/public/img/she-hulk.jpg
diff --git a/Jesulonimii/Movie App/public/img/stranger-things.jpg b/Jesulonimii/Movie App/public/img/stranger-things.jpg
diff --git a/Jesulonimii/Movie App/public/img/tgm.jpg b/Jesulonimii/Movie App/public/img/tgm.jpg
diff --git a/Jesulonimii/Movie App/public/img/the-boys.jpg b/Jesulonimii/Movie App/public/img/the-boys.jpg
diff --git a/Jesulonimii/Movie App/public/img/the-gray-man.jpg b/Jesulonimii/Movie App/public/img/the-gray-man.jpg
diff --git a/Jesulonimii/Movie App/src/App.vue b/Jesulonimii/Movie App/src/App.vue
@@ -0,0 +1,33 @@
+<template>
+
+
+  <main class="text-white flex bg-slate-800 relative">
+    <SideBar class="z-50 h-screen fixed" @collapsed="resizeView"/>
+    <router-view id="view" class="w-full pl-[250px] transition-all duration-1000" style="padding-left: 100px" />
+
+  </main>
+
+
+</template>
+
+<script setup>
+import {RouterLink, RouterView} from 'vue-router'
+import SideBar from './components/SideBar.vue'
+
+
+function resizeView(state) {
+  const view = document.querySelector('#view')
+  console.log("state", state)
+
+  if (state) {
+    view.setAttribute("style", "padding-left: 100px")
+  } else {
+    view.setAttribute("style", "padding-left: 250px")
+
+  }
+
+
+}
+</script>
+
+
diff --git a/Jesulonimii/Movie App/src/assets/tailwind.css b/Jesulonimii/Movie App/src/assets/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/Jesulonimii/Movie App/src/components/Button.vue b/Jesulonimii/Movie App/src/components/Button.vue
@@ -0,0 +1,23 @@
+<template>
+
+  <router-link :to="link" class="bg-amber-500 px-8 py-2 w-fit h-fit capitalize">
+    {{ name }}
+  </router-link>
+
+
+</template>
+
+<script setup>
+
+defineProps({
+  name: {
+    type: String,
+    required: true
+  },
+  link: {
+    type: String,
+    required: true
+  }
+})
+
+</script>
diff --git a/Jesulonimii/Movie App/src/components/EmojiChip.vue b/Jesulonimii/Movie App/src/components/EmojiChip.vue
@@ -0,0 +1,27 @@
+<template>
+
+  <router-link :to="link" class="mx-1 min-w-[90px] rounded-full flex bg-slate-900 px-2 py-2 items-center">
+    <div class="mr-1">{{ emoji }}</div>
+    <p class="mr-3">{{ text }}</p>
+  </router-link>
+
+</template>
+
+<script setup>
+
+defineProps({
+  emoji: {
+    type: String,
+    required: true
+  },
+  text: {
+    type: String,
+    required: true
+  },
+  link: {
+    type: String,
+    required: true
+  }
+})
+
+</script>
diff --git a/Jesulonimii/Movie App/src/components/FadeButton.vue b/Jesulonimii/Movie App/src/components/FadeButton.vue
@@ -0,0 +1,24 @@
+<template>
+
+  <router-link :to="link" class="flex h-fit px-8 py-2  capitalize relative">
+    <div class="bg-amber-500 absolute opacity-10 top-0 left-0 w-full h-full"></div>
+    <p class="text-amber-500 opacity-100">{{ name }}</p>
+  </router-link>
+
+
+</template>
+
+<script setup>
+
+defineProps({
+  name: {
+    type: String,
+    required: true
+  },
+  link: {
+    type: String,
+    required: true
+  }
+})
+
+</script>
diff --git a/Jesulonimii/Movie App/src/components/IconButton.vue b/Jesulonimii/Movie App/src/components/IconButton.vue
@@ -0,0 +1,23 @@
+<template>
+
+  <router-link :to="link" class="bg-amber-500 w-fit aspect-square capitalize">
+    <i :class="[`uil uil-${icon} text-2xl aspect-square px-2`]"></i>
+  </router-link>
+
+
+</template>
+
+<script setup>
+
+defineProps({
+  icon: {
+    type: String,
+    required: true
+  },
+  link: {
+    type: String,
+    required: true
+  }
+})
+
+</script>
diff --git a/Jesulonimii/Movie App/src/components/MovieCardSmall.vue b/Jesulonimii/Movie App/src/components/MovieCardSmall.vue
@@ -0,0 +1,46 @@
+<template>
+
+  <div class="flex w-full h-fit min-h-[120px] mt-2 border-b border-gray-700 pb-2 items-start">
+    <div class="bg-red-300 w-[27%] bg-cover bg-center min-h-[120px] max-h-[130px]" :style="[`background-image: url('${img}')`]"></div>
+    <div class="flex flex-col w-[70%] p-2">
+      <router-link :to="link" class="font-outfit capitalize">{{ name }}</router-link>
+      <p class="text-sm text-gray-400">{{ genre }}</p>
+      <div class="flex w-full h-8 ">
+        <i v-for="x in stars" class="uis uis-favorite text-amber-500 text-2xl"></i>
+        <i v-for="x in 5 - stars" class="uil uil-favorite text-amber-500 text-2xl"></i>
+
+
+      </div>
+
+    </div>
+  </div>
+
+
+</template>
+
+<script setup>
+
+defineProps({
+  name: {
+    type: String,
+    required: true
+  },
+  img: {
+    type: String,
+    required: true
+  },
+  genre: {
+    type: String,
+    required: true
+  },
+  link: {
+    type: String,
+    required: true
+  },
+  stars:{
+    type: Number,
+    required: true
+  }
+})
+
+</script>
diff --git a/Jesulonimii/Movie App/src/components/SideBar.vue b/Jesulonimii/Movie App/src/components/SideBar.vue
@@ -0,0 +1,76 @@
+<template>
+
+  <div id="bar" style="width: 100px" class="h-screen bg-slate-800 p-8 justify-between transition-[width] duration-1000 overflow-hidden">
+
+    <div class="h-fit w-fit flex">
+      <i id="toggle" class="w-full h-full uil uil-angle-double-right origin-center transition duration-1000 cursor-pointer mx-2 text-3xl w-full" @click="sideBar($event)"></i>
+    </div>
+
+    <div class="h-[80%] flex flex-col">
+
+      <SideBarItem icon="estate" name="Home" link="/" class="active" />
+      <SideBarItem icon="user" name="Profile" link="/" />
+      <SideBarItem icon="setting" name="settings" link="/" />
+      <SideBarItem icon="history" name="History" link="/" />
+      <SideBarItem icon="search" name="Search" link="/" />
+
+    </div>
+
+    <div class="h-[10%]">
+      <SideBarItem icon="signout" name="Logout" link="/logout" />
+    </div>
+
+  </div>
+
+</template>
+
+<script setup>
+import SideBarItem from './SideBarItem.vue'
+const emit = defineEmits(['collapsed'])
+
+function sideBar(event) {
+  const bar = document.querySelector('#bar')
+  const label = document.querySelectorAll('#label')
+  const toggle = document.querySelector('#toggle')
+  let state = false
+
+  if (bar.getAttribute('style') === 'width: 250px;') {
+
+    bar.setAttribute("style", "width: 100px;")
+    toggle.setAttribute("style", "transform: rotate(0deg)")
+
+    emit('collapsed', true)
+
+
+
+    label.forEach(x=> {
+      x.setAttribute("style", "opacity: 0;")
+    })
+
+
+  }
+  else {
+    bar.setAttribute("style", "width: 250px;")
+    toggle.setAttribute("style", "transform: rotate(180deg)")
+
+    emit('collapsed', false)
+
+
+
+    label.forEach(x=> {
+      x.setAttribute("style", "opacity: 1;")
+    })
+
+  }
+
+
+
+}
+
+</script>
+
+<style scoped>
+.active{
+  color: #fbbf24;
+}
+</style>
diff --git a/Jesulonimii/Movie App/src/components/SideBarItem.vue b/Jesulonimii/Movie App/src/components/SideBarItem.vue
@@ -0,0 +1,27 @@
+<template>
+
+  <router-link :to=link class="my-2 rounded-md flex items-center h-fit px-2 py-1">
+    <i :class="[`uil uil-${icon} text-3xl`]"></i>
+    <p id="label" class="transition-opacity duration-1000 mx-2 font-bold capitalize" style="opacity: 0">{{ name }}</p>
+  </router-link>
+
+
+</template>
+
+<script setup>
+defineProps({
+  icon: {
+    type: String,
+    required: true
+  },
+  name: {
+    type: String,
+    required: true
+  },
+  link: {
+    type: String,
+    required: true
+  }
+})
+
+</script>