style fixes, init planner, fix okt logo

src/App.scss

@@ -18,6 +18,8 @@ body {
     user-select: none;
 	border-color: $front-color;
 	text-transform: lowercase;
+    font-size: 0.75em;
+    text-align: center;
 }
 
 .btn:hover, .btn.active {
@@ -50,7 +52,6 @@ code {
 #footer {
     font-size: 0.6em;
     text-align: center;
-    // position at the bottom
     position: fixed;
     bottom: 0;
     width: 100%;
@@ -62,6 +63,8 @@ code {
 }
 
 #oktlogo {
+    position: relative;
+    top: 0.4em;
     width: 1.5em;
     height: 1.5em;
     border-radius: 5%;

src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-	import TimerComponent from '@/components/timer/Timer.vue';
+	import TimerComponent   from '@/components/timer/Timer.vue';
 	import MarqueeComponent from '@/components/marquee/Marquee.vue';
 	import '@/App.scss';
 </script>
@@ -23,7 +23,7 @@
 
 		<span id="footer-text">
 			made with ❤
-			for <a href="https://okticket.es"><img src="https://mier.info/assets/logos/okticket.png" width="256" height="256" id="oktlogo" alt="okticket"></a>
+			for <a href="https://okticket.es"><img src="https://mier.info/assets/icons/exp/okticket.png" width="256" height="256" id="oktlogo" alt="okticket"></a>
 			by <a href="https://mier.info">Juan Mier</a>
 			in <code>vue.js</code>
 		</span>

src/components/planner/Planner.vue

@@ -0,0 +1,33 @@
+<script>
+	import '@/components/planner/Planner.scss';
+	export default {
+		name: 'PlannerComponent',
+		components: {},
+		methods: {
+			okt() {
+				this.$refs.textarea.value = 'okticket';
+				this.ack();
+			},
+			hour() {
+				this.ack();
+			},
+			half() {
+				this.ack();
+			},
+			ack() {
+
+			}
+		},
+		beforeMount() {this.okt();}
+	}
+</script>
+
+<template>
+	<div class="bar" id="buttons">
+		<span class="btn" id="btn_okt">okticket</span>
+		<span class="btn" id="btn_60min">60min</span>
+		<span class="btn" id="btn_30min">30min</span>
+	</div>
+
+	<textarea ref="textarea"></textarea>
+</template>

src/components/timer/Timer.scss

@@ -3,11 +3,12 @@
 	justify-content: center;
 	background-color: $background-color;
 	border-radius: 0.5em;
-	flex-direction: column;
+	align-items: center;
 }
 
 #timer {
 	flex-direction: row;
+	padding-top: 2svw;
 
 	span {
 		font-size: min(14vw, 5em);
@@ -43,7 +44,7 @@ div {
 	}
 
 	> span:first-child {
-		margin-right: 1.5em;
+		margin-right: 10svw;
 	}
 }
 

src/components/timer/Timer.vue

@@ -53,6 +53,9 @@ const getDateDiff = (arr) => {
 		case 'pause':
 			icon = '⏸️';
 			break;
+		case 'daily':
+			icon = '📅';
+			break;
 		default:
 			icon = '';
 			break;