diff --git a/AnyRemark-design/index.html b/AnyRemark-design/index.html new file mode 100644 index 0000000..dafa854 --- /dev/null +++ b/AnyRemark-design/index.html @@ -0,0 +1,55 @@ + + + + + + AnyRemark + + + +
+ +
+
+
+

Stingrays with Friends - FPV Formation

+

My favorite thing to do in this hobby is fly FPV with friends and chase planes. Morning FPV flights with Ben and Eric. If you are interested in this plane (The...

+
+ Video Thumbnail +
+
+
+
+

Comments

+
+ User Avatar +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.

+
+
+
+ User Avatar +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.

+
+
+
+ User Avatar +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.

+
+
+
+ + +
+
+
+ + + diff --git a/AnyRemark-design/styles.css b/AnyRemark-design/styles.css new file mode 100644 index 0000000..623a14e --- /dev/null +++ b/AnyRemark-design/styles.css @@ -0,0 +1,142 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #f9f9f9; + color: #333; +} + +header { + background-color: #fff; + border-bottom: 1px solid #ddd; + padding: 10px 20px; +} + +nav a { + margin-right: 20px; + color: #007bff; + text-decoration: none; +} + +nav a:hover { + text-decoration: underline; +} + +main { + max-width: 800px; + margin: 20px auto; + padding: 20px; + background-color: #fff; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +article h1 { + color: #28a745; + font-size: 24px; +} + +.video-container { + position: relative; + padding-top: 56.25%; /* 16:9 Aspect Ratio */ + margin-top: 20px; + margin-bottom: 20px; +} + +.video-container img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 8px; +} + +.play-button { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 60px; + height: 60px; + background: rgba(0, 0, 0, 0.5); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +} + +.play-button::before { + content: ''; + display: block; + width: 0; + height: 0; + border-left: 20px solid white; + border-top: 12px solid transparent; + border-bottom: 12px solid transparent; +} + +.comments { + margin-top: 40px; +} + +.comments h2 { + font-size: 20px; + margin-bottom: 20px; +} + +.comment { + display: flex; + align-items: flex-start; + margin-bottom: 20px; +} + +.comment .avatar { + width: 50px; + height: 50px; + border-radius: 50%; + margin-right: 10px; +} + +.comment-content { + background-color: #f1f1f1; + padding: 10px 15px; + border-radius: 8px; + flex-grow: 1; +} + +.comment-form { + display: flex; + flex-direction: column; +} + +.comment-form textarea { + width: 100%; + padding: 10px; + margin-bottom: 10px; + border: 1px solid #ddd; + border-radius: 8px; + resize: none; +} + +.comment-form button { + align-self: flex-end; + padding: 10px 20px; + background-color: #28a745; + color: #fff; + border: none; + border-radius: 8px; + cursor: pointer; +} + +.comment-form button:hover { + background-color: #218838; +} + +footer { + text-align: center; + padding: 20px; + background-color: #fff; + border-top: 1px solid #ddd; +} diff --git a/src/App.vue b/src/App.vue index 7905b05..42c16f3 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,15 +1,10 @@ diff --git a/src/assets/main.css b/src/assets/main.css index 36fb845..9298758 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -23,13 +23,13 @@ a, @media (min-width: 1024px) { body { - display: flex; + /*display: flex;*/ place-items: center; } #app { - display: grid; - grid-template-columns: 1fr 1fr; + /*display: grid;*/ + /*grid-template-columns: 1fr 1fr;*/ padding: 0 2rem; } } diff --git a/src/components/CommentComponent.vue b/src/components/CommentComponent.vue new file mode 100644 index 0000000..f96b9fe --- /dev/null +++ b/src/components/CommentComponent.vue @@ -0,0 +1,35 @@ + + + + + diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100644 index d174cf8..0000000 --- a/src/components/HelloWorld.vue +++ /dev/null @@ -1,41 +0,0 @@ - - - - - diff --git a/src/components/OpenGraphComponent.vue b/src/components/OpenGraphComponent.vue new file mode 100644 index 0000000..eb0f9b4 --- /dev/null +++ b/src/components/OpenGraphComponent.vue @@ -0,0 +1,368 @@ + + + + + diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue deleted file mode 100644 index 3d4eecd..0000000 --- a/src/components/TheWelcome.vue +++ /dev/null @@ -1,90 +0,0 @@ - - - diff --git a/src/components/WelcomeItem.vue b/src/components/WelcomeItem.vue deleted file mode 100644 index 6d7086a..0000000 --- a/src/components/WelcomeItem.vue +++ /dev/null @@ -1,87 +0,0 @@ - - - diff --git a/src/components/__tests__/HelloWorld.spec.ts b/src/components/__tests__/HelloWorld.spec.ts index 2533202..d3f29dc 100644 --- a/src/components/__tests__/HelloWorld.spec.ts +++ b/src/components/__tests__/HelloWorld.spec.ts @@ -1,11 +1,11 @@ -import { describe, it, expect } from 'vitest' - -import { mount } from '@vue/test-utils' -import HelloWorld from '../HelloWorld.vue' - -describe('HelloWorld', () => { - it('renders properly', () => { - const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } }) - expect(wrapper.text()).toContain('Hello Vitest') - }) -}) +// import { describe, it, expect } from 'vitest' +// +// import { mount } from '@vue/test-utils' +// import HelloWorld from '../HelloWorld.vue' +// +// describe('HelloWorld', () => { +// it('renders properly', () => { +// const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } }) +// expect(wrapper.text()).toContain('Hello Vitest') +// }) +// }) diff --git a/src/router/index.ts b/src/router/index.ts index 3e49915..ec73517 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -17,6 +17,11 @@ const router = createRouter({ // which is lazy-loaded when the route is visited. component: () => import('../views/AboutView.vue'), }, + { + path: '/remark', + name: 'remark', + component: () => import('../views/RemarkView.vue'), + } ], }) diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index d5c0217..aa7ed68 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -1,9 +1,9 @@ diff --git a/src/views/RemarkView.vue b/src/views/RemarkView.vue new file mode 100644 index 0000000..6bdbf85 --- /dev/null +++ b/src/views/RemarkView.vue @@ -0,0 +1,87 @@ + + + + +