frontend: design prototype

2 files changed, 145 insertions, 0 deletions

diff --git a/static/pages/settings/index.css b/static/pages/settings/index.css
new file mode 100644
index 0000000..5128c18
--- /dev/null
+++ b/static/pages/settings/index.css
@@ -0,0 +1,83 @@
+
+#container {
+	width: 100%;
+	height: 100%;
+	background: var(--page-background);
+	padding: 40px;
+	display: flex;
+	flex-flow: column;
+	gap: 20px;
+}
+
+#profile-image {
+	width: 200px;
+	height: 200px;
+	position: relative;
+	margin: auto;
+	margin-top: 50px;
+	margin-bottom: 30px;
+}
+
+#image-container {
+	position: relative;
+	border-radius: 100%;
+	width: 100%;
+	height: 100%;
+	top: 0px;
+	left: 0px;
+	overflow: hidden;
+}
+
+#image-container img {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	min-width: 100%;
+	min-height: 100%;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	user-select: none;
+}
+
+#profile-image #edit-container {
+	overflow: unset;
+}
+
+#profile-image #edit {
+	position: absolute;
+	top: 15px;
+	right: 15px;
+	background: var(--card-background);
+	width: 30px;
+	height: 30px;
+	padding: 6px;
+	border-radius: 100%;
+	box-shadow: var(--shadow);
+	cursor: pointer;
+}
+
+#info-box {
+	width: 100%;
+	text-align: center;
+	color: var(--fg-disabled);
+	font-weight: lighter;
+	user-select: none;
+}
+
+#info-box #name {
+	font-family: 'Pacifico';
+}
+
+#logout {
+	padding: 10px;
+	width: 100%;
+	text-align: center;
+	background: #ee5151;
+	box-shadow: var(--shadow);
+	color: #fff;
+	font-weight: bold;
+	border-radius: var(--border-radius);
+	cursor: pointer;
+}
diff --git a/static/pages/settings/index.js b/static/pages/settings/index.js
new file mode 100644
index 0000000..da30ba7
--- /dev/null
+++ b/static/pages/settings/index.js
@@ -0,0 +1,62 @@
+import * as sfw from 'sfw';
+const { Div, Img } = sfw.element.native;
+
+import Editable from '../../widgets/editable/index.js';
+
+import icons from '../../icons/index.js';
+
+const css = await sfw.css(import.meta.url, './index.css');
+
+export default class SettingsView extends sfw.element.Container {
+	constructor() {
+		super({ css });
+		
+		this.onlogout = () => {};
+
+		this.body.append(
+			Div.new({
+				id: 'container',
+				children: [
+					Div.new({
+						id: 'profile-image',
+						children: [
+							Div.new({
+								id: 'image-container',
+								children: [
+									Img.new({
+										src: '/images/0010.jpg',
+									}),
+								]
+							}),
+							Div.new({
+								id: 'edit',
+								children: [ icons.edit ]
+							}),
+						]
+					}),
+					Editable.new({
+						title: 'Name',
+						value: 'Nathan Reiner'
+					}),
+					Editable.new({
+						title: 'Birthday',
+						type: 'date',
+						value: '2002-08-06',
+					}),
+					Div.new({
+						id: 'logout',
+						innerText: 'Log-out',
+						onclick: () => this.onlogout(),
+					}),
+					Div.new({
+						id: 'info-box',
+						children: [
+							Div.new({ id: 'name', innerText: 'Memora' }),
+							Div.new({ id: 'version', innerText: '0.0.1-unstable' }),
+						]
+					}),
+				]
+			})
+		)
+	}
+}