Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/RatterScanner/Ratterscanner…
Browse files Browse the repository at this point in the history 
…Site
  • Loading branch information
@sylus-squared
sylus-squared committed Sep 20, 2024
2 parents d8658f2 + 2150ddb commit 36b6e63
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 60 deletions.
116 changes: 67 additions & 49 deletions styles/indexStyle.css
View file
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
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

0 comments on commit 36b6e63

Please sign in to comment.