AI导哈

AI项目管理工具

AgentFlow是一款AI驱动的项目管理套件，支持通过Jira、GitHub和Azure DevOps进行工作区认证，提供现代设计和多提供商认证功能。

  • by adityashukla00001
  • CSS
  • 本地部署
  • 更新于
在 GitHub 查看 adityashukla00001/mcp-test-2

使用说明

AgentFlow-人工智能项目管理工具

AgentFlow是一个漂亮、响应迅速的登录页面，AgentFlow是人工智能驱动的项目管理套件，支持通过Jira、GitHub和Azure DevOps进行工作区身份验证。

特性

✨ 现代设计

  • 简洁、极简的用户界面与Figma的设计完全匹配
  • 带有微妙动画的渐变背景
  • 适用于所有屏幕尺寸的响应式布局

🔐 多提供商身份验证

  • 使用Jira登录
  • 通过 GitHub 登录
  • 使用Azure DevOps登录
  • 按钮交互的视觉反馈

📱 响应式设计

  • 移动优先策略
  • 针对台式机、平板电脑和移动设备进行了优化
  • 平滑过渡和悬停效果

文件结构

design-to-deployement-2/
├── index.html          # Main HTML structure
├── styles.css          # Styling and responsive design
├── script.js           # Interactivity and event handling
├── assets/             # SVG icons and graphics
│   ├── logo-gradient.svg      # AgentFlow logo
│   ├── jira-icon.svg          # Jira authentication icon
│   ├── github-icon.svg        # GitHub authentication icon
│   └── azure-icon.svg         # Azure DevOps authentication icon
└── README.md           # This file

快速开始

选项1：使用本地服务器（推荐）

如果你安装了Python：

# Python 3
python -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000

然后打开浏览器 http://localhost:8000

选项2：使用Node.js

如果你安装了Node.js：

npx http-server

然后打开浏览器到提供的URL（通常 http://localhost:8080)

选项3：直接文件访问

只需双击 index.html 在浏览器中打开它。注意：这是可行的，但在某些浏览器中可能对加载资源有限制。

浏览器支持

  • 铬/铬（最新）
  • Firefox（最新）
  • Safari（最新）
  • Edge（最新）
  • 移动浏览器

定制

颜色

在中编辑CSS变量 styles.css:

  • 背景渐变：更新 body 风格
  • 按钮颜色：修改 .signin-button 样式
  • 文本颜色：更新 color 属性

字体

该设计使用“Arimo”字体系列。要使用其他字体，请执行以下操作：

  1. 更新 font-family 财产在 styles.css
  2. 如果需要，添加字体导入（例如，从谷歌字体）

身份验证提供者

要添加或删除身份验证提供程序，请执行以下操作：

  1. 编辑中的按钮 index.html
  2. 更新 providers 数组in script.js
  3. 将相应的图标SVG添加到 assets/ 文件夹

实现注意事项

登录按钮当前显示演示通知。在生产中，他们将：

  1. 重定向到相应的OAuth提供者
  2. 处理身份验证流程
  3. 存储身份验证令牌
  4. 重定向到主仪表板

要实现真正的身份验证，您需要：

  • 每个提供程序的后端API终结点
  • OAuth客户端凭据
  • 会话管理
  • 安全最佳实践（CSRF令牌、安全Cookie等）

发展

该页面使用普通HTML、CSS和JavaScript构建，不需要框架或构建工具。这使得它：

  • 加载速度快
  • 易于修改
  • 与所有环境兼容
  • 易于部署

资产

所有SVG图标均来自Figma，并针对网络进行了优化。渐变徽标和提供者图标包含在 assets/ 文件夹。

响应断点

  • 桌面：1024px及以上
  • 药片，平板：640像素到1023像素
  • 移动：低于640px

该设计优雅地适应了所有屏幕尺寸，并优化了间距和字体大小。

许可证

该设计基于Figma模型创建，已准备好部署。

支持

对于修改或问题，只需编辑相应的HTML、CSS或JavaScript文件。所有代码都有很好的注释，易于理解。

内置于❤️ 使用HTML、CSS和JavaScript

相关 MCP