added img slider
This commit is contained in:
parent
0254061fa4
commit
aeb7bd7634
6 changed files with 170 additions and 68 deletions
16
README.md
16
README.md
|
@ -1,14 +1,16 @@
|
|||
# Spitfire Browser Website
|
||||
<div style="text-align: center;">
|
||||
<img src="https://weforgecode.xyz/Spitfire/Branding/raw/branch/main/icon5.svg" alt="Logo" style="width: 64px; height: 64px;">
|
||||
</div>
|
||||
|
||||
Spitfire Browser is a fast, secure, and elegant web browser built on Firefox. This repository contains the source code for the Spitfire Browser's official website.
|
||||
<h1 style="text-align: center;">Spitfire Browser Website</h1>
|
||||
|
||||
Unlike some other browser sites flexing with their 98.8% TypeScript (yikes), i keep it cool with minimal JavaScript just enough to get the job done, no extra BS.
|
||||
|
||||
Spitfire Browser's website is built without Next.js, TypeScript, and Tailwind CSS or any other bullshit.
|
||||
|
||||
## TO-DO:
|
||||
|
||||
- [ ] Add screenshots
|
||||
- [X] Add search-engine test
|
||||
- [ ] Add working downloads
|
||||
- [X] Add blog/updates
|
||||
- [ ] Add config file
|
||||
- [ ] Add browser download/screenshots for this web browser website (optional)
|
||||
|
||||
### Blog entries should be fromated this way:
|
||||
|
||||
|
|
|
@ -1,64 +1,138 @@
|
|||
.fancy-gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||||
gap: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
/* Adjust the gallery wrapper */
|
||||
.gallery-wrapper {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
|
||||
transform: scale(1);
|
||||
transition: transform 0.4s ease-in-out, filter 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
.gallery-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.6s ease, filter 0.6s ease;
|
||||
max-width: 800px;
|
||||
margin: 0 auto; /* Center the gallery */
|
||||
overflow: hidden; /* Ensure content is within bounds */
|
||||
}
|
||||
|
||||
.gallery-item::before {
|
||||
content: '';
|
||||
.gallery-wrapper img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Slick carousel specific styles */
|
||||
.slick-prev, .slick-next {
|
||||
background: #444; /* Button background color */
|
||||
border: none; /* Remove any border */
|
||||
border-radius: 50%; /* Make the buttons circular */
|
||||
color: #fff; /* Text color */
|
||||
font-size: 18px; /* Font size for the arrow */
|
||||
height: 40px; /* Button height */
|
||||
width: 40px; /* Button width */
|
||||
line-height: 40px; /* Center text vertically */
|
||||
text-align: center; /* Center text horizontally */
|
||||
z-index: 1000; /* Make sure buttons are above the carousel images */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(45deg, rgba(255, 0, 150, 0.3), rgba(0, 204, 255, 0.3));
|
||||
mix-blend-mode: overlay;
|
||||
opacity: 0;
|
||||
transition: opacity 0.6s ease;
|
||||
top: 50%; /* Position vertically centered */
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.gallery-item:hover {
|
||||
transform: scale(1.05);
|
||||
filter: brightness(1.2);
|
||||
.slick-prev {
|
||||
left: -50px; /* Position to the left of the carousel */
|
||||
}
|
||||
|
||||
.gallery-item:hover img {
|
||||
transform: scale(1.1) rotate(2deg);
|
||||
filter: grayscale(20%)
|
||||
.slick-next {
|
||||
right: -50px; /* Position to the right of the carousel */
|
||||
}
|
||||
|
||||
.gallery-item:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
/*
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
/* Center the dots under the image */
|
||||
.slick-dots {
|
||||
text-align: center;
|
||||
margin-top: 15px; /* Space between image and dots */
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
animation: pulse 5s infinite;
|
||||
} */
|
||||
.slick-dots li {
|
||||
display: inline-block; /* Align dots horizontally */
|
||||
margin: 0 8px; /* Space between dots */
|
||||
}
|
||||
|
||||
.slick-dots li button {
|
||||
background: #ccc; /* Dot background color */
|
||||
border: none; /* Remove any border */
|
||||
border-radius: 50%; /* Make the dots circular */
|
||||
width: 12px; /* Dot width */
|
||||
height: 12px; /* Dot height */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.slick-dots li button::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 16px; /* Adjusted circle width */
|
||||
height: 16px; /* Adjusted circle height */
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
border: 2px solid #ccc; /* Circle border color */
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.slick-dots li.slick-active button::before {
|
||||
background-color: #fff; /* Active dot background color */
|
||||
border-color: #fff; /* Active dot border color */
|
||||
}
|
||||
|
||||
/* This is what I get for global styling and using templates */
|
||||
|
||||
/* Override the border-radius to remove rounded corners */
|
||||
.slick-prev, .slick-next {
|
||||
border-radius: 0 !important;
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* If you want a specific shape, like a square or a different background */
|
||||
.slick-prev, .slick-next {
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* Ensure the active dot buttons are not rounded */
|
||||
.slick-dots li button {
|
||||
border-radius: 0 !important;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.slick-dots li button::before {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* General button override */
|
||||
button[type="button"][role="tab"] {
|
||||
border-radius: 0 !important;
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
border: none !important;
|
||||
color: inherit !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* Restore the round shape for the dots */
|
||||
.slick-dots li button {
|
||||
border-radius: 50% !important;
|
||||
background: #ccc !important;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
/* Ensure the pseudo-element is also circular */
|
||||
.slick-dots li button::before {
|
||||
border-radius: 50% !important;
|
||||
background-color: transparent;
|
||||
border: 2px solid #ccc;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
/* Style for the active dot */
|
||||
.slick-dots li.slick-active button::before {
|
||||
background-color: #fff;
|
||||
border-color: #fff;
|
||||
}
|
||||
|
|
2
static/css/slick.min.css
vendored
Normal file
2
static/css/slick.min.css
vendored
Normal file
|
@ -0,0 +1,2 @@
|
|||
.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}
|
||||
/*# sourceMappingURL=/sm/fb3ed351cd5c0f1f30f88778ee1f9b056598e6d25ac4fdcab1eebcd8be521cd9.map */
|
16
static/js/slick-conf.js
Normal file
16
static/js/slick-conf.js
Normal file
|
@ -0,0 +1,16 @@
|
|||
$(document).ready(function(){
|
||||
$('.the-slider').slick({
|
||||
dots: true,
|
||||
infinite: true,
|
||||
speed: 300,
|
||||
slidesToShow: 1,
|
||||
adaptiveHeight: true,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 2000,
|
||||
prevArrow: '<button type="button" class="slick-prev">❮</button>',
|
||||
nextArrow: '<button type="button" class="slick-next">❯</button>',
|
||||
customPaging: function(slider, i) {
|
||||
return '<button type="button">' + '</button>';
|
||||
}
|
||||
});
|
||||
});
|
1
static/js/slick.min.js
vendored
Normal file
1
static/js/slick.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
@ -21,6 +21,7 @@
|
|||
<link rel="stylesheet" href="/static/css/stars.css" />
|
||||
<link rel="stylesheet" href="/static/css/fancy-gallery.css" />
|
||||
<link rel="stylesheet" href="/static/css/extras.css" />
|
||||
<link rel="stylesheet" href="/static/css/slick.min.css" />
|
||||
<noscript><link rel="stylesheet" href="/static/css/noscript.css" /></noscript>
|
||||
</head>
|
||||
<body class="is-preload">
|
||||
|
@ -70,17 +71,20 @@
|
|||
<h2>Welcome to Spitfire Browser</h2>
|
||||
</header>
|
||||
<p>Spitfire Browser is your gateway to a fast, secure, and elegant browsing experience. Built on Firefox, Spitfire includes essential features like ad blocking, enhanced security, and anonymous browsing with Ocásek search engine.</p>
|
||||
<div class="box alt">
|
||||
<div class="fancy-gallery">
|
||||
<div class="gallery-item"><img src="/static/images/screenshots/1.png" alt="Screenshot 1" /></div>
|
||||
<div class="gallery-item"><img src="/static/images/screenshots/1.png" alt="Screenshot 2" /></div>
|
||||
<br> <!-- br? I call it super.fancy.tailor.r.css.react.native.way.to.add.super.padding.on.top.of.images.T3.js.express.lodash.moment.axios.jquery.vue.nft.d3.angular.bloat.typescript.webpack.web3.babel.parcel.T4 -->
|
||||
<div class="gallery-wrapper">
|
||||
<div class="the-slider"> <!-- Is this fucking centered? -->
|
||||
<div><img src="/static/images/screenshots/1.png" alt="Screenshot 1"></div>
|
||||
<div><img src="/static/images/screenshots/1.png" alt="Screenshot 2"></div>
|
||||
<div><img src="/static/images/screenshots/1.png" alt="Screenshot 3"></div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="actions">
|
||||
<li><a href="#intro" class="button">More Screenshots</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- <ul class="actions js-disabled">
|
||||
<li><a href="#intro" class="button">See More Screenshots</a></li>
|
||||
</ul> -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section id="features" class="main special">
|
||||
<header class="major">
|
||||
|
@ -223,13 +227,16 @@
|
|||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="/static/js/jquery.min.js" defer></script>
|
||||
<script src="/static/js/jquery.min.js"></script>
|
||||
<script src="/static/js/slick.min.js"></script>
|
||||
<script src="/static/js/jquery.scrollex.min.js" defer></script>
|
||||
<script src="/static/js/jquery.scrolly.min.js" defer></script>
|
||||
<script src="/static/js/browser.min.js" defer></script>
|
||||
<script src="/static/js/breakpoints.min.js" defer></script>
|
||||
<script src="/static/js/util.js" defer></script>
|
||||
<script src="/static/js/main.js" defer></script>
|
||||
|
||||
<script src="/static/js/slick-conf.js" defer></script>
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
Loading…
Reference in a new issue