Football-Tactics - Sell Project

Football Tactics: Project Description Overview Football Tactics is a responsive, single-page website that teaches football tactics visually. It presents 50 tactical patterns, each drawn as a simple pitch diagram with a one-sentence caption. Alongside the tactics, it shows live scores and news from six major competitions. It is built with plain HTML, CSS and JavaScript, so it needs no framework, build tool or backend and can be hosted on any static host such as GitHub Pages. Purpose and audience The site is for coaches, players and fans who want a quick, clear reference for how common football patterns work. The diagrams use only dots and arrows, so a pattern can be understood at a glance and reused on a tactics board or in a training session. The live section adds a reason to return to the site, since scores and headlines update on their own. Content The 50 tactics are split into four categories: Attack (17): combination play and chance creation, such as the Central Triangle, Fullback Overlap, Give and Go, Through Ball, Cutback, Third-Man Run, Near-Post Run and Short Corner Routine. Defense (17): shape and pressing principles, such as Zonal and Man-to-Man Marking, Low and Mid Block, High Press, Offside Trap, Flat Back Four, Touchline Trap and Corner Defence. Goalkeeper (8): Sweeper Keeper, Claiming Crosses, One-on-One, Quick Distribution, Playing Out from the Back and others. Full pitch (8): all-eleven movements, such as Goalkeeper to Striker, Fast Counter-Attack, Full-Pitch Press and the 4-3-3 Build-Up Shape. The diagram legend is consistent everywhere: blue dots are your team, red dots are opponents, solid arrows are passes, dashed arrows are runs without the ball, and shaded areas are zones. Main features Generated diagrams. There are no image files. Each diagram is an SVG that script.js draws from a few coordinates on a 100 × 64 pitch. Adding or correcting a tactic means editing one line of data, and every diagram stays visually consistent and sharp at any size. Zoom viewer. Clicking a diagram opens it in a larger view with zoom in and out (up to 250%), previous and next buttons, and keyboard shortcuts (Esc, left and right arrows). Browsing respects the active category filter. Filters. Visitors can show all tactics or only one category. Live scores and news. The bottom of the home page shows matches and headlines for Serie A, Premier League, LaLiga, Bundesliga, Ligue 1 and the Champions League. It refreshes every minute, shows the date and time of each match, and displays a blinking green indicator beside matches in progress. A live clock shows the current date and time. Chart. A Chart.js bar chart shows total goals per match for the selected league. Tips banner. Every 2 minutes a banner slides in for 10 seconds with a short coaching tip, rotating through a list. Promotional popup. Every 3 minutes a popup invites visitors to create an advertising campaign, linking to an external referral URL. It can be closed with the button or by clicking outside it. Pages. Home, About, Contact and FAQ work as sections of a single page, navigated through a fixed bottom menu and hash routing, so each page has its own URL such as #faq. Responsive design. The layout adapts from phones to desktops, with a CSS grid for the tactics, stacked columns on small screens and a sober, professional visual style. Technical design The project is three files: index.html holds the page structure, the zoom viewer and the popup markup. style.css holds the layout, the responsive rules and the visual style. script.js holds the routing, the tactics data, the SVG drawing function, the zoom viewer, the banner and popup timers, and the live-data code. The only external dependency is Chart.js 4.4.1, loaded from cdnjs. All interval timings (banner, popup, data refresh) are constants at the top of script.js, so they are easy to change or shorten for testing. Data source Live data comes from ESPN's public site API, which needs no API key. These endpoints are unofficial and undocumented, so they can change, be rate-limited or disappear without notice. The code handles failures by showing an "unavailable" message instead of breaking the page. Anyone using the site commercially should check ESPN's terms of use first. Limitations The tactics are simplified teaching patterns, not full match analysis, and they do not model every formation. The contact form is a front-end demo only. It shows a confirmation message but sends nothing, so it needs a backend or a form service to be useful. Live data depends on a third-party API that may stop working. The popup and banner are timed overlays. Visitors may find them intrusive, so consider longer intervals for a production site. Possible next steps Add a formation selector (4-4-2, 4-3-3, 3-5-2) so diagrams adapt to the chosen system. Animate passes and runs step by step in the zoom viewer. Add search and a favourites list. Add a dedicated tactics page with a description of when to use each pattern, its strengths...