Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/cepdnaclk/e19-3yp-impact-tr…
Browse files Browse the repository at this point in the history 
…acker
  • Loading branch information
@hirushig
hirushig committed Jan 29, 2024
2 parents f1085a1 + 2f75de2 commit 35b29d3
Show file tree
Hide file tree
Showing 3 changed files with 274 additions and 90 deletions.
113 changes: 113 additions & 0 deletions docs/download.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
body {
font-family: "Raleway", sans-serif;
margin: 0;
padding: 0;
}

.container {
width: 100%;
margin: 0 auto;
padding: 120px;
padding-top: 10em;
}

.container .mockup-container {
overflow: hidden;
height: auto;
display: flex;
justify-content: center;
align-items: center;
}

.container .mockup-container .mockup-img {
height: 60dvh;
margin-top: -2em;
object-fit: contain;
}
.logo {
display: block;
margin: 0 auto;
width: 200px;
}

.title {
text-align: center;
font-size: 24px;
font-weight: bold;
margin-top: 20px;
}

.subtitle {
text-align: center;
font-size: 18px;
margin-bottom: 20px;
}

.requirements {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2em;
margin-bottom: 20px;
}

.requirement {
padding: 16px;
border: 1px solid #eee;
background-color: #fbfbfb;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
/* box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); */
}

.requirement h3 {
text-align: left;
font-size: 20px;
font-weight: 600;
margin-top: 0;
display: flex;
align-items: center;
gap: 10px;
}

.requirement h3 img {
width: 20px;
}

.requirement ul {
list-style: none;
padding: 0;
margin: 0;
}

.requirement li {
margin: 10px 0;
font-weight: 500;
font-size: 1em;
}

.requirement li span {
display: block;
margin-top: 0.2em;
font-weight: 400;
font-size: 0.8em;
}

.button {
margin-top: 2em;
border: none;
border-radius: 8px;
padding: 1em 1em;
background-color: #2a2a2a;
color: white;
font-size: 16px;
font-weight: 400;
font-family: "Raleway", sans-serif;
cursor: pointer;
transition: all 150ms ease-in-out;
}

.button:hover {
background-color: #882626;
}
251 changes: 161 additions & 90 deletions docs/download.html
View file
Original file line number Diff line number Diff line change
@@ -1,103 +1,174 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="./func.js">
</script>
</head>
<body>

<!-- ============================================ -->
<head>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="download.css" />
<script src="./func.js"></script>
</head>
<body>
<!-- ============================================ -->
<!-- Navigation -->
<!-- ============================================ -->

<header id="cs-navigation">
<div class="cs-container">
<!--Nav Logo-->
<a href="" class="cs-logo" aria-label="back to home">
<img src="assets/img/Logo-Impax.webp" alt="logo" width="210" height="29" aria-hidden="true" decoding="async">
</a>
<!--Navigation List-->
<nav class="cs-nav" role="navigation">
<!--Mobile Nav Toggle-->
<button class="cs-toggle" aria-label="mobile menu toggle">
<div class="cs-box" aria-hidden="true">
<span class="cs-line cs-line1" aria-hidden="true"></span>
<span class="cs-line cs-line2" aria-hidden="true"></span>
<span class="cs-line cs-line3" aria-hidden="true"></span>
</div>
</button>
<!-- We need a wrapper div so we can set a fixed height on the cs-ul in case the nav list gets too long from too many dropdowns being opened and needs to have an overflow scroll. This wrapper acts as the background so it can go the full height of the screen and not cut off any overflowing nav items while the cs-ul stops short of the bottom of the screen, which keeps all nav items in view no matter how mnay there are-->
<div class="cs-ul-wrapper">
<ul id="cs-expanded" class="cs-ul" aria-expanded="false">
<li class="cs-li">
<a href="" class="cs-li-link cs-active">
Home
</a>
</li>
<li class="cs-li">
<a href="#Problem" class="cs-li-link">
Problem
</a>
</li>
<!--Copy and paste this cs-dropdown list item and replace any .cs-li with this cs-dropdown group to make a new dropdown and it will work-->
<li class="cs-li cs-dropdown" tabindex="0">
<span class="cs-li-link">
Solution
<img class="cs-drop-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/down-red.svg" alt="dropdown icon" width="15" height="15" decoding="async" aria-hidden="true">
</span>
<ul class="cs-drop-ul">
<li class="cs-drop-li">
<a href="#Solution" class="cs-li-link cs-drop-link">Our Solution</a>
</li>
<li class="cs-drop-li">
<a href="#SolutionArchitecture" class="cs-li-link cs-drop-link">Solution Architecture</a>
</li>
</ul>
</li>
<li class="cs-li cs-dropdown" tabindex="0">
<span class="cs-li-link">
Hardware
<img class="cs-drop-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/down-red.svg" alt="dropdown icon" width="15" height="15" decoding="async" aria-hidden="true">
</span>
<ul class="cs-drop-ul">
<li class="cs-drop-li">
<a href="#Solution" class="cs-li-link cs-drop-link">Infrastructure</a>
</li>
<li class="cs-drop-li">
<a href="#SolutionArchitecture" class="cs-li-link cs-drop-link">3D Designs</a>
</li>
</ul>
</li>
<li class="cs-li">
<a href="" class="cs-li-link">
Documentation
</a>
<li class="cs-li">
<a href="#meet-us-1021" class="cs-li-link">
About Us
</a>
</li>
</ul>
</div>
</nav>
<a href="download.html" class="cs-button-solid cs-nav-button">Download Now</a>
<!--Dark Mode toggle, uncomment button code if you want to enable a dark mode toggle-->
<!--Dark Mode toggle-->
<!-- Place at the bottom of your container that wraps around your <nav> navigation list -->
<!-- If there is no container wrapping your <nav>, add one. This should NOT be placed inside the navigation list -->
<!-- <button id="dark-mode-toggle">
<div class="cs-container">
<!--Nav Logo-->
<a href="" class="cs-logo" aria-label="back to home">
<img
src="assets/img/Logo-Impax.webp"
alt="logo"
width="210"
height="29"
aria-hidden="true"
decoding="async"
/>
</a>
<!--Navigation List-->
<nav class="cs-nav" role="navigation">
<!--Mobile Nav Toggle-->
<button class="cs-toggle" aria-label="mobile menu toggle">
<div class="cs-box" aria-hidden="true">
<span class="cs-line cs-line1" aria-hidden="true"></span>
<span class="cs-line cs-line2" aria-hidden="true"></span>
<span class="cs-line cs-line3" aria-hidden="true"></span>
</div>
</button>
<!-- We need a wrapper div so we can set a fixed height on the cs-ul in case the nav list gets too long from too many dropdowns being opened and needs to have an overflow scroll. This wrapper acts as the background so it can go the full height of the screen and not cut off any overflowing nav items while the cs-ul stops short of the bottom of the screen, which keeps all nav items in view no matter how mnay there are-->
<div class="cs-ul-wrapper">
<ul id="cs-expanded" class="cs-ul" aria-expanded="false">
<li class="cs-li">
<a href="" class="cs-li-link cs-active"> Home </a>
</li>
<li class="cs-li">
<a href="#Problem" class="cs-li-link"> Problem </a>
</li>
<!--Copy and paste this cs-dropdown list item and replace any .cs-li with this cs-dropdown group to make a new dropdown and it will work-->
<li class="cs-li cs-dropdown" tabindex="0">
<span class="cs-li-link">
Solution
<img
class="cs-drop-icon"
src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/down-red.svg"
alt="dropdown icon"
width="15"
height="15"
decoding="async"
aria-hidden="true"
/>
</span>
<ul class="cs-drop-ul">
<li class="cs-drop-li">
<a href="#Solution" class="cs-li-link cs-drop-link"
>Our Solution</a
>
</li>
<li class="cs-drop-li">
<a
href="#SolutionArchitecture"
class="cs-li-link cs-drop-link"
>Solution Architecture</a
>
</li>
</ul>
</li>
<li class="cs-li cs-dropdown" tabindex="0">
<span class="cs-li-link">
Hardware
<img
class="cs-drop-icon"
src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/down-red.svg"
alt="dropdown icon"
width="15"
height="15"
decoding="async"
aria-hidden="true"
/>
</span>
<ul class="cs-drop-ul">
<li class="cs-drop-li">
<a href="#Solution" class="cs-li-link cs-drop-link"
>Infrastructure</a
>
</li>
<li class="cs-drop-li">
<a
href="#SolutionArchitecture"
class="cs-li-link cs-drop-link"
>3D Designs</a
>
</li>
</ul>
</li>
<li class="cs-li">
<a href="" class="cs-li-link"> Documentation </a>
</li>

<li class="cs-li">
<a href="#meet-us-1021" class="cs-li-link"> About Us </a>
</li>
</ul>
</div>
</nav>
<a href="download.html" class="cs-button-solid cs-nav-button"
>Download Now</a
>
<!--Dark Mode toggle, uncomment button code if you want to enable a dark mode toggle-->
<!--Dark Mode toggle-->
<!-- Place at the bottom of your container that wraps around your <nav> navigation list -->
<!-- If there is no container wrapping your <nav>, add one. This should NOT be placed inside the navigation list -->
<!-- <button id="dark-mode-toggle">
Moon is an inline SVG so you can edit the color if needed
<svg class="cs-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480" style="enable-background:new 0 0 480 480" xml:space="preserve"><path d="M459.782 347.328c-4.288-5.28-11.488-7.232-17.824-4.96-17.76 6.368-37.024 9.632-57.312 9.632-97.056 0-176-78.976-176-176 0-58.4 28.832-112.768 77.12-145.472 5.472-3.712 8.096-10.4 6.624-16.832S285.638 2.4 279.078 1.44C271.59.352 264.134 0 256.646 0c-132.352 0-240 107.648-240 240s107.648 240 240 240c84 0 160.416-42.688 204.352-114.176 3.552-5.792 3.04-13.184-1.216-18.496z"/></svg>
<img class="cs-sun" aria-hidden="true" src="https://csimg.nyc3.digitaloceanspaces.com/Contact-Page/sun.svg" decoding="async" alt="sun" width="15" height="15">
</button> -->

</div>
</div>
</header>



</body>

<div class="container">
<div class="mockup-container">
<img class="mockup-img" src="./images/Mockup.png" alt="">
</div>

<div class="requirements">
<div class="requirement">
<ul>
<h3><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Windows_logo_-_2012.svg/2048px-Windows_logo_-_2012.svg.png" alt="">Windows</h3>
<li>Supported Operating Systems: <span>Windows 7 and later (x86 and amd64)</span></li>
<li>Minimum RAM: <span>512 MB</span></li>
<li>Processor: <span>Pentium 4 or later with SSE2 support</span></li>
</ul>
<button class="button" onclick="download('windows')">Download for Windows</button>
</div>
<div class="requirement">
<ul>
<h3><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Apple_logo_grey.svg" alt="">macOS</h3>
<li>Supported Operating Systems: <span>macOS 10.10 and later (64-bit)</span></li>
<li>Minimum RAM: <span>512 MB</span></li>
<li>Processor: <span>x64, Apple Silicon</span></li>
</ul>
<button class="button" onclick="download('macos')">Download for macOS</button>
</div>
<div class="requirement">
<ul>
<h3><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Linux_Logo_in_Linux_Libertine_Font.svg/1200px-Linux_Logo_in_Linux_Libertine_Font.svg.png" alt="">Linux</h3>
<li>Supported Distributions: <span>Ubuntu 12.04 and later, Fedora 21, Debian 8 (ia32/i686 and x64/amd64)</span></li>
<li>Minimum RAM: <span>512 MB</span></li>
<li>Processor: <span>Intel Pentium 4 or later with SSE2 support</span></li>
</ul>
<button class="button" onclick="download('linux')">Download for Linux</button>
</div>
</div>

</div>
<script>
// Add your custom JavaScript here
function download(os) {
// Replace the alert with your download logic
alert('You clicked download for ' + os);
}
</script>
</body>
</body>
</html>

​
​
Binary file added docs/images/Mockup.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 35b29d3

Please sign in to comment.