mirror of
https://github.com/vectras-team/as3.github.io.git
synced 2024-11-23 07:01:53 +00:00
Add files via upload
This commit is contained in:
Ahmed Barakat
GitHub
commit
30c67c141a
BIN
Roboto-Regular.ttf
Normal file
BIN
Roboto-Regular.ttf
Normal file
Binary file not shown.
BIN
Textures/icon.png
Normal file
BIN
Textures/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
Textures/main.mp4
Normal file
BIN
Textures/main.mp4
Normal file
Binary file not shown.
17
animation.js
Normal file
17
animation.js
Normal file
@ -0,0 +1,17 @@
|
||||
function reveal() {
|
||||
var reveals = document.querySelectorAll(".reveal");
|
||||
|
||||
for (var i = 0; i < reveals.length; i++) {
|
||||
var windowHeight = window.innerHeight;
|
||||
var elementTop = reveals[i].getBoundingClientRect().top;
|
||||
var elementVisible = 150;
|
||||
|
||||
if (elementTop < windowHeight - elementVisible) {
|
||||
reveals[i].classList.add("active");
|
||||
} else {
|
||||
reveals[i].classList.remove("active");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("scroll", reveal);
|
||||
272
index.html
Normal file
272
index.html
Normal file
@ -0,0 +1,272 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Andstation 3</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="icon" href="Textures/icon.png">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<br>
|
||||
<div id="mySidenav" class="sidenav">
|
||||
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
|
||||
<a href="index.html">Home</a>
|
||||
|
||||
</div>
|
||||
<center><h1>AS3</h1></center>
|
||||
|
||||
<br>
|
||||
</div>
|
||||
<hr>
|
||||
<center>
|
||||
<div class="container">
|
||||
<div class="centershow fade">
|
||||
<div class="text911"><h3>The First PS3 Emulator For Android</h3></div>
|
||||
<video src="Textures/main.mp4" id="c911c" loop autoplay="true" muted="true">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<hr width="220px">
|
||||
<center><h1>Trailer</h1></center>
|
||||
<hr width="220px">
|
||||
<br>
|
||||
<br>
|
||||
<span class="reveal">
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<iframe width="80%" max-width="720" height="514" src="https://www.youtube.com/embed/HNAqHcXs5ew?si=iSV7Pb7nun4xLtQm" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
</span>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<hr width="310px">
|
||||
<center><h1>Features</h1></center>
|
||||
<hr width="310px">
|
||||
<br>
|
||||
<br>
|
||||
<div class="reveal">
|
||||
<div class="card">
|
||||
<br>
|
||||
<h1><i class="fa-solid fa-gauge"></i></h1>
|
||||
<div class="card-content">
|
||||
<h2 class="card-title">Performance</h2>
|
||||
<p class="card-description">With the Help of FEX, You will Get an Unmatched Performance with high FPS and Better Gameplay.</p>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<br>
|
||||
<h1><i class="fa-solid fa-x"></i></h1>
|
||||
<div class="card-content">
|
||||
<h2 class="card-title">Termux X11</h2>
|
||||
<p class="card-description">With The Help of Termux X11, you get The Best Experience with the Lowest Latency.</p>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<br>
|
||||
<h1><i class="fa-solid fa-gamepad"></i></h1>
|
||||
<div class="card-content">
|
||||
<h2 class="card-title">Game Support</S></h2>
|
||||
<p class="card-description">With the Help of RPCS3, Andstation 3 Support all The Games that You Can run on RPCS3 Desktop.</p>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<hr width="306px">
|
||||
<center><h1>Download</h1></center>
|
||||
<hr width="306px">
|
||||
<br>
|
||||
<br>
|
||||
<div class="reveal">
|
||||
<div class="card1">
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<img src="Textures/icon.png" draggable="false" id="apppic">
|
||||
<div class="card-content">
|
||||
<br>
|
||||
<br>
|
||||
<h2 class="card-title">Andstation 3</S></h2>
|
||||
<p class="card-description">The First Ever PS3 Emulator for Android, It's a Project aiming to Port RPCS3 on Android Devices</p>
|
||||
<br>
|
||||
<button id="btn911">Coming Soon</button>
|
||||
<br>
|
||||
<br>
|
||||
<h2 class="card-title">Special Thanks to</S></h2>
|
||||
<p class="card-description">FEX</p>
|
||||
<p class="card-description">Proot</p>
|
||||
<p class="card-description">RPCS3</p>
|
||||
<p class="card-description">Pulse Audio</p>
|
||||
<p class="card-description">Termux</p>
|
||||
<br>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<br>
|
||||
<br><br>
|
||||
<hr width="600px">
|
||||
<center><h1>Special Thanks To</h1></center>
|
||||
<hr width="600px">
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<div class="reveal">
|
||||
<div class="card">
|
||||
<br>
|
||||
<div class="card-content">
|
||||
<h2 class="card-title">RPCS3</h2>
|
||||
<p class="card-description">For the Emulator</p>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<br>
|
||||
<div class="card-content">
|
||||
<h2 class="card-title">Termux X11</h2>
|
||||
<p class="card-description">For the Xserver</p>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<br>
|
||||
<div class="card-content">
|
||||
<h2 class="card-title">Proot</S></h2>
|
||||
<p class="card-description">For the Rootfs Runner</p>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<br>
|
||||
<div class="card-content">
|
||||
<h2 class="card-title">Pulse Audio</S></h2>
|
||||
<p class="card-description">For the Sound Server</p>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<br>
|
||||
<div class="card-content">
|
||||
<h2 class="card-title">Ubuntu 22.04</S></h2>
|
||||
<p class="card-description">For the Rootfs</p>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<br>
|
||||
<div class="card-content">
|
||||
<h2 class="card-title">FEX</S></h2>
|
||||
<p class="card-description">For the x86_64 Translation Layer</p>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<br>
|
||||
<div class="card-content">
|
||||
<h2 class="card-title">Turnip</S></h2>
|
||||
<p class="card-description">For the Adreno Drivers</p>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<br>
|
||||
<div class="card-content">
|
||||
<h2 class="card-title">Zink</S></h2>
|
||||
<p class="card-description">For the OpenGL 4 Layer</p>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
</section>
|
||||
<hr>
|
||||
<footer class="footer">
|
||||
<div class="footer-content">
|
||||
<div class="social-links">
|
||||
<a href="https://www.youtube.com/@ahmedbarakat2007" target="_blank" class="footer-link">
|
||||
<i class="fab fa-youtube"></i>
|
||||
<span>YouTube Channel</span>
|
||||
</a>
|
||||
<a href="https://t.me/BlackHawkEmulator" target="_blank" class="footer-link">
|
||||
<i class="fab fa-telegram"></i>
|
||||
<span>Telegram Channel</span>
|
||||
</a>
|
||||
<a href="https://discord.gg/your-server-id" target="_blank" class="footer-link">
|
||||
<i class="fab fa-discord"></i>
|
||||
<span>Discord Server</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="logo">
|
||||
<img src="Textures/icon.png" alt="Logo">
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</center>
|
||||
</body>
|
||||
<script>
|
||||
let slideIndex = 1;
|
||||
showSlides(slideIndex);
|
||||
|
||||
// Next/previous controls
|
||||
function plusSlides(n) {
|
||||
showSlides(slideIndex += n);
|
||||
}
|
||||
|
||||
// Thumbnail image controls
|
||||
function currentSlide(n) {
|
||||
showSlides(slideIndex = n);
|
||||
}
|
||||
|
||||
function showSlides(n) {
|
||||
let i;
|
||||
let slides = document.getElementsByClassName("centershow");
|
||||
let dots = document.getElementsByClassName("dot");
|
||||
if (n > slides.length) {slideIndex = 1}
|
||||
if (n < 1) {slideIndex = slides.length}
|
||||
for (i = 0; i < slides.length; i++) {
|
||||
slides[i].style.display = "none";
|
||||
}
|
||||
for (i = 0; i < dots.length; i++) {
|
||||
dots[i].className = dots[i].className.replace(" active", "");
|
||||
}
|
||||
slides[slideIndex-1].style.display = "block";
|
||||
dots[slideIndex-1].className += " active";
|
||||
}
|
||||
/* Set the width of the side navigation to 250px */
|
||||
function openNav() {
|
||||
document.getElementById("mySidenav").style.width = "250px";
|
||||
}
|
||||
|
||||
/* Set the width of the side navigation to 0 */
|
||||
function closeNav() {
|
||||
document.getElementById("mySidenav").style.width = "0";
|
||||
}
|
||||
</script>
|
||||
<script src="animation.js"></script>
|
||||
</html>
|
||||
392
style.css
Normal file
392
style.css
Normal file
@ -0,0 +1,392 @@
|
||||
@font-face {
|
||||
font-family: myFirstFont;
|
||||
src: url(font.otf);
|
||||
}
|
||||
@font-face{
|
||||
font-family: ph2;
|
||||
src: url(Roboto-Regular.ttf);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: ph2;
|
||||
min-width: fit-content;
|
||||
}
|
||||
h1 {
|
||||
font-family: myFirstFont;
|
||||
color : white;
|
||||
}
|
||||
h3 {
|
||||
font-family: myFirstFont;
|
||||
color : white;
|
||||
text-shadow:
|
||||
0 0 5px #ffffff,
|
||||
0 0 25px #ffffff,
|
||||
0 0 30px #ffffff,
|
||||
0 0 35px #ffffff;
|
||||
}
|
||||
h2 {
|
||||
font-family: ph2;
|
||||
color : white;
|
||||
}
|
||||
p{
|
||||
font-family: ph2;
|
||||
color : white;
|
||||
}
|
||||
a{
|
||||
color:white;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover{
|
||||
opacity: 3;
|
||||
text-decoration: none;
|
||||
transition: 0.7s;
|
||||
}
|
||||
hr{
|
||||
color:#ffffff;
|
||||
}
|
||||
.header{
|
||||
text-align :center;
|
||||
}
|
||||
#c911c{
|
||||
width: 100%;
|
||||
height: 70%; /* Maintain aspect ratio */
|
||||
opacity: 0.35;
|
||||
display: block; /* Remove default margin/padding */
|
||||
}
|
||||
.centershow{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 1900px; /* Adjust as needed */
|
||||
margin: 0 auto; /* Center the container */
|
||||
}
|
||||
.text911{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: white; /* Ensure text is visible against video */
|
||||
font-size: 1.5em; /* Adjust as needed */
|
||||
padding: 10px; /* Optional: Add padding */
|
||||
text-align: center; /* Center text alignment */
|
||||
|
||||
}
|
||||
.h2911{
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
left: 50px;
|
||||
color:white;
|
||||
}
|
||||
.btn911{
|
||||
position: absolute;
|
||||
bottom: 90px;
|
||||
left: 370px;
|
||||
color:white;
|
||||
}
|
||||
#btn911{
|
||||
color:white;
|
||||
background-color:#272a2e;
|
||||
border:solid 0px;
|
||||
width:140px;
|
||||
height:40px;
|
||||
font-family: ph2;
|
||||
}
|
||||
.container {
|
||||
max-width: 50000px;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
.prev, .next {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: auto;
|
||||
margin-top: -22px;
|
||||
padding: 16px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
transition: 0.6s ease;
|
||||
border-radius: 0 3px 3px 0;
|
||||
user-select: none;
|
||||
}
|
||||
.next {
|
||||
right: 0;
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
.prev {
|
||||
left: 0;
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
.prev:hover, .next:hover {
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
}
|
||||
.fade {
|
||||
animation-name: fade;
|
||||
animation-duration: 1.5s;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
from {opacity: .4}
|
||||
to {opacity: 1}
|
||||
}
|
||||
.btnleman{
|
||||
position: absolute;
|
||||
bottom: 70px;
|
||||
left: 400px;
|
||||
color:white;
|
||||
}
|
||||
.card {
|
||||
width: 300px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
background-color: #111111;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
}
|
||||
.card1 {
|
||||
width: 800px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
background-color: #111111;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.card-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin: 0;
|
||||
font-size: 1.5em;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
margin: 8px 0 0;
|
||||
font-size: 1em;
|
||||
color: #666;
|
||||
}
|
||||
/* width */
|
||||
::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background: black;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: white;
|
||||
border-radius:20px;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
.textlist{
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 16px;
|
||||
color:white;
|
||||
}
|
||||
#btn911:hover {
|
||||
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
|
||||
opacity: 0.6;
|
||||
transition: 0.7s;
|
||||
cursor: pointer;
|
||||
}
|
||||
#lemanp{
|
||||
max-width:800px;
|
||||
float:left;
|
||||
margin: 10px;
|
||||
width:90%
|
||||
}
|
||||
#shop{
|
||||
max-width:500px;
|
||||
width:90%;
|
||||
cursor: pointer;
|
||||
}
|
||||
#shop1{
|
||||
max-width:500px;
|
||||
width:70%;
|
||||
height:313px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#shop:hover {
|
||||
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
|
||||
opacity: 0.6;
|
||||
transition: 0.7s;
|
||||
}
|
||||
#shop1:hover {
|
||||
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
|
||||
opacity: 0.6;
|
||||
transition: 0.7s;
|
||||
}
|
||||
.textlist1{
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 16px;
|
||||
color:white;
|
||||
}
|
||||
.sidenav {
|
||||
height: 100%;
|
||||
width: 0;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background-color: #111;
|
||||
overflow-x: hidden;
|
||||
transition: 0.5s;
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.sidenav a {
|
||||
padding: 8px 8px 8px 32px;
|
||||
text-decoration: none;
|
||||
font-size: 25px;
|
||||
color: #818181;
|
||||
display: block;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.sidenav a:hover {
|
||||
color: #f1f1f1;
|
||||
}
|
||||
|
||||
.sidenav .closebtn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 25px;
|
||||
font-size: 36px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
@media screen and (max-height: 450px) {
|
||||
.sidenav {padding-top: 15px;}
|
||||
.sidenav a {font-size: 18px;}
|
||||
}
|
||||
|
||||
/* Page content */
|
||||
.main {
|
||||
margin-left: 200px; /* Same as the width of the sidenav */
|
||||
}
|
||||
#menu2{
|
||||
float:right;
|
||||
margin-top: -43px;
|
||||
margin-right:50px;
|
||||
width:0px;
|
||||
height:0px;
|
||||
border:solid black;
|
||||
background-color: black;
|
||||
}
|
||||
.reveal{
|
||||
position: relative;
|
||||
transform: translateY(150px);
|
||||
opacity: 0;
|
||||
transition: 1s all ease;
|
||||
}
|
||||
|
||||
.reveal.active{
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
.endpage{
|
||||
border:solid black;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
max-width: 90000000px;
|
||||
}
|
||||
#endpic{
|
||||
width:200px;
|
||||
float:left;
|
||||
margin:50px;
|
||||
margin-top:70px;
|
||||
}
|
||||
#apppic{
|
||||
width:200px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.btn9112{
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 430px;
|
||||
color:white;
|
||||
}
|
||||
#ahmed{
|
||||
width: 190px;
|
||||
border-radius:10px;
|
||||
}
|
||||
#follow{
|
||||
margin:40px;
|
||||
}
|
||||
.footer {
|
||||
background-color: #000000; /* Dark background for the footer */
|
||||
color: #fff; /* White text color */
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20px; /* Space between social links and the logo */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
gap: 20px; /* Space between social links */
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
color: #fff; /* White text color */
|
||||
text-decoration: none; /* Remove underline from links */
|
||||
font-size: 1.2em; /* Font size for icons and text */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px; /* Space between icon and text */
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
color: #ffcc00; /* Color change on hover */
|
||||
}
|
||||
|
||||
.footer-link i {
|
||||
font-size: 1.5em; /* Icon size */
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: absolute;
|
||||
left: 20px; /* Distance from the right edge */
|
||||
top: 50%;
|
||||
transform: translateY(-50%); /* Center vertically relative to the footer */
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user