Viewing Program

Program Data

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

Title	Alpha Press
ID	6222978941894656
Created	6 months ago, 1719932125126
Updated	6 months ago, 1719933610766
Code	<!DOCTYPE html> <!--This page is responsive - Try adjusting your screen size to see what happens! Alpha Press Currently brand new! Huge updates coming soon. Team Alpha link: https://www.khanacademy.org/computer-programming/team-alpha/4940793064636416 Team Alpha Web Division link: https://www.khanacademy.org/computer-programming/team-alpha-web-devs-ft-leaferstudios/5113113829097472 Released: 2 July 2024 From the About Page: Alpha Press is a division of Team Alpha specializing in bringing high-quality information, news, useful tutorials, contests, and events related to computer programming. We are open for anyone willing to create high-quality content for the KACP community, including tutorials, news, contests, events, and more. You must join Team Alpha and after you get accepted you have to notify LeaferStudios (@LeaferStudios) that you are interested in becoming a member of Alpha Press. Good writing skills are valued, but not essential. --> <!-- (c) 2024 LeaferStudios --> <html lang='en'> <!-- Head --> <head> <meta charset="utf-8"> <meta name="description" content="Alpha Press Homepage by LeaferStudios"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Alpha Press</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css"> <link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet" /> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet"> <script> var reserved = ['LeaferStudios', 'kiaantolia', 'The Reviewer', 'jd2r', 'Duke']; </script> <style> * { --a: linear-gradient(34deg, rgb(152, 165, 224), rgb(147, 186, 237)); --b: blue; --c: orange; --d: green; --m: #01579B; } html, body { height: 100%; width: 100%; margin: auto; padding: auto; font-family: "IBM Plex Sans", sans-serif; } h1, h2, h3, h4, h5, h6 { font-weight: 400; color: rgb(41, 41, 41); font-family: "IBM Plex Sans", sans-serif; } p { line-height: 24px; font-family: "IBM Plex Sans", sans-serif; } nav { background: rgba(255, 255, 255, 0.5); height: 64px; line-height: 64px; padding: 0 15px; transition: all 0.1s; animation: 0.4s nav-anim forwards; z-index: 100; } @keyframes nav-anim { from { transform: translate(0px, -64px); } to { transform: translate(0px, 0px); } } nav a { margin: 0 15px; color: rgb(56, 56, 56); font-weight: 500; transition: all 0.170s; font-family: "IBM Plex Sans", sans-serif; padding: 0px 20px; } nav:hover a { opacity: 0.67; } nav a:hover { color: rgb(0, 0, 0); opacity: 1; } button.spec { height: 36px; padding: 0 16px; font-family: "Roboto", sans-serif; letter-spacing: .5px; font-weight: 500; text-transform: uppercase; border-radius: 3px; cursor: pointer; } button.spec:focus { outline: 2px solid rgb(24, 133, 242, 0.6); } button.spec.btn { border: none; background: rgb(41, 41, 41); color: rgb(252, 252, 252); box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.3); transition: all 0.1s; } button.spec.btn:hover { background: rgb(23, 23, 23); box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.4); } button.spec.btn-outlined { background: transparent; border: 2px solid rgb(74, 74, 74); color: rgb(74, 74, 74); } button.spec.btn-outlined:hover { color: black; border: 3px solid rgb(38, 38, 38); padding: 0 15px; } @keyframes p-in { 0% { opacity: 0; } 30% { opacity: 0; } 100% { opacity: 1; } } @keyframes f-in { 50% { opacity: 0; transform: translate(-40px, 0px); } 100% { opacity: 1; transform: translate(0px, 0px); } } #particle-container { position: fixed; top: 0px; left: 0px; bottom: 0; right: 0; z-index: -1; background: linear-gradient(-15deg, rgb(255, 255, 255), rgb(216, 232, 252)); background: linear-gradient(32deg, #ffffff, rgb(237, 237, 255), rgb(218, 235, 240), rgb(247, 255, 253), rgb(255, 253, 235)); background-size: 600% 600%; -webkit-animation: ecstatic 21s ease infinite; -moz-animation: ecstatic 21s ease infinite; -o-animation: ecstatic 21s ease infinite; animation: ecstatic 21s ease infinite; } @-webkit-keyframes ecstatic { 0% { background-position: 0% 78% } 50% { background-position: 100% 23% } 100% { background-position: 0% 78% } } @-moz-keyframes ecstatic { 0% { background-position: 0% 78% } 50% { background-position: 100% 23% } 100% { background-position: 0% 78% } } @-o-keyframes ecstatic { 0% { background-position: 0% 78% } 50% { background-position: 100% 23% } 100% { background-position: 0% 78% } } @keyframes ecstatic { 0% { background-position: 0% 78% } 50% { background-position: 100% 23% } 100% { background-position: 0% 78% } } .particle { position: absolute; border-radius: 50%; } @keyframes particle-animation-1 { 100% { transform: translate3d(53vw, 9vh, 20px); } } .particle:nth-child(1) { animation: particle-animation-1 70s infinite; opacity: 0.66; height: 6px; width: 6px; animation-delay: -0.2s; transform: translate3d(60vw, 60vh, 6px); background: var(--a); } @keyframes particle-animation-2 { 100% { transform: translate3d(8vw, 4vh, 65px); } } .particle:nth-child(2) { animation: particle-animation-2 70s infinite; opacity: 0.94; height: 6px; width: 6px; animation-delay: -0.4s; transform: translate3d(25vw, 71vh, 4px); background: var(--a); } @keyframes particle-animation-3 { 100% { transform: translate3d(1vw, 55vh, 95px); } } .particle:nth-child(3) { animation: particle-animation-3 70s infinite; opacity: 0.51; height: 6px; width: 6px; animation-delay: -0.6s; transform: translate3d(17vw, 49vh, 67px); background: var(--a); } @keyframes particle-animation-4 { 100% { transform: translate3d(9vw, 81vh, 69px); } } .particle:nth-child(4) { animation: particle-animation-4 70s infinite; opacity: 0.34; height: 10px; width: 10px; animation-delay: -0.8s; transform: translate3d(86vw, 51vh, 5px); background: var(--a); } @keyframes particle-animation-5 { 100% { transform: translate3d(74vw, 58vh, 18px); } } .particle:nth-child(5) { animation: particle-animation-5 70s infinite; opacity: 0.28; height: 6px; width: 6px; animation-delay: -1s; transform: translate3d(77vw, 12vh, 55px); background: var(--a); } @keyframes particle-animation-6 { 100% { transform: translate3d(32vw, 50vh, 57px); } } .particle:nth-child(6) { animation: particle-animation-6 70s infinite; opacity: 0.86; height: 9px; width: 9px; animation-delay: -1.2s; transform: translate3d(33vw, 25vh, 51px); background: var(--a); } @keyframes particle-animation-7 { 100% { transform: translate3d(30vw, 56vh, 49px); } } .particle:nth-child(7) { animation: particle-animation-7 70s infinite; opacity: 0.31; height: 9px; width: 9px; animation-delay: -1.4s; transform: translate3d(62vw, 45vh, 46px); background: var(--a); } @keyframes particle-animation-8 { 100% { transform: translate3d(67vw, 55vh, 59px); } } .particle:nth-child(8) { animation: particle-animation-8 70s infinite; opacity: 0.18; height: 10px; width: 10px; animation-delay: -1.6s; transform: translate3d(5vw, 19vh, 23px); background: var(--a); } @keyframes particle-animation-9 { 100% { transform: translate3d(74vw, 15vh, 79px); } } .particle:nth-child(9) { animation: particle-animation-9 70s infinite; opacity: 0.35; height: 6px; width: 6px; animation-delay: -1.8s; transform: translate3d(16vw, 79vh, 54px); background: var(--a); } @keyframes particle-animation-10 { 100% { transform: translate3d(7vw, 38vh, 48px); } } .particle:nth-child(10) { animation: particle-animation-10 70s infinite; opacity: 0.25; height: 9px; width: 9px; animation-delay: -2s; transform: translate3d(14vw, 3vh, 69px); background: var(--a); } @keyframes particle-animation-11 { 100% { transform: translate3d(62vw, 27vh, 92px); } } .particle:nth-child(11) { animation: particle-animation-11 70s infinite; opacity: 0.69; height: 8px; width: 8px; animation-delay: -2.2s; transform: translate3d(66vw, 32vh, 25px); background: var(--a); } @keyframes particle-animation-12 { 100% { transform: translate3d(44vw, 89vh, 42px); } } .particle:nth-child(12) { animation: particle-animation-12 70s infinite; opacity: 0.5; height: 10px; width: 10px; animation-delay: -2.4s; transform: translate3d(25vw, 30vh, 76px); background: var(--a); } @keyframes particle-animation-13 { 100% { transform: translate3d(85vw, 47vh, 81px); } } .particle:nth-child(13) { animation: particle-animation-13 70s infinite; opacity: 0.91; height: 7px; width: 7px; animation-delay: -2.6s; transform: translate3d(79vw, 5vh, 42px); background: var(--a); } @keyframes particle-animation-14 { 100% { transform: translate3d(43vw, 18vh, 92px); } } .particle:nth-child(14) { animation: particle-animation-14 70s infinite; opacity: 0.19; height: 9px; width: 9px; animation-delay: -2.8s; transform: translate3d(63vw, 79vh, 91px); background: var(--a); } @keyframes particle-animation-15 { 100% { transform: translate3d(28vw, 15vh, 43px); } } .particle:nth-child(15) { animation: particle-animation-15 70s infinite; opacity: 0.59; height: 10px; width: 10px; animation-delay: -3s; transform: translate3d(6vw, 57vh, 18px); background: var(--a); } @keyframes particle-animation-16 { 100% { transform: translate3d(12vw, 54vh, 60px); } } .particle:nth-child(16) { animation: particle-animation-16 70s infinite; opacity: 0.65; height: 6px; width: 6px; animation-delay: -3.2s; transform: translate3d(45vw, 33vh, 40px); background: var(--a); } @keyframes particle-animation-17 { 100% { transform: translate3d(70vw, 10vh, 70px); } } .particle:nth-child(17) { animation: particle-animation-17 70s infinite; opacity: 0.92; height: 8px; width: 8px; animation-delay: -3.4s; transform: translate3d(68vw, 20vh, 36px); background: var(--a); } @keyframes particle-animation-18 { 100% { transform: translate3d(51vw, 89vh, 50px); } } .particle:nth-child(18) { animation: particle-animation-18 70s infinite; opacity: 0.01; height: 10px; width: 10px; animation-delay: -3.6s; transform: translate3d(18vw, 80vh, 71px); background: var(--a); } @keyframes particle-animation-19 { 100% { transform: translate3d(5vw, 61vh, 14px); } } .particle:nth-child(19) { animation: particle-animation-19 70s infinite; opacity: 0.58; height: 9px; width: 9px; animation-delay: -3.8s; transform: translate3d(45vw, 28vh, 62px); background: var(--a); } @keyframes particle-animation-20 { 100% { transform: translate3d(63vw, 3vh, 60px); } } .particle:nth-child(20) { animation: particle-animation-20 70s infinite; opacity: 0.92; height: 8px; width: 8px; animation-delay: -4s; transform: translate3d(51vw, 60vh, 5px); background: var(--a); } @keyframes particle-animation-21 { 100% { transform: translate3d(23vw, 84vh, 33px); } } .particle:nth-child(21) { animation: particle-animation-21 70s infinite; opacity: 0.21; height: 6px; width: 6px; animation-delay: -4.2s; transform: translate3d(52vw, 6vh, 3px); background: var(--a); } @keyframes particle-animation-22 { 100% { transform: translate3d(59vw, 2vh, 70px); } } .particle:nth-child(22) { animation: particle-animation-22 70s infinite; opacity: 0.92; height: 6px; width: 6px; animation-delay: -4.4s; transform: translate3d(66vw, 24vh, 84px); background: var(--a); } @keyframes particle-animation-23 { 100% { transform: translate3d(78vw, 17vh, 16px); } } .particle:nth-child(23) { animation: particle-animation-23 70s infinite; opacity: 0.63; height: 8px; width: 8px; animation-delay: -4.6s; transform: translate3d(5vw, 11vh, 62px); background: var(--a); } @keyframes particle-animation-24 { 100% { transform: translate3d(61vw, 50vh, 94px); } } .particle:nth-child(24) { animation: particle-animation-24 70s infinite; opacity: 0.18; height: 10px; width: 10px; animation-delay: -4.8s; transform: translate3d(63vw, 48vh, 12px); background: var(--a); } @keyframes particle-animation-25 { 100% { transform: translate3d(50vw, 25vh, 42px); } } .particle:nth-child(25) { animation: particle-animation-25 70s infinite; opacity: 0.12; height: 10px; width: 10px; animation-delay: -70s; transform: translate3d(58vw, 1vh, 98px); background: var(--a); } @keyframes particle-animation-26 { 100% { transform: translate3d(50vw, 77vh, 54px); } } .particle:nth-child(26) { animation: particle-animation-26 70s infinite; opacity: 0.69; height: 6px; width: 6px; animation-delay: -5.2s; transform: translate3d(66vw, 24vh, 35px); background: var(--a); } @keyframes particle-animation-27 { 100% { transform: translate3d(64vw, 34vh, 82px); } } .particle:nth-child(27) { animation: particle-animation-27 70s infinite; opacity: 0.79; height: 8px; width: 8px; animation-delay: -5.4s; transform: translate3d(27vw, 4vh, 12px); background: var(--a); } @keyframes particle-animation-28 { 100% { transform: translate3d(54vw, 29vh, 89px); } } .particle:nth-child(28) { animation: particle-animation-28 70s infinite; opacity: 0.1; height: 10px; width: 10px; animation-delay: -5.6s; transform: translate3d(25vw, 18vh, 76px); background: var(--a); } @keyframes particle-animation-29 { 100% { transform: translate3d(43vw, 23vh, 15px); } } .particle:nth-child(29) { animation: particle-animation-29 70s infinite; opacity: 0.32; height: 6px; width: 6px; animation-delay: -5.8s; transform: translate3d(5vw, 51vh, 96px); background: var(--a); } @keyframes particle-animation-30 { 100% { transform: translate3d(40vw, 26vh, 85px); } } .particle:nth-child(30) { animation: particle-animation-30 70s infinite; opacity: 0.74; height: 9px; width: 9px; animation-delay: -6s; transform: translate3d(52vw, 9vh, 89px); background: var(--a); } #particle-2nd-container { position: relative; left: 25px; top: 65px; opacity: 0.5; } button { display: inline-flex; position: relative; border: none; outline: none; cursor: pointer; padding: 0 16px; border-radius: 4px; height: 32px; font-size: 0.875rem; line-height: 0.0892857143em; letter-spacing: 0.0892857143em; text-transform: uppercase; min-width: 64px; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.14); font-weight: 500; justify-content: center; align-items: center; vertical-align: middle; } .btn { color: white; background: var(--m); /* default / font-family: "Roboto", sans-serif; } .btn-outlined { border: 1px solid var(--m); background: transparent; color: var(--m); border-radius: 3px; font-family: "Roboto", sans-serif; } .btn-basic { background: transparent; box-shadow: none; color: var(--m); font-family: "Roboto", sans-serif; } .btn-fab { color: white; padding: 26px; min-width: 0px; height: 30px; width: 30px; border-radius: 50%; background: var(--m); / default / font-family: "Roboto", sans-serif; } .ripple { overflow: hidden; } .ripple-effect { position: absolute; border-radius: 50%; width: 50px; height: 50px; background: white; animation: ripple-animation 4.5s; } @keyframes ripple-animation { 0% { transform: scale(1); opacity: 0.4; } 100% { transform: scale(100); opacity: 0; } } a { color: #00897B; color: rgb(4, 113, 214); text-decoration: none; } a:hover { text-decoration: underline; } footer { background: #673ab7; background: var(--m); padding: 20px; font-size: 12px; display: flex; align-items: center; flex-flow: row wrap; color: white; justify-content: center; } footer p { color: white; font-size: 12px; } .gray { background-color: #EEEEEE; } footer.gray p { color: #000; } .mobile-on { display: none; } .mobile-off { display: block; } @media (max-width: 599px) { .mobile-on { display: block; } .mobile-off { display: none; } } .mobile-nav { position: fixed; top: 0; left: -100%; bottom: 0; background-color: rgb(255, 255, 255); z-index: 999; width: 50%; transition: all 0.3s ease-out; } .mobile-nav.open { left: 0px; } .mobile-nav a { text-decoration: none; display: block; height: 45px; margin: 5px 15px; color: rgb(102, 102, 102); font-weight: 400; line-height: 45px; padding: 0px 15px; font-size: 14px; transition: all 0.12s; } .mobile-nav a:hover { text-decoration: none; color: #171717; } a.navlink1.active { background-color: rgba(5, 91, 252, 0.1); border-radius: 5px; color: #171717; } #overlay { background: rgba(0, 0, 0, 0.6); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 101; display: none; } a.navlink { padding: 20px 0px; line-height: 50px; border-bottom: 1px solid rgba(5, 91, 252, 0.0); } a.navlink:hover { text-decoration: none; } nav:hover a.navlink.active { opacity: 1; } a.navlink.active { border-bottom: 3px solid rgba(28, 121, 252, 0.6); } nav a:hover { text-decoration: none; } #menu-icon { display: block; width: 64px; height: 64px; margin: 0; margin-left: -15px; padding: 0; text-align: center; border: none; color: rgb(77, 77, 77); } nav:hover #menu-icon { opacity: 1; } #menu-icon:hover { color: #000; } i.material-icons { vertical-align: middle; } .content-card { background-color: var(--m); padding: 24px; border-radius: 10px; transition: 0.3s; margin-bottom: 24px; } .content-card:hover { opacity: 0.7; transform: scale(1.03); } .content-card:active { transform: scale(1.0); opacity: 1.0; } .content-card h1 { color: white; font-size: 27px; } .content-card em { color: white; } .content-card p { color: white; } a.no-underline:hover { text-decoration: none !important; } .content-card.no-hover-card { background-color: #FFF; padding: 22px; color: #000; border-radius: 10px; transition: 0.3s; border: 2px solid var(--m); } .content-card.no-hover-card h1 { color: black; font-size: 27px; } .content-card.no-hover-card em { color: black; } .content-card.no-hover-card p { color: black; } .content-card.no-hover-card:hover { transform: scale(1.0); opacity: 1.0; cursor: default; } </style> </head> <!-- Body --> <body> <div id="particle-container"> <div id='particle-2nd-container'> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> </div> </div> <script></script> <script type="application/javascript"> function slog(d) { document.body.innerHTML = d; } try { var app = { content: [{ name: 'Team Alpha Homepage', link: 'https://www.khanacademy.org/computer-programming/team-alpha/4940793064636416', description: 'Visit the homepage to join Team Alpha, then once you get accepted ask @LeaferStudios or a manager about joining Alpha Press.', released: '2 July 2024', }, { name: 'Press Release', link: '', // leave empty for article description: 'Alpha Press has been released today (2 July 2024).', released: '2 July 2024', }, ], team: [{ "username": "LeaferStudios", "link": "https://www.khanacademy.org/profile/kaid_553656479258879622339276/", "bio": "I've released over 700 high-quality projects on Khan Academy! Clash of Code 2024 Champion. x5 Golden Winstons. x2 Primavera Winner. x2 Clash of Code Winner.", "level": "5" }, { "username": "jd2r", "link": "https://www.khanacademy.org/profile/kaid_152917881906477482126765", "bio": "coder \| educator \| blogger \| host", "level": "4" }, { "username": "nobody", "link": "https://www.khanacademy.org/profile/kaid_607336032916219492270964/", "bio": "I make unfunny comments that are supposed to be funny DX", "level": "0" }, { "username": "-A--I-", "link": "https://www.khanacademy.org/profile/kaid_426771593684189673355401", "bio": "I appreciate OhNoes and I wish everyone on KA did too!", "level": "2" }, { "username": "vr2009.ka", "link": "http://www.khanacademy.org/profile/vr2009.ka", "bio": "I like coding and would like to get a job in the engineering field. Specifically, I would like to become a machine learning engineer, a hardware engineer, or a software engineer. I love math and science. Thanks for reading!", "level": "1" }, { "username": "Voldemort271", "link": "https://www.khanacademy.org/profile/kaid_109088529962766375028969/", "bio": "just a voldy and her web dev.", "level": "3" }, { "username": "Duke", "link": "https://www.khanacademy.org/profile/kaid_351465532815782433620675/projects", "bio": "Not a train. Don't know why you would think that.", "level": "3" }, { "username": "sugar", "link": "https://www.khanacademy.org/profile/sippingbobatea", "bio": "A decent web dev and an expert procrastinator.", "level": "3" }, { "username": "TheMoneyLord", "link": "https://www.khanacademy.org/profile/kaid_931629234333611742874958", "bio": "I'm a PJS coder returning from a long period of inactivity. Dogs > Cats.", "level": "3" }, { "username": "Shadowpower Panther", "link": "https://www.khanacademy.org/profile/kaid_82965951565194985834975/projects", "bio": "I am a coder here on KA. I've been programming for 2-3 years now and in that time, I got pretty good at PJS, HTML, and even CSS. I forgot HTML and CSS, but I'm pretty good at PJS. I've been making PJS projects for a long time now, and I recently learnt masking. I'm planning to make a big project soon, expect it to come out in August or September. I would like to join the PJS divison of team alpha", "level": "3" }, { "username": "Coder2098", "link": "https://www.khanacademy.org/profile/kaid_673573024191290348573492/", "bio": "I'm a PJS coder who makes mainly graphics, I can learn most anything though with the proper teaching!", "level": "2" }, { "username": "I'M BOB", "link": "https://www.khanacademy.org/profile/yoboi1234/", "bio": "I'm I'M BOB and I like math :D", "level": "1" }, { 'username': ":) #BringBackBackgrounds", 'link': "https://www.khanacademy.org/profile/chislic234", 'bio': "'Pineapple doesn't belong on pizza, change my mind. >:)' #BringBackBackgrounds #R.I.P._hotlist - 'Nothing ventured, nothing gained' - somebody", 'level': "2" }, { "username": "codingAndMathRock44", "link": "https://www.khanacademy.org/profile/kaid_323180147349940202267541/projects", "bio": "I am a 6th grade who enjoys coding, math, science, and chess. I want to get a job in programming and enjoy HTML, CSS, and JS. I also can code in python. ", "level": "2" }, { "username": "The Behemoth", "link": "https://www.khanacademy.org/profile/kaid_162227050418593899377700/projects", "bio": "I am proficient at JavaScript and am able to make some pretty good games+graphics. I have made over a dozen games on Khan academy as well as a few cool graphics.", "level": "3" }, { "username": "coliso", "link": "https://www.khanacademy.org/profile/kaid_187158011412250521136047/", "bio": "Currently learning Rust and just trying to improve my skills all over. Been on KA for several years now and am trying to get involved in the community more. If it's programming I like it. If it's not, well I probably like it too :)", "level": "4" }, { "username": "Animator101", "link": "https://www.khanacademy.org/profile/me/courses", "bio": "Animator101 is an all-around coder who dips their fingers in graphics, simulations, games, and much more. They, however, enjoy physics related simulations(see their most recent Physics Engine - in 3D!)", "level": "4" }, { "username": "birdie", "link": "https://www.khanacademy.org/profile/kaid_1102535512654658022915597", "bio": "I'm a 14 year old ninth grader that loves Laufey, d4vd, olivia rodrigo, crocheting, and coding!! I code mostly in HTML with the occasional JS pixel art program!!", "level": "2" }, { "username": "CoderBugs", "link": "https://www.khanacademy.org/profile/CoderBugs/", "bio": "I'm a Intermediate coder who has used a lot of different coding languages. Apart from trying to become a KA coder I also code sometimes on CodeCombat and Tynker.", "level": "2" }, { "username": "shredder", "link": "https://www.khanacademy.org/profile/me/goals/teacher/kaid_1172755803531128496157937/class/6240895983992832?learn=1", "bio": "i like programming. i want to do something with programming later on in my life. i like the color blue and pizza is my favorite food.\nstraight/he/him", "level": "2" }, { "username": "AmirKhaan", "link": "http://www.khanacademy.org/profile/AmirKhaan", "bio": "I love physics simulations and mathematics, meaning I can spend large chunks of time creating pathfinding, tracing, and logical parts of projects. Scenes and menus are entertaining, and I enjoy doing things others consider painstaking. Conversely, I am outright terrible at graphic design, so I usually try to ask for other's assistance or, worst case scenario, take immensely long to create a graphic that already exists. ", "level": "3" }, { "username": "panda", "link": "https://www.khanacademy.org/profile/kaid_66071077723974169207689/profile", "bio": "does graphic design and semi-web design", "level": "2" }, { "username": "Dipper98", "link": "https://www.khanacademy.org/profile/kaid_3886238215093093067654746", "bio": "I mostly code in PJS, but will sometimes code in HTML and CSS. I enjoy making games, especially platformers with a twist!", "level": "3" }, { "username": "I need sleep", "link": "https://www.khanacademy.org/profile/kaid_1035102859463321737602047/", "bio": "I need sleep", "level": "2" }, { "username": "SparkyGreen", "link": "@ https://www.khanacademy.org/kaid_1027609191172844677906003/class/5719570367119360", "bio": "\"A hero would sacrifice you for the world, A villain would sacrifice the world for you. . .\" - SparkyGreen \| Founder of Spark Studios \| 7 million points \|", "level": "3" }, { "username": "The Coding Speedster", "link": "https://www.khanacademy.org/profile/chuwon2010", "bio": "Hi there! My name's The Coding Speedster (or TCS for short), and I'm a coder with average coding skills who makes ok stuff every now and then. I'm working on an insane mega-project and I'm in TCO 2024 rn so I'm pretty busy. #BugBashersFTW", "level": "0" }, { "username": "rpgmaster", "link": "https://www.khanacademy.org/profile/kaid_679826910131364968045734/discussion", "bio": "i am a ok coder but what i lack in coding i make up for in ideas", "level": "1" }, { "username": "Pandora", "link": "https://www.khanacademy.org/profile/kaid_3898811566926292186746378/", "bio": "My two favorite subjects are the Culinary Arts and Reading/writing, (E.L.A). And I'm currently using Khan Academy as a homeschooling program. As of right now, I am trying to get into my dream school, Palisades Christain Academy, and yes, that means I'm a Christian, if you're wondering. And, I'm kinda in-between level 0 and level 1, so I'm putting 1/2. ", "level": "1/2" }, { "username": "LucaCoder", "link": "https://www.khanacademy.org/profile/kaid_1002300193840581412190449", "bio": "I code platformers and other games. Have finished JS and the Web up to Unit 5 (yes, I know some HTML). I know OOP. I like math.", "level": "2" }, { "username": "CaptPockets", "link": "https://www.khanacademy.org/profile/kaid_2287805493149654773942312", "bio": "I Code", "level": "2" }, { "username": "proudsea1503", "link": "https://khanacademy.org/profile/kaid_9773386963546527037140000", "bio": "Great with JavaScript, sort of. A lot of ideas.", "level": "1" }, { "username": "The Reviewer", "link": "https://www.khanacademy.org/profile/me/courses", "bio": "Hello I'm the reviewer and I help with the writing in Team Alpha. If you want a program reviewed let me know!", "level": "2" }, { "username": "21262", "link": "https://www.khanacademy.org/profile/Dev21262/", "bio": "Building the future and keeping the past alive are one and the same thing.", "level": "2" }, { "username": "nomallkrispy", "link": "https://www.khanacademy.org/profile/nomallkrispy/", "bio": "I AM SK Lock", "level": "5" }, { "username": "Cpark2031", "link": "https://www.khanacademy.org/profile/kaid_1057910565261578334778043/", "bio": "Hello I'm Chowon, and I am also the biggest supporter of LS. I wanted to join web dev but I failed. I am leader of team KC (View profile). I have intermediate JS and HTML. I am a advanced Python coder. I want to learn more around these experts. However, if you see my profile, there will be some low quality programs that I made when I was a begginer. Please allow me to join!", "level": "3" }, { "username": "BluDrago", "link": "https://www.khanacademy.org/profile/kaid_1122873748962994162335749", "bio": "BlueDragon_space in full, Dragon for short. ;)\nNot the greatest coder, but I'm determined and looking to learn.\nI mostly use JavaScript, but I know a little HTML.\nI like trees and ramen.", "level": "2.5" }, { "username": "InterestingJokester", "link": "https://www.khanacademy.org/profile/Blxxkxt/", "bio": "I am a 14 year old learning JavaScript. I know how to make animations and shapes with it so far. I want continue learning JavaScript. I also know a bit of python :)", "level": "0" }, { "username": "kiaantolia", "link": "https://www.khanacademy.org/profile/kaid_706406430552760652245376/", "bio": "Web manager for Team Alpha. Creating a WebGL physics engine", "level": "4" }], switchScene: function(w) { for (var i = 0; i < document.getElementsByClassName("scene").length; i++) { document.getElementsByClassName("scene")[i].style.display = "none"; document.getElementsByClassName("scene")[i].style.animation = "1s p-in forwards" } document.getElementsByClassName("scene")[w].style.display = "block"; for (var i = 0; i < document.getElementsByClassName("navlink").length; i++) { document.getElementsByClassName("navlink")[i].classList.remove('active'); } document.getElementsByClassName("navlink")[w].classList.add('active'); // mobile for (var i = 0; i < document.getElementsByClassName("navlink1").length; i++) { document.getElementsByClassName("navlink1")[i].classList.remove('active'); } document.getElementsByClassName("navlink1")[w].classList.add('active'); }, openMenu: function() { document.getElementsByClassName('mobile-nav')[0].classList.add('open'); document.getElementById('overlay').style.display = 'block'; }, closeMenu: function() { document.getElementsByClassName('mobile-nav')[0].classList.remove('open'); document.getElementById('overlay').style.display = 'none'; }, components: [ // navbar { type: "nav", html: ` <div id='overlay'></div> <nav> <div style="float:right;"> <a href="#!"onclick='window.scroll({top:0,bottom:0,behavior:"smooth"});' style="color:#01579B;font-weight:500;"> Alpha Press </a> </div> <div style="float:left;" class='mobile-on'> <a href='#!' onclick='app.openMenu();return false;' id='menu-icon'> <i class='material-icons'>menu</i> </a> </div> <div style="float:left;" class='mobile-off'> <a class='navlink' href="#!" onclick="app.closeMenu();app.switchScene(0);return false;">Home</a> <a class='navlink' href="#!" onclick="app.closeMenu();app.switchScene(1);return false;">About</a> <a class='navlink' href="#!" onclick="app.closeMenu();app.switchScene(2);return false;">Content</a> <a class='navlink' href="#!" onclick="app.closeMenu();app.switchScene(3);return false;">Team</a> </div> </nav> <div class='mobile-on mobile-nav'> <a class='navlink1' href="#!" onclick="app.closeMenu();app.switchScene(0);return false;">Home</a> <a class='navlink1' href="#!" onclick="app.closeMenu();app.switchScene(1);return false;">About</a> <a class='navlink1' href="#!" onclick="app.closeMenu();app.switchScene(2);return false;">Content</a> <a class='navlink1' href="#!" onclick="app.closeMenu();app.switchScene(3);return false;">Team</a> </div> `, run: function() { document.body.innerHTML += this.html; }, }, // scene 1 { type: "scene", html: ` <div class="scene" > <div style="padding: 1em 3em;padding-bottom: 1px;"> <h1 id="fade-in-one">The Best Community Content on Khan Academy</h1> <p id="fade-in-two">Alpha Press is the news and tutorials division of <a href='https://www.khanacademy.org/computer-programming/team-alpha/4940793064636416' target='_blank'>Team Alpha</a>.</p> <br/> <button class="ripple spec btn" onclick='app.switchScene(2);' style="margin-right: 15px;margin-bottom: 15px" data-ripple-color="#FFF" id="fade-in-three">Explore <i class='material-icons'>arrow_forward</i></button> <button data-ripple-color="rgba(0,0,0,0.4)" onclick='app.switchScene(1);' style='margin-bottom: 15px;' class="ripple spec btn-outlined" id="fade-in-four">Learn More</button> </div> <div style="padding: 3em 3em;"> <h1 id="fade-in-five" >Questions or Feedback?</h1> <p id="fade-in-six">Comment in the discussion section below and our team will reply as soon as possible.</p> <br/> <button class="ripple btn" style="margin-right: 15px;margin-bottom: 15px" data-ripple-color="#FFF" id="fade-in-seven">Comment <i class='material-icons'>chat</i></button> </div> </div> `, run: function() { document.body.innerHTML += this.html }, }, // scene 2 { type: "scene", html: ` <div class="scene" style="padding: 15px 2em;"> <h1>About</h1> <div style='border-left: 3px solid var(--m);padding-left: 10px;'> Notice: We are currently brand new! Huge updates coming soon.</div> <p><b>Alpha Press</b> is a division of Team Alpha specializing in bringing high-quality information, news, useful tutorials, contests, and events related to computer programming. </p> <h2>Join Alpha Press</h2> <p> We are open for anyone willing to create high-quality content for the KACP community, including tutorials, news, contests, events, and more. You must join Team Alpha and after you get accepted you have to notify LeaferStudios (@LeaferStudios) that you are interested in becoming a member of Alpha Press. Good writing skills are valued, but not essential. </p> <a href='https://www.khanacademy.org/computer-programming/leaferstudios/4934504502870016'target='_blank'><button style="margin-right: 15px;margin-bottom: 15px" class="btn">Ask LeaferStudios <i class='material-icons'>open_in_new</i></button></a> <h2>About Team Alpha</h2> <p>Team Alpha is the biggest community coding team on Khan Academy and was founded by LeaferStudios in late June of 2024. </p> <h2>Why join Team Alpha?</h2> <p>Grow your skills as a programmer through many events, team projects, contests, and more. In the professional world, nearly all software is built in teams. Develop vital collaboration, interpersonal, time management, leadership skills that will help you get hired as a computer programmer. Make a lasting, meaningful impact on Khan Academy's computer programming community. All skill levels and programming languages are welcome! No matter your time commitment or geographical location, you can join and strive to improve your skills.</p> <a href='https://www.khanacademy.org/computer-programming/team-alpha/4940793064636416'target='_blank'><button style="margin-right: 15px;margin-bottom: 15px" class="btn">Team Alpha Homepage <i class='material-icons'>open_in_new</i></button></a> </div> `, run: function() { document.body.innerHTML += this.html }, }, // scene 3 { type: "scene", html: ` <div class="scene" style="padding: 70px 77px;"> <h1>All Content</h1> <div id='content'> </div> </div> `, run: function() { document.body.innerHTML += this.html; for (var i = 0; i < app.content.length; i++) { var d = app.content[i]; document.getElementById('content').innerHTML += `<a class='no-underline' href="${d.link ? d.link : '#!'}" target="${d.link ? '_blank' : ''}"><div class='${!d.link ? 'no-hover-card' : ''} content-card'> <h1>${d.name} ${d.link ? '<i class="material-icons">open_in_new</i>' : ''}</h1> <em>${d.released}</em> <p>${d.description}</p> </div></a>`; } }, }, // scene 4 { type: "scene", html: ` <div class="scene" style="padding: 70px 77px;"> <h1>Team</h1> <div id='team'> </div> </div> `, run: function() { document.body.innerHTML += this.html; for (var i = 0; i < app.team.length; i++) { var d = app.team[i]; for (var j = 0; j < reserved.length; j++) { if (d.username === reserved[j]) { document.getElementById('team').innerHTML += `<a class='no-underline' href='${d.link}'target='_blank'><div class='${!d.link ? 'no-hover-card' : ''} content-card'> <h1>${d.username} ${d.link ? '<i class="material-icons">open_in_new</i>' : ''}</h1> <p>Level ${d.level}<br>${d.bio}</p> </div></a>`; } } } }, }, { type: 'footer', html: `<footer style='display:block;text-align:center;'> <p style='font-size:14px;font-weight:400;'> <em>This page is responsive! Try adjusting your screen size to see what happens</em>.</p> <p>© 2024 <a href='https://www.khanacademy.org/profile/kaid_553656479258879622339276/projects'target='_blank' style='color:#FFF;text-decoration:underline;'>LeaferStudios</a></p> </footer>`, run: function() { document.body.innerHTML += this.html; }, }, ], fadesList: ["fade-in-one", "fade-in-two", "fade-in-three", "fade-in-four", "fade-in-five", "fade-in-six", "fade-in-seven"], run: function() { var dis = this; for (var i = 0; i < dis.components.length; i++) { dis.components[i].run(); } dis.switchScene(0); for (var i = 0; i < dis.fadesList.length; i++) { document.getElementById(dis.fadesList[i]).style.animation = "1s f-in forwards"; document.getElementById(dis.fadesList[i]).style.animationDelay = i / 6 + "s"; document.getElementById(dis.fadesList[i]).style.opacity = "0"; } document.getElementById('overlay').onclick = this.closeMenu; }, } app.run(); document.querySelectorAll('.ripple').forEach(function(button) { button.addEventListener('click', function(event) { event.preventDefault(); var div = document.createElement('div'); var btnOffset = button.getBoundingClientRect(); var xPos = event.clientX - btnOffset.left; var yPos = event.clientY - btnOffset.top; div.className = 'ripple-effect'; var ripple = button.querySelector('.ripple-effect'); var buttonHeight = button.offsetHeight; if (ripple) { ripple.remove(); } div.style.height = buttonHeight + 'px'; div.style.width = buttonHeight + 'px'; div.style.top = (yPos - buttonHeight / 2) + 'px'; div.style.left = (xPos - buttonHeight / 2) + 'px'; div.style.background = button.getAttribute('data-ripple-color'); button.appendChild(div); setTimeout(function() { div.remove(); }, 2000); }); }); } catch (e) { slog(e); } </script> <!-- Thumbnail custom image by LeaferStudios --> <script type> /* * Image for an appealing KA thumbnail / document.body.addEventListener("keydown", function(e) { if (e.code === "Escape") { document.body.innerHTML += `<div style='position:absolute;top:0px;left:0;right:0;bottom:0;color:#FFF;background-color:rgba(5, 38, 87,0.9);text-align:center;'></div><div style='position:absolute;top:0;left:0;right:0;bottom:0;color:#FFF;text-align:center;'> <h1 style='color:#FFF;padding-top:50px;font-size:80px;font-weight:700;'>Alpha Press</h1> <h1 style='color:#FFF;padding-top:0px;font-size:20px;line-height:40px;margin-top:-40px;'>Computer Programming Content For The Community</h1> <img src='https://upload.wikimedia.org/wikipedia/commons/e/e3/Flickr_-_Official_U.S._Navy_Imagery_-_The_SECNAV_interviews_with_MSNBC_broadcast_journalists_on_the_set_of_the_weekday_morning_talk_show_%22Morning_Joe%22_in_New_York..jpg'width='100%'> </div>`; } if (e.code === "Enter") { e.preventDefault(); } }); </script> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script> <script type> / * Why is this needed? Due to Khan Academy's program thumbnail not being super clear, this makes it extra clear in HTML programs. */ // credit to Bluebird@kaid_157624541333313939750668 for this Khan Academy thumbnail resolution fix (just the 1 line below) var r = 600, s = document.documentElement.clientWidth; window.parent.html2canvas = t => { try { html2canvas(document.body, { width: s, height: s, useCORS: !0 }).then(t => { var e = document.createElement("canvas"); e.width = r, e.height = r, e.getContext("2d").drawImage(t, 0, 0, t.width, t.height, 0, 0, r, r), window.top.postMessage(e.toDataURL(), "") }).catch(t => { alert("Thumbnail Script Error: " + t) }) } catch { window.top.postMessage(document.createElement("canvas").toDataURL(), "*") } }; </script> </body> </html> <!-- (c) 2024-Present by LeaferStudios@LeaferStudios (https://www.khanacademy.org/profile/kaid_553656479258879622339276/) -->
Folds	25,1045,1048,1601
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgJuKw_iGCww
Votes	9
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	true
By Child	false
Author Nick	LeaferStudios
Author Name	LeaferStudios
Author ID	kaid_553656479258879622339276
Author Profile Access	PUBLIC

Archive Data

Added	6 months ago, 1719934027326
Updated	6 months ago, 1719934027326
Source Deleted	unknown