Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(ref staff chat) Update main page + css colors #22

Merged
merged 1 commit into from
Sep 19, 2024
Merged

(ref staff chat) Update main page + css colors #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 67 additions & 49 deletions styles/indexStyle.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,21 @@
body {
background-color: #111827;
font-family: Arial, sans-serif;
background-color: #2e3440;
font-family: "Inter", sans-serif;
margin: 0;
padding: 0;
height: 100vh; /* we set page size here since its the body - this will also affect stuff like title - it also helps with footer calc */
}

/* aside from some light work phone should need much on this page */
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
padding: 100px; /* We pad here so we can move this around */
}

.box {
background-color: #1f2937;
padding: 20px;
background-color: #3b4252;
padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
width: 400px;
}
Expand All @@ -23,28 +24,32 @@ body {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
background-color: #1f2937;
background-color: #3b4252;
padding: 10px;
border-bottom: 1px solid #636161;
border-bottom: 1px solid #e5e9f076;
}

.tab {
background-color: #1f2937;
background-color: #434c5e;
border: none;
padding: 10px 20px;
font-family: "Inter", sans-serif;
font-size: 16px;
cursor: pointer;
color: #fff;
}

.tab:hover {
background-color: #616161;
background-color: #5e81ac;
}

.tab.active {
background-color: #111827;
background-color: #4c566a;
font-weight: bold;
}
.tab.active:hover {
background-color: #5e81ac; /* css is annoying wtf */
}

.box-content {
padding: 20px;
Expand All @@ -63,16 +68,18 @@ body {
flex-direction: column;
align-items: center;
padding: 20px;
border: 1px solid #636161;
border: 1px solid #e5e9f076;
margin-bottom: 20px;
background-color: #1f2937;
background-color: #3b4252;
}

.file-upload img {
width: 50px;
height: 50px;
margin-bottom: 10px;
}
.svg {
width: 70px;
fill: #d8dee9f7;
height: 70px;
padding-bottom: 10px;

}

.file-upload input[type="file"] {
display: none;
Expand All @@ -82,11 +89,11 @@ body {
cursor: pointer;
padding: 10px 20px;
border: none;
background-color: #1f2937;
background-color: #3b4252;
font-size: 16px;
color: #fff;
}

/* peak name tbf */
.or-text {
font-size: 16px;
margin-bottom: 20px;
Expand All @@ -97,16 +104,17 @@ body {
.input-box {
display: flex;
align-items: center;

margin-bottom: 20px;
}

.input-box input[type="text"] {
padding: 10px;
border: 1px solid #636161;
border: 1px solid #e5e9f076;
width: 200px;
background-color: #1f2937;
background-color: #3b4252;
color: #fff;
height: 23px;
height: 25px;
}

.input-box button[type="button"] {
Expand All @@ -128,21 +136,20 @@ body {
.button-5 {
align-items: center;
background-clip: padding-box;
background-color: #0b5697;
border: 1px solid transparent;
box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
background-color: #5e81ac;
border: 2px solid transparent;
box-shadow: rgba(46, 52, 64, 0.35) 1px 1px 1px -1px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-flex;
font-family: system-ui,-apple-system,system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 16px;
font-weight: 600;
justify-content: center;
line-height: 1.25;
margin: 0;
margin: 1;
min-height: 3rem;
padding: calc(.875rem - 1px) calc(1.5rem - 1px);
padding: calc(1.5rem - 1px) calc(1.5rem - 1px);
position: relative;
text-decoration: none;
transition: all 250ms;
Expand All @@ -156,29 +163,40 @@ body {

.button-5:hover,
.button-5:focus {
background-color: #0a4c73;
box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
background-color: #2e3440;
}

.button-5:hover {
transform: translateY(-1px);
}

/* someone explain why we need so much transforming its really fine bro */
.button-5:active {
background-color: #083a5e;
box-shadow: rgba(0, 0, 0, .06) 0 2px 4px;
transform: translateY(0);
background-color: #2e3440;
}

footer {
position: fixed;
bottom: 0;
width: 100%;
background-color: #111827;
padding: 10px;
text-align: center;
color: #fff;
z-index: 1;
margin-top: auto;
font-weight: normal;
text-decoration: none;
padding: 10px;
position: absolute;
color: gray; /* someone fact check this is the right color from ratterscanner main site */
text-align: center;
clear: both;
position: fixed;
bottom: 0px;
width: 100%;
}

footer:before {
content: "";
position: absolute;
top: -10px;
left: 50px;
right: 50px;
border-top: 1px solid;
border-image: linear-gradient(to right, #81a1c1, #5e81ac, #81a1c1) 1;
}
footer a {
color:#fff;
font-weight: normal; /* imma force normal font style since idk but I swear we have some weird stuff going on with fonts */
text-decoration: none; /* raterrscanner.com uses no this so ok */
}

.file-upload label {
Expand Down Expand Up @@ -209,7 +227,7 @@ footer {

.popup-content {
position: relative;
background-color: #1f2937;
background-color: #2e3440;
color: #ffffff;
padding: 20px;
width: 300px;
Expand All @@ -226,6 +244,6 @@ footer {
}

.close-popup:hover {
color: #929292;
color: #929292; /* icba color concept this ngl */
}

29 changes: 18 additions & 11 deletions views/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,30 +6,35 @@
<title>Upload a file</title>
<link rel="stylesheet" href="indexStyle.css">
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?compat=recaptcha" async defer></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400&amp;display=swap">
<script src="https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/crypto-js.min.js"></script>
<link rel="icon" href="https://ratterscanner.com/favicon.ico">
</head>

<body>
<div class="container">
<div class="box">
<div class="tabs">
<button class="tab active">Upload a file</button>
<button class="tab">View a report</button>
<button class="tab">Credits and statistics</button> <!--This is quints job-->
<button class="tab active">Jar Scanner</button>
<button class="tab">View a Report</button>
<button class="tab">Credits and Statistics</button> <!--This is quints job--> <!-- Realistically can be done by anyone - probably quint though ngl -->
</div>
<div class="box-content">

<!-- Tab 1 -->
<p class="tab-text">Upload a .jar file to be scanned</p>
<p class="tab-text">Upload a file to get started <b>(.jar)</b></p>
<div class="file-upload">
<label for="file-input">
<img src="fileIcon.png" alt="File upload icon">
Click to upload
<svg class="svg" viewBox="0 0 35 39" xmlns="http://www.w3.org/2000/svg">
<path d="m22.0092457 0 7.9907543 10.0183757v21.9816243h-28v-32zm-5.9841194 10-.0251458.0250873-.0251068-.0250873-5.6568542 5.6568542 1.4142135 1.4142136 3.2687475-3.2669805-.0009805 10.085h2l.0009805-10.084 3.2667865 3.2659805 1.4142135-1.4142136z" />
</svg>
Click to select a file<!--, or drag and drop it here -->
<input type="file" id="file-input" multiple>
</label>
</div>
<p class="or-text">or</p>
<div class="input-box">
<input type="text" id="url-input" placeholder="Enter a URL to download from">
<input type="text" id="url-input" placeholder="Enter a URL">
<button class="button-5" role="button" id="urlSubmit" onclick="submitURL(document.getElementById('url-input').value);">Submit</button>
</div>
</div>
Expand All @@ -44,22 +49,24 @@
</div>
<div class="box-content" style="display: none;">
<!-- Tab 3 -->
<p class="tab-text">Coming soon</p>
<p class="tab-text">Quint, Lenny, Sylus, Ghosty, Axle, Pandy, Gute Nacht</p>
</div>
</div>
<div class="popup-box">
<div class="popup-content">
<span class="close-popup">x</span>
<p><h2>Submit the file</h2></p>
<p><h2>Captcha test</h2></p>
<div id="fileInfo"></div>
</br>
<div class="g-recaptcha" data-sitekey=<%= locals.siteKey %>></div>
</br>
<button class="button-5" role="button" id="file-submit" onclick="submitFile()">Submit</button> <!--There is prob a better way to go about this-->
<button class="button-5" role="button" id="file-submit" onclick="submitFile()">Continue</button> <!--There is prob a better way to go about this and I do not want to bother-->
</div>
</div>
<footer>
<p>© Ratterscanner 2024 <a href="https://ratterscanner.com/terms">Terms</a> | <a href="https://ratterscanner.com/privacy">Privacy</a> </p>
<a href="https://ratterscanner.com/terms">Terms and Conditions</a> | <a href="https://ratterscanner.com/privacy">Privacy Policy</a>
<br>
<p>© 2024 RatterScanner. All rights reserved.</p>
</footer>
<script>const maxSize = "<%= fileLimit %>";</script>
<script src="indexScript.js"></script>
Expand Down