Templates

2023-01-12 19:31:06 +01:00 · 2023-01-12 19:31:06 +01:00 · f641c9326d
parent 7d59681ed7
commit f641c9326d
3 changed files with 104 additions and 0 deletions
--- a/templates/without-npm/app.js
+++ b/templates/without-npm/app.js
@ -0,0 +1,18 @@
+const app = Vue.createApp({
+    data: () => ({
+      text: "hello World",
+    }),
+    methods: {
+      date() {
+        return new Date().toLocaleDateString();
+      },
+    },
+    computed: {
+        shouted() {
+            return this.text.toUpperCase()
+        }
+    }
+  });
+  
+  app.mount("#app");
+  
--- a/templates/without-npm/index.html
+++ b/templates/without-npm/index.html
@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TITLE</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="styles.css" />
+    <script src="https://unpkg.com/vue@next" defer></script>
+    <script src="app.js" defer></script>
+  </head>
+  <body>
+    <section id="app">
+        {{ text }}<br>
+        {{ date() }}<br>
+        {{ shouted }}
+    </section>
+  </body>
+</html>
--- a/templates/without-npm/styles.css
+++ b/templates/without-npm/styles.css
@ -0,0 +1,64 @@
+* {
+    box-sizing: border-box;
+  }
+  
+  html {
+    font-family: 'Jost', sans-serif;
+  }
+  
+  body {
+    margin: 0;
+  }
+  
+  section {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+    margin: 3rem;
+    border-radius: 10px;
+    padding: 1rem;
+    text-align: center;
+  }
+  
+  h2 {
+    font-size: 2rem;
+    border-bottom: 4px solid #ccc;
+    color: #970076;
+    margin: 0 0 1rem 0;
+  }
+  
+  p {
+    font-size: 1.25rem;
+    font-weight: bold;
+    background-color: #970076;
+    padding: 0.5rem;
+    color: white;
+    border-radius: 25px;
+  }
+  
+  input {
+    font: inherit;
+    border: 1px solid #ccc;
+  }
+  
+  input:focus {
+    outline: none;
+    border-color: #1b995e;
+    background-color: #d7fdeb;
+  }
+  
+  button {
+    font: inherit;
+    cursor: pointer;
+    border: 1px solid #ff0077;
+    background-color: #ff0077;
+    color: white;
+    padding: 0.05rem 1rem;
+    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
+  }
+  
+  button:hover,
+  button:active {
+    background-color: #ec3169;
+    border-color: #ec3169;
+    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
+  }
+