Промты на создание сайта, игры Doom, симуляций Ipod и OS
4 промта, которые я использовал в видео с обзором Gemini 3.5 Flash:
Сайт портфолио:
- You are an expert frontend developer and UI/UX designer.
- Output ONLY valid, production-ready code in a single HTML file containing embedded CSS and JS (perfect for a Canvas environment).
- NO markdown formatting around the code block (start directly with <!DOCTYPE html>).
- NO conversational text, NO explanations before or after the code.
- Use modern vanilla HTML5, CSS3, and JavaScript. Do not use heavy external frameworks like React or Three.js. You may use Google Fonts.
Design and build a modern, high-end programmer portfolio website. The visual aesthetic must be dark-themed, sleek, and minimalist, strictly avoiding generic "AI slop" UI patterns. It must feature a robust parallax scrolling effect and modern interactive elements.
- Colors: Deep dark background (e.g., #0a0a0a), crisp white typography, and a subtle vibrant accent color (e.g., electric blue or neon purple) for hover states. Do NOT use warm cream or terracotta defaults.
- Typography: Use a clean, modern sans-serif font (e.g., 'Inter', sans-serif) and a monospace font for code-related accents.
- Modern Effects: Implement CSS variables, smooth scrolling (scroll-behavior: smooth), subtle glassmorphism (backdrop-filter: blur) for sticky headers or cards, and clean hover transitions (z-index stacking, drop shadows).
- Parallax: Implement a pure CSS or lightweight JS parallax effect in the Hero section (e.g., moving background abstract layers at different speeds relative to the scroll position).
1. Hero Section: Full viewport height (100vh), striking typography with the developer's name, a dynamic subtitle (e.g., "Software Engineer & UI Designer"), and the parallax background effect.
2. Skills/About: A grid layout showcasing technical skills using modern card designs with a subtle hover lift and glow effect.
3. Projects: A gallery of 3 placeholder projects. Use CSS Grid or Flexbox. Each project card should have an image placeholder and a description.
4. Footer: A minimalist footer with social links and an email CTA.
Игра Doom
Act as an expert Game Developer specializing in Vanilla JavaScript, HTML5 Canvas, and retro 2.5D raycasting engines (like classic Doom or Wolfenstein 3D).
Design and build a functional 2.5D first-person shooter web game inside a single HTML file.
- SINGLE FILE: All HTML, CSS, and JavaScript must be contained within one single block of code.
- NO EXTERNAL ASSETS: Do not use external image URLs or heavy libraries. Generate basic procedural textures, color blocks, or simple base64 strings for weapons and enemies.
- NO EXPLANATIONS: Output ONLY the working code. Do not explain the code or add conversational filler.
- PERFORMANCE: Optimize the raycaster for smooth rendering in a modern browser.
- Environment: Dark, gritty, retro aesthetic with colored walls to simulate depth and shading (distance-based fog).
- UI: A classic bottom-screen HUD displaying Health, Armor, and current Weapon name.
- Z-Index & Canvas Stacking: Ensure the 3D raycasting is drawn on the background canvas, with weapons and UI overlayed on top.
When the user opens the HTML file, they must immediately experience the following:
1. Engine: A working 2.5D raycasting engine rendering a simple enclosed maze level.
2. Movement: The user can navigate using W, A, S, D keys and rotate the camera using the Left/Right arrow keys or Mouse. The player has collision detection with walls.
3. Weapons: The user holds a weapon (drawn using simple 2D canvas shapes or emojis) at the bottom center of the screen. Pressing keys '1' and '2' switches between two different weapons (e.g., Pistol and Shotgun) with a simple visual swap.
4. Enemies: There are at least two basic enemy entities in the maze (represented by colored billboards/rectangles facing the player).
5. Action: Pressing 'Space' or 'Left Click' triggers a firing animation (muzzle flash effect).
Ipod Classic
You are an Expert Frontend Developer and UI/UX Designer specializing in retro Apple interfaces.
Design and implement a fully functional, interactive web-based simulation of an Apple iPod Classic.
- Provide the solution as a single file (HTML/CSS/JS or a single-file React component, depending on what works best in this environment).
- Do not use heavy external 3D libraries (like Three.js). Implement visual effects using CSS 3D transforms, z-index stacking, and vanilla JavaScript/React state.
- Strictly output the working code without any conversational explanations or markdown blocks breaking the code execution.
- Visual Hardware: Pixel-perfect recreation of the iPod Classic casing, the screen area, and the iconic Click Wheel. Use realistic gradients, drop shadows, and glassmorphism where appropriate.
- Click Wheel Mechanics: The wheel must be interactive. It should support click events on the Top (Menu), Bottom (Play/Pause), Left (Prev), Right (Next), and Center (Select) buttons. Implementing a scroll/drag interaction around the wheel to navigate lists is highly desired.
- OS & Menus: Recreate the classic hierarchical UI (Main Menu -> Music, Settings, Extras). The "Settings" menu should have at least one working feature (e.g., toggling a dark/light theme or screen brightness).
- Cover Flow: Implement a CSS-based "Cover Flow" for the Music section. It must feature 3D stacking of album art, central focus scaling, and smooth sliding transitions when navigating left or right.
A polished, nostalgic, and immediately interactive iPod Classic simulation. The user should be able to click through menus, experience the Cover Flow, and feel the authentic Apple UI responsiveness.
Симуляция OS
You are an elite Frontend Architect and UI/UX Designer specializing in complex web applications.
Design and build a fully functional, highly polished Web-based Operating System UI (inspired by macOS aesthetics) contained entirely within a single HTML file (HTML, CSS, and JS combined).
1. Architecture: Build a robust Window Manager system. Windows must be draggable, closable, minimizable, and support z-index stacking (bringing the active window to the front).
2. UI/UX: Implement a stunning, glassmorphism-inspired design. Include a top menu bar (with a working digital clock) and a bottom dock with app icons. Use smooth CSS transitions for opening/closing apps.
3. Included Apps (Fully Functional):
- Text Editor: A clean notepad that allows typing, clearing text, and basic text formatting.
- Calculator: A working grid-based calculator with basic arithmetic operations.
- System Info: A small window showing "fake" system stats with beautiful UI bars.
4. Surprise Details: Include an unexpected micro-interaction (e.g., right-click context menu on the desktop, a dynamic background gradient, or icons that bounce on hover).
- SINGLE FILE: ALL code (HTML, CSS, JavaScript) MUST be in exactly one output block. Do not use external CSS/JS files.
- LIBRARIES: Rely on Vanilla JS and CSS3. You may use CDN links for icons (like FontAwesome or Phosphor icons) or fonts (like Google Fonts), but NO heavy frameworks (no React, no Vue).
- CODE QUALITY: Ensure the JavaScript is modular enough that adding a new app later is as simple as calling a `createWindow('appName')` function. Avoid overengineering the logic; keep solutions minimal and robust.
- OUTPUT: Output ONLY the raw HTML code in your response. No preambles, no explanations, no post-generation talk.
Think carefully about the CSS grid/flexbox layout for the desktop and dock. Focus heavily on a premium visual experience—use drop shadows, blur backdrops, and modern typography. Execute the code now.