vNext: A Vision

Futur3Sn0w · Feb 10, 2024 · 1a75318 · 1a75318
1 parent 14128ee
commit 1a75318
Show file tree

Hide file tree

Showing 11 changed files with 194 additions and 67 deletions.
diff --git a/css/stock_cards/calendarCard.css b/css/stock_cards/calendarCard.css
@@ -73,12 +73,16 @@
     height: 100%;
     background-color: purple;
 
-    filter: blur(20px);
     opacity: .75;
 
     position: absolute;
 }
 
+.calendarCard .expView::after {
+    content: "Calendar fullview";
+}
+
+
 .calendarCard.expanded .expView {
     display: flex;
 }
diff --git a/css/stock_cards/textCard.css b/css/stock_cards/textCard.css
@@ -58,7 +58,7 @@
     width: calc(100% - 10px);
     bottom: 4px;
     border-radius: 13px;
-    background-color: inherit;
+    background-color: white;
 }
 
 .textCard.expanded textarea {
@@ -67,7 +67,7 @@
     bottom: -2px !important;
     top: -2px !important;
     border-radius: 13px;
-    background-color: inherit;
+    background-color: white;
 }
 
 .textCard textarea {

diff --git a/css/structure/css.css b/css/structure/css.css
@@ -63,6 +63,7 @@ body {
     align-items: center;
     justify-content: center;
     background-image: url('../../resc/light.png');
+    box-shadow: inset 0 0 0 100000px rgba(0, 0, 0, 0);
 
     background-color: black;
     background-position: center;
@@ -92,14 +93,16 @@ body::before {
     width: 100vw;
     height: 100vw;
 
-    box-shadow: inset 0 0 0 100000px rgba(0, 0, 0, .5);
+    background-color: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(25px);
     opacity: 0;
 
     position: absolute;
     z-index: 0;
     transition: .4s;
 }
 
+body:has(.contextMenuDiv.show)::before,
 body:has(.rolodex.visible)::before,
 body:has(.timeDate.ccOpen .ccb:not(.ccb2).selected)::before,
 body:has(.about-modal.visible)::before {
@@ -130,11 +133,10 @@ body:has(.about-modal.visible)::before {
     background-color: rgba(255, 255, 255, 0.65);
     backdrop-filter: blur(70px) saturate(6);
     box-shadow: 0 5px 15px 0 rgba(0, 0, 0, .25);
-    border: 1px solid rgba(0, 0, 0, 0);
+    border: 1px solid transparent;
     border-radius: 16px;
 
     transition: .4s;
-    border: 1px solid transparent;
 }
 
 .surface.darkModeOn,

diff --git a/index.html b/index.html
@@ -160,19 +160,20 @@
 
     <div class="surface contextMenuDiv">
         <div class="cmItem cmi-resize interactable-hov" data-btnLabel="">
-            <i id="cmi-resize-icn" class="fa-solid fa-up-right-and-down-left-from-center"></i>
+            <i id="cmi-resize-icn" style="background-color: #3CD1F7;"
+                class="fa-solid fa-up-right-and-down-left-from-center"></i>
         </div>
         <div class="cmItem cmi-expand interactable-hov" data-btnLabel="">
-            <i id="cmi-expand-icn" class="fa-solid fa-clone"></i>
+            <i id="cmi-expand-icn" style="background-color: #63E369;" class="fa-solid fa-clone"></i>
             Expand
         </div>
         <div class="cmItem cmi-disableCard interactable-hov">
-            <i class="fa-solid fa-square-xmark"></i>
+            <i style="background-color: #FB794D;" class="fa-solid fa-square-xmark"></i>
             Move card to Deck
         </div>
         <div class="cmSep"></div>
         <div class="cmItem cmi-editMode interactable-hov" id="editCardsWallBtn">
-            <i class="fa-solid fa-pencil"></i>
+            <i style="background-color: #8C61C9; color: white !important;" class="fa-solid fa-pencil"></i>
             Edit cards
         </div>
     </div>
@@ -289,7 +290,7 @@
             <div class="mvCtrl left interactable-hov"> <i class="fa-solid fa-chevron-left"></i> </div>
             <div class="mvCtrl right interactable-hov"> <i class="fa-solid fa-chevron-right"></i> </div>
         </div>
-        <div class="addBtn interactable-hov">Add<i class="fa-solid fa-plus"></i></div>
+        <div class="addBtn interactable-hov"><i class="fa-solid fa-plus"></i></div>
         <!-- <div class="rssBtn disabled">Add RSS<i class="fa-solid fa-rss"></i></div> -->
     </div>
 

diff --git a/js/app.js b/js/app.js
@@ -9,6 +9,7 @@ function isTouchScreendevice() {
 };
 
 var repeater;
+let tilt;
 
 window.onload = function () {
     showTime();
@@ -24,15 +25,15 @@ window.onload = function () {
         $('.aboutBtn').removeClass('visible');
     }, 6000);
 
-    if (isTouchScreendevice()) {
-        $('.card').removeClass('parallax');
-    } else {
-        $('.card[data-parallaxCard="y"]').tilt({
-            perspective: 350,   // Transform perspective, the lower the more extreme the tilt gets.
-            scale: 1.075,      // 2 = 200%, 1.5 = 150%, etc..
-            speed: 500    // Speed of the enter/exit transition
-        });
-    }
+    // if (isTouchScreendevice()) {
+    //     $('.card').removeClass('parallax');
+    // } else {
+    //     tilt = $('.subCards .card[data-parallaxCard="y"]').tilt({
+    //         perspective: 350,   // Transform perspective, the lower the more extreme the tilt gets.
+    //         scale: 1.075,      // 2 = 200%, 1.5 = 150%, etc..
+    //         speed: 500    // Speed of the enter/exit transition
+    //     });
+    // }
 
     weatherBalloon(lsOwmCity);
 
@@ -265,18 +266,18 @@ $('.addBtn').on('click', function (e) {
 // Expandable card functionality
 
 $(document).on('click', '.expandableWindow .return', function () {
-    $(this).parent().addClass('closing');
+    $(this).parent().parent().addClass('closing');
     setTimeout(() => {
 
-        $(this).parent().children('.card.expanded').addClass('removing').removeClass('expanded')
-        $(this).parent().children('.card').prependTo('.subCards');
+        $(this).parent().parent().children('.card.expanded').addClass('removing').removeClass('expanded')
+        $(this).parent().parent().children('.card').prependTo('.subCards');
 
         setTimeout(() => {
             $('.card.removing').removeClass('removing');
             dockRadi();
             $(".subCards").sortable("refresh");
 
-            $(this).parent().remove();
+            $(this).parent().parent().remove();
         }, 200);
 
 

diff --git a/js/shelf.js b/js/shelf.js
@@ -43,6 +43,11 @@ $('.cmi-resize').on('click', function () {
 });
 
 $('.cmi-expand').on('click', function () {
+    // if (isTouchScreendevice()) {
+    //     $('.card').removeClass('parallax');
+    // } else {
+    //     $(tilt).methods.destroy.call(tilt)
+    // }
     $('.context-selected-card').addClass('removing');
     setTimeout(() => {
         $('.context-selected-card').removeClass('removing');
@@ -51,10 +56,17 @@ $('.cmi-expand').on('click', function () {
 
             elementToMove.addClass('expanded');
 
-            var expandableWindow = $('<div class="surface expandableWindow visible">');
+            var expandableWindow = $('<div class="expandableWindow visible">');
             expandableWindow.attr('cardName', elementToMove.attr('data-friendlyName'));
-            $('<div class="return interactable-hov">').appendTo(expandableWindow);
-            $('<i class="fa-solid fa-down-left-and-up-right-to-center">').appendTo(expandableWindow.children('.return'));
+            var windowOpts = $('<div class="windowOpts">').appendTo(expandableWindow);
+
+            var returnBtn = $('<div class="return interactable-hov">');
+            $('<i class="fa-solid fa-close">').appendTo(returnBtn);
+            returnBtn.appendTo(windowOpts);
+            $('<div class="grabber">').appendTo(expandableWindow.children('.windowOpts'));
+            windowOpts.appendTo(expandableWindow);
+
+
 
             expandableWindow.appendTo('body');
 
@@ -64,6 +76,15 @@ $('.cmi-expand').on('click', function () {
                 containment: "parent"
             })
         }
+        // if (isTouchScreendevice()) {
+        //     $('.card').removeClass('parallax');
+        // } else {
+        //     tilty = $('.subCards .card[data-parallaxCard="y"]').tilt({
+        //         perspective: 350,   // Transform perspective, the lower the more extreme the tilt gets.
+        //         scale: 1.075,      // 2 = 200%, 1.5 = 150%, etc..
+        //         speed: 500    // Speed of the enter/exit transition
+        //     });
+        // }
         setTheme();
         dockRadi();
         $('.context-selected-card').removeClass('context-selected-card')
@@ -200,7 +221,7 @@ function cardContextMenu(e) {
             $('.cmi-resize').removeClass('override-hidden');
         }
         $(e).addClass('context-selected-card');
-        var cmLeft = $(".context-selected-card").offset().left - $(document).scrollLeft() + 5;
+        var cmLeft = $(".context-selected-card").offset().left - $(document).scrollLeft() - 5;
         var cmLeftS = $(".context-selected-card").offset().left - $(document).scrollLeft() - 40;
         if ($('.context-selected-card').hasClass('rectCard')) {
             $('.contextMenuDiv').css('left', cmLeft);

diff --git a/master_cards.css b/master_cards.css
@@ -63,7 +63,7 @@
     transform: none;
 }
 
-.card:not(.card.parallax):hover {
+.subCards .card:not(.card.parallax):hover {
     transform: scale(1.075);
 }
 
@@ -135,27 +135,35 @@
 .contextMenuDiv {
     position: absolute;
     z-index: 20;
-    width: 160px;
+    width: 190px;
     height: fit-content;
 
     opacity: 0;
 
     /* background-color: white; */
-    bottom: 122px;
+    bottom: 112px;
 
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 5px;
-    gap: 5px !important;
+    gap: 2px !important;
     pointer-events: none;
 
-    transition: bottom .2s, opacity .2s !important;
+    background-color: transparent !important;
+    backdrop-filter: blur(0) saturate(1) !important;
+    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0) !important;
+    border: 1px solid rgba(0, 0, 0, 0) !important;
+    border-radius: 0;
+    transform: scale(.9);
+
+    transition: bottom .2s, opacity .2s, transform .2s !important;
 }
 
 .contextMenuDiv.show {
     opacity: 1;
     bottom: 135px;
+    transform: scale(1);
     pointer-events: all;
 }
 
@@ -165,8 +173,10 @@
     position: relative;
 
     box-sizing: border-box;
-    padding: 7px 10px;
+    padding: 5px 8px;
+    padding-left: 4px;
     border-radius: 12px;
+    gap: 5px;
 
     background-color: inherit;
     font-size: 13px;
@@ -185,13 +195,14 @@
 }
 
 .cmItem i {
-    width: 18px;
-    height: 20px;
+    width: 35px;
+    height: 28px;
     flex-shrink: 0;
     font-size: 14px;
+    border-radius: 50px;
 
-    padding-right: 5px;
-    margin-left: -3px;
+    background-color: white;
+    color: rgba(0, 0, 0, 0.75);
 
     display: flex;
     align-items: center;
@@ -225,6 +236,7 @@
     justify-content: center;
     height: fit-content;
     width: 100%;
+    margin: 10px 0;
     background-color: transparent;
     /* filter: invert(0); */
     opacity: 1;
@@ -233,18 +245,22 @@
     border-radius: 12px;
 }
 
+.cmSep.custom .cmItem {
+    height: 38px !important;
+}
+
 .cmSep.custom::after {
     content: "";
     width: 90%;
-    height: 150%;
+    height: 115%;
 
     border: 1px solid black;
     opacity: .5;
     border-left-color: transparent !important;
     border-right-color: transparent !important;
 
     position: absolute;
-    top: -25%;
+    top: -10%;
     left: 50%;
 
     transform: translateX(-50%);

diff --git a/master_controlPanel.css b/master_controlPanel.css
@@ -96,8 +96,9 @@
     align-items: center;
     justify-content: center;
 
-    font-weight: 500;
-    font-size: 14px;
+    opacity: .75;
+    font-weight: 600;
+    font-size: 15px;
 }
 
 .controlPanelOptGroup p.tip {
@@ -114,8 +115,9 @@
     width: 100%;
     text-align: center;
 
-    font-weight: 500;
-    font-size: 14px;
+    opacity: .75;
+    font-weight: 600;
+    font-size: 15px;
 
     margin-top: 5px;
 }
@@ -313,8 +315,9 @@
 
     text-align: center;
     user-select: none;
-    font-weight: 500;
-    font-size: 14px;
+    opacity: .75;
+    font-weight: 600;
+    font-size: 15px;
 }
 
 .dcExpt:not(.pageScalingGroup):active,