You've already forked SmartisanNote.Remake
新增 离线web应用发布流程；
移除了便签详情页； 优化了若干逻辑； 新增 移动端、IOS兼容处理；
This commit is contained in:
144
index.html
144
index.html
@@ -2,89 +2,91 @@
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
||||
<title>锤子便签</title>
|
||||
<style>
|
||||
/* Smartisan Notes Color Scheme - Based on Original Design */
|
||||
:root {
|
||||
/* Primary colors - Original Smartisan Notes brown/gold palette */
|
||||
--primary: #5c3c2a; /* Main brown color for UI elements */
|
||||
--primary-dark: #4a3224; /* Darker shade of primary */
|
||||
--primary-light: #f5f0e6; /* Light background tone */
|
||||
|
||||
--primary: #5c3c2a; /* Main brown color for UI elements */
|
||||
--primary-dark: #4a3224; /* Darker shade of primary */
|
||||
--primary-light: #f5f0e6; /* Light background tone */
|
||||
|
||||
/* Editor typography - Consistent font size and line height */
|
||||
--editor-font-size: 19px; /* Base font size for editor */
|
||||
--editor-line-height: 1.5; /* Line height for editor */
|
||||
|
||||
--editor-font-size: 19px; /* Base font size for editor */
|
||||
--editor-line-height: 1.5; /* Line height for editor */
|
||||
|
||||
/* Background colors - Warm paper-like tones */
|
||||
--background: #fbf7ed; /* Main app background - warm off-white */
|
||||
--background: #fbf7ed; /* Main app background - warm off-white */
|
||||
--background-secondary: #f7f2e9; /* Slightly darker background */
|
||||
--background-card: #ffffff; /* Pure white for cards/notes */
|
||||
--background-card: #ffffff; /* Pure white for cards/notes */
|
||||
--search-bar-background: #f0f0f0; /* Search bar background - light gray */
|
||||
|
||||
|
||||
/* Text colors - Brown/black tones for readability */
|
||||
--text-primary: #5c3c2a; /* Main text color - dark brown */
|
||||
--text-secondary: #6e482f; /* Secondary text - medium brown */
|
||||
--text-tertiary: #9e836c; /* Tertiary text - light brown/gray */
|
||||
--text-inverted: #ffffff; /* White text for dark backgrounds */
|
||||
|
||||
--text-primary: #5c3c2a; /* Main text color - dark brown */
|
||||
--text-secondary: #6e482f; /* Secondary text - medium brown */
|
||||
--text-tertiary: #9e836c; /* Tertiary text - light brown/gray */
|
||||
--text-inverted: #ffffff; /* White text for dark backgrounds */
|
||||
|
||||
/* Accent colors - Smartisan's signature colors */
|
||||
--accent-blue: #5c89f2; /* Blue for links/actions */
|
||||
--accent-green: #97cc4e; /* Green for success/positive actions */
|
||||
--accent-red: #e65c53; /* Red for errors/dangerous actions */
|
||||
--accent-orange: #f0880d; /* Orange for warnings/highlights */
|
||||
--accent-yellow: #ffffdd33; /* Yellow for starred items/highlights (updated to match original) */
|
||||
|
||||
--accent-blue: #5c89f2; /* Blue for links/actions */
|
||||
--accent-green: #97cc4e; /* Green for success/positive actions */
|
||||
--accent-red: #e65c53; /* Red for errors/dangerous actions */
|
||||
--accent-orange: #f0880d; /* Orange for warnings/highlights */
|
||||
--accent-yellow: #ffffdd33; /* Yellow for starred items/highlights (updated to match original) */
|
||||
|
||||
/* Note specific colors */
|
||||
--note-title: #5c3c2a; /* Note title color */
|
||||
--note-content: #6e482f; /* Note content color */
|
||||
--note-date: #705c3c2a; /* Date/time color */
|
||||
--note-star: #ffffdd33; /* Star/favorite color (updated to match original) */
|
||||
|
||||
--note-title: #5c3c2a; /* Note title color */
|
||||
--note-content: #6e482f; /* Note content color */
|
||||
--note-date: #705c3c2a; /* Date/time color */
|
||||
--note-star: #ffffdd33; /* Star/favorite color (updated to match original) */
|
||||
|
||||
/* Folder colors */
|
||||
--folder-name: #9b9b9b; /* Folder name color (60% black) */
|
||||
--folder-count: #b4b4b4; /* Folder item count color (30% black) */
|
||||
--folder-name: #9b9b9b; /* Folder name color (60% black) */
|
||||
--folder-count: #b4b4b4; /* Folder item count color (30% black) */
|
||||
--folder-item-selected: #f5f5f5; /* Folder item selected background color */
|
||||
|
||||
|
||||
/* Button colors - Based on Smartisan's button styles */
|
||||
--button-primary: #5c3c2a; /* Primary button - brown */
|
||||
--button-secondary: #97cc4e; /* Secondary button - green */
|
||||
--button-danger: #e65c53; /* Danger button - red */
|
||||
--button-disabled: #d4d4d5; /* Disabled button - light gray */
|
||||
|
||||
--button-primary: #5c3c2a; /* Primary button - brown */
|
||||
--button-secondary: #97cc4e; /* Secondary button - green */
|
||||
--button-danger: #e65c53; /* Danger button - red */
|
||||
--button-disabled: #d4d4d5; /* Disabled button - light gray */
|
||||
|
||||
/* Status colors */
|
||||
--success: #79ad31; /* Success - green */
|
||||
--warning: #f0880d; /* Warning - orange */
|
||||
--error: #e64746; /* Error - red */
|
||||
--info: #5c89f2; /* Info - blue */
|
||||
|
||||
--success: #79ad31; /* Success - green */
|
||||
--warning: #f0880d; /* Warning - orange */
|
||||
--error: #e64746; /* Error - red */
|
||||
--info: #5c89f2; /* Info - blue */
|
||||
|
||||
/* UI elements - Borders, dividers, shadows */
|
||||
--border: #e5ddca; /* Light brown border */
|
||||
--divider: #e5e5e5; /* Light gray divider */
|
||||
--shadow: #00000014; /* Subtle shadow */
|
||||
|
||||
--border: #e5ddca; /* Light brown border */
|
||||
--divider: #e5e5e5; /* Light gray divider */
|
||||
--shadow: #00000014; /* Subtle shadow */
|
||||
|
||||
/* Transparency variants */
|
||||
--black-05: #0000000d; /* 5% black */
|
||||
--black-10: #0000001a; /* 10% black */
|
||||
--black-14: #00000024; /* 14% black */
|
||||
--black-20: #00000033; /* 20% black */
|
||||
--black-30: #0000004d; /* 30% black */
|
||||
--black-40: #00000066; /* 40% black */
|
||||
--black-50: #00000080; /* 50% black */
|
||||
--black-60: #00000099; /* 60% black */
|
||||
--black-80: #000000cc; /* 80% black */
|
||||
--black-90: #000000e6; /* 90% black */
|
||||
|
||||
--white-10: #ffffff1a; /* 10% white */
|
||||
--white-20: #ffffff33; /* 20% white */
|
||||
--white-30: #ffffff4d; /* 30% white */
|
||||
--white-40: #ffffff66; /* 40% white */
|
||||
--white-50: #ffffff80; /* 50% white */
|
||||
--white-60: #ffffff99; /* 60% white */
|
||||
--white-80: #ffffffcc; /* 80% white */
|
||||
--white-90: #ffffffe6; /* 90% white */
|
||||
--black-05: #0000000d; /* 5% black */
|
||||
--black-10: #0000001a; /* 10% black */
|
||||
--black-14: #00000024; /* 14% black */
|
||||
--black-20: #00000033; /* 20% black */
|
||||
--black-30: #0000004d; /* 30% black */
|
||||
--black-40: #00000066; /* 40% black */
|
||||
--black-50: #00000080; /* 50% black */
|
||||
--black-60: #00000099; /* 60% black */
|
||||
--black-80: #000000cc; /* 80% black */
|
||||
--black-90: #000000e6; /* 90% black */
|
||||
|
||||
--white-10: #ffffff1a; /* 10% white */
|
||||
--white-20: #ffffff33; /* 20% white */
|
||||
--white-30: #ffffff4d; /* 30% white */
|
||||
--white-40: #ffffff66; /* 40% white */
|
||||
--white-50: #ffffff80; /* 50% white */
|
||||
--white-60: #ffffff99; /* 60% white */
|
||||
--white-80: #ffffffcc; /* 80% white */
|
||||
--white-90: #ffffffe6; /* 90% white */
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -92,11 +94,21 @@
|
||||
background-color: var(--background);
|
||||
background-image: repeating-linear-gradient(0deg, transparent, transparent 10px, var(--background-secondary) 10px, var(--background-secondary) 20px);
|
||||
color: var(--text-primary);
|
||||
/* 适配iPhone X及更新机型的刘海屏 */
|
||||
padding-top: env(safe-area-inset-top);
|
||||
padding-right: env(safe-area-inset-right);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
padding-left: env(safe-area-inset-left);
|
||||
}
|
||||
|
||||
|
||||
#app {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
/* 适配iPhone X及更新机型的刘海屏 */
|
||||
padding-top: env(safe-area-inset-top);
|
||||
padding-right: env(safe-area-inset-right);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
padding-left: env(safe-area-inset-left);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -104,4 +116,4 @@
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user