Skip to content

Commit 433b71e

Browse files
microintelmicrointel
authored
Add files via upload
1 parent 55144dd commit 433b71e

File tree

2 files changed

+213
-0
lines changed

2 files changed

+213
-0
lines changed

‎file/1uUh.gif‎

2.58 MB
Loading

‎file/roll.html‎

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
<html>
2+
<head>
3+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4+
<title>roll</title>
5+
<style type="text/css">
6+
7+
body {
8+
background: radial-gradient(circle at center, #1a1a1a, #000000 80%);
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
height: 100vh;
13+
margin: 0;
14+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
15+
color: #ffffff;
16+
overflow: hidden;
17+
}
18+
19+
.audpar {
20+
position: relative;
21+
width: 80%;
22+
height: 80vh;
23+
padding: 20px;
24+
overflow-y: auto;
25+
scroll-snap-type: y mandatory;
26+
z-index: 70;
27+
background: rgba(255, 255, 255, 0.1);
28+
border-radius: 15px;
29+
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
30+
backdrop-filter: blur(15px);
31+
border: 2px solid rgba(255, 255, 255, 0.2);
32+
}
33+
34+
.audchild {
35+
margin: 10px;
36+
padding: 20px;
37+
height: 95%;
38+
scroll-snap-align: center;
39+
scroll-snap-stop: always;
40+
display: flex;
41+
flex-direction: column;
42+
justify-content: center;
43+
align-items: center;
44+
animation: fly 0.6s ease-out;
45+
46+
}
47+
48+
img {
49+
background-image:url('1uUh.gif');
50+
background-repeat:no-repeat;
51+
background-size:cover;
52+
max-width: 90%;
53+
max-height: 90%;
54+
55+
border-radius: 10px;
56+
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.8);
57+
border: 2px solid rgba(255, 255, 255, 0.1);
58+
transition: transform 0.3s, box-shadow 0.3s;
59+
}
60+
61+
img:hover {
62+
transform: scale(1.2);
63+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
64+
}
65+
66+
audio {
67+
margin-top: 15px;
68+
outline: none;
69+
}
70+
71+
@keyframes fly {
72+
0% {
73+
transform: translateY(-20px);
74+
opacity: 0.3;
75+
}
76+
100% {
77+
transform: translateY(0);
78+
opacity: 1;
79+
}
80+
}
81+
82+
h4 {
83+
position: fixed;
84+
bottom: 3%;
85+
left: 50%;
86+
transform: translateX(-50%);
87+
color: #fffff;
88+
font-size: 16px;
89+
font-weight: bold;
90+
text-transform: uppercase;
91+
letter-spacing: 3px;
92+
z-index: 100;
93+
padding: 8px;
94+
margin: 0;
95+
border-radius: 8px;
96+
box-shadow: 0 4px 20px rgba(0, 240, 255, 0);
97+
backdrop-filter: blur(8px);
98+
transition: all 0.3s;
99+
}
100+
101+
h4:hover {
102+
color: #ffffff;
103+
box-shadow: 0 4px 30px rgba(0, 240, 255, 0.5);
104+
}
105+
106+
107+
audio{
108+
109+
display:none;
110+
}
111+
</style>
112+
</head>
113+
114+
<body>
115+
<h4>Roll</h4>
116+
<div id="audaudparr" class="audpar">
117+
118+
</div>
119+
120+
121+
122+
<script type="text/javascript">
123+
124+
async function reell(){
125+
126+
let ff= await fetch("https://api.github.com/repos/microintel/endgram/contents/audio/30S");
127+
let xx= await ff.json();
128+
let xim = await fetch("https://api.github.com/repos/microintel/endgram/contents/photo");
129+
let imgX= await xim.json();
130+
131+
//let ra = await fetch("https://picsum.photos/200/300?grayscale");
132+
133+
134+
135+
136+
for(let x=0;x<xx.length;x++){
137+
138+
let ausrc= xx[x]["download_url"];
139+
140+
let ranI= Math.floor(Math.random() * parseInt(xx.length));
141+
let iU= imgX[ranI]["download_url"];
142+
let stu=`
143+
144+
<img src="${iU}" alt="loading" loading="lazy">
145+
<audio src="${ausrc}"></audio>
146+
147+
`;
148+
let xxx= document.createElement("div");
149+
xxx.className="audchild";
150+
xxx.innerHTML=stu;
151+
152+
document.getElementById("audaudparr").appendChild(xxx);
153+
}
154+
155+
han();
156+
}
157+
reell();
158+
159+
160+
function han(){
161+
162+
let p = document.getElementById("audaudparr");
163+
let c = p.querySelectorAll(".audchild");
164+
165+
let opt = {
166+
root: null,
167+
threshold: 0.7
168+
};
169+
170+
let cau = null;
171+
172+
function cal(ent) {
173+
ent.forEach((em) => {
174+
let au = em.target.querySelector("audio");
175+
if (!em.isIntersecting && cau === au) {
176+
au.pause();
177+
}
178+
});
179+
}
180+
181+
c.forEach((el) => {
182+
let au = el.querySelector("audio");
183+
184+
el.addEventListener("click", () => {
185+
if (au.paused) {
186+
if (cau && cau !== au) {
187+
cau.pause();
188+
cau.currentTime = 0;
189+
}
190+
au.currentTime = 0;
191+
au.play();
192+
cau = au;
193+
} else {
194+
au.pause();
195+
cau = null;
196+
}
197+
});
198+
});
199+
200+
let obs = new IntersectionObserver(cal, opt);
201+
c.forEach((el) => {
202+
obs.observe(el);
203+
});
204+
205+
206+
}
207+
208+
209+
210+
211+
</script>
212+
</body>
213+
</html>

0 commit comments

Comments
 (0)