当前位置：首页 > news >正文

让ai写一个类github首页

news 2025/8/28 12:40:13

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GitLike – full-featured GitHub-style index</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<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>

<header class="Header">
<a href="#" aria-label="GitLike Home">
<svg height="32" viewBox="0 0 16 16" width="32" fill="#fff"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
</a>
<nav class="Header-nav">
<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 class="Header-search">
<input type="search" placeholder="Search or jump to..." />
</div>
<div class="Header-right">
<a href="#" aria-label="Notifications" id="noti-bell">
<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 16a2 2 0 001.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 008 16z"/><path fill-rule="evenodd" d="M8 1a.5.5 0 01.5.5V6h-1V1.5A.5.5 0 018 1zM7.5 9.5A.5.5 0 018 9h4a.5.5 0 010 1H8a.5.5 0 01-.5-.5zM2.5 7.5A.5.5 0 013 7h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5z"/></svg>
</a>
<img class="avatar" src="https://github.com/github.png" alt="avatar">
</div>

<div class="dropdown-menu" id="noti-dropdown">
<div class="dropdown-item">🔔 No new notifications</div>
</div>
</header>

<div class="container">

<aside class="left-sidebar">
<div class="user-profile">
<img src="https://github.com/octocat.png" alt="user">
<div>
<h2>octocat</h2>
<p>@octocat</p>
</div>
</div>
<div class="status-count">
<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>
<div class="organizations">
<h3>Organizations</h3>
<a href="#"><img src="https://github.com/github.png" alt="org"></a>
<a href="#"><img src="https://github.com/actions.png" alt="org"></a>
</div>
</aside>

<main>
<div class="feed-header">
<h1>Your repositories</h1>
<button class="btn btn-primary" onclick="openModal()">New</button>
</div>
<div class="feed-tabs">
<a href="#" class="active">Overview</a>
<a href="#">Repositories</a>
<a href="#">Projects</a>
<a href="#">Packages</a>
<a href="#">Stars</a>
</div>

<ul class="repo-list" id="repo-list">

</ul>
</main>
</div>

<footer class="footer">
<div class="footer-inner">
<div class="footer-column">
<h4>Product</h4>
<ul>
<li><a href="#">Features</a></li>
<li><a href="#">Security</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Enterprise</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Platform</h4>
<ul>
<li><a href="#">Developer API</a></li>
<li><a href="#">Partners</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Support</h4>
<ul>
<li><a href="#">Help</a></li>
<li><a href="#">Community Forum</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Company</h4>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
© 2025 GitLike, Inc. All rights reserved.
</div>
</footer>

<div class="modal" id="new-repo-modal">
<div class="modal-dialog">
<div class="modal-header">
Create a new repository
<button onclick="closeModal()">×</button>
</div>
<div class="modal-body">
<form id="new-repo-form">
<div class="form-group">
<label>Repository name</label>
<input id="repo-name" required>
</div>
<div class="form-group">
<label>Description (optional)</label>
<textarea id="repo-desc"></textarea>
</div>
<label><input type="checkbox" id="repo-private"> Private</label>
</form>
</div>
<div class="modal-footer">
<button class="btn" onclick="closeModal()">Cancel</button>
<button class="btn btn-primary" onclick="createRepo()">Create repository</button>
</div>
</div>
</div>

<script>
// 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=`
<div class="repo-info">
<h3><a href="#">${r.name}</a></h3>
${r.desc?'<p class="description">'+r.desc+'</p>':''}
<div class="repo-meta">
${r.lang?`<span><span class="repo-lang-color" style="background:${r.color}"></span>${r.lang}</span>`:''}
<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>
</div>
<button class="btn">Star</button>
`;
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>

查看全文

http://www.dtcms.com/a/354163.html