Viewing Program

Program Data

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

Title	Team Alpha
ID	4940793064636416
Created	6 months ago, 1719344721112
Updated	6 months ago, 1719345048850
Code	<!DOCTYPE html> <!-- Team Alpha Currently brand new! Huge updates coming soon. Team Alpha Web Division link: https://www.khanacademy.org/computer-programming/team-alpha-web-devs-ft-leaferstudios/5113113829097472 Team Alpha Press coming soon. Add ?width=800px&editor=no for a superior viewing experience! Released: 25 June 2024 From the About Page: Joining is open! 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. Again, we just opened so not everything is up and running yet. --> <!-- (c) 2024 LeaferStudios --> <html lang='en'> <!-- Head --> <head> <meta charset="UTF-8"> <meta name="description" content="Team Alpha (c) 2024 by LeaferStudios"> <meta charset="utf-8"> <title>Team Alpha</title> <!-- Reset default browser styles This ensures consistent rendering across different browsers --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" 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=Lato:wght@300;400;700;900&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&family=Roboto+Serif:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"> <style> :root { /* Dark Theme Colors / --primary-color-dark: #4e8dff; --secondary-color-dark: #6c757d; --success-color-dark: #28a745; --danger-color-dark: #dc3545; --warning-color-dark: #ffc107; --info-color-dark: #17a2b8; --light-color-dark: rgb(15, 15, 15); --dark-color-dark: #343a40; --text-color-dark: #ffffff; --bg-color-dark: #2d2d2d; / Light Theme Colors / --primary-color-light: #007bff; --secondary-color-light: #6c757d; --success-color-light: #28a745; --danger-color-light: #dc3545; --warning-color-light: #ffc107; --info-color-light: #17a2b8; --light-color-light: #f8f9fa; --dark-color-light: #343a40; --text-color-light: #333; --bg-color-light: #ffffff; } body.light-theme { --primary-color: var(--primary-color-light); --secondary-color: var(--secondary-color-light); --success-color: var(--success-color-light); --danger-color: var(--danger-color-light); --warning-color: var(--warning-color-light); --info-color: var(--info-color-light); --light-color: var(--light-color-light); --dark-color: var(--dark-color-light); --text-color: var(--text-color-light); --bg-color: var(--bg-color-light); --navbar-bg-color: var(--light-color); --navbar-text-color: var(--text-color); --navbar-hover-bg-color: rgb(219, 219, 219); --navbar-position: static; } body.dark-theme { --primary-color: var(--primary-color-dark); --secondary-color: var(--secondary-color-dark); --success-color: var(--success-color-dark); --danger-color: var(--danger-color-dark); --warning-color: var(--warning-color-dark); --info-color: var(--info-color-dark); --light-color: var(--light-color-dark); --dark-color: var(--dark-color-dark); --text-color: var(--text-color-dark); --bg-color: var(--bg-color-dark); --navbar-bg-color: var(--dark-color); --navbar-text-color: var(--text-color); --navbar-hover-bg-color: rgb(70, 76, 81); --navbar-position: fixed; } html, body { box-sizing: border-box; font-family: 'IBM Plex Sans', Helvetica, sans-serif; font-size: 16px; color: var(--text-color); background-color: var(--bg-color); color: var(--text-color); overflow-x: hidden; } .container { margin: 0 auto; padding: 1rem; background-color: var(--bg-color); border-radius: 5px; } .section { margin-bottom: 2rem; } , ::before, ::after { box-sizing: inherit; margin: 0; padding: 0; } /* Typography / h1, h2, h3, h4, h5, h6 { margin-bottom: 1rem; font-weight: bold; color: var(--text-color); font-family: 'Lato', Helvetica, sans-serif; } p { margin-bottom: 1.5rem; line-height: 24px; color: var(--text-color); } a { color: var(--primary-color); text-decoration: none; } a:hover { text-decoration: underline; } .text-left { text-align: left; } .text-right { text-align: right; } / Buttons / .btn { display: inline-block; padding: 0.5rem 1rem; border: none; border-radius: 0.25rem; cursor: pointer; transition: all 0.3s ease; font-family: 'IBM Plex Sans', 'Roboto', Helvetica, sans-serif; font-size: 16px } .btn-primary { background-color: var(--primary-color); color: #fff; } .btn-secondary { background-color: var(--secondary-color); color: #fff; } .btn-success { background-color: var(--success-color); color: #fff; } .btn-danger { background-color: var(--danger-color); color: #fff; } .btn-warning { background-color: var(--warning-color); color: var(--text-color); } .btn-info { background-color: var(--info-color); color: #fff; } .btn-light { background-color: var(--light-color); color: var(--text-color); } .btn-dark { background-color: var(--dark-color); color: #fff; } .btn-disabled { cursor: default; opacity: 0.8; } .btn:hover { opacity: 0.8; } / Forms / input, textarea { width: 100%; padding: 0.5rem; margin-bottom: 1rem; border: 1px solid #ccc; border-radius: 0.25rem; box-sizing: border-box; color: var(--text-color); background-color: var(--bg-color); } input[type="submit"] { background-color: var(--primary-color); color: #fff; border: none; border-radius: 0.25rem; padding: 0.5rem 1rem; cursor: pointer; } / Navbar / .navbar { background-color: var(--navbar-bg-color); color: var(--navbar-text-color); padding: 1rem 0; display: flex; justify-content: space-between; align-items: center; position: var(--navbar-position); / Use custom position / top: 0; width: 100%; height: 50px; z-index: 1000; } .navbar ul { list-style: none; padding: 0; margin: 0; display: flex; justify-content: space-between; height: 100%; } .navbar li { margin-right: 0.5rem; margin-left: 0.5rem; } .navbar a { color: var(--navbar-text-color); text-decoration: none; padding: 0.5rem 1rem; border-radius: 0.25rem; transition: background-color 0.3s ease; } .navbar a:hover { background-color: var(--navbar-hover-bg-color); } / Fixed Navbar / .navbar.fixed { position: fixed; } / Utilities / .text-center { text-align: center; } / Margin & Padding Utilities / .p-t-0 { padding-top: 0; } .p-t-1 { padding-top: 0.25rem; } .p-t-2 { padding-top: 0.5rem; } .p-t-3 { padding-top: 1rem; } .p-t-4 { padding-top: 1.5rem; } .p-t-5 { padding-top: 3rem; } .p-b-0 { padding-bottom: 0; } .p-b-1 { padding-bottom: 0.25rem; } .p-b-2 { padding-bottom: 0.5rem; } .p-b-3 { padding-bottom: 1rem; } .p-b-4 { padding-bottom: 1.5rem; } .p-b-5 { padding-bottom: 3rem; } .p-l-0 { padding-left: 0; } .p-l-1 { padding-left: 0.25rem; } .p-l-2 { padding-left: 0.5rem; } .p-l-3 { padding-left: 1rem; } .p-l-4 { padding-left: 1.5rem; } .p-l-5 { padding-left: 3rem; } .p-r-0 { padding-right: 0; } .p-r-1 { padding-right: 0.25rem; } .p-r-2 { padding-right: 0.5rem; } .p-r-3 { padding-right: 1rem; } .p-r-4 { padding-right: 1.5rem; } .p-r-5 { padding-right: 3rem; } [class="m-1"] { margin: 0.25rem; } [class="m-2"] { margin: 0.5rem; } [class="m-3"] { margin: 1rem; } [class="m-4"] { margin: 1.5rem; } [class="m-5"] { margin: 3rem; } .m-t-0 { margin-top: 0; } .m-t-1 { margin-top: 0.25rem; } .m-t-2 { margin-top: 0.5rem; } .m-t-3 { margin-top: 1rem; } .m-t-4 { margin-top: 1.5rem; } .m-t-5 { margin-top: 3rem; } .m-b-0 { margin-bottom: 0; } .m-b-1 { margin-bottom: 0.25rem; } .m-b-2 { margin-bottom: 0.5rem; } .m-b-3 { margin-bottom: 1rem; } .m-b-4 { margin-bottom: 1.5rem; } .m-b-5 { margin-bottom: 3rem; } .m-l-0 { margin-left: 0; } .m-l-1 { margin-left: 0.25rem; } .m-l-2 { margin-left: 0.5rem; } .m-l-3 { margin-left: 1rem; } .m-l-4 { margin-left: 1.5rem; } .m-l-5 { margin-left: 3rem; } .m-r-0 { margin-right: 0; } .m-r-1 { margin-right: 0.25rem; } .m-r-2 { margin-right: 0.5rem; } .m-r-3 { margin-right: 1rem; } .m-r-4 { margin-right: 1.5rem; } .m-r-5 { margin-right: 3rem; } [class="p-1"] { padding: 0.25rem; } [class="p-2"] { padding: 0.5rem; } [class="p-3"] { padding: 1rem; } [class="p-4"] { padding: 1.5rem; } [class="p-5"] { padding: 3rem; } / Responsive Grid System / .row { display: flex; flex-wrap: wrap; margin: 0 -0.75rem; } .col { flex: 1 1 0; padding: 0 0.75rem; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @media (min-width: 576px) { .col-sm-1 { flex: 0 0 8.33333333%; } .col-sm-2 { flex: 0 0 16.66666667%; } .col-sm-3 { flex: 0 0 25%; } .col-sm-4 { flex: 0 0 33.33333333%; } .col-sm-5 { flex: 0 0 41.66666667%; } .col-sm-6 { flex: 0 0 50%; } .col-sm-7 { flex: 0 0 58.33333333%; } .col-sm-8 { flex: 0 0 66.66666667%; } .col-sm-9 { flex: 0 0 75%; } .col-sm-10 { flex: 0 0 83.33333333%; } .col-sm-11 { flex: 0 0 91.66666667%; } .col-sm-12 { flex: 0 0 100%; } } @media (min-width: 768px) { .col-md-1 { flex: 0 0 8.33333333%; } .col-md-2 { flex: 0 0 16.66666667%; } .col-md-3 { flex: 0 0 25%; } .col-md-4 { flex: 0 0 33.33333333%; } .col-md-5 { flex: 0 0 41.66666667%; } .col-md-6 { flex: 0 0 50%; } .col-md-7 { flex: 0 0 58.33333333%; } .col-md-8 { flex: 0 0 66.66666667%; } .col-md-9 { flex: 0 0 75%; } .col-md-10 { flex: 0 0 83.33333333%; } .col-md-11 { flex: 0 0 91.66666667%; } .col-md-12 { flex: 0 0 100%; } } @media (min-width: 992px) { .col-lg-1 { flex: 0 0 8.33333333%; } .col-lg-2 { flex: 0 0 16.66666667%; } .col-lg-3 { flex: 0 0 25%; } .col-lg-4 { flex: 0 0 33.33333333%; } .col-lg-5 { flex: 0 0 41.66666667%; } .col-lg-6 { flex: 0 0 50%; } .col-lg-7 { flex: 0 0 58.33333333%; } .col-lg-8 { flex: 0 0 66.66666667%; } .col-lg-9 { flex: 0 0 75%; } .col-lg-10 { flex: 0 0 83.33333333%; } .col-lg-11 { flex: 0 0 91.66666667%; } .col-lg-12 { flex: 0 0 100%; } } @media (min-width: 1200px) { .col-xl-1 { flex: 0 0 8.33333333%; } .col-xl-2 { flex: 0 0 16.66666667%; } .col-xl-3 { flex: 0 0 25%; } .col-xl-4 { flex: 0 0 33.33333333%; } .col-xl-5 { flex: 0 0 41.66666667%; } .col-xl-6 { flex: 0 0 50%; } .col-xl-7 { flex: 0 0 58.33333333%; } .col-xl-8 { flex: 0 0 66.66666667%; } .col-xl-9 { flex: 0 0 75%; } .col-xl-10 { flex: 0 0 83.33333333%; } .col-xl-11 { flex: 0 0 91.66666667%; } .col-xl-12 { flex: 0 0 100%; } } .fadeIn { animation: fadeIn 1s ease-in-out; } .no-select { -webkit-user-select: none; / Safari / -moz-user-select: none; / Firefox / -ms-user-select: none; / Internet Explorer/Edge / user-select: none; / Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox / } .footer {} .footer .container { border-top: 1px solid; border-radius: 0; margin: 0 auto; padding: 1rem 1rem; } .footer ul li { margin-bottom: 0.5rem; } .footer ul { list-style: none; padding: 0; } / Utility classes for background color / .bg-primary { background-color: var(--primary-color); } .bg-secondary { background-color: var(--secondary-color); } .bg-success { background-color: var(--success-color); } .bg-danger { background-color: var(--danger-color); } .bg-warning { background-color: var(--warning-color); } .bg-info { background-color: var(--info-color); } / Utility classes for text color / .text-primary { color: var(--primary-color); } .text-secondary { color: var(--secondary-color); } .text-success { color: var(--success-color); } .text-danger { color: var(--danger-color); } .text-warning { color: var(--warning-color); } .text-info { color: var(--info-color); } .text-white { color: #FFF; } nav.text-white a { color: #FFF !important; } .text-black { color: #000; } nav.text-black a { color: #000 !important; } .dark-theme { --primary-color: var(--primary-color-dark); --secondary-color: var(--secondary-color-dark); --success-color: var(--success-color-dark); --danger-color: var(--danger-color-dark); --warning-color: var(--warning-color-dark); --info-color: var(--info-color-dark); --light-color: var(--light-color-dark); --dark-color: var(--dark-color-dark); --text-color: var(--text-color-dark); --bg-color: var(--bg-color-dark); } .navbar-toggler { display: none; } #team-logo { display: none; } // @media only screen and (max-width: 950px) { #team-logo { display: block; } .navbar { background-color: var(--navbar-bg-color); height: 50px; } .navbar ul { display: none; } .navbar-toggler { display: block; border: none; position: absolute; left: 30px; transform: translateX(-50%)translateY(-50%); background-color: transparent; top: 50%; } .navbar.collapsed ul { display: flex; flex-direction: column; position: absolute; top: 50px; left: 0; height: 100%; background-color: var(--navbar-bg-color); width: 100%; border-top: 1px solid var(--text-color); } .navbar.collapsed ul li a { display: block; background-color: var(--navbar-bg-color); color: var(--navbar-text-color); padding-bottom: 15px; border-radius: 0px; border-bottom: 1px solid var(--text-color); border-left: 1px solid var(--text-color); border-right: 1px solid var(--text-color); z-index: 999; box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.4); } .navbar.collapsed ul li a:hover { background-color: var(--navbar-hover-bg-color); } .navbar-toggler-icon { display: block; text-align: center; cursor: pointer; color: var(--text-color); } } / Special Backgrounds / .bg-polka { background-color: #dff1ff; background-image: radial-gradient(rgb(136, 200, 232) 1.7000000000000002px, transparent 1.7000000000000002px), radial-gradient(rgb(161, 255, 185) 1.7000000000000002px, rgb(196, 239, 255) 1.7000000000000002px); background-size: 28px 28px; background-position: -10px -0px; background-attachment: fixed; } body.dark-theme .bg-polka { background-image: radial-gradient(rgb(10, 75, 107) 1.7000000000000002px, transparent 1.7000000000000002px), radial-gradient(rgb(161, 255, 185) 1.7000000000000002px, rgb(8, 97, 130) 1.7000000000000002px); } i.material-symbols-outlined { vertical-align: middle; font-size: inherit; } / Custom elements / table { width: 100%; border-collapse: collapse; } th, td { padding: 10px; border: 1px solid #ccc; } td { cursor: pointer; } .workout-entry { border: 1.5px solid var(--success-color); border-radius: 4px; margin-bottom: 15px; padding: 15px; } a.icon:hover { background-color: transparent; } i.material-symbols-outlined { vertical-align: middle; } .about-section { padding: 50px; border-radius: 10px; } .decorative-element { width: 100%; height: 20px; background-image: linear-gradient(to right, #4e8dff, #dc3545); border-radius: 10px; margin-top: 20px; } .container { background-color: var(--bg-color); } .section-title { color: var(--text-color); } .section-description { color: var(--text-color); } .category-title { color: var(--primary-color); } .project { border: 1px solid gainsboro; padding: 15px; } hr { background-color: gainsboro; border: none; height: 1px; } .g { font-size: 14px; line-height: 18px; margin-top: 12px; padding: 10px 0; list-style-type: none; } .g:nth-child(odd) { font-weight: 500; border-top: 1px solid gainsboro; } .g:nth-child(even) { border-bottom: 1px solid gainsboro; } .team-member { border: 1px solid #ccc; padding: 10px; transition: all 0.3s ease-in-out; margin-bottom: 10px; cursor: pointer; } .team-member:hover { background-color: var(--navbar-bg-color); transform: scale(1.05); } .no:hover { text-decoration: none; } </style> </head> <!-- Body --> <body> <nav class="navbar fixed"> <div> <button class='navbar-toggler navbar-toggler-icon' onclick="toggleNavbar()" style='height:50px;width:50px;'> <i class='material-symbols-outlined' id='navbarIcon' style='font-size:18px;'>menu</i> </button> <h1 style='font-size:18px;margin-left:60px;font-family:"IBM Plex Sans",helvetica;' id='team-logo'>Team Alpha</h1> <ul> <li><a href="javascript:scene(0);toggleNavbar();">Home</a></li> <li><a href="javascript:scene(1);toggleNavbar();">About</a></li> <li><a href="javascript:scene(2);toggleNavbar();">Projects</a></li> <li><a href="javascript:scene(3);toggleNavbar();">Resources</a></li> <li><a href="javascript:scene(4);toggleNavbar();">Events</a></li> <li><a href="javascript:scene(5);toggleNavbar();">News</a></li> <li><a href="javascript:scene(6);toggleNavbar();">Join</a></li> <li><a href="javascript:scene(7);toggleNavbar();">FAQ</a></li> <li><a href="javascript:scene(8);toggleNavbar();">Team</a></li> <li><a href="javascript:toggleTheme();toggleNavbar();" class='icon'> <i class='material-symbols-outlined' id='themeIcon'>dark_mode</i> </a></li> </ul> </div> </nav> <div style='height:50px;'></div> <div class='scene p-l-3 p-r-3'> <div class='container text-center' style='border-bottom: 1px solid gainsboro;border-radius:0px;padding-bottom:30px;'> <h1>The Biggest Community Coding Team on Khan Academy</h1> <p>Team Alpha is a world-class, free coding team where learning thrives.</p> <button onclick='scene(6);' class='btn btn-dark p-t-3 p-b-3 p-l-4 p-r-4'>Join Now <i class='material-symbols-outlined'>add</i></button> </div> <div class='row container text-center'> <div class='col'> <h1>Top-Tier</h1> <h1 class='no-select'> <i class='material-symbols-outlined' style='color:orange;font-size:100px;user-select:none;'>trophy</i> </h1> <p>Star Studded Team</p> <button onclick='scene(8);' class='btn btn-primary'>View Team <i class='material-symbols-outlined'>arrow_forward</i></button> </div> <div class='col'> <h1>Powerhouse</h1> <h1 class='no-select'> <i class='material-symbols-outlined' style='color:green;font-size:100px;user-select:none;'>bolt</i> </h1> <p>Variety of Projects</p> <button onclick='scene(2);' class='btn btn-primary'>Our Projects <i class='material-symbols-outlined'>arrow_forward</i></button> </div> <div class='col'> <h1>Resources</h1> <h1 class='no-select'> <i class='material-symbols-outlined' style='color:red;font-size:100px;user-select:none;'>diversity_3</i> </h1> <p>Teaching Excellence</p> <button onclick='scene(3);' class='btn btn-primary'>Resources <i class='material-symbols-outlined'>arrow_forward</i></button> </div> </div> <div class='container'> <h1>Led by LeaferStudios</h1> <p>"I'm an expert programmer with over 700 projects released on Khan Academy and a proven track record of leading teams to victory. Together, we'll unleash our potential, achieve remarkable victories, and make a lasting impact on our community."<br>-<a href='https://www.khanacademy.org/computer-programming/leaferstudios/4934504502870016'>LeaferStudios</a>, Founder & CEO</p> <button onclick='scene(1);' class='btn btn-primary'>About Team Alpha <i class='material-symbols-outlined'>arrow_forward</i></button> </div> <div class='container'> <h1>Empowering Tomorrow's Coders Today</h1> <p>We empower individuals of all skill levels to forge their journey towards professionalism in coding through a supportive community and collaborative learning.</p> </div> <div class='row container text-center'> <div class='col'> <h1>Growth</h1> <h1 class='no-select'> <i class='material-symbols-outlined' style='color:indigo;font-size:100px;user-select:none;'>code</i> </h1> <p>Grow your skills as a programmer</p> </div> <div class='col'> <h1>Support</h1> <h1 class='no-select'> <i class='material-symbols-outlined' style='color:teal;font-size:100px;user-select:none;'>help</i> </h1> <p>Get answers from professionals</p> </div> <div class='col'> <h1>Positive</h1> <h1 class='no-select'> <i class='material-symbols-outlined' style='color:peru;font-size:100px;user-select:none;'>social_leaderboard</i> </h1> <p>Create a positive community impact</p> </div> </div> <div class='container text-center' style='border-bottom: 1px solid gainsboro;border-radius:0px;padding-bottom:30px;'> <h1>Joining is Now Open!</h1> <p>Any skill level, from absolute beginner to professional!</p> <button onclick='scene(6);' class='btn btn-primary p-t-3 p-b-3 p-l-4 p-r-4'>Join Now <i class='material-symbols-outlined'>add</i></button> </div> </div> <div class='scene'> <div class='container'> <h1>About</h1> <p>Team founded by <a href='https://www.khanacademy.org/profile/kaid_553656479258879622339276/' target='_blank'>LeaferStudios</a> in late June 2024.</p> <p>Currently brand new! Huge updates coming soon.</p> <h2>Why Join?</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> </div> </div> <div class='scene'> <div class='container'> <h1>Projects</h1> <div class='project'> <p>Coming soon.</p> </div> <h2 style='padding-top:40px;'>Groups</h2> <div class='project'> <h2>Team Alpha Web Developers</h2> <p>Team Alpha's elite web developer division -</p> <a href='https://www.khanacademy.org/computer-programming/team-alpha-web-devs-ft-leaferstudios/5113113829097472' target='_blank'><button class='btn btn-primary'>Current Homepage <i class='material-symbols-outlined'>open_in_new</i></button></a> </div> <div class='project'> <h2>Team Alpha Press</h2> <p>News, tutorials, and more.</p> <button class='btn btn-disabled'>Homepage in Development <i class='material-symbols-outlined'>code</i></button> </div> </div> </div> <div class='scene'> <div class='container'> <h1>Resources</h1> <p style='padding-bottom:300px;font-size:40px;text-align:center;position:relative;top:130px;'>Coming soon.</p> </div> </div> <div class='scene'> <div class='container'> <h1>Events <i class='material-symbols-outlined'>event</i></h1> <div class='project'> <h2>Team Alpha Launch</h2> <p>25 June 2024<br>Join in the Tips & Thanks below!</p> </div> <div class='project'> <h2>Team Alpha Web Division Launch</h2> <p>2 June 2024<br><a href='https://www.khanacademy.org/computer-programming/team-alpha-web-devs-ft-leaferstudios/5113113829097472' target='_blank'>Current Homepage Link <i class='material-symbols-outlined'>open_in_new</i></a></p> </div> </div> </div> <div class='scene'> <div class='container'> <h1>News <i class='material-symbols-outlined'>news</i></h1> <div class='project'> <h2>Opening</h2> <p>25 June 2024<br>Joining is open! The homepage has been finished, but expect more updates later on because Team Alpha is brand new. Have any feedback or bug reports concerning this website? Let me know in the Tips & Thanks below and I will reply as soon as possible.</p> </div> </div> </div> <div class='scene'> <div class='container'> <h1>Join <i class='material-symbols-outlined'>add</i></h1> <p>Data received from you will be put on the Team Alpha homepage "as is". Please ensure that all information is accurate before submitting!</p> <form id="joinForm"> <div class="form-group"> <label for="name">Username:</label> <input placeholder='Username (no special characters)' type="text" id="name" name="name" required> </div> <div class="form-group"> <label for="email">Profile Link:</label> <input placeholder='Khan Academy Profile Link (e.g. https://www.khanacademy.org/profile/kaid_553656479258879622339276/)' type="email" id="email" name="email" required> </div> <div class="form-group"> <label for="experience">Bio:</label> <textarea placeholder='Tell us a little bit about yourself (will be featured on the homepage)!' id="experience" name="experience" rows="4" required></textarea> </div> <div class="form-group"> <label for="level">Coding Level:</label> <select id="level" name="level" required> <option value="0">Absolute Beginner</option> <option value="1">Novice</option> <option value="2">Intermediate</option> <option value="3">Semi-Advanced</option> <option value="4">Advanced</option> <option value="5">Expert</option> </select> </div><br> <button type="button" class="btn btn-success" onclick="handleSubmit()">Submit</button> </form> <div id="message" class="message" style="display:none;padding-top:25px;font-size:18px;"> Copied to clipboard! Paste it in the tips & thanks below to join Team Alpha! </div> </div> </div> <div class='scene'> <div class='container'> <h1>Frequently Asked Questions <i class='material-symbols-outlined'>info</i></h1> <ul style='padding:20px;' class='g'> <li class='g'>Question: Can anyone join Team Alpha?</li> <li class='g'>Answer: Yes, anyone can join Team Alpha as long as they agree to be respectful and follow the Khan Academy community guidelines.</li> <li class='g'>Question: Do I have to choose between joining another competition or team and this team?</li> <li class='g'>Answer: No, any time commitment and time zone/geographical location is accepted.</li> <li class='g'>Question: Is there a max team size?</li> <li class='g'>Answer: No. We just opened up and everyone is welcome! </li> <li class='g'>Question: Are programming teams allowed on Khan Academy?</li> <li class='g'>Answer: Yes, provided that the team is for computer programming related topics only.</li> </ul> </div> </div> <div class='scene'> <div class='container'> <h1>Team <i class='material-symbols-outlined'>groups_2</i></h1> <div id='team'></div> </div> </div> <footer class="footer"> <div class="container"> <div class="row"> <div class="col"> <h3>Team Alpha</h3> <p style='line-height: 22px;'>Uniting Coders, Igniting Potential.</p> </div> <div class="col"> <h3>Quick Links</h3> <ul> <li><a href="javascript:scene(0);">Home</a></li> <li><a href="javascript:scene(1);">About</a></li> <li><a href="javascript:scene(2);">Projects</a></li> <li><a href="javascript:scene(3);">Resources</a></li> </ul> </div> <div class="col"> <h3>Contact</h3> <p>Founder, CEO, Author of website: <a href='https://www.khanacademy.org/profile/kaid_553656479258879622339276/' target='_blank'>LeaferStudios</a></p> <p>Author's <a href='https://www.khanacademy.org/computer-programming/leaferstudios/4934504502870016' target='_blank'>KA Website</a></p> </div> </div> <div class='row'> <div class='col text-left'> <p>© 2024 <a href='https://www.khanacademy.org/profile/kaid_553656479258879622339276/'>LeaferStudios</a></p> </div> <div class='col text-right'> <p><a href='#!' onclick='window.scroll({ top:0, left: 0, behavior:"smooth" });'>Back to Top</a></p> </div> </div> </div> </footer> <script type> var teamArray = [{ "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" }]; function handleSubmit() { const form = document.getElementById('joinForm'); const name = form.name.value; const email = form.email.value; const experience = form.experience.value; const level = form.level.value; const formData = { username: name, link: email, bio: experience, level: level }; const formDataString = JSON.stringify(formData); const tempTextarea = document.createElement('textarea'); tempTextarea.value = formDataString; document.body.appendChild(tempTextarea); tempTextarea.select(); tempTextarea.setSelectionRange(0, 99999); document.execCommand('copy'); document.body.removeChild(tempTextarea); document.getElementById('message').style.display = 'block'; // Push the new member object into the team array teamArray.push(formData); // Display the updated team list displayTeam(); } function displayTeam() { const teamDiv = document.getElementById('team'); teamDiv.innerHTML = ''; // Clear previous content // Loop through the teamArray and create HTML for each member teamArray.forEach(member => { const memberDiv = document.createElement('div'); memberDiv.classList.add('team-member'); // Create an anchor tag to link to the member's profile const profileLink = document.createElement('a'); profileLink.href = member.link; // Set href attribute to member's link profileLink.target = '_blank'; // Open link in a new tab/window (optional) profileLink.className = 'no'; // Create the inner content of the member div profileLink.innerHTML = ` <h2>${member.username}</h2> <p>${member.bio}</p> <p><strong>Profile Link:</strong> ${member.link}<br><strong>Level:</strong> ${member.level}</p> `; // Append the anchor tag to the memberDiv memberDiv.appendChild(profileLink); // Append the memberDiv to the teamDiv teamDiv.appendChild(memberDiv); }); } displayTeam(); </script> <script type='application/javascript'> function $(selector) { if (selector.startsWith('#')) { return document.getElementById(selector.substring(1)); } else { return document.querySelectorAll(selector); } } function scene(index) { window.scroll({ top: 0, left: 0, behavior: 'smooth' }); for (var i = 0; i < $('.scene').length; i++) { $('.scene')[i].style.display = 'none'; } $('.scene')[index].style.display = 'block'; } scene(0); function toggleTheme() { if (document.getElementById('themeIcon').innerHTML === 'light_mode') { document.body.className = 'light-theme'; document.getElementById('themeIcon').innerHTML = 'dark_mode'; } else { document.getElementById('themeIcon').innerHTML = 'light_mode'; document.body.className = 'dark-theme'; } }; toggleTheme(); toggleTheme(); function toggleNavbar() { var navbar = document.querySelector('.navbar'); navbar.classList.toggle('collapsed'); if (document.getElementById('navbarIcon').innerHTML === 'menu') { document.getElementById('navbarIcon').innerHTML = 'close'; } else { document.getElementById('navbarIcon').innerHTML = 'menu'; } /if (document.querySelector('.navbar').classList.contains('collapsed')) { document.querySelector('.navbar').classList.remove('collapsed'); } else { document.querySelector('.navbar').classList.add('collapsed'); }/ } // toggleNavbar(); // /var navbarLinks = document.querySelectorAll('.navbar a'); navbarLinks.forEach(function(link) { link.addEventListener('click', toggleNavbar); });/ </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	22,1525
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgJu8gLTjCAw
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, 1719345627402
Updated	6 months ago, 1719345627402
Source Deleted	unknown