标题：
Browse files政策法规知识库界面设计
页面结构说明：
请生成一个三栏式的政策法规知识库页面，风格简洁现代，带有轻微科技感与绿色主题配色（代表农业与政策科技）。
🧭 整体布局
页面采用 三栏布局（flex/grid）
左栏： 快捷入口与统计区（宽度约20%）
中间： 政策知识列表区（宽度约55%）
右栏： 智能问答区（宽度约25%）
风格参考“知识中台”、“智能政务系统”类设计，要求信息清晰、界面层次分明。
📂 左栏内容：快捷入口与统计
模块 1：快捷入口
标题：“快捷入口”
按钮或卡片样式入口：
📜 最新政策
💰 补贴申报
🧭 法规分类
📚 政策解读
🧾 我的收藏
模块 2：政策统计
标题：“政策统计”
展示：
累计收录：12,458 条
本月新增：326 条
政策来源：农业农村部、科技部、财政部、各地农委等
用进度条或圆形统计图展示趋势
风格要求：
左栏背景为浅绿色或白色渐变；
模块间有分隔阴影或边框线；
图标为线性风格（Lucide / Feather）。
📑 中间内容：政策知识列表区
标题：政策知识列表
内容示例（以卡片或表格列表展示）：
【农业农村部】《关于推进农业强国建设的若干意见》（2025-03-20）
【科技部】《国家重点研发计划2025年度项目指南》（2025-04-02）
【财政部】《中央财政农业支持资金管理办法》（2025-05-01）
【地方农委】《数字农业试点补贴政策》（2025-06-15）
功能：
支持搜索框（输入政策关键词、部门、年份等）
支持筛选（来源部门、政策类型、发布日期）
每条政策卡片可展开查看“政策要点解读”
鼠标悬浮时轻微阴影动画
风格要求：
主体为白色卡片式布局；
文字层次分明；
绿色强调色用于标题与交互按钮。
💬 右栏内容：智能问答区域
标题：智能问答（AI助手）
聊天气泡风格对话框
提示文本：“请输入政策相关问题，例如‘2025年种业创新有哪些资金支持政策？’”
显示 AI 的回答（政策摘要、引用来源等）
可点击“展开详情”查看原文链接
顶部提供“语义检索 / 新政策提醒 / 政策解读”快捷按钮
布局要求：
宽度约占整个页面的 1/4；
背景为浅灰或淡绿色渐变；
输入框固定在底部；
AI气泡与用户气泡颜色区分明显。
🌈 整体风格规范
主色：#16A34A（绿色）
辅色：#E8F5E9、#F9FAFB
字体：简洁现代（如 Source Han Sans 或 Inter）
圆角卡片、柔和阴影、悬浮轻动效
页面适配宽屏显示
📘 输出目标
生成一个三栏式页面的可视化界面，展示完整的“政策法规知识库”系统主页布局：
左侧为入口与统计模块
中间为政策知识列表
右侧为智能问答区（AI对话）
- README.md +8 -5
- components/policy-card.js +33 -0
- components/sidebar.js +114 -0
- index.html +158 -19
- script.js +74 -0
- style.css +40 -18
README.md
CHANGED
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: AgriPolicy Nexus Explorer 🌱
|
| 3 |
+
colorFrom: purple
|
| 4 |
+
colorTo: pink
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://huggingface.co/deepsite).
|
components/policy-card.js
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class CustomPolicyCard extends HTMLElement {
|
| 2 |
+
static get observedAttributes() {
|
| 3 |
+
return ['title', 'department', 'date', 'summary'];
|
| 4 |
+
}
|
| 5 |
+
|
| 6 |
+
constructor() {
|
| 7 |
+
super();
|
| 8 |
+
this.attachShadow({ mode: 'open' });
|
| 9 |
+
}
|
| 10 |
+
|
| 11 |
+
connectedCallback() {
|
| 12 |
+
this.render();
|
| 13 |
+
}
|
| 14 |
+
|
| 15 |
+
attributeChangedCallback(name, oldValue, newValue) {
|
| 16 |
+
if (oldValue !== newValue) {
|
| 17 |
+
this.render();
|
| 18 |
+
}
|
| 19 |
+
}
|
| 20 |
+
|
| 21 |
+
render() {
|
| 22 |
+
const title = this.getAttribute('title') || '';
|
| 23 |
+
const department = this.getAttribute('department') || '';
|
| 24 |
+
const date = this.getAttribute('date') || '';
|
| 25 |
+
const summary = this.getAttribute('summary') || '';
|
| 26 |
+
|
| 27 |
+
this.shadowRoot.innerHTML = `
|
| 28 |
+
<style>
|
| 29 |
+
.policy-card {
|
| 30 |
+
background-color: white;
|
| 31 |
+
border-radius: 0.75rem;
|
| 32 |
+
padding: 1.5rem;
|
| 33 |
+
box-shadow:
|
components/sidebar.js
ADDED
|
@@ -0,0 +1,114 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class CustomSidebar extends HTMLElement {
|
| 2 |
+
connectedCallback() {
|
| 3 |
+
this.attachShadow({ mode: 'open' });
|
| 4 |
+
this.shadowRoot.innerHTML = `
|
| 5 |
+
<style>
|
| 6 |
+
.sidebar-section {
|
| 7 |
+
background: linear-gradient(to bottom, #f7fafc, #f0fdf4);
|
| 8 |
+
border-radius: 0.75rem;
|
| 9 |
+
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
| 10 |
+
padding: 1.5rem;
|
| 11 |
+
margin-bottom: 1.5rem;
|
| 12 |
+
}
|
| 13 |
+
|
| 14 |
+
.quick-link {
|
| 15 |
+
display: flex;
|
| 16 |
+
align-items: center;
|
| 17 |
+
padding: 0.75rem 1rem;
|
| 18 |
+
border-radius: 0.5rem;
|
| 19 |
+
margin-bottom: 0.5rem;
|
| 20 |
+
transition: all 0.2s;
|
| 21 |
+
color: #374151;
|
| 22 |
+
}
|
| 23 |
+
|
| 24 |
+
.quick-link:hover {
|
| 25 |
+
background-color: #e5f7ed;
|
| 26 |
+
color: #166534;
|
| 27 |
+
transform: translateX(4px);
|
| 28 |
+
}
|
| 29 |
+
|
| 30 |
+
.quick-link i {
|
| 31 |
+
margin-right: 0.75rem;
|
| 32 |
+
color: #16a34a;
|
| 33 |
+
}
|
| 34 |
+
|
| 35 |
+
.stat-item {
|
| 36 |
+
display: flex;
|
| 37 |
+
justify-content: space-between;
|
| 38 |
+
margin-bottom: 0.75rem;
|
| 39 |
+
}
|
| 40 |
+
|
| 41 |
+
.progress-bar {
|
| 42 |
+
height: 8px;
|
| 43 |
+
background-color: #e5e7eb;
|
| 44 |
+
border-radius: 4px;
|
| 45 |
+
margin-top: 0.25rem;
|
| 46 |
+
overflow: hidden;
|
| 47 |
+
}
|
| 48 |
+
|
| 49 |
+
.progress-fill {
|
| 50 |
+
height: 100%;
|
| 51 |
+
background-color: #16a34a;
|
| 52 |
+
border-radius: 4px;
|
| 53 |
+
}
|
| 54 |
+
</style>
|
| 55 |
+
|
| 56 |
+
<div class="w-full">
|
| 57 |
+
<div class="sidebar-section">
|
| 58 |
+
<h3 class="text-lg font-semibold text-green-700 mb-4 flex items-center">
|
| 59 |
+
<i data-feather="zap" class="mr-2"></i> Quick Access
|
| 60 |
+
</h3>
|
| 61 |
+
|
| 62 |
+
<a href="#" class="quick-link">
|
| 63 |
+
<i data-feather="file-text"></i> Latest Policies
|
| 64 |
+
</a>
|
| 65 |
+
<a href="#" class="quick-link">
|
| 66 |
+
<i data-feather="dollar-sign"></i> Subsidy Application
|
| 67 |
+
</a>
|
| 68 |
+
<a href="#" class="quick-link">
|
| 69 |
+
<i data-feather="layers"></i> Regulation Categories
|
| 70 |
+
</a>
|
| 71 |
+
<a href="#" class="quick-link">
|
| 72 |
+
<i data-feather="book-open"></i> Policy Interpretation
|
| 73 |
+
</a>
|
| 74 |
+
<a href="#" class="quick-link">
|
| 75 |
+
<i data-feather="bookmark"></i> My Favorites
|
| 76 |
+
</a>
|
| 77 |
+
</div>
|
| 78 |
+
|
| 79 |
+
<div class="sidebar-section">
|
| 80 |
+
<h3 class="text-lg font-semibold text-green-700 mb-4 flex items-center">
|
| 81 |
+
<i data-feather="bar-chart-2" class="mr-2"></i> Policy Statistics
|
| 82 |
+
</h3>
|
| 83 |
+
|
| 84 |
+
<div class="stat-item">
|
| 85 |
+
<span class="text-sm text-gray-600">Total Collected</span>
|
| 86 |
+
<span class="text-sm font-medium">12,458</span>
|
| 87 |
+
</div>
|
| 88 |
+
|
| 89 |
+
<div class="stat-item">
|
| 90 |
+
<span class="text-sm text-gray-600">New This Month</span>
|
| 91 |
+
<span class="text-sm font-medium">326</span>
|
| 92 |
+
</div>
|
| 93 |
+
|
| 94 |
+
<div class="mb-4">
|
| 95 |
+
<div class="flex justify-between text-xs text-gray-500 mb-1">
|
| 96 |
+
<span>Monthly Growth</span>
|
| 97 |
+
<span>+8.2%</span>
|
| 98 |
+
</div>
|
| 99 |
+
<div class="progress-bar">
|
| 100 |
+
<div class="progress-fill" style="width: 65%"></div>
|
| 101 |
+
</div>
|
| 102 |
+
</div>
|
| 103 |
+
|
| 104 |
+
<div class="text-xs text-gray-500">
|
| 105 |
+
<p class="font-medium mb-1">Policy Sources:</p>
|
| 106 |
+
<p>Agriculture Ministry, Sci-Tech Ministry, Finance Ministry, Local Agricultural Committees</p>
|
| 107 |
+
</div>
|
| 108 |
+
</div>
|
| 109 |
+
</div>
|
| 110 |
+
`;
|
| 111 |
+
}
|
| 112 |
+
}
|
| 113 |
+
|
| 114 |
+
customElements.define('custom-sidebar', CustomSidebar);
|
index.html
CHANGED
|
@@ -1,19 +1,158 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
</
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>AgriPolicy Nexus Explorer | Policy Knowledge Base</title>
|
| 7 |
+
<link rel="stylesheet" href="style.css">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 11 |
+
<script src="components/sidebar.js"></script>
|
| 12 |
+
<script src="components/policy-card.js"></script>
|
| 13 |
+
<script src="components/chat-bubble.js"></script>
|
| 14 |
+
</head>
|
| 15 |
+
<body class="bg-gray-50 font-sans">
|
| 16 |
+
<div class="container mx-auto px-4 py-6">
|
| 17 |
+
<header class="mb-8">
|
| 18 |
+
<h1 class="text-3xl font-bold text-green-700 flex items-center">
|
| 19 |
+
<i data-feather="book-open" class="mr-2"></i> AgriPolicy Nexus Explorer
|
| 20 |
+
</h1>
|
| 21 |
+
<p class="text-gray-600">Your comprehensive agricultural policy knowledge base</p>
|
| 22 |
+
</header>
|
| 23 |
+
|
| 24 |
+
<div class="flex flex-col lg:flex-row gap-6">
|
| 25 |
+
<!-- Left Sidebar -->
|
| 26 |
+
<custom-sidebar></custom-sidebar>
|
| 27 |
+
|
| 28 |
+
<!-- Main Content -->
|
| 29 |
+
<main class="flex-1">
|
| 30 |
+
<div class="bg-white rounded-xl shadow-sm p-6">
|
| 31 |
+
<div class="flex justify-between items-center mb-6">
|
| 32 |
+
<h2 class="text-xl font-semibold text-green-700">
|
| 33 |
+
<i data-feather="file-text" class="mr-2"></i> Policy Knowledge List
|
| 34 |
+
</h2>
|
| 35 |
+
<div class="relative">
|
| 36 |
+
<input type="text" placeholder="Search policies..."
|
| 37 |
+
class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 w-full lg:w-64">
|
| 38 |
+
<i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
|
| 39 |
+
</div>
|
| 40 |
+
</div>
|
| 41 |
+
|
| 42 |
+
<div class="space-y-4">
|
| 43 |
+
<custom-policy-card
|
| 44 |
+
title="关于推进农业强国建设的若干意见"
|
| 45 |
+
department="农业农村部"
|
| 46 |
+
date="2025-03-20"
|
| 47 |
+
summary="提出农业强国建设的总体要求、重点任务和保障措施，明确到2035年基本实现农业现代化目标。">
|
| 48 |
+
</custom-policy-card>
|
| 49 |
+
|
| 50 |
+
<custom-policy-card
|
| 51 |
+
title="国家重点研发计划2025年度项目指南"
|
| 52 |
+
department="科技部"
|
| 53 |
+
date="2025-04-02"
|
| 54 |
+
summary="明确2025年度国家重点研发计划农业领域重点支持方向，包括种业创新、智能农业装备等。">
|
| 55 |
+
</custom-policy-card>
|
| 56 |
+
|
| 57 |
+
<custom-policy-card
|
| 58 |
+
title="中央财政农业支持资金管理办法"
|
| 59 |
+
department="财政部"
|
| 60 |
+
date="2025-05-01"
|
| 61 |
+
summary="规范中央财政农业支持资金管理，提高资金使用效益，明确资金分配、使用、监管等要求。">
|
| 62 |
+
</custom-policy-card>
|
| 63 |
+
|
| 64 |
+
<custom-policy-card
|
| 65 |
+
title="数字农业试点补贴政策"
|
| 66 |
+
department="地方农委"
|
| 67 |
+
date="2025-06-15"
|
| 68 |
+
summary="开展数字农业试点示范，对符合条件的智慧农业项目给予财政补贴支持。">
|
| 69 |
+
</custom-policy-card>
|
| 70 |
+
</div>
|
| 71 |
+
|
| 72 |
+
<div class="mt-6 flex justify-between items-center">
|
| 73 |
+
<span class="text-sm text-gray-500">Showing 4 of 12,458 policies</span>
|
| 74 |
+
<div class="flex space-x-2">
|
| 75 |
+
<button class="px-3 py-1 border rounded-lg text-green-700 border-green-300 hover:bg-green-50">Previous</button>
|
| 76 |
+
<button class="px-3 py-1 border rounded-lg bg-green-600 text-white">1</button>
|
| 77 |
+
<button class="px-3 py-1 border rounded-lg text-green-700 border-green-300 hover:bg-green-50">2</button>
|
| 78 |
+
<button class="px-3 py-1 border rounded-lg text-green-700 border-green-300 hover:bg-green-50">Next</button>
|
| 79 |
+
</div>
|
| 80 |
+
</div>
|
| 81 |
+
</div>
|
| 82 |
+
</main>
|
| 83 |
+
|
| 84 |
+
<!-- Right Sidebar -->
|
| 85 |
+
<aside class="w-full lg:w-80 space-y-6">
|
| 86 |
+
<div class="bg-white rounded-xl shadow-sm p-6">
|
| 87 |
+
<h2 class="text-xl font-semibold text-green-700 mb-4 flex items-center">
|
| 88 |
+
<i data-feather="message-square" class="mr-2"></i> AI Assistant
|
| 89 |
+
</h2>
|
| 90 |
+
|
| 91 |
+
<div class="space-y-4 mb-4 h-96 overflow-y-auto" id="chat-container">
|
| 92 |
+
<custom-chat-bubble
|
| 93 |
+
type="ai"
|
| 94 |
+
message="Hello! I'm your agricultural policy assistant. Ask me anything about policies, subsidies, or regulations.">
|
| 95 |
+
</custom-chat-bubble>
|
| 96 |
+
|
| 97 |
+
<custom-chat-bubble
|
| 98 |
+
type="user"
|
| 99 |
+
message="What are the new subsidy policies for 2025?">
|
| 100 |
+
</custom-chat-bubble>
|
| 101 |
+
|
| 102 |
+
<custom-chat-bubble
|
| 103 |
+
type="ai"
|
| 104 |
+
message="For 2025, key subsidy policies include: 1) Digital agriculture pilot subsidies (up to ¥500,000 per project), 2) Seed industry innovation grants, and 3) Eco-agriculture transition support. Would you like details on any specific program?">
|
| 105 |
+
</custom-chat-bubble>
|
| 106 |
+
</div>
|
| 107 |
+
|
| 108 |
+
<div class="flex space-x-2 mb-4">
|
| 109 |
+
<button class="flex-1 py-2 px-3 bg-green-50 text-green-700 rounded-lg text-sm hover:bg-green-100">Semantic Search</button>
|
| 110 |
+
<button class="flex-1 py-2 px-3 bg-green-50 text-green-700 rounded-lg text-sm hover:bg-green-100">New Policy Alerts</button>
|
| 111 |
+
<button class="flex-1 py-2 px-3 bg-green-50 text-green-700 rounded-lg text-sm hover:bg-green-100">Policy Analysis</button>
|
| 112 |
+
</div>
|
| 113 |
+
|
| 114 |
+
<div class="relative">
|
| 115 |
+
<input type="text" placeholder="Ask about policies..."
|
| 116 |
+
class="w-full pl-4 pr-12 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500">
|
| 117 |
+
<button class="absolute right-2 top-2 p-1 rounded-full bg-green-600 text-white">
|
| 118 |
+
<i data-feather="send" class="w-5 h-5"></i>
|
| 119 |
+
</button>
|
| 120 |
+
</div>
|
| 121 |
+
</div>
|
| 122 |
+
|
| 123 |
+
<div class="bg-white rounded-xl shadow-sm p-6">
|
| 124 |
+
<h2 class="text-xl font-semibold text-green-700 mb-4 flex items-center">
|
| 125 |
+
<i data-feather="bell" class="mr-2"></i> Updates
|
| 126 |
+
</h2>
|
| 127 |
+
<div class="space-y-3">
|
| 128 |
+
<div class="flex items-start">
|
| 129 |
+
<div class="bg-green-100 p-2 rounded-full mr-3">
|
| 130 |
+
<i data-feather="file-plus" class="text-green-600 w-4 h-4"></i>
|
| 131 |
+
</div>
|
| 132 |
+
<div>
|
| 133 |
+
<p class="text-sm font-medium">New policy added</p>
|
| 134 |
+
<p class="text-xs text-gray-500">Rural digital infrastructure guidelines</p>
|
| 135 |
+
</div>
|
| 136 |
+
</div>
|
| 137 |
+
<div class="flex items-start">
|
| 138 |
+
<div class="bg-blue-100 p-2 rounded-full mr-3">
|
| 139 |
+
<i data-feather="calendar" class="text-blue-600 w-4 h-4"></i>
|
| 140 |
+
</div>
|
| 141 |
+
<div>
|
| 142 |
+
<p class="text-sm font-medium">Deadline approaching</p>
|
| 143 |
+
<p class="text-xs text-gray-500">Agricultural tech grant applications due July 15</p>
|
| 144 |
+
</div>
|
| 145 |
+
</div>
|
| 146 |
+
</div>
|
| 147 |
+
</div>
|
| 148 |
+
</aside>
|
| 149 |
+
</div>
|
| 150 |
+
</div>
|
| 151 |
+
|
| 152 |
+
<script>
|
| 153 |
+
feather.replace();
|
| 154 |
+
</script>
|
| 155 |
+
<script src="script.js"></script>
|
| 156 |
+
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
|
| 157 |
+
</body>
|
| 158 |
+
</html>
|
script.js
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 2 |
+
// Initialize tooltips
|
| 3 |
+
const tooltipTriggers = document.querySelectorAll('[data-tooltip]');
|
| 4 |
+
tooltipTriggers.forEach(trigger => {
|
| 5 |
+
trigger.addEventListener('mouseenter', function() {
|
| 6 |
+
const tooltip = document.createElement('div');
|
| 7 |
+
tooltip.className = 'absolute z-10 px-3 py-2 text-sm text-white bg-gray-900 rounded-lg shadow-lg';
|
| 8 |
+
tooltip.textContent = this.getAttribute('data-tooltip');
|
| 9 |
+
|
| 10 |
+
const rect = this.getBoundingClientRect();
|
| 11 |
+
tooltip.style.top = `${rect.top - 40}px`;
|
| 12 |
+
tooltip.style.left = `${rect.left + rect.width / 2 - tooltip.offsetWidth / 2}px`;
|
| 13 |
+
|
| 14 |
+
document.body.appendChild(tooltip);
|
| 15 |
+
this._tooltip = tooltip;
|
| 16 |
+
});
|
| 17 |
+
|
| 18 |
+
trigger.addEventListener('mouseleave', function() {
|
| 19 |
+
if (this._tooltip) {
|
| 20 |
+
document.body.removeChild(this._tooltip);
|
| 21 |
+
this._tooltip = null;
|
| 22 |
+
}
|
| 23 |
+
});
|
| 24 |
+
});
|
| 25 |
+
|
| 26 |
+
// Toggle policy card details
|
| 27 |
+
document.addEventListener('click', function(e) {
|
| 28 |
+
if (e.target.closest('.toggle-details')) {
|
| 29 |
+
const card = e.target.closest('custom-policy-card');
|
| 30 |
+
const details = card.shadowRoot.querySelector('.policy-details');
|
| 31 |
+
const icon = card.shadowRoot.querySelector('.toggle-icon');
|
| 32 |
+
|
| 33 |
+
details.classList.toggle('hidden');
|
| 34 |
+
icon.setAttribute('data-feather', details.classList.contains('hidden') ? 'chevron-down' : 'chevron-up');
|
| 35 |
+
feather.replace();
|
| 36 |
+
}
|
| 37 |
+
});
|
| 38 |
+
|
| 39 |
+
// Chat functionality
|
| 40 |
+
const chatInput = document.querySelector('aside input[type="text"]');
|
| 41 |
+
const chatSendBtn = document.querySelector('aside button');
|
| 42 |
+
const chatContainer = document.getElementById('chat-container');
|
| 43 |
+
|
| 44 |
+
function addMessage(type, message) {
|
| 45 |
+
const bubble = document.createElement('custom-chat-bubble');
|
| 46 |
+
bubble.setAttribute('type', type);
|
| 47 |
+
bubble.setAttribute('message', message);
|
| 48 |
+
chatContainer.appendChild(bubble);
|
| 49 |
+
chatContainer.scrollTop = chatContainer.scrollHeight;
|
| 50 |
+
}
|
| 51 |
+
|
| 52 |
+
function handleSendMessage() {
|
| 53 |
+
const message = chatInput.value.trim();
|
| 54 |
+
if (message) {
|
| 55 |
+
addMessage('user', message);
|
| 56 |
+
chatInput.value = '';
|
| 57 |
+
|
| 58 |
+
// Simulate AI response
|
| 59 |
+
setTimeout(() => {
|
| 60 |
+
const responses = [
|
| 61 |
+
"I found this information in the 2025 Agricultural Support Policy: ...",
|
| 62 |
+
"According to the latest guidelines from the Ministry of Agriculture...",
|
| 63 |
+
"The policy you're asking about was updated last month. Here are the key points..."
|
| 64 |
+
];
|
| 65 |
+
addMessage('ai', responses[Math.floor(Math.random() * responses.length)]);
|
| 66 |
+
}, 1000);
|
| 67 |
+
}
|
| 68 |
+
}
|
| 69 |
+
|
| 70 |
+
chatSendBtn.addEventListener('click', handleSendMessage);
|
| 71 |
+
chatInput.addEventListener('keypress', function(e) {
|
| 72 |
+
if (e.key === 'Enter') handleSendMessage();
|
| 73 |
+
});
|
| 74 |
+
});
|
style.css
CHANGED
|
@@ -1,28 +1,50 @@
|
|
|
|
|
|
|
|
| 1 |
body {
|
| 2 |
-
|
| 3 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 4 |
}
|
| 5 |
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
}
|
| 10 |
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
font-size: 15px;
|
| 14 |
-
margin-bottom: 10px;
|
| 15 |
-
margin-top: 5px;
|
| 16 |
}
|
| 17 |
|
| 18 |
-
|
| 19 |
-
|
| 20 |
-
|
| 21 |
-
|
| 22 |
-
border: 1px solid lightgray;
|
| 23 |
-
border-radius: 16px;
|
| 24 |
}
|
| 25 |
|
| 26 |
-
.card
|
| 27 |
-
|
|
|
|
| 28 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
| 2 |
+
|
| 3 |
body {
|
| 4 |
+
font-family: 'Inter', sans-serif;
|
| 5 |
+
}
|
| 6 |
+
|
| 7 |
+
/* Custom scrollbar */
|
| 8 |
+
::-webkit-scrollbar {
|
| 9 |
+
width: 6px;
|
| 10 |
+
}
|
| 11 |
+
|
| 12 |
+
::-webkit-scrollbar-track {
|
| 13 |
+
background: #f1f1f1;
|
| 14 |
+
border-radius: 10px;
|
| 15 |
}
|
| 16 |
|
| 17 |
+
::-webkit-scrollbar-thumb {
|
| 18 |
+
background: #c1c1c1;
|
| 19 |
+
border-radius: 10px;
|
| 20 |
}
|
| 21 |
|
| 22 |
+
::-webkit-scrollbar-thumb:hover {
|
| 23 |
+
background: #a1a1a1;
|
|
|
|
|
|
|
|
|
|
| 24 |
}
|
| 25 |
|
| 26 |
+
/* Animation for policy cards */
|
| 27 |
+
@keyframes fadeIn {
|
| 28 |
+
from { opacity: 0; transform: translateY(10px); }
|
| 29 |
+
to { opacity: 1; transform: translateY(0); }
|
|
|
|
|
|
|
| 30 |
}
|
| 31 |
|
| 32 |
+
.policy-card {
|
| 33 |
+
animation: fadeIn 0.3s ease-out forwards;
|
| 34 |
+
opacity: 0;
|
| 35 |
}
|
| 36 |
+
|
| 37 |
+
.policy-card:nth-child(1) { animation-delay: 0.1s; }
|
| 38 |
+
.policy-card:nth-child(2) { animation-delay: 0.2s; }
|
| 39 |
+
.policy-card:nth-child(3) { animation-delay: 0.3s; }
|
| 40 |
+
.policy-card:nth-child(4) { animation-delay: 0.4s; }
|
| 41 |
+
|
| 42 |
+
/* Hover effects */
|
| 43 |
+
.hover-grow {
|
| 44 |
+
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
| 45 |
+
}
|
| 46 |
+
|
| 47 |
+
.hover-grow:hover {
|
| 48 |
+
transform: translateY(-2px);
|
| 49 |
+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
| 50 |
+
}
|