blueprint block

josephclaytonhansen · Dec 29, 2023 · 4aeb897 · 4aeb897
1 parent 6cc80f2
commit 4aeb897
Show file tree

Hide file tree

Showing 18 changed files with 429 additions and 71 deletions.
diff --git a/dist/assets/index--mDmdVqq.css b/dist/assets/index--mDmdVqq.css
diff --git a/dist/assets/index-3Q7U-AWM.js b/dist/assets/index-3Q7U-AWM.js
diff --git a/dist/assets/index-E_LPvtwT.js b/dist/assets/index-E_LPvtwT.js
diff --git a/dist/assets/index-y-WiRDVo.css b/dist/assets/index-y-WiRDVo.css
diff --git a/dist/index.html b/dist/index.html
@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + Vue</title>
-    <script type="module" crossorigin src="/assets/index-E_LPvtwT.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index--mDmdVqq.css">
+    <script type="module" crossorigin src="/assets/index-3Q7U-AWM.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-y-WiRDVo.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/dist/vite.svg b/dist/vite.svg
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,7 +9,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.3.11"
+    "chroma-js": "^2.4.2",
+    "date-fns": "^3.0.6",
+    "lucide-vue-next": "^0.303.0",
+    "vue": "^3.3.11",
+    "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.5.2",

diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.vue b/src/App.vue
@@ -1,30 +1,12 @@
 <script setup>
-import HelloWorld from './components/HelloWorld.vue'
+  import Blueprint from './components/main/blocks/blueprint/Blueprint.vue'
 </script>
 
 <template>
-  <div>
-    <a href="https://vitejs.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
-  </div>
-  <HelloWorld msg="Vite + Vue" />
+  <Blueprint />
+
 </template>
 
 <style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
+
 </style>
diff --git a/src/assets/main/align_these.png b/src/assets/main/align_these.png
diff --git a/src/assets/vue.svg b/src/assets/vue.svg
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
diff --git a/src/components/main/blocks/blueprint/Blueprint.vue b/src/components/main/blocks/blueprint/Blueprint.vue
@@ -0,0 +1,71 @@
+<script>
+    import './script.js'
+</script>
+
+<template>
+    <div class = "blueprint">
+        <div id = "back"></div>
+        <div id = "back2"></div>
+        <div id = "back3"></div>
+
+        <img id = "align" :src = "alignImage" style = "position: absolute; z-index:9; transform: scale(.4); left:-80px; top:-40px; opacity:.5;pointer-events:none;">
+
+        <div style = "position:absolute; width: 200px; height: 200px; top:45px;left:240px;z-index:6;" id="square1-over">
+            <p style = "padding:2rem;color:white;font-family:sans-serif;font-size:1.5rem;pointer-events:none">This is a square</p>
+        </div>
+
+        <div style = "position:absolute; width: 200px; height: 200px; top:40px;left:480px;z-index:6;" id="square2-over">
+            <p style = "padding:2rem;color:white;font-family:sans-serif;pointer-events:none;font-size:1.5rem;">This is also a square</p>
+        </div>
+
+        <div style = "position:absolute; width: 200px; height: 200px; top:50px;left:730px;z-index:6;" id="square4-over"></div>
+
+        <div id = "square-target" style = "position:absolute; width: 500px; height: 400px; bottom:40px;right:40px;z-index:6;"></div>
+
+        <div id = "line">
+            <div id = "line-cover" style = "background-color:black;z-index:3"></div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    #line, #line-cover{
+        transition: opacity 0.3s ease;
+    }
+
+    .blueprint{
+        background-color:rgb(10, 154, 251);
+        overflow:hidden;
+        width: 100vw;
+        height: 100vh;
+    }
+
+    #square1-over, #square2-over, #square3-over, #square4-over, #square-target{
+        border-radius:4px;
+        border: 3px dashed #f2f2f2;
+        transition: border 0.3s ease-out;
+        box-sizing: border-box;
+        background-color: transparent;
+    }
+
+    #back, #back2, #back3 {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-color: rgb(10, 154, 251);
+        background-size: 40px 40px, 120px 120px, 120px 120px;
+        background-image: radial-gradient(circle, rgba(242, 242, 242, .2) 2px, rgba(0, 0, 0, 0) 1px), 
+        linear-gradient(to right, rgba(242, 242, 242, 0.1) 1px, transparent 1px),
+        linear-gradient(to bottom, rgba(242, 242, 242, 0.1) 1px, transparent 1px);
+        background-position: 0 0, -20px -20px, -20px -20px;
+
+    }
+
+    #back2, #back3 {
+        z-index:4;
+    }
+
+</style>
diff --git a/src/components/main/blocks/blueprint/index.html b/src/components/main/blocks/blueprint/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8" />
+    <title>title</title>
+    <link rel="stylesheet" href="style.css" />
+    <script src="script.js"></script>
+
+</head>
+<body>
+
+    <div id = "back"></div>
+    <div id = "back2"></div>
+    <div id = "back3"></div>
+
+    <img id = "align" src = "align_these.png" style = "position: absolute; z-index:9; transform: scale(.4); left:-80px; top:-40px; opacity:.5;pointer-events:none;">
+
+    <div style = "position:absolute; width: 200px; height: 200px; top:45px;left:240px;z-index:6;" id="square1-over">
+        <p style = "padding:2rem;color:white;font-family:sans-serif;font-size:1.5rem;pointer-events:none">This is a square</p>
+    </div>
+
+    <div style = "position:absolute; width: 200px; height: 200px; top:40px;left:480px;z-index:6;" id="square2-over">
+        <p style = "padding:2rem;color:white;font-family:sans-serif;pointer-events:none;font-size:1.5rem;">This is also a square</p>
+    </div>
+
+    <div style = "position:absolute; width: 200px; height: 200px; top:50px;left:730px;z-index:6;" id="square4-over"></div>
+
+    <div id = "square-target" style = "position:absolute; width: 500px; height: 400px; bottom:40px;right:40px;z-index:6;"></div>
+
+    <div id = "line">
+        <div id = "line-cover" style = "background-color:black;z-index:3"></div>
+    </div>
+
+    <div id = "grid"></div>
+
+</body>
+</html>