You've already forked SmartisanNote.Remake
107 lines
5.1 KiB
HTML
107 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<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 */
|
|
|
|
/* 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 */
|
|
|
|
/* Background colors - Warm paper-like tones */
|
|
--background: #fbf7ed; /* Main app background - warm off-white */
|
|
--background-secondary: #f7f2e9; /* Slightly darker background */
|
|
--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 */
|
|
|
|
/* 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) */
|
|
|
|
/* 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) */
|
|
|
|
/* Folder colors */
|
|
--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 */
|
|
|
|
/* Status colors */
|
|
--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 */
|
|
|
|
/* 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 */
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
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);
|
|
}
|
|
|
|
#app {
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app"></div>
|
|
<script type="module" src="/src/main.js"></script>
|
|
</body>
|
|
</html> |