Bardzo zainspirowała mnie idea 3 poziomów Mirosława Burnejko. Ponieważ jestem dużym fanem tworzenia narzędzi i automatyzacji, pozwoliłem sobie za zgodą pomysłodawcy, opublikować poniższe narzędzie.

Zasada jest prosta – zadania wpisujemy w polach tekstowych, a następnie wypełniamy każdy z poziomów. Po zakończeniu pracy, można pobrać plik HTML, który można albo wyświetlić bezpośrednio na swoim komputerze, albo posłużyć się nim na swojej stronie internetowej.

Swoje 3 poziomy zamieszczę za jakiś czas, niech poniższa lista posłuży jedynie jako przykład 🙂

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script defer src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <script defer src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <link href="https://digitalnie.pl/MiroTools/ThreeLevels/base.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://digitalnie.pl/MiroTools/ThreeLevels/objects.js"></script> <template id="inspiration"> <div class="inspiration p-3"> <a :href="link">{{description}}</a> </div> </template> <template id="level"> <div class="level d-flex flex-row" v-bind:class="{ done: iscompleted }" v-bind:style="{background: iscompleted ? this.$parent.$parent.levelColor[index] : ''}"> <div class="index p-2">{{index+1}}</div> <div class="goal p-10"> <div class="description"> <span v-if="iseditmode===false">{{description}}</span> <input v-if="iseditmode" v-model="description" /> </div> <div v-if="iscompleted===false" class="goal-time">Cel: <span v-if="iseditmode===false">{{goaltime}}</span> <input v-if="iseditmode" v-model="goaltime" /> <input v-if="iseditmode && canbeclosed" placeholder="nagroda" v-model="reward" /><br /> <i class="fas fa-check" v-if="iseditmode && canbeclosed" v-on:click="complete"></i> </div> <div v-if="iscompleted" class="goal-time"> <span v-if="iseditmode===false">{{completedtime}}</span> <input v-if="iseditmode" v-model="completedtime" /><br /> <a :href="reward" class="prize" v-bind:style="{color: this.$parent.$parent.taskColor}">Zobacz nagrodę</a><br /> <i class="fas fa-undo-alt" v-if="iseditmode" v-on:click="rollback"></i> </div> </div> </div> </template> <template id="task"> <div class="task"> <div class="description"> <span v-if="iseditmode===false">{{description}}</span> <hr v-bind:style="{background: this.$parent.taskColor}" /> <input v-if="iseditmode" v-model="description" /> <i class="fa-edit" v-on:click="toggleedit" v-bind:class="{ fas:iseditmode, far: !iseditmode }"></i> <i class="fas fa-times-circle" v-on:click="remove"></i> </div> <div class="task-inner"> <div class="levels d-flex flex-row align-items-stretch"> <level v-for="(level, index) in levels" :index="(index)" :level="level" :canbeclosed="canbeclosed(index)" :key="level.description+index" :iseditmode="iseditmode" /> </div> <div v-if="levels.length<3" class="goal p-10"> <input placeholder="opis" v-model="newlevel.description" /> <input placeholder="kiedy planujesz" v-model="newlevel.time" /> <button v-on:click="addLevel(newlevel.description, newlevel.time)">dodaj</button> </div> <div class="inspirations d-flex flex-row"> <div class="main p-2" v-bind:style="{background: this.$parent.taskColor+ '!important'}"> INSPIRACJE </div> <div v-if="iseditmode || inspirations.length===0" class="inspiration p-3"> <input placeholder="opis" v-model="newinspiration.description" /> <input placeholder="odnośnik" v-model="newinspiration.link" /> <button v-on:click="addInspiration(newinspiration.description, newinspiration.link)">dodaj</button> </div> <inspiration v-for="(inspiration, index) in inspirations" :description="inspiration.description" :link="inspiration.link" :key="inspiration.description+index" :iseditmode="iseditmode"></inspiration> </div> </div> </div> </template> <div id="app"> <div class="task"> <div class="d-flex flex-row color-editor"> <div>Kolor podstawowy <input type="color" id="html5colorpicker" v-model="taskColor" style="width:25%;"></div> <div>Ukończony poziom 1: <input type="color" id="html5colorpicker" v-model="levelColor[0]" style="width:25%;"></div> <div>Ukończony poziom 2: <input type="color" id="html5colorpicker" v-model="levelColor[1]" style="width:25%;"></div> <div>Ukończony poziom 3: <input type="color" id="html5colorpicker" v-model="levelColor[2]" style="width:25%;"></div> </div> <div class="description"> <input type="text" v-model="newtask" placeholder="dodaj nowe zadanie" @keyup.enter="add" /> </div> </div> <task v-for="(task,i) in tasks" :key="task.description+i" :description="task.description" :levels="task.levels" :inspirations="task.inspirations"></task> <div class="task"> <div class="description"> <input type="text" v-model="newtask" placeholder="dodaj nowe zadanie" @keyup.enter="add" /> </div> </div> <div class="task"> <div class="description"> <input v-model="listname"/> <button v-on:click="download">Pobierz liste jako HTML</button> </div> </div> </div> <script src="https://digitalnie.pl/MiroTools/ThreeLevels/basevue.js"></script>