Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	foxin webpage
ID	5741647200436224
Created	1 months ago, 1731970657696
Updated	1 months ago, 1732133563669
Code	<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>foxin webpage</title> </head> <!-- Inter font --> <link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet"> <!-- Material Icons --> <link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet"/> <!-- Material Symbols Outlined --> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/> <!-- Oswald --> <link href="https://fonts.googleapis.com/css2?family=Oswald" rel="stylesheet"> <!-- Raleway --> <link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet"> <!-- Main Styling --> <style> :root { --header-color: rgb(82, 54, 21); --headertext-color: rgb(255, 255, 255); --headerline-color: rgb(112, 65, 19); --headertexthover-color: rgb(247, 220, 163); --foxin-color: rgb(173, 126, 45); --bg-color: rgb(46, 46, 46); --p-color: rgb(247, 247, 247); --seperator-color: rgb(41, 3, 6); --homepagetitle-color: rgb(255, 196, 0); --offpage-color: rgb(66, 66, 66); --offpagetop-color: rgb(99, 99, 99); transition: 0.2s ease; } .light { --header-color: rgb(224, 164, 90); --headertext-color: rgb(255, 247, 235); --headerline-color: rgb(217, 155, 84); --headertexthover-color: rgb(247, 223, 188); --foxin-color: rgb(245, 193, 81); --bg-color: rgb(245, 245, 245); --p-color: rgb(0, 0, 0); --seperator-color: rgb(41, 3, 6); --homepagetitle-color: rgb(232, 212, 148); --offpage-color: rgb(230, 230, 230); --offpagetop-color: rgb(245, 245, 245); transition: 0.2s ease; } body { width: 100vh; height: 100vh; margin: 0; background-color: var(--bg-color); padding: 0; justify-content: center; align-items: center; overflow-x: hidden; text-align: center; scroll-behavior: smooth; overflow-x: hidden; } .page { text-align: left; -webkit-animation: fadeIn 1s ease; } h1 { font-family: Raleway; font-weight: bold; color: var(--p-color); text-align: center; padding: 0px 70px; } p { font-family: Raleway; color: var(--p-color); text-align: center; padding: 0px 70px; } .scroll-element { opacity: 0; transition: 0.5s opacity; } .scrolled { opacity: 1; } .scrolled.left { animation: slideInLeft 0.5s ease-in-out both; animation: fadeIn 0.5s ease; } .scrolled.right{ animation: slideInRight 0.5s ease-in-out both; animation: fadeIn 0.5s ease; } .scrolled.up{ animation: slideInUp 0.5s ease-in-out both; animation: fadeIn 0.5s; } * { box-sizing: border-box; } </style> <!-- Footer styling --> <style> footer { background-color: var(--header-color); color: var(--headertext-color); padding: 25px; margin: 0px; text-align: center; font-size: 14px; font-family: Oswald; } footer .footer-content { margin: 0 auto; position: relative; /* Ensures footer content is above the pseudo-element / z-index: 2; } footer .button-link { text-decoration: none; background-color: var(--foxin-color); color: var(--headertext-color); padding: 10px 20px; border-radius: 5px; margin: 5px; transition: background-color 0.3s ease; } footer .button-link:hover { background-color: var(--homepagetitle-color); } footer .social-links { margin: 0px 0; } footer .social-links a { text-decoration: none; margin: 0 10px; color: white; } footer .social-links a:hover { color: #3498db; } footer .copy-text { margin-top: 20px; font-size: 12px; } </style> <!-- Header styling --> <style> / Heading with Material Icon / .page-heading { text-align: center; margin-top: 50px; } .page-heading h1 { align-items: center; font-size: 2.0em; color: var(--headertext-color); font-family: Oswald; } .page-heading .material-icons { font-size: 1.0em; margin-right: 15px; color: var(--headertext-color); / Icon color / background-color: rgba(0, 0, 0, 0.2); border-radius: 14px; padding: 5px 12px; transform: translateY(3px); } / Paragraph under the heading / .page-heading p { text-align: center; font-size: 1em; color: var(--headertext-color); font-family: Raleway; transform: translateY(-10px); padding: 0px 0px; } / Parallax image section (styles for content inside it) / .parallax { position: relative; height: 200px; border-bottom: 3px solid var(--header-color); background-attachment: fixed; / Parallax effect / background-size: cover; background-position: center; transition: background-position 0.2s; / Smooth transition for parallax / } / Gradient overlay on top of the image / .parallax::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(255, 170, 0, 0.2) 0%, rgba(227, 194, 127, 0.1) 100%); / More intense gradient / pointer-events: none; / So it doesn't block clicks / } / Position content on top of the parallax image / .parallax-content { position: absolute; top: 26%; / Center the content vertically / left: 50%; / Center the content horizontally / transform: translate(-50%, -50%); / Offset the content by half of its width and height / color: white; / White text on the image / text-align: center; z-index: 1; / Ensure content is on top of the image / } </style> <!-- Navbar styling --> <style> .navbar { align-items: center; background: var(--header-color); border-bottom: 1px solid var(--headerline-color); height: 64px; margin: 0px 0px; padding: 0px 12px; } .navbar a.navlink { font-family: Inter; color: var(--headertext-color); text-decoration: none; line-height: 64px; padding: 0px 6px; transition: 0.5s ease; height: 1px; } .navbar a.navlink:hover { color: var(--headertexthover-color); transition: 0.5s ease; } .navbar a.navlink.material-icon { font-size: 20px; font-family: Material Icons; margin-top: -1.5px; } .navbar a.navlink.menubtn { font-family: Material Icons; transition: 0.25 ease; font-size: 30px; padding: 0px 12px; border-radius: 20px; height: 20px; } .navbar a.navlink.menubtn:hover { font-family: Material Icons; transition: 0.25 ease; font-size: 30px; padding: 0px 12px; border-radius: 20px; height: 20px; color: var(--headertexthover-color); } .navbar a.navlink.themebtn { font-family: Material Icons; transition: 0.25 ease; font-size: 30px; padding: 0px 12px; border-radius: 20px; height: 20px; } .material-icon { font-size: 26px; font-family: Material Icons; } .navbar a.navlink.team-logo { height: 64px; font-size: 34px; font-family: Oswald; color: var(--headertext-color); } .float-right { float: right; } .float-left { float: left; } </style> <!-- Sidenav styling --> <style> #overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 10; display: none; } #overlay.on { display: block; } #sidenav { display: block; position: fixed; top: 0; right: -250px; bottom: 0; width: 250px; box-shadow: 0 6px 8px rgba(0, 0, 0, 0.22); transition: all 0.25s; background-color: var(--header-color); z-index: 100; border-bottom: 2px; } #sidenav.on { right: 0px; } #sidenav a { display: block; padding: 25px 50px; color: var(--headertext-color); text-decoration: none; font-weight: 500; transition: all 0.25s; text-align: right; font-family: Inter; text-shadow: 5px 5px 10px rgb(0 0 0 / 50%); } #sidenav a:hover { text-shadow: 5px 5px 10px rgb(0 0 0 / 80%); background-color: var(--headerline-color); color: var(--headertexthover-color); box-shadow: 0 0 10px rgb(0 0 0 / 20%); } #sidenav h2 { padding: 0 26px; text-align: right; color: var(--headertext-color); font-family: Inter, Bold; font-weight: 500px; text-shadow: 5px 5px 10px rgb(0 0 0 / 60%); } #sidenav hr { box-shadow: 0 0 10px rgb(0 0 0 / 60%); border: 0.1px solid rgb(0, 0, 0, 0.2); } #sidenav span { color: var(--headertext-color); font-family: Material Icons; font-size: 22px; margin-left: 10px; text-decoration: none; padding: 4px 10px; vertical-align: middle; background-color: rgb(255, 255, 255, 0.2); border-radius: 20px; transform: translateX(10px); } #sidenav .closebtn { position: absolute; top: -15px; right: 24px; font-size: 36px; margin-right: 152px; height: 30px; padding: 25px 25px; } </style> <!-- Member styling --> <style> / Container for the whole team and sorting section / .team-container { height: 400px; padding: 20px; margin: 40px; background-color: var(--offpage-color); border-radius: 6px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); overflow-y: auto; text-align: center; } / Sorting Navbar for sorting buttons / .sorting-navbar { display: flex; justify-content: center; background-color: #fff; margin-bottom: 20px; border-radius: 4px; } .sorting-navbar button { padding: 10px 20px; font-size: 16px; color: white; background-color: var(--header-color); border: none; cursor: pointer; } .sorting-navbar button:hover { background-color: var(--headerline-color); } / Active sorting button style / .sorting-navbar button.active { background-color: var(--foxin-color); font-weight: bold; } / Grid layout for team members / .grid-container { display: grid; gap: 16px; } .grid-item { border: 1px solid #ccc; border-radius: 8px; padding: 16px; text-align: center; background-color: var(--offpagetop-color); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .grid-item h3 { margin: 0; font-size: 1.2rem; color: #333; } .grid-item p { margin: 8px 0; color: var(--p-color); } .grid-item a { font-family: Raleway; text-decoration: none; color: var(--header-color); font-weight: bold; transition: 0.3s ease; } .grid-item a:hover { font-family: Raleway; text-decoration: none; color: var(--headertexthover-color); font-weight: bold; } </style> <!-- Homepage styling --> <style> .homepageImage { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Landscape_-_Giuseppe_De_Nittis.jpg/640px-Landscape_-_Giuseppe_De_Nittis.jpg'); position: relative; width: 100%; height: 534px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; align-items: center; justify-content: center; display: flex; color: white; margin-bottom: 30px; padding: 0px 0px; border-bottom: 2px solid var(--seperator-color); } .homepageImage h1.foxin { font-size: 75px; font-family: Lilita One; color: var(--homepagetitle-color); font-weight: 341px; height: 86px; background-color: rgb(201, 139, 140, 0.5); border: 4px solid rgb(255, 255, 255, 0.6); } .homepageImage h1.team { height: 64px; font-size: 58px; font-family: Oswald; color: var(--headertext-color); } .pageNavigator { height: 200px; width: 600px; } .containerhome { display: grid; grid-template-columns: repeat(3, 1fr); / 3 boxes side by side / gap: 20px; max-width: 600px; / Container width / width: 100%; / Ensures responsiveness / margin: 0 auto; / Centers the container / padding: 10px; box-sizing: border-box; } .boxhome { display: flex; flex-direction: column; justify-content: space-between; / Ensures button stays at the bottom / align-items: center; / Centers the content horizontally / background-color: var(--offpage-color); / Background color / padding: 10px; border-radius: 10px; / Rounded corners / box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); / Shadow for depth / height: 350px; / Fixed height for consistency / width: 100%; / Box stretches to fill its column / max-width: 180px; / Ensures it fits within the grid / margin: 0 auto; / Centers each box within the grid / box-sizing: border-box; position: relative; / Prevents overlap, maintains proper stacking / transition: 0.3s ease; } .boxhome:hover { transform: scale(1.05); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } .boxhome h2 { color: var(--p-color); font-size: 22px; font-family: Raleway; font-weight: bold; text-align: center; / Centers the title horizontally / width: 100%; / Ensures title stretches across the full width / box-sizing: border-box; } .boxhome p { color: var(--p-color); font-size: 16px; text-align: center; / Centers text / position: absolute; transform: translateY(40px); } .boxhome button { padding: 12px 18px; background-color: var(--header-color); / Button color / color: var(--headertext-color); border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; font-size: 16px; align-self: center; / Centers button horizontally / margin-top: 10px; / Adds space between the paragraph and button / position: relative; / Ensures the button remains inside the box / } .boxhome button:hover { background-color: var(--foxin-color); / Button hover color / } </style> <!-- CSS Webkit animations --> <style> @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes slideInLeft{ from { -webkit-transform: translateX(-100px); transform: translateX(-100px); } to { -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes slideInRight{ from { -webkit-transform: translateX(100px); transform: translateX(100px); } to { -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes slideInUp{ from { -webkit-transform: translateY(100px); transform: translateY(100px); } to { -webkit-transform: translateY(0); transform: translateY(0); } } </style> <!-- Projects Styling --> <style> .no-results-message { font-size: 22px; color: p-color; text-align: center; margin-top: 20px; } / Parallax background setup / .parallaxprojects { position: relative; width: 600px; height: 600px; margin: 2.5%; align-items: center; background-size: cover; z-index: 1; border-radius: 6px; overflow: hidden; / Prevent any overflow / } / Project Section / .project-section { height: 100%; position: absolute; justify-content: center; align-items: center; top: 0; left: 0; background-color: var(--offpage-color); border-radius: 15px; overflow: hidden; z-index: 2; } / Square Navbar inside the project section / .project-navbar { width: 100%; height: 60px; background-color: var(--header-color); display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; z-index: 3; } / Search Bar and Dropdown Buttons inside the navbar / .navbar-container { display: flex; justify-content: center; align-items: center; } .navbar-container input { padding: 10px; width: 250px; border-radius: 5px; border: none; font-size: 16px; margin: 10px; transform: translateX(10px); } .navbar-container .sort-container { position: relative; cursor: pointer; } .navbar-container .sort-container button { padding: 10px; background-color: var(--header-color); border: none; border-radius: 5px; color: var(--headertext-color); font-size: 16px; display: flex; align-items: center; transition: 0.3s ease; } .navbar-container .sort-container button:hover { background-color: var(--foxin-color); } .navbar-container .sort-container button:after { content: " ▼"; font-size: 12px; } / Adjusting dropdown / .navbar-container .dropdown { display: none; position: absolute; top: 35px; / Adjusted for proper visibility / margin: 10px; left: 0; background-color: var(--header-color); width: auto; / Adjust to content / min-width: 200px; / Ensure a minimum width / border-radius: 5px; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); z-index: 2; transition: 0.3s ease; } .navbar-container .dropdown button { width: 110%; padding: 10px; background-color: var(--header-color); border: none; color: white; text-align: left; font-size: 14px; cursor: pointer; transform: translateX(-10px); transition: 0.3s ease; border-radius: 0px; } .navbar-container .dropdown button:hover { background-color: var(--foxin-color); } / Content area inside the project section / .project-content { padding: 80px 20px 20px; color: white; width: 100%; text-align: center; height: calc(100% - 80px); overflow-y: auto; display: grid; grid-template-columns: repeat(2, 1fr); / 2 columns / gap: 20px; } / Card Styling / .pcard { background-color: var(--offpagetop-color); color: #333; padding: 15px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 100%; / Ensure it fills the available space / max-width: 250px; / Set a max-width to prevent overflow / box-sizing: border-box; / Ensure padding and border are within the width / } .pcard img { width: 100%; height: 200px; object-fit: cover; border-radius: 5px; cursor: pointer; / Makes the image clickable / transition: 0.3s ease; } .pcard img:hover { transform: scale(1.05); } .pcard a { margin: 5px 0; font-size: 18px; cursor: pointer; font-family: Raleway; font-weight: bold; text-decoration: none; color: var(--p-color); transition: 0.3s ease; } .pcard a:hover { margin: 5px 0; font-size: 18px; cursor: pointer; font-family: Raleway; font-weight: bold; text-decoration: none; color: var(--foxin-color); } .pcard p { font-size: 14px; color: var(--p-color); } .pcard .creator-info { font-size: 14px; } .pcard .pchallenge-level { font-size: 14px; } .pcard .points { font-size: 14px; padding: 10px; border-radius: 2; background-color: var(--foxin-color); } / Scrollbar styles / .project-content::-webkit-scrollbar { width: 8px; } .project-content::-webkit-scrollbar-thumb { background-color: #7f8c8d; border-radius: 5px; } .project-content::-webkit-scrollbar-track { background-color: #ecf0f1; } </style> <!-- About Styling --> <style> .carousel-wrapper { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; max-width: 400px; / Smaller width / height: 200px; / Smaller height / margin: 0 auto; overflow: hidden; background-color: var(---offpage-color); border-radius: 8px; padding: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .carousel-images { display: flex; transition: transform 0.2s ease-in-out; / Faster transition for smoothness / width: 100%; } .carousel-images img { width: 150px; / Small image size / height: 150px; / Small image size / object-fit: cover; / Ensure the image covers the square space / transition: transform 0.3s ease; cursor: default; / Keep cursor normal on hover / flex-shrink: 0; margin: 0 5px; / Small margin between images / } .carousel-images img:hover { transform: scale(1.2); } .carousel-prev, .carousel-next { background-color: transparent; border: none; font-size: 30px; color: var(--p-color); cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; transition: 0.2s ease; } .carousel-prev { left: 10px; } .carousel-next { right: 10px; } .carousel-prev:hover, .carousel-next:hover { color: var(--headertexthover-color); } </style> <!-- Challenge Styling --> <style> .section { width: 100%; margin-bottom: 40px; } .section-header { font-size: 24px; color: var(--p-color); text-align: center; margin-bottom: 10px; font-family: Raleway; } .separator { height: 0px; background-color: var(--header-color); margin-bottom: 20px; } .challengecard-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; max-width: 90%; margin: 0 auto; font-family: Raleway; text-align: center; } .challenge-card { width: 500px; height: 200px; background-color: var(--offpage-color); border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; padding: 20px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; cursor: default; / Disables hand cursor / margin-bottom: 20px; } .highlight { border: 3px solid var(--foxin-color); box-shadow: 0 4px 20px rgba(255, 196, 0, 0.3); background-color: var(--homepagetitle-color); } .ccard-title { font-size: 24px; font-weight: bold; color: var(--p-color); margin-bottom: 5px; } .ccard-description { font-size: 16px; color: var(--p-color); margin-bottom: 10px; } .ccard-dates { font-size: 14px; color: var(--p-color); font-style: italic; } .challenge-card:hover { transform: scale(1.05); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } </style> <body> <!-- Sidenav & Overlay --> <div id="overlay" onclick="openSidenav()"></div> <div id="sidenav"> <div id="back"></div> <a href="javascript:void(0)" class="closebtn" onclick="openSidenav()">×</a> <h2>TEAM FOXIN</h2> <p id=""></p> <hr> <a href="javascript: switchPage(0)" onClick="openSidenav()">Home <span>home</span></a> <a href="javascript: switchPage(1)" onClick="openSidenav()">About <span>search</span></a> <a href="javascript: switchPage(2)" onClick="openSidenav()">Subscribe <span>person_add</span></a> <a href="javascript: switchPage(3)" onClick="openSidenav()">Projects <span>computer</span></a> <a href="javascript: switchPage(4)" onClick="openSidenav()">Members <span>people</span></a> <a href="javascript: switchPage(5)" onClick="openSidenav()">Challenges <span>emoji_events</span></a> <a href="javascript: switchPage(6)" onClick="openSidenav()">Scores<span>leaderboard</span></a> </div> <!-- Navbar --> <nav class="navbar"> <a href='javascript:openSidenav();' class="navlink float-right menubtn">menu</a> <a href='javascript:toggleTheme();' class="navlink float-right menubtn" id="theme-icon">light_mode</a> <a href='javascript:switchPage(1);' class="navlink float-right">About</a> <a href='javascript:switchPage(2);' class="navlink float-right">Subscribe</a> <div> <a href='javascript:switchPage(0);' class="navlink float-left logo team-logo">TEAM FOXIN</a> </div> </nav> <!--- Home Page ---> <div class="page"> <div> <!-- Homepage Image --> <div class="homepageImage"> <div display="block" style="text-align: center;"> <h1 class="team">TEAM FOXIN</h1> <p></p> </div> </div> </div> <h1 class="scroll-element right">The Foxin Lair</h1> <br> <div class="containerhome"> <div class="boxhome"> <h2>The Team</h2> <p>Take a look at the members who bring unmatched expertise and innovation to the table</p> <button onclick="javascript:switchPage(4);">Members</button> </div> <div class="boxhome"> <h2>Projects</h2> <p>Discover the extraordinary talents of our team. Here you will find art constructed by the finest programmers</p> <button onclick="javascript:switchPage(3);">Projects</button> </div> <div class="boxhome"> <h2>Scores</h2> <p>Don't miss out on the latest leaderboard updates! Quick, click this button! Take a look now!</p> <button onclick="javascript:switchPage(6);">Scores</button> </div> </div> <br><br> <p class="scroll-element left">The Foxins' lair is a testament to their ingenuity. Hidden in a dense forest or tucked away in secret places, it’s a place where the team can regroup, plan, and sharpen their skills. Here, the air is always thick with activity—some are practicing their stealth moves, while others engage in mock battles to refine their tactics. They love to playfully tackle one another, a friendly yet fierce rivalry that keeps them sharp. For the Foxins, every day is another opportunity to outwit and outplay those around them, whether it’s through training or real-life confrontations.<br><br><br> Their home thrives on teamwork, with each member understanding their role in the larger strategy. From the youngest to the oldest, they are united by their common goal: to remain the smartest and most cunning. Every detail is important, and every decision counts. Whether they are preparing for their next mission or simply enjoying each other's company, there’s no mistaking the quiet power of the Foxins—always sneaky, always smart, and always in control.</p><br><br> </div> <!-- About Page ---> <div class="page"> <div class="parallax" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Landscape%2C_South_Wales_%284702450%29.jpg/640px-Landscape%2C_South_Wales_%284702450%29.jpg');"> <!-- Content on top of the image --> <div class="parallax-content page-heading"> <h1> <span class="material-icons">search</span> About </h1> <p>Learn about the amazing Team Foxin</p> </div> </div> <h1>What are Foxin ?</h1> <p class="scroll-element up">Below you can see the image of our beloved avatar The Foxin:<br><br></p> <br> <div class="carousel-wrapper"> <button class="carousel-prev"> <span class="material-icons">navigate_before</span> </button> <div class="carousel-images"> <img src="https://www.khanacademy.org/computer-programming/spin-off-of-foxin-seed/4774518598844416/latest.png" alt="Seed"> <img src="https://www.khanacademy.org/computer-programming/spin-off-of-foxin-seedling/4925415563902976/latest.png" alt="Seedling"> <img src="https://www.khanacademy.org/computer-programming/spin-off-of-foxin-sapling/5667073033158656/latest.png" alt="Sapling"> <img src="https://www.khanacademy.org/computer-programming/spin-off-of-foxin-tree/6572573035773952/latest.png" alt="Tree"> <img src="https://www.khanacademy.org/computer-programming/spin-off-of-foxin-ultimate/6155493056626688/latest.png" alt="Ultimate"> </div> <button class="carousel-next"> <span class="material-icons">navigate_next</span> </button> </div> <br> <h1 class="scroll-element up">About the Foxin</h1> <p class="scroll-element up">The Foxins are sneaky and smart. They lurk in the shadows then attack their foes by surprise, coming at them in huge numbers. They do whatever they can to have the upper hand.</p> <h1 class="scroll-element up">What exactly are they</h1> <p class="scroll-element up">Being a special breed of Fox, they have big ears that allow them to hear very well. Their fur comes in orange, brown and white. Their eyes are keen on details.</p> <h1 class="scroll-element up">What do they do</h1> <p class="scroll-element up">Some of their favorite things to do is to tackle other of their kind, hunting, confusing their enemies.</p> </div> <!--- Subscribe Page ----> <div class="page"> <div class="parallax" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/In_the_shadow_of_the_villa_-_Silvestro_Lega.jpg/640px-In_the_shadow_of_the_villa_-_Silvestro_Lega.jpg');"> <!-- Content on top of the image --> <div class="parallax-content page-heading"> <h1> <span class="material-icons">person_add</span> Subscribe </h1> <p>Don't miss out!</p> </div> </div> <h1 class="scroll-element up">Why Subscribe</h1> <p class="scroll-element up">Hey there! Make sure to subscribe to Team Foxlin in the thread below. Join Team Foxlin and unlock the world of creativity, coding, and collaboration! We are a passionate group of coders dedicated to pushing the limits of what’s possible through programming. Whether you're a beginner or a seasoned developer, we offer a supportive environment where learning meets innovation. Subscribe to get access to exciting challenges, cutting-edge projects, and a community that thrives on building something incredible together. Don’t just code—code with purpose, code with Team Foxlin!</p> <h1 class="scroll-element up">How to Subscribe</h1> <p class="scroll-element up">Subscribing is one of the simplest things on Earth! So it’s very worth it. You just have to scroll down to the comments. Then click on a button that says Tips & Thanks. Scroll down farther and at that top of the comments you should find a comment titled Subscribe Thread. In it, simply comment a period only. Now you’re done! Simple or not?...</p> </div> <!-- Projects Page --> <div class="page"> <div class="parallax" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/In_the_shadow_of_the_villa_-_Silvestro_Lega.jpg/640px-In_the_shadow_of_the_villa_-_Silvestro_Lega.jpg');"> <!-- Content on top of the image --> <div class="parallax-content page-heading"> <h1> <span class="material-icons">computer</span> Projects </h1> <p>True art lies in many forms</p> </div> </div> <h1>Projects of Team Foxlin</h1> <p>Hey there! Welcome to Team Foxlin! Below you can find all the beautiful programs created by Team Foxlin! (updated if this wins) These programs may be sorted for easier searching. Go take a look at these arts!</p> <br> <div class="parallaxprojects"> <!-- Project Section --> <div class="project-section"> <!-- Navbar with search and dropdown sort --> <div class="project-navbar"> <div class="navbar-container"> <div class="sort-container"> <button id="sortBtn">Sort</button> <div class="dropdown" id="dropdown"> <button id="sortBy1">Homepage Challenge</button> <button id="sortBy2">Team Avatar Challenge</button> <button id="sortBy3">Python Challenge</button> <button id="sortBy4">Collaboration Challenge</button> <button id="sortByMini1">Mini Challenge 1 - CSS</button> <button id="sortByMini2">Mini Challenge 2 - 100 lines</button> <button id="sortByPointsAsc">Sort by Points (Low to High)</button> <button id="sortByPointsDesc">Sort by Points (High to Low)</button> <button id="sortByUngraded">Sort by Ungraded</button> </div> </div> <input type="text" id="searchInput" placeholder="Search for a project..." /> </div> </div> <!-- Content for the project section --> <div class="project-content" id="projectContent"> <!-- Cards will be dynamically injected here --> </div> </div> </div> </div> <!-- Members Page --> <div class="page"> <div class="parallax" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Contado-dalmata.png/640px-Contado-dalmata.png');"> <!-- Content on top of the image --> <div class="parallax-content page-heading"> <h1> <span class="material-icons">people</span> Foxlin </h1> <p>Alone we can do so little; together we can do so much</p> </div> </div> <h1>Members of Team Foxlin</h1> <p>Hey there! Welcome to Team Foxlin! Below you can find all the members that make Team Foxlin so great! (updated if it wins)</p> <div class="team-container"> <!-- Sorting Navbar for sorting options --> <div class="sorting-navbar"> <button onclick="sortTeam('name')" id="sortByName">Sort by Name</button> <button onclick="sortTeam('levelLowHigh')" id="sortByLevelLowHigh">Level Low to High</button> <button onclick="sortTeam('levelHighLow')" id="sortByLevelHighLow">Level High to Low</button> <button onclick="sortTeam('points')" id="sortByPoints">Sort by Points</button> </div> <!-- Grid container for team members --> <div class="grid-container scroll-element up" id="gridContainer"></div> </div> </div> <!-- Challenges Page --> <div class="page"> <div class="parallax" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/Moutons_%C3%A0_l%E2%80%99abreuvoir%2C_Charles_Jacque%2C_vers_1855.jpg/640px-Moutons_%C3%A0_l%E2%80%99abreuvoir%2C_Charles_Jacque%2C_vers_1855.jpg');"> <!-- Content on top of the image --> <div class="parallax-content page-heading"> <h1> <span class="material-icons">emoji_events</span> Challenges </h1> <p>Our greatest obstacles present the most opportunity</p> </div> </div> <h1>Challenge Timeline</h1> <p>Automatically updated and sorted by date</p> <br> <!-- Current Challenge Section --> <div class="section" id="current-challenge"> <div class="section-header">Current Challenge</div> <div class="separator"></div> <div class="challengecard-container" id="current-container"></div> </div> <!-- Upcoming Challenges Section --> <div class="section" id="upcoming-challenges"> <div class="section-header">Upcoming Challenges</div> <div class="separator"></div> <div class="challengecard-container" id="upcoming-container"></div> </div> <!-- Finished Challenges Section --> <div class="section" id="finished-challenges"> <div class="section-header">Finished Challenges</div> <div class="separator"></div> <div class="challengecard-container" id="finished-container"></div> </div> </div> <!-- Scores Page --> <div class="page"> <div class="parallax" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Landscape_%284702720%29.jpg/640px-Landscape_%284702720%29.jpg');"> <!-- Content on top of the image --> <div class="parallax-content page-heading"> <h1> <span class="material-icons">leaderboard</span> Leaderboard </h1> <p>Your willingness to step up and take on more shows your commitment</p> </div> </div> <br> <h1>Scores</h1> <p>Take a peek at the current scoring in the TCW 2024 Championship!</p> <br> <canvas id="myChart" style="width: 100%"></canvas> <br><br> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> <script> var xValues = ["Delfin", "Echolite", "Foxin"]; var yValues = [30, 20, 60, 0, 100]; var barColors = ["skyblue", "#0A2", "darkorange"]; new Chart("myChart", { type: "bar", data: { labels: xValues, datasets: [{ backgroundColor: barColors, data: yValues }] }, options: { legend: { display: false, }, }, }); </script> </div> <!-- footer page --> <footer> <div class="footer-content"> <!-- Links styled as buttons --> <a href="javascript:switchPage(0);" class="button-link">Home</a> <a href="javascript:switchPage(6);" class="button-link">Scores</a> <a href="javascript:switchPage(4);" class="button-link">Team</a> <!-- Copyright text --> <div class="copy-text"> © 2024 Team Foxin. All rights reserved. </div> </div> </footer> </body> <!-- Projects Page --> <script> // Array of project data to create cards dynamically var projects = [ {name: "Team Foxin Homepage 2024", img: "5383075203563520", creator: "Redsus", creatorLvl: "Advanced", challenge: 1, points: 0}, {name: "Project name inserted here", img: "5383075203563520", creator: "Bob", creatorLvl: "Intermediate", challenge: 3, points: 30}, {name: "Project name inserted here", img: "5383075203563520", creator: "Charlie", creatorLvl: "Beginner", challenge: 2, points: 0}, {name: "Project name inserted here", img: "5383075203563520", creator: "Dave", creatorLvl: "Expert", challenge: 5, points: 40}, {name: "Project name inserted here", img: "5383075203563520", creator: "Eve", creatorLvl: "Expert", challenge: 1, points: 60}, {name: "Project name inserted here", img: "5383075203563520", creator: "Frank", creatorLvl: "Intermediate", challenge: 2, points: 35}, {name: "Project name inserted here", img: "5383075203563520", creator: "Grace", creatorLvl: "Beginner", challenge: 4, points: 25}, {name: "Project name inserted here", img: "5383075203563520", creator: "Hank", creatorLvl: "Expert", challenge: 3, points: 45}, {name: "Project name inserted here", img: "5383075203563520", creator: "Ivy", creatorLvl: "Intermediate", challenge: 5, points: 55}, {name: "Project name inserted here", img: "5383075203563520", creator: "Jack", creatorLvl: "Beginner", challenge: 6, points: 0} ]; // Function to create a card element function createCard(project) { var pcard = document.createElement('div'); pcard.classList.add('pcard'); var name = document.createElement('h3'); var nameLink = document.createElement('a'); nameLink.href = "https://www.khanacademy.org/computer-programming/i/" + project.img; nameLink.target = "_blank"; // Opens the link in a new tab nameLink.innerText = project.name; name.appendChild(nameLink); var img = document.createElement('a'); img.href = "https://www.khanacademy.org/computer-programming/i/" + project.img; img.target = "_blank"; var imgTag = document.createElement('img'); imgTag.src = "https://www.khanacademy.org/computer-programming/new-program/" + project.img + "/latest.png"; img.appendChild(imgTag); var creator = document.createElement('p'); creator.classList.add('creator-info'); creator.innerText = "Creator: " + project.creator; var challenge = document.createElement('p'); var challengeName = ''; challenge.classList.add('challenge-level'); if (project.challenge === 1) { challengeName = "Homepage Challenge"; } else if (project.challenge === 2) { challengeName = "Team Avatar Challenge"; } else if (project.challenge === 3) { challengeName = "Python Challenge"; } else if (project.challenge === 5) { challengeName = "Mini Challenge 1 (CSS)"; } else if (project.challenge === 6) { challengeName = "Mini Challenge 2 (100 lines)"; } else if (project.challenge === 4) { challengeName = "Collaboration Challenge"; } challenge.innerText = challengeName; var points = document.createElement('p'); points.classList.add('points'); points.innerText = project.points === 0 ? "Ungraded" : "Points: " + project.points; pcard.appendChild(name); pcard.appendChild(img); pcard.appendChild(creator); pcard.appendChild(challenge); pcard.appendChild(points); return pcard; } // Function to display the projects on the page function populateProjects(projectList) { var content = document.getElementById('projectContent'); content.innerHTML = ''; // Clear existing content // If no projects, show "No Projects Found" message if (projectList.length === 0) { var noResultsMessage = document.createElement('p'); noResultsMessage.classList.add('no-results-message'); noResultsMessage.innerText = 'No projects found'; content.appendChild(noResultsMessage); } else { projectList.forEach(function(project) { var card = createCard(project); content.appendChild(card); }); } } // Function to handle search functionality (only starts with query) function searchProjects() { var searchQuery = document.getElementById('searchInput').value.toLowerCase(); // Filter the projects list by the search query, matching only the start of the name var filteredProjects = projects.filter(function(project) { return project.name.toLowerCase().startsWith(searchQuery); // Match only from the start }); // Populate with filtered projects (or show "No projects found" if none match) populateProjects(filteredProjects); } // Sort projects by challenge level function sortByChallengeLevel(level) { var sortedProjects = projects.slice().filter(function(project) { return project.challenge === level; }); populateProjects(sortedProjects); } // Sort projects by points (low to high) function sortByPointsAsc() { var sortedProjects = projects.slice().sort(function(a, b) { return (a.points === 0 ? 0 : a.points) - (b.points === 0 ? 0 : b.points); }); populateProjects(sortedProjects); } // Sort projects by points (high to low) function sortByPointsDesc() { var sortedProjects = projects.slice().sort(function(a, b) { return (b.points === 0 ? 0 : b.points) - (a.points === 0 ? 0 : b.points); }); populateProjects(sortedProjects); } // Toggle dropdown visibility function toggleDropdown() { var dropdown = document.getElementById('dropdown'); dropdown.style.display = dropdown.style.display === "block" ? "none" : "block"; } // Event listener for search input (updates on key press) document.getElementById('searchInput').addEventListener('input', function() { setTimeout(searchProjects, 300); // Wait for typing to stop before searching }); // Event listener for sort button click (opens dropdown) document.getElementById('sortBtn').addEventListener('click', toggleDropdown); // Event listeners for sorting options document.getElementById('sortBy1').addEventListener('click', function() { sortByChallengeLevel(1); document.getElementById('dropdown').style.display = "none"; }); document.getElementById('sortBy2').addEventListener('click', function() { sortByChallengeLevel(2); document.getElementById('dropdown').style.display = "none"; }); document.getElementById('sortBy3').addEventListener('click', function() { sortByChallengeLevel(3); document.getElementById('dropdown').style.display = "none"; }); document.getElementById('sortBy4').addEventListener('click', function() { sortByChallengeLevel(4); document.getElementById('dropdown').style.display = "none"; }); document.getElementById('sortByMini1').addEventListener('click', function() { sortByChallengeLevel(5); document.getElementById('dropdown').style.display = "none"; }); document.getElementById('sortByMini2').addEventListener('click', function() { sortByChallengeLevel(6); document.getElementById('dropdown').style.display = "none"; }); document.getElementById('sortByPointsAsc').addEventListener('click', function() { sortByPointsAsc(); document.getElementById('dropdown').style.display = "none"; }); document.getElementById('sortByPointsDesc').addEventListener('click', function() { sortByPointsDesc(); document.getElementById('dropdown').style.display = "none"; }); document.getElementById('sortByUngraded').addEventListener('click', function() { var ungradedProjects = projects.filter(function(project) { return project.points === 0; }); populateProjects(ungradedProjects); document.getElementById('dropdown').style.display = "none"; }); // Event to close dropdown if click happens outside document.addEventListener('click', function(event) { var dropdown = document.getElementById('dropdown'); var sortBtn = document.getElementById('sortBtn'); if (!sortBtn.contains(event.target) && !dropdown.contains(event.target)) { dropdown.style.display = "none"; } }); // Initial population of projects populateProjects(projects); </script> <!-- Members Page --> <script> // Array to store team members' data var teamMembers = [ { name: "John Doe", points: 1200, id: "kaid_1191832568232610683566773", level: 5 // Expert }, { name: "Vortex", points: 99999, id: "kaid_1191832568232610683566773", level: 4 // Expert }, { name: "Jane Smith", points: 1000, id: "kaid_1191832568232610683566773", level: 3 // Intermediate }, { name: "Sam Green", points: 800, id: "kaid_1191832568232610683566773", level: 2 // Familiar }, { name: "Alice Brown", points: 1500, id: "kaid_1191832568232610683566773", level: 4 // Advanced }, { name: "Bob White", points: 950, id: "kaid_1191832568232610683566773", level: 1 // Beginner } ]; // Level mapping to display text var levelMap = { 1: "Beginner", 2: "Familiar", 3: "Intermediate", 4: "Advanced", 5: "Expert" }; // Track the current sorting criterion var currentSort = ''; // Function to render team members function renderTeam() { var gridContainer = document.getElementById('gridContainer'); gridContainer.innerHTML = ''; // Clear previous content // Loop through team members and create grid items for (var i = 0; i < teamMembers.length; i++) { var member = teamMembers[i]; // Create a grid item for each team member var gridItem = document.createElement('div'); gridItem.classList.add('grid-item'); // Generate content for each member gridItem.innerHTML = '<h3><a href="https://www.khanacademy.com/profile/' + member.id + "/projects" + '" target="_blank">' + member.name + '</a></h3>' + '<p>Points: ' + member.points + '</p>' + '<p>Level: ' + levelMap[member.level] + '</p>'; // Append the grid item to the container gridContainer.appendChild(gridItem); } } // Function to sort the team members based on selected criteria function sortTeam(criteria) { // Check if the sorting criterion is the same as the previous one if (currentSort === criteria) return; // Update the current sorting criterion currentSort = criteria; // Remove the active class from all buttons var buttons = document.querySelectorAll('.sorting-navbar button'); for (var i = 0; i < buttons.length; i++) { buttons[i].classList.remove('active'); } // Add the active class to the clicked button document.getElementById('sortBy' + capitalizeFirstLetter(criteria)).classList.add('active'); if (criteria === 'name') { teamMembers.sort(function(a, b) { return a.name.localeCompare(b.name); // Sort alphabetically by name }); } else if (criteria === 'levelLowHigh') { teamMembers.sort(function(a, b) { return a.level - b.level; // Sort by level (low to high) }); } else if (criteria === 'levelHighLow') { teamMembers.sort(function(a, b) { return b.level - a.level; // Sort by level (high to low) }); } else if (criteria === 'points') { teamMembers.sort(function(a, b) { return b.points - a.points; // Sort by points (high to low) }); } renderTeam(); // Re-render the team after sorting } // Utility function to capitalize the first letter of a string function capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1); } // Initial render of the team members renderTeam(); </script> <!-- Switch Page --> <script> var pages = document.getElementsByClassName("page"); //switch page function function switchPage(index) { for (var i = 0; i < pages.length; i++) { pages[i].style.display = "none"; } //page style pages[index].style.display = "block"; //make it go to the top of the page window.scroll(0, 0); behavior: smooth; } //default page switchPage(0); </script> <!-- Sidenav --> <script> //open sidenav function function openSidenav() { //toggle sidenav and overlay document.getElementById("sidenav").classList.toggle("on"); document.getElementById("overlay").classList.toggle("on"); } </script> <!-- Scrolled function --> <script> //credit to polars tutorial for helping me learn function scrolled() { //get scroll elements const scrollElements = document.querySelectorAll('.scroll-element'); //loop for all scroll elements for (let i = scrollElements.length; i--;) { //check if scrolled if(scrollElements[i].getBoundingClientRect().top < window.innerHeight) { scrollElements[i].classList.add('scrolled'); } else{ scrollElements[i].classList.remove('scrolled'); } } } //check scroll scrolled(); //the event listener document.addEventListener('scroll', scrolled); </script> <!-- Toggle Theme --> <script> function toggleTheme() { document.body.classList.toggle("light"); if (document.getElementById("theme-icon").innerHTML === "light_mode") { document.getElementById("theme-icon").innerHTML = "dark_mode"; } else { document.getElementById("theme-icon").innerHTML = "light_mode"; } } toggleTheme(); </script> <!-- About Page --> <script> // Linear interpolation function for smooth movement function lerp(start, end, t) { return start + (end - start) t; } var currentIndex = 0; var images = document.querySelectorAll('.carousel-images img'); var totalImages = images.length; var slider = document.querySelector('.carousel-images'); var targetX = 0; // Target X position of the slider var imageWidth = 150; // Each image width and height is 150px (small size) var gap = 10; // Small gap between images var shiftAmount = 100; // Offset the carousel by 75px // Calculate initial offset to shift all images by 75px function updateInitialPosition() { // Set initial position of the carousel to be 75px off slider.style.transform = 'translateX(' + shiftAmount + 'px)'; } // Update the position of the slider function updateSliderPosition() { // Move the slider to the target position using lerp targetX = -(currentIndex * (imageWidth + gap)); // 150px per image + 10px gap between images } // Update the position smoothly using lerp function animateSlider() { var currentTransformValue = parseFloat(slider.style.transform.replace('translateX(', '').replace('px)', '') \|\| 0); var newTransformValue = lerp(currentTransformValue, targetX + shiftAmount, 0.2); // Added shiftAmount to the target position slider.style.transform = 'translateX(' + newTransformValue + 'px)'; if (Math.abs(newTransformValue - (targetX + shiftAmount)) > 1) { requestAnimationFrame(animateSlider); // Keep updating until the position is near the target } } function moveToNextImage() { currentIndex = (currentIndex + 1) % totalImages; // Loop back to first image updateSliderPosition(); animateSlider(); } function moveToPreviousImage() { currentIndex = (currentIndex - 1 + totalImages) % totalImages; // Loop back to last image updateSliderPosition(); animateSlider(); } // Next button event listener document.querySelector('.carousel-next').addEventListener('click', moveToNextImage); // Previous button event listener document.querySelector('.carousel-prev').addEventListener('click', moveToPreviousImage); // Initial centering of the first image (with 75px offset) updateInitialPosition(); // Initial positioning (optional, in case the page is reloaded) updateSliderPosition(); </script> <!-- Challenge Page --> <script> // Challenge Cards Data var challengeCards = [ { title: 'Homepage Challenge (Challenge 0)', description: 'Create a homepage for your team.', startDate: '2024-11-11', endDate: '2024-11-18' }, { title: 'Challenge 1 - Team Avatar', description: 'Use your team avatar in a program.', startDate: '2024-11-18', endDate: '2024-11-25' }, { title: 'Challenge 2 - Python', description: 'Create a Python program!', startDate: '2024-11-25', endDate: '2024-12-02' }, { title: 'Challenge 3 - Collaboration', description: 'Your team will split into groups, and each group will work on an entry together.', startDate: '2024-12-02', endDate: '2024-12-16' }, { title: 'Mini Challenge 1 - CSS Challenge', description: 'Using the template, add CSS to the webpage.', startDate: '2024-12-02', endDate: '2024-12-09' }, { title: 'Mini Challenge 2 - 100 Lines', description: 'Create a program in just 100 lines of code.', startDate: '2024-12-09', endDate: '2024-12-16' } ]; // Function to check if today's date is within the range var isDateWithinRangeForChallenges = function(startDate, endDate) { var today = new Date(); var start = new Date(startDate); var end = new Date(endDate); return today >= start && today <= end; }; // Function to determine if the challenge is finished var isChallengeFinishedForChallenges = function(endDate) { var today = new Date(); var end = new Date(endDate); return today > end; }; // Function to create a single challenge card var createChallengeCard = function(card) { var cardElement = document.createElement('div'); cardElement.classList.add('challenge-card'); // Highlight the current challenge if (isDateWithinRangeForChallenges(card.startDate, card.endDate)) { cardElement.classList.add('highlight'); } var title = document.createElement('div'); title.classList.add('ccard-title'); title.innerText = card.title; var description = document.createElement('div'); description.classList.add('ccard-description'); description.innerText = card.description; var dates = document.createElement('div'); dates.classList.add('ccard-dates'); dates.innerText = card.startDate + ' - ' + card.endDate; cardElement.appendChild(title); cardElement.appendChild(description); cardElement.appendChild(dates); return cardElement; }; // Function to render all challenge cards and categorize them var renderChallengeCards = function() { var currentContainer = document.getElementById('current-container'); var upcomingContainer = document.getElementById('upcoming-container'); var finishedContainer = document.getElementById('finished-container'); // Clear existing content currentContainer.innerHTML = ''; upcomingContainer.innerHTML = ''; finishedContainer.innerHTML = ''; // Categorize and render the cards for (var i = 0; i < challengeCards.length; i++) { var card = challengeCards[i]; var cardElement = createChallengeCard(card); if (isDateWithinRangeForChallenges(card.startDate, card.endDate)) { // Current challenge currentContainer.appendChild(cardElement); } else if (isChallengeFinishedForChallenges(card.endDate)) { // Finished challenge finishedContainer.appendChild(cardElement); } else { // Upcoming challenge upcomingContainer.appendChild(cardElement); } } }; // Call renderChallengeCards function to inject cards into the appropriate sections renderChallengeCards(); </script> </html> <!-- "vortex is better then dat" - vortex everything will be updated if this wins -->
Folds	1,2179
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgLvO9r-ZCgw
Votes	12
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Vortex
Author Name	ZacharyBellante
Author ID	kaid_1191832568232610683566773
Author Profile Access	PUBLIC

Archive Data

Added	1 months ago, 1732322901396
Updated	1 months ago, 1732322901396
Source Deleted	unknown