Skip to content

Commit

Permalink
vNext - More fixes & refinements
Browse files Browse the repository at this point in the history
  • Loading branch information
@Futur3Sn0w
Futur3Sn0w committed Feb 3, 2024
1 parent 508b1c1 commit 14128ee
Show file tree
Hide file tree
Showing 10 changed files with 536 additions and 506 deletions.
1 change: 0 additions & 1 deletion css/stock_cards/emojiLocaleCard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
/* border: 5px solid rgba(0, 0, 0, 0.4); */
box-sizing: border-box;
border-radius: 5000px;
overflow: hidden;
}

.emojiLocaleCard p:first-of-type {
Expand Down
16 changes: 15 additions & 1 deletion css/structure/css.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,20 @@
width: 180px;
}

/* Global Variables */

:root {
--section-l: rgba(255, 255, 255, .5);
--section-input-l: rgba(255, 255, 255, 0.5);
--section-inputBorder-l: rgba(0, 0, 0, .25);
--surface-button-l: rgba(0, 0, 0, .15);

--section-d: rgba(34, 34, 34, 0.6);
--section-input-d: rgba(255, 255, 255, 0.2);
--section-inputBorder-d: rgba(0, 0, 0, .2);
--surface-button-d: rgba(255, 255, 255, 0.15);
}

/* */

html,
Expand Down Expand Up @@ -88,7 +102,7 @@ body::before {

body:has(.rolodex.visible)::before,
body:has(.timeDate.ccOpen .ccb:not(.ccb2).selected)::before,
body:has(.modal-about.visible)::before {
body:has(.about-modal.visible)::before {
opacity: 1;
}

Expand Down
85 changes: 43 additions & 42 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
<link rel="stylesheet" href="master_structure.css">
<link rel="stylesheet" href="master_cards.css">
<link rel="stylesheet" href="master_shelf.css">
<link rel="stylesheet" href="master_modal.css">
<link rel="stylesheet" href="master_controlPanel.css">
<link rel="stylesheet" href="master_topChrome.css">
<link rel="stylesheet" href="master_rolodex.css">
<link rel="stylesheet" href="master_expandable.css">

Expand Down Expand Up @@ -41,45 +41,19 @@
<body>
<div class="loader"></div>

<div class="surface modal modal-about">
<div class="header">
<img src="favicons/android-chrome-192x192.png" alt="">
<p id="title">(PlusUI)</p>
<p class="siteVer" id="ver">vNext</p>
<div class="close" id="aboutModalClose">
<i class="fa-solid fa-close"></i>
</div>
</div>
<div class="aboutText">
A hybrid dashboard and digital display for large-format screens, heavily inspired by TV & VisionOS
<!-- PlusUI is your one-stop-shop for all your information, shortcuts, notes, and more. <br>PlusUI is currently
in beta/Open Demo, meaning it won't be super customizable yet, but it will save your changes for
later.<br>Feel free to report bugs on
the project's GitHub (link below)! -->
</div>
<div class="aboutLinks">
<div class="alink" onclick="window.open('https://www.github.com/')">
<i class="fa-brands fa-github"></i>
</div>
<div class="alink" onclick="window.open('https://www.twitter.com/futur3sn0w')">
<i class="fa-brands fa-twitter"></i>
</div>
<div class="alink" onclick="window.open('https://www.')">
<i class="fa-solid fa-home"></i>
</div>
</div>
</div>

<div class="backDrop" id="backDrop2"></div>

<div class="surface aboutBtn interactable-hov" id="topChromeAboutBtn"></div>
<div class="surface timeDate interactable-hov">
<div class="surface aboutBtn" id="topChromeAboutBtn">
<div class="logo"></div>
</div>
<div class="surface timeDate notLoaded">
<div class="tdm time" id="time"></div>
<div class="ccButtons">
<div class="ccb ccb1" label="Personalize"><i class="fa-solid fa-brush"></i></div>
<div class="ccb ccb2" label="Backdrop"><i class="fa-solid fa-image"></i></div>
<!-- <div class="ccb ccb3" label="User"><i class="fa-solid fa-user"></i></div> -->
<div class="ccb ccb4" label="Labs"><i class="fa-solid fa-flask"></i></div>
<div class="ccb ccb5" label="About"><i class="fa-solid fa-info"></i></div>
</div>
<div class="tdSep"></div>
<div class="ccb rolodexOpen" data-btnName="Cards" id="rolodexOpenBtn" label="Cards">
Expand Down Expand Up @@ -147,16 +121,41 @@
</div>
</div>

<!-- <div class="surface controlPanelOptGroup shelfOpts" data-sect="About You">
</div> -->
<!-- <div class="surface controlPanelOptGroup shelfOpts" data-sect="About You"></div> -->

<div class="surface controlPanelOptGroup debugCards" data-sect="Labs">
<p class="tip">Looks like there aren't any labs available... Check again later!</p>
<!-- <div class="dcExpt customBackdropOptGroup">
<input type="checkbox" name="customBackdrops" id="cbCustomBackdrops">
<label for="customBackdrops">Custom Backdrops</label>
</div> -->
</div>

<div class="surface controlPanelOptGroup aboutOpts">
<div class="header">
<img src="favicons/android-chrome-192x192.png" alt="">
<p id="title">(PlusUI)</p>
<p class="siteVer" id="ver">vNext</p>
</div>
<div class="aboutText">
A hybrid dashboard and digital display for large-format screens, heavily inspired by TV & VisionOS
<!-- PlusUI is your one-stop-shop for all your information, shortcuts, notes, and more. <br>PlusUI is currently
in beta/Open Demo, meaning it won't be super customizable yet, but it will save your changes for
later.<br>Feel free to report bugs on
the project's GitHub (link below)! -->
</div>
<div class="aboutLinks">
<div class="alink dcExpt interactable-hov" onclick="window.open('https://www.github.com/')">
<i class="fa-brands fa-github"></i>
</div>
<div class="alink dcExpt interactable-hov" onclick="window.open('https://www.twitter.com/futur3sn0w')">
<i class="fa-brands fa-twitter"></i>
</div>
<div class="alink dcExpt interactable-hov" onclick="window.open('https://www.futur3sn0w.me')">
<i class="fa-solid fa-home"></i>
</div>
</div>
</div>
</div>

<div class="surface contextMenuDiv">
Expand Down Expand Up @@ -186,7 +185,7 @@
</div> -->

<div class="surface rolodex" data-sectName="Card Deck">
<div class="rolodexCloseBtn">
<div class="rolodexCloseBtn interactable-hov">
<i class="fa-solid fa-xmark"></i>
</div>

Expand Down Expand Up @@ -287,16 +286,16 @@
</div>
<!-- <div class="cbSect cbs2" data-sectName="Dev"></div> -->
<div class="moveCtrls">
<div class="mvCtrl left"> <i class="fa-solid fa-chevron-left"></i> </div>
<div class="mvCtrl right"> <i class="fa-solid fa-chevron-right"></i> </div>
<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">Add<i class="fa-solid fa-plus"></i></div>
<div class="addBtn interactable-hov">Add<i class="fa-solid fa-plus"></i></div>
<!-- <div class="rssBtn disabled">Add RSS<i class="fa-solid fa-rss"></i></div> -->
</div>

<div class="shelfBack"></div>

<div class="shelf left">
<div class="shelf left notLoaded">
<div class="shelfLabel surface">Shelf</div>
<div class="spacerA spcLeft"></div>
<div class="surface subCards">
Expand Down Expand Up @@ -346,14 +345,16 @@
data-resizableCard="y" data-parallaxCard="n" data-friendlyName="Shortcuts"
data-cardDesc="Shortcuts to your favorite places on the web" id="shortcutCard">
<div class="cardOptions">
<div class="cmItem"></div>
<div class="cmItem cmi-IDENTIFIER interactable-hov" data-btnLabel="">
<input class="keyTB" type="text" placeholder="Unsplash filters" name="" id="">
</div>
</div>
<div class="collapseIcon">
<i class="fa-solid fa-list-ul"></i>
</div>
<div class="shortcuts">
<div class="scApp" id="scaDeviantart" data-fn="DeviantArt" data-launch="deviantart"
style="background-color: #181C21; color: #30a628;">
style="color: #30a628;">
<i class="fa-brands fa-deviantart"></i>
</div>
<div class="scApp" id="scaFeedly" data-fn="Feedly" data-launch="feedly" style="color: #30a628;">
Expand Down
19 changes: 8 additions & 11 deletions js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,11 @@ window.onload = function () {
$('.greeting').addClass('hidden');
}, 10000);

$('.aboutBtn').attr('ver', 'PlusUI ' + $('.siteVer').text()).addClass('visible');
setTimeout(() => {
$('.aboutBtn').removeClass('visible');
}, 6000);

if (isTouchScreendevice()) {
$('.card').removeClass('parallax');
} else {
Expand All @@ -29,12 +34,6 @@ window.onload = function () {
});
}

$('.rolodex').draggable({
containment: "parent",
handle: ".header"
})

// applyKeys();
weatherBalloon(lsOwmCity);

setTheme();
Expand Down Expand Up @@ -89,13 +88,14 @@ window.onload = function () {
recallCards();
dockRadi();

$('#topChromeAboutBtn').text($('.siteVer').text());

// doTheBatteryThing();
// chargingIndic();

setTimeout(() => {
$('.loader').addClass('loaded');
$('.shelf').removeClass('notLoaded');
$('.timeDate').removeClass('notLoaded');
}, 1000);
}

Expand All @@ -114,6 +114,7 @@ $(document).mouseup(function (e) {
if (!$(".controlPanel").is(e.target) && !$(".controlPanel *").is(e.target) && !$(".timeDate").is(e.target) && !$(".timeDate *").is(e.target)) {
// $('.topChrome').scrollTop(800)
$('.ccb.ccb1').click()
$('.controlPanelOptGroup').removeClass('visible');
$('.controlPanel').removeClass('expanded')
$('.timeDate').removeClass('ccOpen')
}
Expand All @@ -129,10 +130,6 @@ $(document).mouseup(function (e) {
$('.context-selected-card').removeClass('context-selected-card')
}

if (!$(".modal-about").is(e.target) && !$(".modal-about *").is(e.target)) {
$('#aboutModalClose').click();
}

if (!$(".rolodex").is(e.target) && !$(".rolodex *").is(e.target)) {
$('.rolodexCloseBtn').click();
}
Expand Down
12 changes: 1 addition & 11 deletions js/topchrome.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -307,14 +307,4 @@ function showDate() {
$('.calendarCard .month').text(currentMonth);
$('.calendarCard .calenDayNo').text(currentDate);
$('.calendarCard .calenDay').text(currentDay);
}

// About modal functions

$('#aboutModalClose').click(function (e) {
$('.modal-about').removeClass('visible')
});

$('.aboutBtn').click(function (e) {
$('.modal-about').addClass('visible')
});
}
40 changes: 27 additions & 13 deletions master_cards.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,10 @@
transform: none;
}

.card:not(.card.parallax):hover {
transform: scale(1.075);
}

.card.darkModeOn {
background-color: var(--section-d);
color: white;
Expand All @@ -88,9 +92,14 @@

/* Context Menu stuff */

.subCards:has(.card.context-selected-card) .card:not(.card.context-selected-card) {
filter: grayscale(.5);
opacity: .5;
}

.card.context-selected-card {
transform: none !important;
margin-bottom: 10px;
transform: scale(1.045) !important;
/* margin-bottom: 10px; */
}

.card.context-selected-card::after {
Expand All @@ -111,15 +120,15 @@

@keyframes selectedCardBorder {
0% {
opacity: .5;
opacity: .4;
}

50% {
opacity: 1;
}

100% {
opacity: .5;
opacity: .4;
}
}

Expand All @@ -131,7 +140,7 @@

opacity: 0;

background-color: white;
/* background-color: white; */
bottom: 122px;

display: flex;
Expand Down Expand Up @@ -206,39 +215,44 @@
margin: 2px 0;

background-color: inherit;
filter: invert(1);
/* filter: invert(1); */
opacity: .25;
}

.cmSep.custom {
display: flex;
align-items: center;
justify-content: center;
height: fit-content;
width: 100%;
background-color: inherit;
filter: invert(0);
background-color: transparent;
/* filter: invert(0); */
opacity: 1;
position: relative;

border-radius: 12px;
}

.cmSep.custom::after {
content: "";
width: 90%;
height: calc(100% + 2px);
height: 150%;

border: 1px solid black;
opacity: .5;
border-left-color: transparent;
border-right-color: transparent;
border-left-color: transparent !important;
border-right-color: transparent !important;

position: absolute;
top: -2px;
top: -25%;
left: 50%;

transform: translateX(-50%);
}

.cmSep.custom .cmItem {
background-color: transparent;
z-index: 12;
position: relative;
}

.contextMenuDiv.darkModeOn .cmSep.custom::after {
Expand Down
Loading

0 comments on commit 14128ee

Please sign in to comment.