codebridge-ai
Version:
Complete fullstack AI coding platform with AST-based code integration and local LLM support. Now with comprehensive web technology support (HTML/CSS/JS) plus JavaScript, Python, Rust, and C++.
20 lines • 1.85 kB
JSON
{
"timestamp": "2025-08-02T16:19:40.536Z",
"model": "deepseek-coder:6.7b",
"language": "web",
"scenario": "css-responsive",
"task": "Make responsive with flexbox/grid and mobile-first approach",
"originalCode": ".container {\n width: 1200px;\n margin: 0 auto;\n}\n\n.card {\n width: 300px;\n float: left;\n margin: 10px;\n}",
"rawResponse": "Sure, here is your updated CSS code using a mobile-first approach with Flexbox:\n\n```css\n.container {\n // @rename flexContainer\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n}\n\n.card {\n // @delete\n float: left;\n margin: 10px;\n \n // @params newWidth\n width: 85%;\n max-width: calc(300px + 2vw); /* Adjusts card size based on viewport */\n}\n```\nIn this code, `flexContainer` is the renamed class name for the container. The cards are no longer floated left and have a margin of 10px. Instead, they will wrap in rows when there isn't enough space horizontally. The width of the card has been adjusted to be responsive with `85%` as base value and `max-width: calc(300px + 2vw);` which means that it can grow up to 50% more than its initial size at larger viewport sizes (which is based on a 300px card width). This approach ensures the responsiveness of your design while maintaining a reasonable base size for smaller screens.\n",
"improvedCode": ".container {\n // @rename flexContainer\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n}\n\n.card {\n // @delete\n float: left;\n margin: 10px;\n \n // @params newWidth\n width: 85%;\n max-width: calc(300px + 2vw); \n}",
"duration": 7702,
"success": false,
"qualityMetrics": {
"hasCode": true,
"hasResponsive": true,
"score": 0.35714285714285715,
"rawScore": 0.5,
"maxScore": 1.4
},
"error": null
}