I am trying to build a streaming site for those user who love to watch/stream online and download for offline watch. In my streaming site I like to add "movie, tv show, drama and anime" for users to watch. Can you make me a "Homepage" for my site. My streaming site name is "Aniwind".
Homepage layout, design, color etc instruction follow my instructions request. Make sure you implemented all my request and they are working properly acceppting user response and also updating with based on user response/click/selection choice.
Instruction began for (mobile phone view/layout):
01. First Head section items and position:
(Head section) Mobile phone view: add a three line expand and collaspe able hamburger menu. Hamburger menu items/options ( Home, Genres, Countrys, Top IMdB, Updates, Sent Request, Community) add a multi select dropdown feature for "Genres and Countrys" because they have so many options to choose. Show dropdown in two colums for better readability and selection. Organized genres and countrys multiple select options by "Alphabatic serial wise left to right". Hover effect for main menu items "main menu items will changed their background color to this new color hex code: "#692760 and rgb code: rgb(105, 39, 96)" Add this hover effect for only "Home, Genre, Country, Top ImdB, Updates, Sent Request, Community" menu items not for drop-down menu items. The color will only changed if user clicked on any of this menu items. For "Community" add circle shape border and community menu item potion bottom of all menu items. Community menu item will cover two colums length of position. Add a blur-transparent background when hover effect not showing to the user. Community text position center of the border. For Genrs and country drop-down options apply this hover effect "a stright forward line of this color "hex code: #5f1d55 and rgb code: rgb(95, 29, 85)" will show when user clicked. Stright forward line length little longer than dropdown option text lenght. Use svg/svg victor icon for all main menu items do not use for dropdowns items. Make sure when user click on the menu icon the popup from the left side make sure showup menu items background do not cover/take full display it should just take more than the menu items text width length for the background. Head section center position be for "website logo" medium size. Add a search functipnality right side of the head section. How search function should work. use this search function instruction to make excite same functionality search. That work in real time like live search:
user clicked on the search icon and a search bar show up. just below the search icon. search bar position center. Search bar border circle shape. Add a filter function so user can search a show by [ "Type: Anime, movie, drama, tv show; Quality, Country, Genres, Airied Year, Studio, Short By: "Latest, Most popular, Score, Newst to oldest"] without even typing a show keyword in the search bar. Filter item options are "Country and Geres are dropdown and make all filter items to checkbox". Make sure entire filter block verticaly scrollable.Add a profissional SVG/SVG Victor icon to indicate its a filter option. When user click on the filter option then the filter block showup/popup middle of the display. Filter icon position inside the search bar farest left side of the search bar. Apply search and filter functionality and work proccess on computer also. Add a search suggesstion when user start typing show keyword title the search suggestion will show search result below the search bar to the user. Show 6 search suggestion to the user. Make Search suggestion layout like this "search suggestion will show search result with show poster/thumnail image. Show search suggestion as a list format. The show poster position far left side of the list then add show title with boild text. Title position right side of the poster. Make sure full title should shown. Then add/show one more title but this title will not be an english. Make it subtitle. Do not use boild text for it. Then add/show metadata below the subtitle. Metadata are "Aired year, Duration, Type, Rating.
Make sure s2arch function and menu work on all mobile browser portrate, landshape and mobile browser desktop mode. Keep search functionality same for all devices. For desktop and laptop display show direct search bar for user to enter the search keyword. Add this "View all result" button bellow the search suggestion. Button position center. Button background color hex code: #963366 and rgb code: 150, 51, 102 button text color light white. when user click on this button they will enter "search quare result" page where all search keyword related show shown up. Maintain same space amoung all elements in the head section (menu bar, logo and search icon)
Head section design and layout for computer view:
for computer head section farest left side for the menu items where all the menu items show up. Mobile, tablet and computer maintain the same menu items serial like this "Home, Genres, Countrys, Top ImdB, Updates, Sent Request, Community". Make sure menu items position is head section farest left side on this serial "Home, Genres, Countrys, Top ImdB, Updates, Sent Request, Commutiny" all these menu items position (side by side/besides each other). Add a multi select dropdown feature for "Genres and Countrys" because they have so many options to choose from. Show Genre and Country dropdown in four colums for better readability and selection. Make sure each "Genre and Country" dropdown colums should have 10 items. Organized genres and countrys multiple select drop-down options by "Alphabatic serial wise left to right". Hover effect for main menu items "main menu items will changed their background color to this new color hex code: "#692760 and rgb code: rgb(105, 39, 96)" Add this hover effect for only "Home, Genre, Country, Top ImdB, Updates, Sent Request, Community" main menu intems not for drop-down menu items. The color will only changed if user clicked/mouse pointer come near/over the any on of those main menu items. For "Community" menu item add a circle shape border and community menu potion bottom of all menu items. Add a blur-transparent background when hover effect not showing to the user. Make Country menu drop-down item also take also four colums length of position to show country multiple selection same as genres drop-down. Each colums should have 10 items. For Genrs and country drop-down options apply this hover effect "a stright forward line of this color "hex code: #5f1d55 and rgb code: rgb(95, 29, 85)" will show when user clicked/mouse pointer come near/over the dropdown option. Stright forward line length little bit longer than the dropdown option text lenght. Use svg/svg victor icon for all main menu items do not use for dropdowns items. Use (airplane/send) icon for "Sent Request". Head section center position is only for "website logo". Add a search functipnalitylefty right side of the head section like a search bar. How search function should work in real time data like a live search functionality:
when a user clicked on the search bar/search icon for mobile browser. After clicking on search bar on computer user enter search keyword like "show title, Japanese title, Subtitle, Original title" search suggestion show search result based on user enter show keyword matched. I would like if you "Add a filter function feature" in the search bar so user can search a show by [ "Type: Anime, movie, drama, tv show; Quality: HD, 4K, SD etc; Countrys, Genres, Airied Year, Studio, Short By: "Latest Relesed, Most popular, Score, Newest to oldest etc"] even without typing a show title keyword in the search bar. Filter item options are "checkbox". Make entire filter as a popup block and verticaly scrollable. In mobile browser make search bar border circle shape. Search and filter works funtionality excite same as both (mobile, tablet and computer).
For mobile phone browser after clicking on search icon a search bar showup just a little below of the search icon Then user enter search keyword and search suggestion start show up search keyword related shows in the search suggestion. Add search suggesstion when user will start typing show keyword title the search suggestion will show search result below the search bar to the user. Show 6 search suggestion to the user. Make Search suggestion layout as a list format like this "search suggestion will show search result with show poster/thumnail image. Show search suggestion as a "card list" format.
Search Suggestion layout design: The show poster position farest left side of the list then add show title with boild text. Title position right side of the poster. Make sure full title should shown. Then add/show one more title but this title will not be an english title. It will be a english-japanes title or english-korean title. This title is only for "Anime and dramas" types. Make it sub-title format. Make the sub-title text size smaller than Main english title. Do not use boild text for it. Use plain text. Then add/show metadata below the subtitle. Metadata are "Aired year, Duration, Type, Rating.
Make sure search and filter function and menu work on all mobile browser portrate, landshape and mobile browser desktop mode also work on tablet and computer. Keep search functionality same for all devices. For desktop and laptop display show direct search bar no search icon. for computer user to enter the search keyword into the search bar quickly. Add this "View all result" button bellow the search suggestion. Button position center. Button background color hex code: #963366 and rgb code: 150, 51, 102 button text color light white. when user click on this button they will enter "search quare result" page where all search keyword related show shown up. Add "View all Result" button on all devices. make sure the mobile, tablet and computer view resonsive and acceppting, taking user responce, Request, and clicked.
Here is the Genrez names use these genres:
Action, Adventure, Cars, Comedy, Dementia, Demons, Drama, Ecchi, Fantasy, Game,
Harem, Historical, Horror, Isekai, Josei, Kids, Magic, Martial Arts, Mecha,
Military, Music, Mystery, Noir, Parody, Police, Psychological, Politic, Romance,
Reality-Show, Reality-TV, Samurai, School, Sci-Fi, Seinen, Shoujo, Shoujo Ai,
Shounen, Shounen Ai, Slice of Life, Space, Sports, Super Power, Supernatural,
Thriller, Vampire, War, Tragedy, Mythology, Cyberpunk, Post-Apocalyptic,
Gag Humor, Satire, Detective, Cooking, Idols, Yaoi, Yuri
Here is the country names use these countrys:
Argentina, Australia, Austria, Bangladesh, Belgium, Brazil, Canada, Chile,
China, Colombia, Czechia, Denmark, Egypt, Finland, France, Germany, Greece,
Hong Kong, Hungary, Iceland, India, Indonesia, Iran, Ireland, Israel, Italy,
Japan, Mexico, Netherlands, New Zealand, Nigeria, Pakistan, Philippines,
Poland, Russia, South Africa, Spain, Sweden, Taiwan, Thailand, Turkey, UK,
USA, Peru, Fiji, Kenya
Body Section (Mobile and Computer view/layout) design: Add a "Hero Slide show" where trending and top airing shows will be shown. Slide show width will cover/reached/take farest corner of the device width display. Height you adjust. I want my slide-show layout/shape look like a "rectangular" for better design main focus on (show poster, title, description, and space between elements, buttons size, texts, metadata etc). I want to show 12 slides show. How each slide show should look to the user "Show backdrop poster, add a number badget for user so user can understand which number of slide show is currently they are seeing. Number badget like this "#Spotlight01" badget position slide-show left side just little bit below of the middle. Then add show title use h2/h3 for title text size. Make sure full title clearly visible to the user. For font size use 15/16 px. After title then add show description. Do not need to show full description. for description use plain text and font size 12/13px. Add metadata before the title. Metadata are "Airied year, Type, Duration, Rating, Genre, HD badget". After adding description add two buttons below the description. Buttons are "Watch now" and "Details" make these two button border circle shape. I want these two buttons position (besides/next/side by side) to each other not updown. Use svg/svg-victor icon to indicate what for this two buttons are. For "Details" button background use blur transparent and also add this color "hex code:#d97c9b when user clicked on the details button the button background color changed to this color and for "Watch now" button use this color for background hex code: #bf2458 HSL code: hsl(340, 68, 45) RGB code: rgb(191, 36, 88) For mobile and computer slide-show will auto-play but I want to also add arrow navigation for computer and mobile phone. I want to add manual left to right and right to left smooth scrolling feature for mobile and tablet devices. Make auto play interval 6sec. For computer make slideshow navigation arrows background transparent and use svg profissional navigation arrow icon. Arrows position slide-show bottom right side. Same line as (watch now and details) button position. Make both arrow position side by side/next to each other. Not up-down. Do not show arrow navigation for mobile view "portrait, landshape and desktop view in mobile browser" Make ensure entire slide-show is responsive on all devices, never overlap with other sections and all 12 slide-shows are correctly playing in the alide-show. Slide-show must stay on the body/main section top. Make sure slide-show support mobile browser "landshape and desktop" mode. View port for both buttons (watch now and details) these two buttons width will auto adjust based on device display size:
2. Viewport-Based Scaling (vw units):
2.5vw = 2.5% of viewport width for font
2vw = 2% of viewport width for vertical padding
4vw = 4% of viewport width for horizontal padding
20vw = 20% of viewport width for min-width
3. Device Size Ranges:
Device Viewport Font Size Padding Total Width
Mobile 320px 12px 10px 20px ~100px
Tablet 768px 14px 13px 30px ~130px
Desktop 1200px 16px 16px 40px ~160px
After complete creating Hero slide-show create these Ads banner and sections:
Before creating sections can you make me a ads show banner. so I can show ads into this banner for my site user. Make sure it support these types "video, image, image+video combained, slide-show, slideshow+image, image slide-show, video slide-show etc" ads banner must should look like landshape like this "450×80" hight ok but make sure width adjust based on device screen. make banner responsive clickable. Make sure this ads banner show across on all devices. How ads banner should look like this sample code:
01. After completeing creating ads banner create a "Trending" section (mobile view - tablet - computer) view combained instruction:
show 40 shows in a card grid layout view. Card grid layout/design "card top show poster - below poster add show title- make sure title bold and full title can be shown. If needed you can go two lines for title but do not go mare than two lines. Below the title add show metadata like theses "Type, Duration and Airied uear" show aired year in full min. For mobile phone two card grid layout post per row, For tablet Show 2-4 post per row and for computer show 4-7 posts per row. Adjust tablet/computer posts per row based on device display size. Make entire card oneclick. ensure show full poster is visibale to the user. Make this section "horizontally" smooth scrolling and also add navigation arrow both left and right side for computer navigation' Add a "View all" button right oposite side of section "Name (Trending)". View all button bg color "hex code: #cc5079" button border circle shape with svg/svg victor icon. In this section show all (Ongoing/Airing/Current runing year Movies, TV shows, Drama and Anime) current year all latest shows.
02. Section name "Top Airing":
show 40 shows in a card grid layout view. Card grid layout/design "card top show poster - below poster add show title- make sure title bold and full title can be shown. If needed you can go two lines for title but do not go more than two lines. Below the title add show metadata like theses "Type, Duration and Airied uear" show aired year in full min. For mobile phone two card grid layout post per row, For tablet Show 2-4 post per row and for computer show 4-7 posts per row. Adjust tablet/computer posts per row based on device display size. Make entire card oneclick. ensure show full poster is visible to the user. Make this section "horizontally" smooth scrolling and also add navigation arrow both left and right side for computer navigation' Add a "View all" button right oposite side of section "Name (Top Airing)". View all button bg color "hex code: #cc5079" button border circle shape with svg/svg victor icon. In this section show all (Ongoing/Airing Drama and Anime) current year all latest shows.
03. Section name "Latest Movies":
show 40 shows in a card grid layout view. Card grid layout/design "card top show poster - below poster add show title- make sure title bold and full title can be shown. If needed you can go two lines for title but do not go mare than two lines. Below the title add show metadata like theses "Type, Duration and Airied uear" show aired year in full min. For mobile phone two card grid layout post per row, For tablet Show 2-4 post per row and for computer show 4-7 posts per row. Adjust tablet/computer posts per row based on device display size. Make entire card one-click. ensure show full poster is visible to the user. Total row number 15. Add a "View all" button right opposite side of section "Name (Latest Movies)". View all button bg color "hex code: #cc5079" button border circle shape with svg/svg victor icon. In this section show all (Ongoing/Airing/New/latest release Movies) current year all latest movies.
After/Below the 03 section (Latest Movies) can you make me one more a ads show banner. so I can show ads into this banner for my site user. Make sure it support these types "video, image, image+video combained, slide-show, slideshow+image, image slide-show, video slide-show etc" ads banner must should look like landshape like this "450×90" hight ok but make sure width adjust based on device screen. make banner responsive clickable. Make sure this ads banner show across on all devices. Make sure ads height and width responsive and auto fit user device display size. How ads banner should look like this sample code:
04. Section name "Latest TV-Show":
show 40 shows in a card grid layout view. Card grid layout/design "card top show poster - below poster add show title- make sure title bold and full title can be shown. If needed you can go two lines for title but do not go mare than two lines. Below the title add show metadata like theses "Type, Duration and Airied uear" show aired year in full min. For mobile phone two card grid layout post per row, For tablet Show 2-4 post per row and for computer show 4-7 posts per row. Adjust tablet/computer posts per row based on device display size. Make entire card oneclick. ensure show full poster is visible to the user. Total row number 15. Add a "View all" button right opposite side of section "Name (Latest TV-Show)". View all button bg color "hex code: #cc5079" button border circle shape with svg/svg victor icon. In this section show all (Ongoing/Airing/latest releases TV shows, Series and Drama) current year all latest shows will shown.
05. Section Name "Latest Anime":
show 40 shows in a card grid layout view. Card grid layout/design "card top show poster - below poster add show title- make sure title bold and full title can be shown. If needed you can go two lines for title but do not go mare than two lines. Below the title add show metadata like theses "Type, Duration and Airied uear" show aired year in full min. For mobile phone two card grid layout post per row, For tablet Show 2-4 post per row and for computer show 4-7 posts per row. Adjust tablet/computer posts per row based on device display size. Make entire card oneclick. ensure show full poster is visible to the user. Total row number 15. Add a "View all" button right opposite side of section "Name (Latest Anime)". View all button bg color "hex code: #cc5079" button border circle shape with svg/svg victor icon. In this section show all (Ongoing/Airing/New relese all the Anime) current year all latest anime will showup here. Add an (anime certification) badget like these "TV-14, 18+,TV-MA etc" top right side of the card grid layout. Badget size small nut clearly visible to the user. Apply this badget only for latest anime section.
After 05 section can you make me one more ads show banner. so I can show ads into this banner for my site user. Make sure it support these types "video, image, image+video combained, slide-show, slideshow+image, image slide-show, video slide-show etc" ads banner must should look like landshape like this "450×60" hight ok but make sure width adjust based on device screen. make banner responsive clickable. Make sure this ads banner also show on all devices. Make sure ads height and width responsive and auto fit user device display size. use same sample code:
06. Section name "Most Favorite":
show 40 shows in a card grid layout view. Card grid layout/design "card top show poster - below poster add show title- make sure title bold and full title can be shown. If needed you can go two lines for title but do not go mare than two lines. Below the title add show metadata like theses "Type, Duration and Airied uear" show aired year in full min. For mobile phone two card grid layout post per row, For tablet Show 2-4 post per row and for computer show 4-7 posts per row. Adjust tablet/computer posts per row based on device display size. Make entire card oneclick. ensure show full poster is visible to the user. Total row number 12. Add a "View all" button right opposite side of section "Name (Most Favorite)". View all button bg color "hex code: #cc5079" button border circle shape witj svg/svg victor icon. In this section show all (Ongoing/Airing/New release all the Anime) current year all latest anime will show up here. Add a rating budget like these "svg golden color star icon then beside show (imdb, simkl or tmdb) score number (8.9)" top right side of the card grid layout. Badget size small but clearly visible to the user. Apply this badget only for "Most Favorite" section.
07. Latest Completed section:
show 40 shows in a card grid layout view. Card grid layout/design "card top show poster - below poster add show title- make sure title bold and full title can be shown. If needed you can go two lines for title but do not go mare than two lines. Below the title add show metadata like theses "Type, Duration and Airied uear" show aired year in full min. For mobile phone two card grid layout post per row, For tablet Show 2-4 post per row and for computer show 4-7 posts per row. Adjust tablet/computer posts per row based on device display size. Make entire card one-click. ensure show full poster is visible to the user. Total row number 14. Add a "View all" button right opposite side of section "Name (Latest Completed)". View all button bg color "hex code: #cc5079" button border circle shape with svg/svg victor icon. In this section show all the show ended in "Current/last" year all the ended/finished/completed (Movies, drama, tv show and anime) will showup here.
After Complete creating all seven section along with hero slide show add one more ads banner below the seven section done.
can you make me one more ads show banner. so I can show ads into this banner for my site user. Make sure it support these types "video, image, slide-show, image slide-show, video slide-show etc" ads banner must should look like landshape like this "300x250" make sure width and hight are adjust based on device screen. I want ot to look like rectangual shape ads banner. Make banner responsive and clickable. Make sure this ads banner also show on all devices. ads banner sample code:
Footer section:
In footer section can you create a block/banner/contanier for my website social media platform profiles. where user can see which social media we are in. Use Svg/Svg victor icon for social media platform to indicate. Social media block/container background color hex code: "#d97c9b" we are current here on these platforms "Quora, Telegram, Pinterest, discord, Reddit, Twitter and Bluesky"
Quora profile url: "https://aniwind.quora.com/"
Telegram url: "https://t.me/aniwindstream"
Twitter: "https://x.com/zenos_qv"
Discord: "https://discord.com/channels/1208760350556819508/1208760351995469847"
Bluesky: "https://bsky.app/profile/haruto-senpai.bsky.social"
Below the social media (block/banner/container) add these footer menus "Terms of service, DMCA, Contact, Sent Request, Home" in a single line. Below the footer menu add this text: "Aniwind does not store any files on our server, we only linked to the media which is hosted on 3rd party services.
© Aniwind.to. All rights reserved." text position footer center
Make sure homepave mobile view comtefixeble/responsive on mobile browser land and deesktop view also. For homepage "head, body and footer" section responsive,functional and taking user response and shoing result to the user. For mobile browser body part landshape/desktop mode will show "three/four" post per row on the screen. Apply this for all the section in body part from "Trending to Latest Completed" section.
Use this for Home page background color hex code: #3e1f2b HSL code: hsl(337, 33, 18) and rgb code: rgb(62, 31, 43)
Use this color for head and footer section background color hex code: #513540 hsl code: (336, 21, 26) and rgb code: (81, 53, 64)