diff --git a/pages/index.tsx b/pages/index.tsx index ae6b846..9556080 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -67,23 +67,20 @@ const Home = () => { {initialLoading ? ( - + - - - {currentLoadingItem} - + {progress.toFixed(2)}% ) : ( <> - + { media="(max-width: 767px)" /> Your browser does not support the video tag. - +

Create Shortlink

{ const Container = styled.div` position: relative; - display: flex; - justify-content: center; - align-items: center; + height: 100vh; width: 100%; overflow: hidden; + + display: flex; + justify-content: center; + align-items: center; `; -const VideoBackground = styled.video` +const BackgroundVideo = styled.video` position: absolute; top: 0; left: 0; @@ -162,57 +161,6 @@ const Input = styled.input` margin-bottom: 20px; `; -const Button = styled.button` - padding: 10px 20px; -`; - -const ProgressContainer = styled.div` - position: absolute; - bottom: 20px; - width: 80%; - display: flex; - flex-direction: column; - align-items: center; - background: rgba(0, 0, 0, 0.5); - padding: 10px; - border-radius: 10px; -`; - -const ProgressBarContainer = styled.div` - width: 100%; - background: rgba(255, 255, 255, 0.2); - border-radius: 5px; - overflow: hidden; -`; - -const ProgressBar = styled.div` - height: 10px; - background: linear-gradient(to right, #4caf50, #81c784); - transition: width 0.5s; -`; - -const ProgressText = styled.span` - margin-top: 10px; - font-size: 14px; - color: white; -`; - -const LoadingContainer = styled.div` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - position: relative; -`; - -const LoadingItem = styled.div` - font-size: 14px; - margin-bottom: 10px; - color: white; -`; - const ShortlinkLoadingContainer = styled.div` margin-top: 20px; width: 80%; @@ -224,18 +172,60 @@ const ShortlinkLoadingContainer = styled.div` border-radius: 10px; `; -const BackgroundVideo = styled.video` - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: cover; - z-index: -1; +const Button = styled.button` + padding: 10px 20px; `; -const BackgroundAudio = styled.audio` - display: block; +const LoadingContainer = styled.div` + width: 100%; + height: 100%; + + color: white; + font-size: 18px; +`; + +const ProgressContainer = styled.div` + position: absolute; + width: 100%; + bottom: 40px; + padding: 0 20%; + box-sizing: border-box; + + display: grid; + grid-template-areas: + 'text . perc' + 'bar bar bar' + ; + grid-template-columns: auto 1fr auto; + + z-index: 2; +`; + +const ProgressBarContainer = styled.div` + grid-area: bar; + width: 100%; + + background: rgba(240, 220, 200, 6%); + border: 1px solid rgba(255, 255, 255, 8%); + border-radius: 5px; + overflow: hidden; +`; + +const ProgressBar = styled.div` + height: 0.6em; + + background: transparent; + transition: width 0.5s; +`; + +const ProgressText = styled.span` + grid-area: perc; + margin-right: 8px; +`; + +const LoadingItem = styled.div` + grid-area: text; + margin-left: 8px; `; export default Home;