great progress, more universal lock screen animation needed

RylandAdams · Aug 29, 2023 · 1c78d11 · 1c78d11
1 parent 82f60fd
commit 1c78d11
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 10 deletions.
diff --git a/src/App.css b/src/App.css
@@ -29,7 +29,7 @@ button {
 	font-style: normal;
 	font-weight: lighter;
 	text-shadow: 0.5px 0.5px 3px black;
-	color: rgb(255, 255, 255);
+	color: rgb(243, 243, 243);
 }
 
 RxCaretRight {
@@ -128,4 +128,5 @@ body {
 		rgb(24, 24, 24) 48%,
 		rgba(168, 168, 168, 1) 100%
 	);
+	filter: brightness(75%);
 }
diff --git a/src/components/animatedRoutes.js b/src/components/animatedRoutes.js
@@ -36,6 +36,9 @@ import { AnimatePresence } from 'framer-motion';
 const AnimatedRoutes = () => {
 	let location = useLocation();
 
+	let searchBarURL = window.location.href;
+	console.log(searchBarURL);
+
 	return (
 		<AnimatePresence>
 			<Routes

diff --git a/src/components/homeScreen/homeScreen.css b/src/components/homeScreen/homeScreen.css
@@ -2,17 +2,22 @@
 	display: grid;
 	justify-content: center;
 	text-align: center;
+	align-items: center;
 	position: absolute;
 	grid-template-columns: 20% 20% 20% 20%;
 	z-index: 10;
 
 	width: 100%;
+	max-width: 305px;
+	left: 3.07%;
 	height: 60%;
 
 	margin-top: 5%;
 
 	grid-column-gap: 0.7rem;
 	place-items: center;
+
+	filter: brightness(90%);
 }
 
 .dock {
@@ -25,7 +30,7 @@
 	width: 100%;
 	max-width: 310px;
 	height: auto;
-	bottom: -1%;
+	bottom: -2%;
 	left: 50%;
 	transform: translateX(-50%);
 }
@@ -37,7 +42,7 @@
 
 	grid-template-columns: 20% 20% 20% 20%;
 	width: 100%;
-	max-width: 330px;
+	max-width: 310px;
 	height: 100%;
 	max-height: -1px;
 
@@ -48,11 +53,16 @@
 	text-align: center;
 	place-items: center;
 
-	bottom: -48.89%;
-	left: 50%;
+	bottom: -50%;
+	left: 50.5%;
 	margin-bottom: 10%;
 
 	transform: translateX(-50%);
+	filter: brightness(90%);
+}
+
+.footerApps .appName {
+	visibility: hidden;
 }
 
 .apps {

diff --git a/src/components/slideToUnlock/slideToUnlock.css b/src/components/slideToUnlock/slideToUnlock.css
@@ -67,7 +67,8 @@
 		Helvetica, Arial, 'Lucida Grande', sans-serif;
 	font-weight: 300;
 	padding: 0;
-	width: 145%;
+	height: 100%;
+	width: 150%;
 	text-size-adjust: none;
 }
 
@@ -82,11 +83,35 @@
 	background-size: contain;
 }
 
-@keyframes slidetounlock {
+.textInSlide {
+	background-image: linear-gradient(
+		-250deg,
+		#202020 0%,
+		#6e6e6e 39%,
+		#5a5a5a 75%,
+		#aaaaaa 80%,
+		#1d1d1d 100%
+	);
+	background-size: 100% 60%; /* Adjusted background size for better visibility */
+	background-clip: text;
+	-webkit-background-clip: text;
+	color: transparent;
+	animation: textclip 20s linear infinite;
+	display: inline-block;
+}
+
+@keyframes textclip {
 	0% {
-		background-position: -100% 0;
+		background-position: -100% center; /* Adjusted initial position */
 	}
 	100% {
-		background-position: 100% 0;
+		background-position: 100% center; /* Adjusted final position */
+	}
+}
+
+/* Add a media query for smaller screens, such as mobile devices */
+@media (max-width: 768px) {
+	.textInSlide {
+		background-size: 100% 80%; /* Further adjusted background size */
 	}
 }
diff --git a/src/components/slideToUnlock/slideToUnlock.jsx b/src/components/slideToUnlock/slideToUnlock.jsx
@@ -119,7 +119,7 @@ const SlideToUnlock = () => {
 						id='slider'
 						ref={sliderRef}
 					></strong>
-					<span>slide to unlock</span>
+					<span className='textInSlide'>slide to unlock</span>
 				</div>
 				<div
 					className='arrow'