代码

停车场

已完结板栗大王

NPH

<!DOCTYPE html>

<head>

<title>李司青的手机</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

}

body {

background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

min-height: 100vh;

padding: 2rem;

color: #333;

}

.phone-frame {

width: 360px;

height: 700px;

background: linear-gradient(145deg, #0a0a0a, #1a1a1a);

border-radius: 42px;

padding: 12px;

position: relative;

box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6),

0 0 0 1px rgba(255, 255, 255, 0.05) inset,

0 8px 32px rgba(0, 0, 0, 0.4);

overflow: hidden;

}

.screen {

width: 100%;

height: 100%;

background: white;

border-radius: 36px;

overflow: hidden;

position: relative;

transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}

.status-bar {

height: 44px;

display: flex;

justify-content: space-between;

align-items: center;

padding: 0 20px;

font-size: 14px;

font-weight: 600;

background: rgba(255, 255, 255, 0.8);

backdrop-filter: blur(10px);

border-bottom: 1px solid rgba(0, 0, 0, 0.05);

}

.home-indicator {

width: 120px;

height: 5px;

background: #000;

border-radius: 3px;

position: absolute;

bottom: 12px;

left: 50%;

transform: translateX(-50%);

transition: all 0.3s ease;

}

.home-indicator:hover {

height: 7px;

background: #333;

}

.app-grid {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 20px;

padding: 24px;

margin-top: 10px;

}

.app-icon {

display: flex;

flex-direction: column;

align-items: center;

cursor: pointer;

transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

position: relative;

}

.app-icon:hover {

transform: translateY(-5px);

}

.app-icon .icon {

width: 64px;

height: 64px;

border-radius: 16px;

display: flex;

justify-content: center;

align-items: center;

margin-bottom: 8px;

font-size: 24px;

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

transition: all 0.3s ease;

}

.app-icon:hover .icon {

box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

}

.app-name {

font-size: 12px;

font-weight: 500;

color: #000;

}

.nav-bar {

height: 80px;

background: rgba(255, 255, 255, 0.9);

backdrop-filter: blur(20px);

border-top: 1px solid rgba(0, 0, 0, 0.05);

display: flex;

align-items: center;

justify-content: space-around;

position: absolute;

bottom: 0;

left: 0;

right: 0;

padding-bottom: 10px;

}

.nav-item {

display: flex;

flex-direction: column;

align-items: center;

cursor: pointer;

transition: all 0.2s ease;

}

.nav-item:hover {

transform: translateY(-2px);

}

.nav-icon {

font-size: 20px;

margin-bottom: 4px;

}

.nav-label {

font-size: 10px;

font-weight: 500;

}

.tab-active {

color: #000;

}

.tab-inactive {

color: #8e8e93;

}

.app-header {

padding: 16px 20px;

border-bottom: 1px solid rgba(0, 0, 0, 0.05);

display: flex;

align-items: center;

justify-content: space-between;

background: rgba(255, 255, 255, 0.9);

backdrop-filter: blur(10px);

position: sticky;

top: 0;

z-index: 10;

}

.back-btn {

cursor: pointer;

transition: all 0.2s ease;

width: 32px;

height: 32px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 8px;

}

.back-btn:hover {

background: rgba(0, 0, 0, 0.05);

transform: scale(1.05);

}

.card {

background: white;

border-radius: 16px;

padding: 18px;

margin-bottom: 16px;

box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

border: 1px solid rgba(0, 0, 0, 0.03);

transition: all 0.3s ease;

}

.card:hover {

box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

transform: translateY(-2px);

}

.chat-bubble {

max-width: 75%;

border-radius: 18px;

padding: 12px 16px;

margin-bottom: 12px;

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

position: relative;

animation: fadeIn 0.3s ease;

}

@keyframes fadeIn {

from { opacity: 0; transform: translateY(10px); }

to { opacity: 1; transform: translateY(0); }

}

.chat-left {

background: #f1f1f1;

align-self: flex-start;

border-bottom-left-radius: 4px;

}

.chat-right {

background: #000;

color: white;

align-self: flex-end;

border-bottom-right-radius: 4px;

}

.chat-container {

display: flex;

flex-direction: column;

padding: 16px;

height: calc(100% - 140px);

overflow-y: auto;

}

.photo-item {

width: 100%;

height: 110px;

object-fit: cover;

border-radius: 12px;

cursor: pointer;

transition: all 0.3s ease;

}

.photo-item:hover {

transform: scale(1.03);

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

}

.photo-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 8px;

padding: 16px;

}

.memo-item {

display: flex;

align-items: center;

padding: 12px 0;

border-bottom: 1px solid rgba(0, 0, 0, 0.05);

transition: all 0.2s ease;

}

.memo-item:hover {

background: rgba(0, 0, 0, 0.02);

border-radius: 8px;

padding-left: 8px;

padding-right: 8px;

}

.hidden {

display: none;

}

.screen.active {

display: flex;

flex-direction: column;

}

.app-content {

flex: 1;

overflow-y: auto;

}

.contact-item {

display: flex;

align-items: center;

padding: 16px;

border-bottom: 1px solid rgba(0, 0, 0, 0.05);

cursor: pointer;

transition: all 0.2s ease;

}

.contact-item:hover {

background: rgba(0, 0, 0, 0.02);

}

.contact-avatar {

width: 48px;

height: 48px;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

margin-right: 16px;

font-weight: 600;

font-size: 18px;

}

.call-item {

display: flex;

align-items: center;

justify-content: space-between;

padding: 16px;

border-bottom: 1px solid rgba(0, 0, 0, 0.05);

}

.time-display-large {

font-size: 64px;

font-weight: 300;

text-align: center;

margin: 40px 0 20px;

letter-spacing: -2px;

}

.photo-viewer {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.95);

display: flex;

align-items: center;

justify-content: center;

z-index: 100;

opacity: 0;

pointer-events: none;

transition: opacity 0.3s ease;

}

.photo-viewer.active {

opacity: 1;

pointer-events: all;

}

.viewer-content {

max-width: 90%;

max-height: 80%;

position: relative;

}

.viewer-img {

max-width: 100%;

max-height: 100%;

border-radius: 12px;

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

}

.close-viewer {

position: absolute;

top: 20px;

right: 20px;

width: 44px;

height: 44px;

background: rgba(255, 255, 255, 0.1);

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

color: white;

font-size: 20px;

cursor: pointer;

transition: all 0.2s ease;

}

.close-viewer:hover {

background: rgba(255, 255, 255, 0.2);

transform: scale(1.1);

}

.app-title {

font-size: 1.25rem;

font-weight: 700;

}

.product-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 12px;

margin-top: 12px;

}

.product-item {

text-align: center;

}

.product-icon {

height: 80px;

background: #f8f8f8;

border-radius: 12px;

display: flex;

align-items: center;

justify-content: center;

margin-bottom: 8px;

font-size: 24px;

color: #555;

}

.calculator {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 12px;

padding: 20px;

}

.calc-btn {

height: 70px;

border-radius: 16px;

display: flex;

align-items: center;

justify-content: center;

font-size: 24px;

font-weight: 500;

cursor: pointer;

transition: all 0.2s ease;

}

.calc-btn:hover {

transform: scale(0.95);

}

.calc-number {

background: #f8f8f8;

}

.calc-operator {

background: #000;

color: white;

}

.calc-display {

height: 120px;

display: flex;

align-items: flex-end;

justify-content: flex-end;

padding: 20px;

font-size: 48px;

font-weight: 300;

overflow: hidden;

}

.page-title {

font-size: 2rem;

font-weight: 700;

margin-bottom: 2rem;

color: white;

text-align: center;

}

</style>

</head>

<body>

<h1 class="page-title">李司青的手机</h1>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

宿

</div>

</div>

<p class="text-sm text-gray-500 truncate">周末来看看我新车试车？</p>

</div>

岁

</div>

</div>

<p class="text-sm text-gray-500 truncate">芒果好甜呀，下次还买这家～</p>

</div>

</div>

</div>

</div>

</div>

</button>

</div>

</div>

</button>

宿

</div>

</div>

</div>

周末有空吗？来看看我新车试车

</div>

可以

</div>

好嘞！周六上午10点，老地方见

</div>

嗯

</div>

到时候带你体验下加速，超爽的！

</div>

哦

</div>

</div>

</button>

</div>

</div>

</div>

</button>

岁

</div>

</div>

</div>

今天买的芒果超甜！????

</div>

喜欢就多买点

</div>

可是吃多了会上火呀～对了，你上次说的那本计算机书买到了吗？

</div>

买到了，看完给你看

</div>

好呀好呀！周末要不要一起去吃草莓蛋糕？

</div>

好

</div>

</div>

</button>

</div>

</div>

</div>

</div>

<h4 class="font-medium mb-3">拂月喜欢的零食</h4>

</div>

</div>

</div>

</div>

</div>

</div>

<h4 class="font-medium mb-3">计算机相关书籍</h4>

<div>

<p class="text-sm font-medium">Python编程：从入门到实践</p>

</div>

<div>

<p class="text-sm font-medium">数据结构与算法分析</p>

</div>

<div>

<p class="text-sm font-medium">樱花香味沐浴露</p>

</div>

</button>

</div>

</div>

</div>

<h3 class="text-lg font-bold mb-4">拂月的习惯和爱好</h3>

</div>

</div>

</div>

<span class="text-sm">酒量差，只能喝一点点</span>

</div>

<span class="text-sm">衣服习惯两天一换</span>

</div>

<span class="text-sm">喜欢晴天，讨厌下雨天</span>

</div>

<span class="text-sm">喜欢看治愈系电影</span>

</div>

</button>

</div>

</div>

</div>

<div>

</div>

</div>

<div>

</div>

</div>

</button>

</div>

</div>

</div>

</div>

</button>

</button>

</button>

</div>

</button>

</div>

</div>

</div>

岁

</div>

<div>

</div>

</div>

宿

</div>

<div>

</div>

</div>

岁

</div>

<div>

</div>

</div>

</button>

</div>

</div>

</div>

</div>

</div>

</button>

</div>

</div>

</div>

</button>

</div>

</div>

// 实时时间更新

function updateTime() {

const now = new Date();

const hours = String(now.getHours()).padStart(2, '0');

const minutes = String(now.getMinutes()).padStart(2, '0');

document.querySelectorAll('.time-display').forEach(el => el.textContent = `${hours}:${minutes}`);

}

setInterval(updateTime, 1000);

// 应用切换逻辑

let currentApp = 'home';

function openApp(appName) {

document.querySelectorAll('.screen').forEach(screen => {

screen.classList.remove('active');

screen.classList.add('hidden');

});

document.getElementById(`${appName}-app`).classList.remove('hidden');

document.getElementById(`${appName}-app`).classList.add('active');

currentApp = appName;

updateTime();

}

function backToHome() {

document.querySelectorAll('.screen').forEach(screen => {

screen.classList.remove('active');

screen.classList.add('hidden');

});

document.getElementById('home-screen').classList.remove('hidden');

document.getElementById('home-screen').classList.add('active');

currentApp = 'home';

}

function openChat(person) {

document.querySelectorAll('.screen').forEach(screen => {

screen.classList.remove('active');

screen.classList.add('hidden');

});

document.getElementById(`chat-${person}`).classList.remove('hidden');

document.getElementById(`chat-${person}`).classList.add('active');

updateTime();

}

function openPhoto(src) {

const photoViewer = document.getElementById('photo-viewer');

document.getElementById('viewer-img').src = src;

photoViewer.classList.add('active');

}

function closePhoto() {

document.getElementById('photo-viewer').classList.remove('active');

}

// 初始化时间

updateTime();

</script>

</body>

</html>

猜你喜欢

GB向【有时候掺杂一丢丢bg体位】短篇停车场纯爱专栏的核心主旨就是男舔女女宠男不会做舔狗的男人没人要得不到宠爱的男人会崩坏目前可能会存在的CP有：ABO小妈文学：白切黑大小姐×父亲的男续弦✓疯狂校园篇：三观端正富家女×校园霸凌受害者✓ABO世界：性冷淡科研女Beta×为爱做鸭处男Omega✓白月光文学：白月光女主人×恋爱脑男总裁✓土狗系：冷情母单女×老实卑微男✓ABO世界：白骑士人格女Omega×隐性病娇科研男Beta ✓ 父子丼：“工具人”三无OL×外冷内骚的双性人夫/黑皮体育生养子进行中仙侠篇：团宠小师妹×外冷内色师尊：一个优质好老攻的培养要从娃娃抓起兽人篇：毛茸茸爱好者×执着假孕的小雄兔：奶凶的兔老大也很可爱西幻世界：散财童子百变小魔女×被拐为娼人类男孩：骗你的，其实每一个上过你的人都是我～现言女尊：超人气学生会长×暧昧对象他爹：可是……你爸爸他真的很好看啊！ ABO世界：双A对决上位参谋长女Alpha×双A对决下位将军男Alpha：大哥，作案工具夹断了算工伤吗？幼驯染组：女艺术家×身体超漂亮的男模特：果然，爱了整个青春期的女孩没那幺容易放下 1V2：轻微脸盲女家教×双胞胎男高中生：哥哥？弟弟？我两个都要！黑化篇：社交冷漠症前女友×被抛弃的前男友：残破的青春只有你能弥补跨国恋：归国东方少女×末代西方贵族：Abyss才不是深渊，是希望，是曙光，是属于你的美好未来 ABO世界：精英大法官女Alpha×劣质小哑巴男Omega：仰慕很久的学姐，众O情人Alpha离婚了，这时我应该…… 重生篇：盟国公主×帝君面首：重生归来，我什幺都不要，只想干干净净地和你在一起…… 神话篇：被流放的智慧女神妻子×被觊觎的双性爱神丈夫：失去妻子的祂成为虎视眈眈的猎物……亲爱的，你在哪儿，祂们看我的眼神好可怕！疯狂校园篇：占卜很灵的巫女×水晶球里的少年：我看见了你的未来……这次我想和你一起改变它叔系：被拉下海的破产坏金主×反攻的sugar baby：被你干了这幺久，也该到我反攻的时候了！合法夫妻组：倦怠期的好老婆×没有安全感的乖老公：爱它偷偷藏起来了，别担心，我会把它找回来现言女尊：失忆的朱砂痣×甘愿被玩弄的疯批男：两个疯子的自相残杀，互相救赎，坠入爱河的故事年下篇：多金专情白富美×为爱坐牢的囚犯：姐姐，出狱后你会娶我的，对不对破镜重圆组：黑白游走的抹布大佬×贱卖爱人的渣女造梦师：背叛与深爱，狠狠做恨！兽人篇：离经叛道的狼女×身娇体弱小少爷：你的身边怎幺总是围绕着那幺多杂碎，有我一个还不够吗！（其他性癖待开发中……）

将军夫人生子记（大肚孕甜甜肉文）

已完结快乐小狗

甜甜甜肉肉肉大肚怀孕生子产奶之前的作品因为海棠惊弓之鸟放到ao3了，指路佘二太太anyway，我鸭汉三又回来了欢迎点梗各种姿势真的很想要有很多评论谢谢谢谢

界限感（np）

已完结 Δ

最近哥哥很奇怪，总是用很奇怪的下流眼神看着她，姜玲很不爽的冲他翻了个白眼：“干嘛”，哥哥又会慌张的移开视线。男全处，内含真骨科，女装伪娘，女嬷。女主渣而不自知，文笔小白。练笔作，不太会写肉，可能会打擦边球(｡ ́︿ ̀｡)

一闪一闪亮鸡鸡

已完结欲如初见

繁体+高H+NpH 肉文

代码

猜你喜欢

想对哥哥这样那样

赛马娘：难耐欲望的红宝石小姐

驾校情缘

鬼书生