Skip to content
Snippets Groups Projects
Commit 9da24c14 authored by Joshua Randall's avatar Joshua Randall
Browse files

updated SCSS to make the engage button go rainbow colors on hover, and... 

updated SCSS to make the engage button go rainbow colors on hover, and restricted our uploader to only take MP4s
parent 868e68f2
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/App.css
+ 24
− 3
View file @ 9da24c14
......@@ -68,6 +68,26 @@ body {
right: 20px;
}
@keyframes engage {
0% {
background-color: #ff0000;
}
20% {
background-color: #ff7f00;
}
40% {
background-color: #ffff00;
}
60% {
background-color: #00ff00;
}
80% {
background-color: #0000ff;
}
100% {
background-color: #8b00ff;
}
}
.upload-button {
background-color: #065527;
border-radius: 19px;
......@@ -81,12 +101,13 @@ body {
padding: 16px 31px;
text-decoration: none;
text-shadow: 0px 0px 13px #283966;
transition: all ease-out 0.3s;
}
.upload-button:hover {
background-color: #476e9e;
font-size: 24px;
transition: all ease-out 0.3s;
animation: engage 1s infinite;
}
.upload-button:active {
position: relative;
top: 1px;
......
src/App.css.map
+ 1
− 1
View file @ 9da24c14
{"version":3,"sources":["global.scss","App.css","App.scss"],"names":[],"mappings":"AAOA;EACI,SAAA;EACA,8BAAA;EACA,yBATe;EAUf,WAPS;EAST,uBAAA;EACA,mBAAA;EACA,aAAA;ACPJ;;ACLA;EACI,aAAA;ADQJ;;ACNA;EACE,kBAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,mBAAA;EACA,aAAA;EACA,wCAAA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;ADSF;;ACAA;EACE,mBAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,mBAAA;EACA,mBAAA;ADGF;;ACAA;EACE,WAAA;EACA,aAAA;EACA,8BAAA;ADGF;;ACAA;EACE,yBAAA;EACA,mBAAA;EACA,yBAAA;EACA,qBAAA;EACA,eAAA;EACA,cAAA;EACA,wBAAA;EACA,eAAA;EACA,iBAAA;EACA,kBAAA;EACA,qBAAA;EACA,iCAAA;ADGF;ACDE;EACE,yBFxDiB;AC2DrB;;ACCA;EACE,kBAAA;EACA,SAAA;EACA,WAAA;ADEF;;ACCA;EACM,yBAAA;EACA,mBAAA;EACA,yBAAA;EACA,qBAAA;EACA,eAAA;EACA,cAAA;EACA,wBAAA;EACA,eAAA;EACA,iBAAA;EACA,kBAAA;EACA,qBAAA;EACA,iCAAA;ADEN;;ACAE;EACI,yBAAA;ADGN;;ACDE;EACI,kBAAA;EACA,QAAA;ADIN","file":"App.css","sourcesContent":["// Color Variables\n$background-color: #245526;\n$button-color: #1d4d2f;\n$button-hover-color: #87b8da;\n$text-color: #333;\n$uploadColor: red;\n\nbody {\n margin: 0;\n font-family: Arial, sans-serif;\n background-color: $background-color;\n color: $text-color;\n // display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n }","body {\n margin: 0;\n font-family: Arial, sans-serif;\n background-color: #245526;\n color: #333;\n justify-content: center;\n align-items: center;\n height: 100vh;\n}\n\nbody {\n display: flex;\n}\n\n.app-container {\n position: relative;\n width: 90vw;\n height: 80vh;\n background: white;\n border: 1px solid #ddd;\n border-radius: 10px;\n padding: 20px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n.video-player {\n background: #e0ffe0;\n width: 100%;\n height: 80vh;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 10px;\n margin-bottom: 20px;\n}\n\n.controls {\n width: 100%;\n display: flex;\n justify-content: space-between;\n}\n\n.control-button {\n background-color: #065527;\n border-radius: 19px;\n border: 2px solid #4e6096;\n display: inline-block;\n cursor: pointer;\n color: #ffffff;\n font-family: Courier New;\n font-size: 16px;\n font-weight: bold;\n padding: 16px 31px;\n text-decoration: none;\n text-shadow: 0px 0px 13px #283966;\n}\n.control-button:hover {\n background-color: #87b8da;\n}\n\n.upload-section {\n position: absolute;\n top: 20px;\n right: 20px;\n}\n\n.upload-button {\n background-color: #065527;\n border-radius: 19px;\n border: 2px solid #4e6096;\n display: inline-block;\n cursor: pointer;\n color: #ffffff;\n font-family: Courier New;\n font-size: 16px;\n font-weight: bold;\n padding: 16px 31px;\n text-decoration: none;\n text-shadow: 0px 0px 13px #283966;\n}\n\n.upload-button:hover {\n background-color: #476e9e;\n}\n\n.upload-button:active {\n position: relative;\n top: 1px;\n}","@import 'global.scss';\n\n\nbody{\n display: flex;\n}\n.app-container {\n position: relative; // Ensure container acts as a positioning context\n width: 90vw;\n height: 80vh; // Ensure enough height for content\n background: white;\n border: 1px solid #ddd;\n border-radius: 10px;\n padding: 20px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n display: flex; // Flexbox to center the video player\n flex-direction: column; // Stack items vertically\n justify-content: center; // Vertically center the video player\n align-items: center; // Horizontally center the video player\n}\n\n// #video{\n// video{\n// height: 80vh;\n// }\n// }\n\n.video-player {\n background: #e0ffe0;\n width: 100%; // Adjust width to fit container if necessary\n height: 80vh;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 10px;\n margin-bottom: 20px; // Add spacing for other content\n}\n\n.controls {\n width: 100%; // Ensure controls take up full width\n display: flex;\n justify-content: space-between;\n}\n\n.control-button {\n background-color:#065527;\n border-radius:19px;\n border:2px solid #4e6096;\n display:inline-block;\n cursor:pointer;\n color:#ffffff;\n font-family:Courier New;\n font-size:16px;\n font-weight:bold;\n padding:16px 31px;\n text-decoration:none;\n text-shadow:0px 0px 13px #283966;\n\n &:hover {\n background-color: $button-hover-color;\n }\n}\n\n.upload-section {\n position: absolute; // Allows precise positioning within app-container\n top: 20px; // Align to the top of app-container\n right: 20px; // Align to the right of app-container\n}\n\n.upload-button {\n background-color:#065527;\n border-radius:19px;\n border:2px solid #4e6096;\n display:inline-block;\n cursor:pointer;\n color:#ffffff;\n font-family:Courier New;\n font-size:16px;\n font-weight:bold;\n padding:16px 31px;\n text-decoration:none;\n text-shadow:0px 0px 13px #283966;\n }\n .upload-button:hover {\n background-color:#476e9e;\n }\n .upload-button:active {\n position:relative;\n top:1px;\n }"]}
\ No newline at end of file
{"version":3,"sources":["global.scss","App.css","App.scss"],"names":[],"mappings":"AAOA;EACI,SAAA;EACA,8BAAA;EACA,yBATe;EAUf,WAPS;EAST,uBAAA;EACA,mBAAA;EACA,aAAA;ACPJ;;ACLA;EACI,aAAA;ADQJ;;ACNA;EACE,kBAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,mBAAA;EACA,aAAA;EACA,wCAAA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;ADSF;;ACAA;EACE,mBAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,mBAAA;EACA,mBAAA;ADGF;;ACAA;EACE,WAAA;EACA,aAAA;EACA,8BAAA;ADGF;;ACAA;EACE,yBAAA;EACA,mBAAA;EACA,yBAAA;EACA,qBAAA;EACA,eAAA;EACA,cAAA;EACA,wBAAA;EACA,eAAA;EACA,iBAAA;EACA,kBAAA;EACA,qBAAA;EACA,iCAAA;ADGF;ACDE;EACE,yBFxDiB;AC2DrB;;ACCA;EACE,kBAAA;EACA,SAAA;EACA,WAAA;ADEF;;ACCA;EACE;IACE,yBAAA;EDEF;ECAA;IACE,yBAAA;EDEF;ECAA;IACE,yBAAA;EDEF;ECAA;IACE,yBAAA;EDEF;ECAA;IACE,yBAAA;EDEF;ECAA;IACE,yBAAA;EDEF;AACF;ACCA;EACM,yBAAA;EACA,mBAAA;EACA,yBAAA;EACA,qBAAA;EACA,eAAA;EACA,cAAA;EACA,wBAAA;EACA,eAAA;EACA,iBAAA;EACA,kBAAA;EACA,qBAAA;EACA,iCAAA;EACA,6BAAA;ADCN;ACCE;EACE,eAAA;EACA,6BAAA;EACA,6BAAA;ADCJ;ACEE;EACI,kBAAA;EACA,QAAA;ADAN","file":"App.css","sourcesContent":["// Color Variables\n$background-color: #245526;\n$button-color: #1d4d2f;\n$button-hover-color: #87b8da;\n$text-color: #333;\n$uploadColor: red;\n\nbody {\n margin: 0;\n font-family: Arial, sans-serif;\n background-color: $background-color;\n color: $text-color;\n // display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n }","body {\n margin: 0;\n font-family: Arial, sans-serif;\n background-color: #245526;\n color: #333;\n justify-content: center;\n align-items: center;\n height: 100vh;\n}\n\nbody {\n display: flex;\n}\n\n.app-container {\n position: relative;\n width: 90vw;\n height: 80vh;\n background: white;\n border: 1px solid #ddd;\n border-radius: 10px;\n padding: 20px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n.video-player {\n background: #e0ffe0;\n width: 100%;\n height: 80vh;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 10px;\n margin-bottom: 20px;\n}\n\n.controls {\n width: 100%;\n display: flex;\n justify-content: space-between;\n}\n\n.control-button {\n background-color: #065527;\n border-radius: 19px;\n border: 2px solid #4e6096;\n display: inline-block;\n cursor: pointer;\n color: #ffffff;\n font-family: Courier New;\n font-size: 16px;\n font-weight: bold;\n padding: 16px 31px;\n text-decoration: none;\n text-shadow: 0px 0px 13px #283966;\n}\n.control-button:hover {\n background-color: #87b8da;\n}\n\n.upload-section {\n position: absolute;\n top: 20px;\n right: 20px;\n}\n\n@keyframes engage {\n 0% {\n background-color: #ff0000;\n }\n 20% {\n background-color: #ff7f00;\n }\n 40% {\n background-color: #ffff00;\n }\n 60% {\n background-color: #00ff00;\n }\n 80% {\n background-color: #0000ff;\n }\n 100% {\n background-color: #8b00ff;\n }\n}\n.upload-button {\n background-color: #065527;\n border-radius: 19px;\n border: 2px solid #4e6096;\n display: inline-block;\n cursor: pointer;\n color: #ffffff;\n font-family: Courier New;\n font-size: 16px;\n font-weight: bold;\n padding: 16px 31px;\n text-decoration: none;\n text-shadow: 0px 0px 13px #283966;\n transition: all ease-out 0.3s;\n}\n.upload-button:hover {\n font-size: 24px;\n transition: all ease-out 0.3s;\n animation: engage 1s infinite;\n}\n.upload-button:active {\n position: relative;\n top: 1px;\n}","@import 'global.scss';\n\n\nbody{\n display: flex;\n}\n.app-container {\n position: relative; // Ensure container acts as a positioning context\n width: 90vw;\n height: 80vh; // Ensure enough height for content\n background: white;\n border: 1px solid #ddd;\n border-radius: 10px;\n padding: 20px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n display: flex; // Flexbox to center the video player\n flex-direction: column; // Stack items vertically\n justify-content: center; // Vertically center the video player\n align-items: center; // Horizontally center the video player\n}\n\n// #video{\n// video{\n// height: 80vh;\n// }\n// }\n\n.video-player {\n background: #e0ffe0;\n width: 100%; // Adjust width to fit container if necessary\n height: 80vh;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 10px;\n margin-bottom: 20px; // Add spacing for other content\n}\n\n.controls {\n width: 100%; // Ensure controls take up full width\n display: flex;\n justify-content: space-between;\n}\n\n.control-button {\n background-color:#065527;\n border-radius:19px;\n border:2px solid #4e6096;\n display:inline-block;\n cursor:pointer;\n color:#ffffff;\n font-family:Courier New;\n font-size:16px;\n font-weight:bold;\n padding:16px 31px;\n text-decoration:none;\n text-shadow:0px 0px 13px #283966;\n\n &:hover {\n background-color: $button-hover-color;\n }\n}\n\n.upload-section {\n position: absolute; // Allows precise positioning within app-container\n top: 20px; // Align to the top of app-container\n right: 20px; // Align to the right of app-container\n}\n\n@keyframes engage {\n 0% {\n background-color: #ff0000; // Red\n }\n 20% {\n background-color: #ff7f00; // Orange\n }\n 40% {\n background-color: #ffff00; // Yellow\n }\n 60% {\n background-color: #00ff00; // Green\n }\n 80% {\n background-color: #0000ff; // Blue\n }\n 100% {\n background-color: #8b00ff; // Violet\n }\n}\n\n.upload-button {\n background-color:#065527;\n border-radius:19px;\n border:2px solid #4e6096;\n display:inline-block;\n cursor:pointer;\n color:#ffffff;\n font-family:Courier New;\n font-size:16px;\n font-weight:bold;\n padding:16px 31px;\n text-decoration:none;\n text-shadow:0px 0px 13px #283966;\n transition: all ease-out 0.3s;\n \n &:hover {\n font-size:24px;\n transition: all ease-out 0.3s;\n animation: engage 1s infinite;\n\n }\n &:active {\n position:relative;\n top:1px;\n }\n}"]}
\ No newline at end of file
src/App.scss
+ 31
− 5
View file @ 9da24c14
......@@ -67,6 +67,27 @@ body{
right: 20px; // Align to the right of app-container
}
@keyframes engage {
0% {
background-color: #ff0000; // Red
}
20% {
background-color: #ff7f00; // Orange
}
40% {
background-color: #ffff00; // Yellow
}
60% {
background-color: #00ff00; // Green
}
80% {
background-color: #0000ff; // Blue
}
100% {
background-color: #8b00ff; // Violet
}
}
.upload-button {
background-color:#065527;
border-radius:19px;
......@@ -80,11 +101,16 @@ body{
padding:16px 31px;
text-decoration:none;
text-shadow:0px 0px 13px #283966;
transition: all ease-out 0.3s;
&:hover {
font-size:24px;
transition: all ease-out 0.3s;
animation: engage 1s infinite;
}
.upload-button:hover {
background-color:#476e9e;
}
.upload-button:active {
&:active {
position:relative;
top:1px;
}
\ No newline at end of file
}
}
\ No newline at end of file
src/App.tsx
+ 1
− 1
View file @ 9da24c14
......@@ -113,7 +113,7 @@ function App() {
<button className="control-button" onClick={handleNext}>NEXT <i className="fa-solid fa-arrow-right"></i></button>
</div>
<div className="upload-section">
<button className="upload-button" onClick={() => window.location.href = '/upload.html'}>UPLOAD <i className="fa-solid fa-upload"></i></button>
<button className="upload-button" onClick={() => window.location.href = '/upload.html'}>ENGAGE <i className="fa-solid fa-upload"></i></button>
</div>
</div>
);
......
src/components/FileUploader.tsx
+ 1
− 1
View file @ 9da24c14
......@@ -43,7 +43,7 @@ export default function FileUploader() {
return (
<div>
<input type="file" accept="video/*" onChange={handleFileChange} />
<input type="file" accept="video/mp4" onChange={handleFileChange} />
{file && status !== "uploading" && (
<button onClick={handleFileUpload}>Upload</button>
)}
......
src/upload.tsx
+ 1
− 1
View file @ 9da24c14
......@@ -15,7 +15,7 @@ function Upload() {
</button>
<h1 className="upload-title">Upload Your Video</h1>
<FileUploader />
<p>We only accept .mp4 and .mkv for now</p>
<p>We only accept .mp4 for now</p>
</div>
);
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment