GuidoSchenone/Red-Team-Ilustration-for-web
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Upload files to "redteam"

Browse Source
This commit is contained in:
GuidoSchenone
2025-12-03 08:05:57 -05:00
parent f3812ce0ba
commit de08117d92
5 changed files with 91 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
redteam/config Normal file
View File

@@ -0,0 +1,14 @@
[core]
repositoryformatversion = 0
filemode = false
bare = false
logallrefupdates = true
symlinks = false
ignorecase = true
[remote "origin"]
url = https://git.cypsec.de/GuidoSchenone/Red-Team-Ilustration-for-web.git
fetch = +refs/heads/*:refs/remotes/origin/*
[branch "main"]
remote = origin
merge = refs/heads/main
vscode-merge-base = origin/main

1
redteam/description Normal file
View File

@@ -0,0 +1 @@
Unnamed repository; edit this file 'description' to name the repository.

28
redteam/index.html Normal file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Red-Team Slider</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="slider-box">
<div class="slides">
<img src="images/frame1.jpg.png" class="slide active" alt="Frame 1" />
<img src="images/frame2.jpg.png" class="slide" alt="Frame 2" />
<img src="images/frame3.jpg.png" class="slide" alt="Frame 3" />
<img src="images/frame4.jpg.png" class="slide" alt="Frame 4" />
<img src="images/frame5.jpg.png" class="slide" alt="Frame 5" />
<img src="images/frame6.jpg.png" class="slide" alt="Frame 6" />
<img src="images/frame7.jpg.png" class="slide" alt="Frame 6" />
</div>
<button class="nav prev" onclick="move(-1)">&#10094;</button>
<button class="nav next" onclick="move(1)">&#10095;</button>
</div>
<script src="slider.js"></script>
</body>
</html>

18
redteam/slider.js Normal file
View File

@@ -0,0 +1,18 @@
const track = document.getElementById('track');
const box = document.getElementById('box');
const slides = document.querySelectorAll('.slide');
let idx = 0;
function goTo(n){
idx = (n + slides.length) % slides.length;
track.style.transform = `translateX(-${idx * 100}%)`;
/* light blink */
box.classList.add('swap');
setTimeout(() => box.classList.remove('swap'), 250);
}
function move(d){ goTo(idx + d); }
/* auto-advance every 3 s */
setInterval(() => move(1), 3000);

30
redteam/style.css Normal file
View File

@@ -0,0 +1,30 @@
/* ---------- SQUARE BOX ---------- */
.slider-box{
position:relative;
width:320px;
height:320px;
border-radius:1.5rem;
overflow:hidden; /* keeps images inside */
margin:0 auto;
}
/* ---------- HORIZONTAL TRACK ---------- */
.slides{
display:flex; /* side-by-side */
height:100%;
transition:transform .6s ease;
}
/* ---------- EACH IMAGE ---------- */
.slide{
width:100%; /* 1 image = full box width */
height:100%;
object-fit:cover;
flex-shrink:0;
}
/* ---------- LIGHT BLINK ON SWAP ---------- */
.slider-box.swap{
box-shadow:0 0 20px 6px rgba(255,255,255,.35);
transition:box-shadow .25s;
}