让ai写一个类github首页

用html5写一个和github首页类似的，功能齐全的index，代码在700行左右，功能越全越好

<!DOCTYPE html>

<head>

<title>GitLike -- full-featured GitHub-style index</title>

<style>

/* 0 ~ 100 行：reset & variables */

:root{

--color-header-bg:#24292f;

--color-header-text:#ffffff;

--color-accent:#0969da;

--color-fg-default:#24292f;

--color-fg-muted:#656d76;

--color-border-default:#d0d7de;

--color-canvas-subtle:#f6f8fa;

--color-btn-primary:#2da44e;

--color-btn-primary-hover:#2c974b;

}

*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"}

body{font-size:14px;line-height:1.5;color:var(--color-fg-default);background:#fff}

ul{list-style:none}

a{color:var(--color-accent);text-decoration:none}

img{max-width:100%}

button{cursor:pointer;border:none;background:none}

.btn{display:inline-block;padding:5px 16px;font-size:14px;font-weight:500;line-height:20px;border-radius:6px;border:1px solid var(--color-border-default);background:#fff;color:var(--color-fg-default)}

.btn-primary{background:var(--color-btn-primary);color:#fff;border-color:var(--color-btn-primary)}

.btn-primary:hover{background:var(--color-btn-primary-hover)}

/* 101 ~ 180 行：header / navbar */

.Header{background:var(--color-header-bg);color:var(--color-header-text);padding:12px 24px;display:flex;align-items:center;position:sticky;top:0;z-index:32}

.Header a{color:var(--color-header-text)}

.Header-nav{display:flex;align-items:center;gap:16px;margin-left:16px}

.Header-nav-link{font-weight:600;font-size:14px}

.Header-nav-link:hover{opacity:.75}

.Header-search{position:relative}

.Header-search input{background:rgba(255,255,255,.125);border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff;padding:6px 12px;width:240px;outline:none}

.Header-search input::placeholder{color:#ffffffaa}

.Header-right{margin-left:auto;display:flex;align-items:center;gap:16px}

.Header-right .avatar{width:24px;height:24px;border-radius:50%}

/* 181 ~ 270 行：page layout */

.container{max-width:1280px;margin:0 auto;padding:24px;display:grid;grid-template-columns:296px 1fr;gap:32px}

.left-sidebar{position:sticky;top:80px;align-self:start}

.user-profile{display:flex;align-items:center;gap:12px;margin-bottom:24px}

.user-profile img{width:64px;height:64px;border-radius:50%}

.user-profile h2{font-size:20px;font-weight:600}

.user-profile p{color:var(--color-fg-muted)}

.status-count{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;border:1px solid var(--color-border-default);border-radius:6px}

.status-count a{display:block;padding:12px}

.status-count .num{font-weight:600}

.status-count .label{font-size:12px;color:var(--color-fg-muted)}

.organizations{margin-top:24px}

.organizations h3{font-size:14px;font-weight:600;margin-bottom:8px}

.organizations img{width:32px;height:32px;border-radius:6px;margin-right:4px;margin-bottom:4px}

/* 271 ~ 380 行：main feed */

.feed-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}

.feed-header h1{font-size:24px;font-weight:600}

.feed-tabs{display:flex;border-bottom:1px solid var(--color-border-default)}

.feed-tabs a{position:relative;padding:8px 16px;font-size:14px;font-weight:600;color:var(--color-fg-muted)}

.feed-tabs a.active{color:var(--color-accent)}

.feed-tabs a.active::after{content:'';position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);width:100%;height:2px;background:var(--color-accent)}

.repo-list>li{display:flex;justify-content:space-between;border:1px solid var(--color-border-default);border-radius:6px;padding:16px;margin-bottom:16px}

.repo-info h3{font-size:16px;font-weight:600;margin-bottom:4px}

.repo-info .description{color:var(--color-fg-muted);margin-bottom:8px}

.repo-meta{font-size:12px;color:var(--color-fg-muted);display:flex;gap:16px;align-items:center}

.repo-meta span{display:flex;align-items:center;gap:4px}

.repo-meta svg{width:14px;height:14px;fill:var(--color-fg-muted)}

.repo-lang-color{width:12px;height:12px;border-radius:50%;display:inline-block}

/* 381 ~ 450 行：footer */

.footer{background:var(--color-canvas-subtle);border-top:1px solid var(--color-border-default);padding:40px 24px;margin-top:40px}

.footer-inner{max-width:1280px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px}

.footer-column h4{font-size:14px;font-weight:600;margin-bottom:8px}

.footer-column ul li{line-height:24px}

.footer-bottom{margin-top:32px;text-align:center;font-size:12px;color:var(--color-fg-muted)}

/* 451 ~ 550 行：modal (new repo) */

.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.4)}

.modal-dialog{width:480px;margin:80px auto;background:#fff;border-radius:6px}

.modal-header{padding:16px 24px;border-bottom:1px solid var(--color-border-default);display:flex;justify-content:space-between;align-items:center;font-weight:600}

.modal-body{padding:24px}

.form-group{margin-bottom:16px}

.form-group label{display:block;margin-bottom:4px;font-weight:600;font-size:14px}

.form-group input,.form-group textarea{width:100%;padding:6px 8px;border:1px solid var(--color-border-default);border-radius:6px;font-size:14px}

.modal-footer{padding:16px 24px;border-top:1px solid var(--color-border-default);text-align:right}

/* 551 ~ 650 行：notification dropdown */

.dropdown{position:relative}

.dropdown-menu{position:absolute;top:100%;right:0;margin-top:4px;background:#fff;border:1px solid var(--color-border-default);border-radius:6px;box-shadow:0 8px 24px rgba(140,149,159,.2);width:320px;max-height:400px;overflow-y:auto;display:none;z-index:100}

.dropdown-item{padding:12px 16px;border-bottom:1px solid var(--color-border-default);font-size:13px}

.dropdown-item:last-child{border:none}

/* 651 ~ 700 行：simple js helpers */

.is-hidden{display:none}

</style>

</head>

<body>

</a>

<a class="Header-nav-link" href="#">Pull requests</a>

<a class="Header-nav-link" href="#">Issues</a>

<a class="Header-nav-link" href="#">Marketplace</a>

<a class="Header-nav-link" href="#">Explore</a>

</nav>

</div>

</a>

</div>

<div class="dropdown-item">🔔 No new notifications</div>

</div>

</header>

<div>

<h2>octocat</h2>

<p>@octocat</p>

</div>

<a href="#"><span class="num">42</span><span class="label">Repositories</span></a>

<a href="#"><span class="num">1337</span><span class="label">Stars</span></a>

<a href="#"><span class="num">256</span><span class="label">Followers</span></a>

</div>

<h3>Organizations</h3>

</div>

</aside>

<main>

<h1>Your repositories</h1>

</div>

<a href="#" class="active">Overview</a>

<a href="#">Repositories</a>

<a href="#">Projects</a>

<a href="#">Packages</a>

<a href="#">Stars</a>

</div>

</ul>

</main>

</div>

<h4>Product</h4>

<ul>

<li><a href="#">Features</a></li>

<li><a href="#">Security</a></li>

<li><a href="#">Enterprise</a></li>

</ul>

</div>

<h4>Platform</h4>

<ul>

<li><a href="#">Developer API</a></li>

<li><a href="#">Partners</a></li>

</ul>

</div>

<h4>Support</h4>

<ul>

<li><a href="#">Community Forum</a></li>

</ul>

</div>

<h4>Company</h4>

<ul>

<li><a href="#">About</a></li>

</ul>

</div>

</div>

</footer>

Create a new repository

</div>

<label>Repository name</label>

</div>

<label>Description (optional)</label>

</div>

<label><input type="checkbox" id="repo-private"> Private</label>

</form>

</div>

<button class="btn" onclick="closeModal()">Cancel</button>

<button class="btn btn-primary" onclick="createRepo()">Create repository</button>

</div>

// mock data

const repos=[

{name:"hello-world",desc:"My first repository",lang:"JavaScript",color:"#f1e05a",stars:128,fork:false,updated:"2 days ago"},

{name:"awesome-oss",desc:"A curated list of awesome open-source projects",lang:"",stars:256,fork:true,updated:"4 days ago"},

{name:"dotfiles",desc:"Personal development environment configs",lang:"Shell",color:"#89e051",stars:42,fork:false,updated:"last week"}

];

// render repos

function renderRepos(){

const list=document.getElementById('repo-list');

list.innerHTML='';

repos.forEach(r=>{

const li=document.createElement('li');

li.innerHTML=`

${r.desc?'<p class="description">'+r.desc+'</p>':''}

${r.lang?\`\\<span><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694z"/></svg>${r.stars}</span>$

${r.fork?'<span>Forked</span>':''}

<span>Updated ${r.updated}</span>

</div>

list.appendChild(li);

});

}

renderRepos();

// modal

function openModal(){document.getElementById('new-repo-modal').style.display='block';}

function closeModal(){document.getElementById('new-repo-modal').style.display='none';}

function createRepo(){

const name=document.getElementById('repo-name').value.trim();

const desc=document.getElementById('repo-desc').value.trim();

const priv=document.getElementById('repo-private').checked;

if(!name){alert('Repository name required');return;}

repos.unshift({name,desc,lang:"",stars:0,fork:false,updated:"just now"});

renderRepos();

closeModal();

}

// notification toggle

document.getElementById('noti-bell').onclick=function(e){

e.preventDefault();

const dd=document.getElementById('noti-dropdown');

dd.style.display=dd.style.display==='block'?'none':'block';

};

window.onclick=function(e){

if(!e.target.closest('#noti-bell')) document.getElementById('noti-dropdown').style.display='none';

};

</script>

</body>

</html>