2225 lines
80 KiB
Vue
2225 lines
80 KiB
Vue
|
|
<template>
|
|
<section>
|
|
<!-- Dark mode switcher -->
|
|
<!-- <button
|
|
id="theme-toggle"
|
|
type="button"
|
|
class="w-16 relative flex bg-gray-200 dark:bg-gray-400 mx-auto lg:mx-0 justify-between rounded-full text-sm py-1.5 px-2.5 focus:outline-none"
|
|
@click="toDarkMode" >
|
|
<div class="animate-go absolute top-1.5 w-5 h-5 bg-gray-900 rounded-full" :class="!darkMode ? 'move-left' : 'move-right'" style="transition:all .4s;transition-timing-function: ease; "></div>
|
|
<svg
|
|
|
|
id="theme-toggle-light-icon"
|
|
class=" w-5 h-5" :class="darkMode ? '' : 'opacity-0'"
|
|
fill="#FF9900"
|
|
viewBox="0 0 20 20"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
|
|
></path>
|
|
</svg>
|
|
|
|
<svg
|
|
id="theme-toggle-dark-icon"
|
|
class=" w-5 h-5 " :class="!darkMode ? '' : 'opacity-0'"
|
|
fill="#FFDE68"
|
|
viewBox="0 0 20 20"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
></path>
|
|
</svg>
|
|
|
|
</button> -->
|
|
<!-- Dark mode switcher end -->
|
|
|
|
<div
|
|
class="birthdate flex gap-2.5 justify-center lg:justify-start flex-wrap flex-col items-center lg:items-end md:flex-row mt-4">
|
|
<div class="flex flex-col gap-0.5" >
|
|
<label>Name</label>
|
|
<input v-model="name" type="text" placeholder="Name" class=" p-3 rounded-full w-80 h-12 border-2 border-gray-600 w-70">
|
|
</div>
|
|
<div class="flex flex-col gap-0.5">
|
|
<label>Geburtsdatum</label>
|
|
<input v-model="date" type="date" class=" p-3 rounded-full h-12 border-2 border-gray-600 w-80">
|
|
</div>
|
|
|
|
<div class=" birthdate-item flex flex-col gap-2 mt-4 md:mt-0">
|
|
<button @click="Calculat"
|
|
class="flex justify-center items-center text-gray-900 px-4 border-2 border-gray-900 font-bold rounded-full h-12 ">Berechnen</button>
|
|
</div>
|
|
|
|
</div>
|
|
<div v-if="showResult == true" class="container mx-auto text-center text-xl pb-24 lg:pb-0">
|
|
<p>Name: {{ name }}</p>
|
|
<p>Alter: {{ age }}</p>
|
|
</div>
|
|
<div v-if="showResult == true" class="container justify-between flex flex-wrap gap-14 lg:gap-0 items-center flex-col-reverse lg:flex-row">
|
|
<div class="w-full lg:w-1/2 pr-0 lg:pr-12 text-gray-900 mt-14">
|
|
|
|
|
|
<table class="table text-gray-900" width="100%">
|
|
<tbody>
|
|
<tr class=" p-3 h-14 font-bold" style="background:#c1a3bd;">
|
|
<td></td>
|
|
<td class="pl-4 explanation-item">Chakra</td>
|
|
<td style="text-align:center"> Physik </td>
|
|
<td style="text-align:center"> Energie </td>
|
|
<td style="text-align:center"> Emotionen </td>
|
|
</tr>
|
|
<tr class=" " style="background:#F7F3F6;">
|
|
<td style=" "> <img src="https://wordpresstuts.com.br/wp-content/uploads/2024/05/rosa.png"
|
|
style="width:50px;position:relative;right:8px;bottom:10px;" alt="icon" /></td>
|
|
<td class="trans" id="chakra7" style="border-right:2px solid #fff; "><span
|
|
class="td_chakra py-2" style="display:flex;gap:15px;align-items:center;">
|
|
<div style="display:flex;flex-direction:column;gap:5px;align-items:flex-start;"><span
|
|
style="font-size:16px;font-weight:bold">Kronenchakra</span><span
|
|
style="font-size:13px;text-align:left;">Spiritualität</span> </div>
|
|
</span></td>
|
|
<td class="trans" id="n33" style="border-right:2px solid #fff;text-align:center ">{{ n33 }}
|
|
</td>
|
|
<td class="trans" id="n34" style="border-right:2px solid #fff;text-align:center ">{{ n34 }}
|
|
</td>
|
|
<td class="trans" id="n35" style="text-align:center;">{{ n35 }}
|
|
</td>
|
|
</tr>
|
|
<tr class="p-3" style="background:#F0E9FF;">
|
|
<td> <img src="https://wordpresstuts.com.br/wp-content/uploads/2024/05/violet.png" style="width:50px;position:relative;right:8px;bottom:10px;"
|
|
alt="icon" /></td>
|
|
<td class="trans" id="chakra6" style="border-right:2px solid #fff; "><span
|
|
class="td_chakra py-2" style="display:flex;gap:15px;align-items:center;">
|
|
<div style="display:flex;flex-direction:column;gap:5px;align-items:flex-start;"><span
|
|
style="font-size:16px;font-weight:bold">Stirnchakra</span><span
|
|
style="font-size:13px;text-align:left;">Wahrnehmung</span></div>
|
|
</span></td>
|
|
<td class="trans" id="n36" style="border-right:2px solid #fff; text-align:center">{{ n36 }}
|
|
</td>
|
|
<td class="trans" id="n37" style="border-right:2px solid #fff; text-align:center">{{ n37 }}
|
|
</td>
|
|
<td class="trans" id="n38" style="text-align:center">{{ n38 }}
|
|
</td>
|
|
</tr>
|
|
<tr class="p-3" style="background:#EAFBFB;">
|
|
<td> <img src="https://wordpresstuts.com.br/wp-content/uploads/2024/05/green.png" style="width:50px;position:relative;right:8px;bottom:10px;"
|
|
alt="icon" /></td>
|
|
<td class="trans" id="chakra5" style="border-right:2px solid #fff; "><span
|
|
class="td_chakra py-2" style="display:flex;gap:15px;align-items:center;">
|
|
<div style="display:flex;flex-direction:column;gap:5px;align-items:flex-start;"><span
|
|
style="font-size:16px;font-weight:bold">Halschakra</span><span
|
|
style="font-size:13px;text-align:left;">Manifestation</span></div>
|
|
</span></td>
|
|
<td class="trans" id="n39" style="border-right:2px solid #fff; text-align:center">{{ n39 }}
|
|
</td>
|
|
<td class="trans" id="n40" style="border-right:2px solid #fff;text-align:center ">{{ n40 }}
|
|
</td>
|
|
<td class="trans" id="n41" style="text-align:center">{{ n41 }}
|
|
</td>
|
|
</tr>
|
|
<tr class=" p-3" style="background:#F3FBF7;">
|
|
<td style=" "> <img src="https://wordpresstuts.com.br/wp-content/uploads/2024/05/lightgreen.png"
|
|
style="width:50px;position:relative;right:8px;bottom:10px;" alt="icon" /></td>
|
|
<td class="trans" id="chakra4" style="border-right:2px solid #fff; "><span
|
|
class="td_chakra py-2" style="display:flex;gap:15px;align-items:center;">
|
|
<div style="display:flex;flex-direction:column;gap:5px;align-items:flex-start;"><span
|
|
style="font-size:16px;font-weight:bold">Herzchakra</span><span
|
|
style="font-size:13px;text-align:left;">Beziehungen</span></div>
|
|
</span></td>
|
|
<td class="trans" id="n42" style="border-right:2px solid #fff; text-align:center">{{ n42 }}
|
|
</td>
|
|
<td class="trans" id="n43" style="border-right:2px solid #fff;text-align:center ">{{ n43 }}
|
|
</td>
|
|
<td class="trans" id="n44" style="text-align:center">{{ n44 }}
|
|
</td>
|
|
</tr>
|
|
<tr class=" p-3" style="background:#FEFAF4;">
|
|
<td style=" "> <img src="https://wordpresstuts.com.br/wp-content/uploads/2024/05/orange.png"
|
|
style="width:50px;position:relative;right:8px;bottom:10px;" alt="icon" /></td>
|
|
<td class="trans" id="chakra3" style="border-right:2px solid #fff; "><span
|
|
class="td_chakra py-2" style="display:flex;gap:15px;align-items:center;">
|
|
<div style="display:flex;flex-direction:column;gap:5px;align-items:flex-start;"><span
|
|
style="font-size:16px;font-weight:bold">Solarplexus</span><span
|
|
style="font-size:13px;text-align:left;">Wille</span></div>
|
|
</span></td>
|
|
<td class="trans" id="n45" style="border-right:2px solid #fff; text-align:center">{{ n45 }}
|
|
</td>
|
|
<td class="trans" id="n46" style="border-right:2px solid #fff;text-align:center ">{{ n46 }}
|
|
</td>
|
|
<td class="trans" id="n47" style="text-align:center">{{ n47 }}
|
|
</td>
|
|
</tr>
|
|
<tr class=" p-3" style="background:#FDF1EE">
|
|
<td style=" "> <img src="https://wordpresstuts.com.br/wp-content/uploads/2024/05/tenseorange.png"
|
|
style="width:50px;position:relative;right:8px;bottom:10px;" alt="icon" /></td>
|
|
<td class="trans" id="chakra2" style="border-right:2px solid #fff; "><span
|
|
class="td_chakra py-2" style="display:flex;gap:15px;align-items:center;">
|
|
<div style="display:flex;flex-direction:column;gap:5px;align-items:flex-start;"><span
|
|
style="font-size:16px;font-weight:bold">Sakralchakra</span><span
|
|
style="font-size:13px;text-align:left;">Wünsche</span></div>
|
|
</span></td>
|
|
<td class="trans " id="n48" style="border-right:2px solid #fff;text-align:center ">{{ n48 }}
|
|
</td>
|
|
<td class="trans" id="n49" style="border-right:2px solid #fff;text-align:center ">{{ n49 }}
|
|
</td>
|
|
<td class="trans" id="n50" style="text-align:center">{{ n50 }}
|
|
</td>
|
|
</tr>
|
|
<tr class=" p-3" style="background:#FFEAEA; ">
|
|
<td> <img src="https://wordpresstuts.com.br/wp-content/uploads/2024/05/red.png" style="width:50px;position:relative;right:8px;bottom:10px;"
|
|
alt="icon" /></td>
|
|
<td class="trans" id="chakra1" style="border-right:2px solid #fff; "><span
|
|
class="td_chakra py-2" style="display:flex;gap:15px;align-items:center;">
|
|
<div style="display:flex;flex-direction:column;gap:5px;align-items:flex-start;"><span
|
|
style="font-size:16px;font-weight:bold">Wurzelchakra</span><span
|
|
style="font-size:13px;text-align:left;">Urvertrauen</span></div>
|
|
</span></td>
|
|
<td class="trans" id="n51" style="border-right:2px solid #fff;text-align:center ">{{ n51 }}
|
|
</td>
|
|
<td class="trans" id="n52" style="border-right:2px solid #fff;text-align:center ">{{ n52 }}
|
|
</td>
|
|
<td class="trans" id="n53" style="text-align:center">{{ n53 }}
|
|
</td>
|
|
</tr>
|
|
<tr class=" p-2 pb-4 h-14" style="background:#C6C8D4;">
|
|
<td></td>
|
|
<td class="trans" id="chakra"><span class="td_chakra "
|
|
style="display:flex; align-items:center;">
|
|
<div style="display:flex;flex-direction:column; align-items:flex-start;"><span
|
|
style="font-size:16px;font-weight:bold">
|
|
Gesamt</span> </div>
|
|
</span></td>
|
|
<td class="trans" id="n54" style="text-align:center">{{ n54 }}
|
|
</td>
|
|
<td class="trans" id="n55" style="text-align:center">{{ n55 }}
|
|
</td>
|
|
<td class="trans" id="n56" style="text-align:center">{{ n56 }}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="obch w-full lg:w-1/2 relative" >
|
|
<div >
|
|
<img :src="darkMode ? 'https://wordpresstuts.com.br/wp-content/uploads/2024/05/schema-5.png' : 'https://wordpresstuts.com.br/wp-content/uploads/2024/05/schema-5.png'" class="transimage" id="schemaImg">
|
|
<div id="n1" class="trans" style="position:absolute; width:9%; height:9%; left:1%; top:44.6%;">
|
|
<p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Äußeres Selbst</p>
|
|
<div style="background:#F0E4F7; width:100%; height:100%; border:2px solid #ae309a ">
|
|
<span style=" ">{{ n1
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="n3" class="trans" style="position:absolute; width:9%; height:9%; left:45%; top:1%;">
|
|
<p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Haupttalent</p>
|
|
<div style="background:#F0E4F7; width:100%; height:100%; border:2px solid #ae309a ">
|
|
<span >{{ n3
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="n5" class="trans" style="position:absolute; width:9%; height:9%; left:89%; top:44.6%;">
|
|
<p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Seelenaufgabe</p>
|
|
<div style="background:#F0E4F7; width:100%; height:100%; border:2px solid #eb4b41">
|
|
<span >{{ n5
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="n7" class="trans" style="position:absolute; width:9%; height:9%; left:45%; top:88.3%;">
|
|
<p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Karmische Hauptaufgabe</p>
|
|
<div style="background:#F0E4F7; width:100%; height:100%; border:2px solid #eb4b41">
|
|
<span >{{ n7
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="n30" class="trans relative" style="position:absolute; width:9%; height:9%; left:45%; top:45%;">
|
|
<p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Inneres Selbst</p>
|
|
<div style="background:#F0E4F7; width:100%; height:100%;border:2px solid #ffde68">
|
|
<span style="">{{
|
|
n30 }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="n2" class="trans border-2 border-gray-800 "
|
|
style="position:absolute; width:9%; height:9%; left:14%; top:14%; " >
|
|
<p class=" absolute flex items-center justify-center w-48 h-12 py-3 px-2 info">Ahnenkarma Vaterlinie</p>
|
|
<div style="background:#F0E4F7; width:100%; height:100%; ">
|
|
<span style="">{{ n2 }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="n4" class="trans border-2 border-gray-800 "
|
|
style="position:absolute; width:9%; height:9%; left:76%; top:14%; " >
|
|
<p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Ahnenkarma Mutterlinie</p>
|
|
<div style="background:#F0E4F7; width:100%; height:100%; ">
|
|
<span style="">{{ n4 }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="n6" class="trans border-2 border-gray-800 "
|
|
style="position:absolute; width:9%; height:9%; left:76%; top:75.5%; " >
|
|
<p class=" absolute flex items-center justify-center w-48 h-12 py-3 px-2 info">Ahnenkarma Vaterlinie</p>
|
|
<div style="background:#F0E4F7; width:100%; height:100%; ">
|
|
<span style="">{{ n6 }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="n8" class="trans border-2 border-gray-800 "
|
|
style="position:absolute; width:9%; height:9%; left:14.4%; top:75.5%; " >
|
|
<p class=" absolute flex items-center justify-center w-48 h-12 py-3 px-2 info">Ahnenkarma Mutterlinie</p>
|
|
<div style="background:#F0E4F7; width:100%; height:100%; ">
|
|
<span style="">{{ n8 }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="n23" class="trans" style="position:absolute; width:4.5%; height:4.5%; left:47.5%; top:76.3%; ">
|
|
<p class=" absolute flex items-center justify-center w-52 h-12 py-3 px-2 info">Karmische Aufgabe
|
|
</p>
|
|
<div style="background:#F0E4F7; width:100%; height:100%; border:2px solid #e98c46">
|
|
<span >{{ n23
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="n21" class="trans" style="position:absolute; width:4.5%; height:4.5%; left:77%; top:47.2%; ">
|
|
<p class=" absolute flex items-center justify-center w-48 h-12 py-3 px-2 info">Wohlstandsenergie</p>
|
|
<div style="background:#F0E4F7; width:100%; height:100%;border:2px solid #e98c46">
|
|
<span >{{ n21
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="n28" class="trans border-2 border-gray-800 "
|
|
style="position:absolute; width:4.5%; height:4.5%; left:61%; top:60.5%; background:#F0E4F7;">
|
|
<p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Balancepunkt</p>
|
|
<div style="background:#F0E4F7; width:100%; height:100%; ">
|
|
<span style="">{{ n28 }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="n29" class="trans border-2 border-gray-800 "
|
|
style="position:absolute; width:4.5%; height:4.5%; left:58.5%; top:66.5%; background:#F0E4F7; ">
|
|
<p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Seelenpartner</p>
|
|
<div style="background:#F0E4F7; width:100%; height:100%; ">
|
|
<span style="">{{ n29 }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="n17" class="trans" style="position:absolute; width:4.5%; height:4.5%; left:17.5%; top:46.8%; ">
|
|
<p class=" absolute flex items-center justify-center w-48 h-12 py-3 px-2 info">Eltern Kind Beziehung
|
|
</p>
|
|
<div style="background:#F0E4F7; width:100%; height:100%; border:2px solid #00b8f4 ">
|
|
<span >{{ n17
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="n19" class="trans" style="position:absolute; width:4.5%; height:4.5%; left:47.2%; top:17.5%;">
|
|
<p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Talent</p>
|
|
<div style="background:#F0E4F7; width:100%; height:100%; border:2px solid #00b8f4">
|
|
<span >{{ n19
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="n15" class="trans border-2 border-gray-800 "
|
|
style="position:absolute; width:5.5%; height:5.5%; left:46.9%; top:82%; background:#F0E4F7; ">
|
|
<p class=" absolute flex items-center justify-center w-48 h-12 py-3 px-2 info">Karmische Aufgabe
|
|
</p>
|
|
<div style="background:#F0E4F7; width:100%; height:100%; ">
|
|
<span style="">{{ n15 }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="n11" class="trans" style="position:absolute; width:5.5%; height:5.5%; left:46.7%; top:11%; ">
|
|
<p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Talent</p>
|
|
<div style="background:#F0E4F7; width:100%; height:100%; border:2px solid #0067d2">
|
|
<span >{{ n11
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="n13" class="trans border-2 border-gray-800 "
|
|
style="position:absolute; width:5.5%; height:5.5%; left:82.8%; top:46.5%; background:#F0E4F7; ">
|
|
<p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Eingang in die Geldlinie</p>
|
|
<div style="background:#F0E4F7; width:100%; height:100%; ">
|
|
<span style="">{{ n13 }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="n25" class="trans" style="position:absolute; width:4.5%; height:4.5%; left:32%; top:46.8%;">
|
|
<div style="background:#F0E4F7; width:100%; height:100%; border:1px solid #63b062">
|
|
<p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Herzenswünsche</p>
|
|
<span >{{ n25
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="n26" class="trans" style="position:absolute; width:4.5%; height:4.5%; left:47%; top:31%;">
|
|
<div style="background:#F0E4F7; width:100%; height:100%; border:2px solid #63b062">
|
|
<p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Herzenswünsche</p>
|
|
<span >{{ n26
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="n9" class="trans" style="position:absolute; width:5.5%; height:5.5%; left:10.9%; top:46.1%;">
|
|
<p class=" absolute flex items-center justify-center w-48
|
|
h-12 py-3 px-2 info">Eltern Kind Beziehung</p>
|
|
<div style="background:#F0E4F7; width:100%; height:100%; border:2px solid #0067d2">
|
|
<span >{{ n9
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="n18" class="trans border-2 border-gray-800 "
|
|
style="position:absolute; width:4.5%; height:4.5%; left:26.8%; top:26.2%; background:#F0E4F7; ">
|
|
<p class=" absolute flex items-center justify-center w-48 h-12 py-3 px-2 info">Generationskarma Vaterlinie</p>
|
|
<div style="background:#F0E4F7; width:100%; height:100%; ">
|
|
<span style="">{{ n18 }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="n10" class="trans border-2 border-gray-800 "
|
|
style="position:absolute; width:5.5%; height:5.5%; left:21.9%; top:21.9%; background:#F0E4F7; ">
|
|
<p class=" absolute flex items-center justify-center w-48 h-12 py-3 px-2 info">Generationskarma Vaterlinie</p>
|
|
<div style="background:#F0E4F7; width:100%; height:100%; ">
|
|
<span style="">{{ n10 }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="n20" class="trans border-2 border-gray-800 "
|
|
style="position:absolute; width:4.5%; height:4.5%; left:68.8%; top:26.2%; background:#F0E4F7; ">
|
|
<p class=" absolute flex items-center justify-center w-48 h-12 py-3 px-2 info">Generationskarma Mutterlinie</p>
|
|
<div style="background:#F0E4F7; width:100%; height:100%; ">
|
|
<span style="">{{ n20 }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="n12" class="trans border-2 border-gray-800 "
|
|
style="position:absolute; width:5.5%; height:5.5%; left:72.5%; top:21.9%; background:#F0E4F7; ">
|
|
<p class=" absolute flex items-center justify-center w-48 h-12 py-3 px-2 info">Generationskarma Mutterlinie</p>
|
|
<div style="background:#F0E4F7; width:100%; height:100%; ">
|
|
<span style="">{{ n12 }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="n22" class="trans border-2 border-gray-800 "
|
|
style="position:absolute; width:4.5%; height:4.5%; left:68.3%; top:67.9%; background:#F0E4F7; ">
|
|
<p class=" absolute flex items-center justify-center w-48 h-12 py-3 px-2 info">Generationskarma Vaterlinie</p>
|
|
<div style="background:#F0E4F7; width:100%; height:100%; ">
|
|
<span style="">{{ n22 }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="n14" class="trans border-2 border-gray-800 "
|
|
style="position:absolute; width:5.5%; height:5.5%; left:72%; top:71.7%; background:#F0E4F7; ">
|
|
<p class=" absolute flex items-center justify-center w-48 h-12 py-3 px-2 info">Generationskarma Vaterlinie</p>
|
|
<div style="background:#F0E4F7; width:100%; height:100%; ">
|
|
<span style="">{{ n14 }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="n24" class="trans border-2 border-gray-800 "
|
|
style="position:absolute; width:4.5%; height:4.5%; left:26.8%; top:67.9%; background:#F0E4F7; ">
|
|
<p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Generationskarma Mutterlinie</p>
|
|
<div style="background:#F0E4F7; width:100%; height:100%; ">
|
|
<span style="">{{ n24 }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="n16" class="trans border-2 border-gray-800 "
|
|
style="position:absolute; width:5.5%; height:5.5%; left:21.9%; top:71.4%; background:#F0E4F7; ">
|
|
<p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Generationskarma Mutterlinie</p>
|
|
<div style="background:#F0E4F7; width:100%; height:100%; ">
|
|
<span style="">{{ n16 }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="n27" class="trans border-2 border-gray-800 "
|
|
style="position:absolute; width:4.5%; height:4.5%; left:67%; top:58.5%; background:#F0E4F7; ">
|
|
<div style="background:#F0E4F7; width:100%; height:100%; ">
|
|
<p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Geldflussenergie</p>
|
|
<span style="">{{ n27 }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="n32" class="trans border-2 border-gray-800 "
|
|
style="position:absolute; width:5.5%; height:5.5%; left:61%; top:46.9%; background:#F0E4F7; ">
|
|
<p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Macht der Beziehung</p>
|
|
<div style=" width:100%; height:100%; "><span
|
|
style=" "> {{ n32 }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="n31" class="trans border-2 border-gray-800 "
|
|
style="position:absolute; width:6.5%; height:6.5%; left:54.3%; top:46.1%; background:#F0E4F7; ">
|
|
<p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Macht der Ahnenfamilie</p>
|
|
|
|
<div style=" width:100%; height:100%; box-shadow:1px 1px 20px #fff ">
|
|
<span style=" ">{{ n31
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- 0 - 10 -->
|
|
<div class="trans " style="position:absolute; top:30.3%; left:3.1%; height:3%; width:5%;">
|
|
<span style="">{{ y1 }}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:36.5%; left:0.6%; height:3%; width:5%;">
|
|
<span style="">{{ y2 }}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:39.5%; left:-.4%; height:3%; width:5%;">
|
|
<span style="">{{ y3 }}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:33.5%; left:1.6%; height:3%; width:5%;">
|
|
<span style="">{{ y4 }}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:24.3%; left:6.1%; height:3%; width:5%;">
|
|
<span style="">{{ y5 }}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:21.1%; left:7.2%; height:3%; width:5%;">
|
|
<span style="">{{ y6 }}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:27.3%; left:4.5%; height:3%; width:5%;">
|
|
<span style="">{{ y7 }}</span>
|
|
</div>
|
|
<!-- 10 - 20 -->
|
|
<div class="trans " style="position:absolute; top:4%; left:29.7%; height:3%; width:5%;">
|
|
<span style="">{{ y8 }}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:6.5%; left:23.5%; height:3%; width:5%;">
|
|
<span style="">{{ y9 }}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:8%; left:20%; height:3%; width:5%;">
|
|
<span style="">{{ y10 }}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:5.2%; left:26.5%; height:3%; width:5%;">
|
|
<span style="">{{ y11 }}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:1.5%; left:36%; height:3%; width:5%;">
|
|
<span style="">{{ y12 }}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:0.5%; left:39.5%; height:3%; width:5%;">
|
|
<span style="">{{ y13 }}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:2.7%; left:33%; height:3%; width:5%;">
|
|
<span style="">{{ y14 }}</span>
|
|
</div>
|
|
<!-- 20 - 30 -->
|
|
<div class="trans " style="position:absolute; top:3.8%; left:65.5%; height:3%; width:5%;">
|
|
<span style="">{{ y15 }}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:1.7%; left:59.7%; height:3%; width:5%;">
|
|
<span style="">{{ y16 }}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:0.4%; left:55.3%; height:3%; width:5%;">
|
|
<span style="">{{ y17 }}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:2.8%; left:63%; height:3%; width:5%;">
|
|
<span style="">{{ y18 }}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:6.6%; left:71.3%; height:3%; width:5%;">
|
|
<span style="">{{ y19 }}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:5.4%; left:68.5%; height:3%; width:5%;">
|
|
<span style="">{{ y20 }}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:7.8%; left:74.6%; height:3%; width:5%;">
|
|
<span style="">{{ y21 }}</span>
|
|
</div>
|
|
<!-- 30 - 40 -->
|
|
<div class="trans " style="position:absolute; top:29.4%; left:90.6%; height:3%; width:5%;">
|
|
<span style="">{{ y22 }}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:23.3%; left:88.0%; height:3%; width:5%;">
|
|
<span style="">{{ y23 }}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:20.1%; left:86.8%; height:3%; width:5%;">
|
|
<span style="">{{ y24 }}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:26.1%; left:89.6%; height:3%; width:5%;">
|
|
<span style="">{{ y25 }}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:35.5%; left:93.1%; height:3%; width:5%;">
|
|
<span style="">{{ y26 }}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:39.2%; left:94.6%; height:3%; width:5%;">
|
|
<span style="">{{ y27 }}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:32.5%; left:92%; height:3%; width:5%;">
|
|
<span style="">{{ y28 }}</span>
|
|
</div>
|
|
<!-- 40 - 50 -->
|
|
<!-- 40 - 50 -->
|
|
<div class="trans " style="position:absolute; top:65%; left:91.5%; height:3%; width:5%;">
|
|
<span style="" id="y29">{{ y29
|
|
}}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:59%; left:93.5%; height:3%; width:5%;">
|
|
<span style="" id="y30">{{ y30
|
|
}}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:62%; left:92.5%; height:3%; width:5%;">
|
|
<span style="" id="y31">{{ y31
|
|
}}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:55.6%; left:95%; height:3%; width:5%;">
|
|
<span style="" id="y32">{{ y32
|
|
}}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:71.5%; left:88.5%; height:3%; width:5%;">
|
|
<span style="" id="y33">{{ y33
|
|
}}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:74.4%; left:87%; height:3%; width:5%;">
|
|
<span style="" id="y34">{{ y34
|
|
}}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:68.3%; left:90%; height:3%; width:5%;">
|
|
<span style="" id="y35">{{ y35
|
|
}}</span>
|
|
</div>
|
|
<!-- 50 - 60 -->
|
|
<div class="trans " style="position:absolute; top:91.4%; left:65%; height:3%; width:5%;">
|
|
<span style="" id="y36">{{ y36
|
|
}}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:88.3%; left:71.7%; height:3%; width:5%;">
|
|
<span style="" id="y37">{{ y37
|
|
}}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:87%; left:75.0%; height:3%; width:5%;">
|
|
<span style="" id="y38">{{ y38
|
|
}}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:89.5%; left:68.7%; height:3%; width:5%;">
|
|
<span style="" id="y39">{{ y39
|
|
}}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:93.5%; left:59%; height:3%; width:5%;">
|
|
<span style="" id="y40">{{ y40
|
|
}}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:92%; left:62%; height:3%; width:5%;">
|
|
<span style="" id="y41">{{ y41
|
|
}}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:95%; left:55%; height:3%; width:5%;">
|
|
<span style="" id="y42">{{ y42
|
|
}}</span>
|
|
</div>
|
|
<!-- 60 - 70 -->
|
|
<div class="trans " style="position:absolute; top:91.6%; left:29.4%; height:3%; width:5%;">
|
|
<span style="" id="y43">{{ y43
|
|
}}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:93.9%; left:36%; height:3%; width:5%;">
|
|
<span style="" id="y44">{{ y44
|
|
}}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:95.3%; left:39.1%; height:3%; width:5%;">
|
|
<span style="" id="y45">{{ y45
|
|
}}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:92.7%; left:32.7%; height:3%; width:5%;">
|
|
<span style="" id="y46">{{ y46
|
|
}}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:88.9%; left:23.5%; height:3%; width:5%;">
|
|
<span style="" id="y47">{{ y47
|
|
}}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:90%; left:26.5%; height:3%; width:5%;">
|
|
<span style="" id="y48">{{ y48
|
|
}}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:87.8%; left:20.5%; height:3%; width:5%;">
|
|
<span style="" id="y49">{{ y49
|
|
}}</span>
|
|
</div>
|
|
<!-- 70 - 80 -->
|
|
<div class="trans " style="position:absolute; top:65.3%; left:3.1%; height:3%; width:5%;">
|
|
<span style="" id="y50">{{ y50
|
|
}}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:72%; left:6.1%; height:3%; width:5%;">
|
|
<span style="" id="y51">{{ y51
|
|
}}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:75%; left:7.4%; height:3%; width:5%;">
|
|
<span style="" id="y52">{{ y52
|
|
}}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:68.5%; left:4.5%; height:3%; width:5%;">
|
|
<span style="" id="y53">{{ y53
|
|
}}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:59%; left:0.4%; height:3%; width:5%;">
|
|
<span style="" id="y54">{{ y54
|
|
}}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:56%; left:-.3%; height:3%; width:5%;">
|
|
<span style="" id="y55">{{ y55
|
|
}}</span>
|
|
</div>
|
|
<div class="trans " style="position:absolute; top:62%; left:1.6%; height:3%; width:5%;">
|
|
<span style="" id="y56">{{ y56
|
|
}}</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="added">
|
|
|
|
<div id="n68" class="trans" style="position:absolute; width:9%; height:9%; left:6%; top:8%;">
|
|
<p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Ahnenaufgabe Vaterlinie</p>
|
|
<div style=" width:100%; height:100%;" class="border-2 border-gray-900 text-gray-900 ">
|
|
<span style=" ">{{ n68
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="y" class="trans" style="position:absolute; width:4.5%; height:4.5%; left:0.5%; top:8%;">
|
|
<div style=" width:100%; height:100%; " class="border-2 border-gray-900 text-gray-900 ">
|
|
<p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Ahnenkarma Vaterlinie</p>
|
|
<span style=" ">{{ y
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="f" class="trans" style="position:absolute; width:4.5%; height:4.5%; left:8%; top:2%;">
|
|
<div style=" width:100%; height:100%; " class="border-2 border-gray-900 text-gray-900 ">
|
|
<p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Ahnenkarma Vaterlinie</p>
|
|
<span style=" ">{{ f
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div id="n69" class="trans" style="position:absolute; width:9%; height:9%; left:45%; top:-10%;">
|
|
<p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Seelenvertrag Planetarisch</p>
|
|
<div style=" width:100%; height:100%; " class="border-2 border-gray-900 text-gray-900 ">
|
|
<span style=" ">{{ n69
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="n70" class="trans" style="position:absolute; width:9%; height:9%; left:84%; top:8%;">
|
|
<p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Seelenvertrag Selbstfindung</p>
|
|
<div style=" width:100%; height:100%; " class="border-2 border-gray-900 text-gray-900 ">
|
|
<span style=" ">{{ n70
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="j" class="trans" style="position:absolute; width:4.5%; height:4.5%; right:1%; top:8%;">
|
|
<div style=" width:100%; height:100%; " class="border-2 border-gray-900 text-gray-900 ">
|
|
<p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Erde / Materiell</p>
|
|
<span style=" ">{{ j
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="h" class="trans" style="position:absolute; width:4.5%; height:4.5%; right:8%; top:2%;">
|
|
<div style=" width:100%; height:100%; " class="border-2 border-gray-900 text-gray-900 ">
|
|
<p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Himmel / Spirituell</p>
|
|
<span style=" ">{{ h
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div id="n71" class="trans" style="position:absolute; width:9%; height:9%; left:6%; bottom:9%;">
|
|
<p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Ahnenaufgabe Mutterlinie</p>
|
|
<div style=" width:100%; height:100%; " class="border-2 border-gray-900 text-gray-900 ">
|
|
<span style=" ">{{ n71
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="k" class="trans" style="position:absolute; width:4.5%; height:4.5%; left:0.5%; bottom:9%;">
|
|
<div style=" width:100%; height:100%; " class="border-2 border-gray-900 text-gray-900 ">
|
|
<p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Ahnenkarma Mutterlinie</p>
|
|
<span style=" ">{{k
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="g" class="trans" style="position:absolute; width:4.5%; height:4.5%; left:8%; bottom:3.3%;">
|
|
<div style=" width:100%; height:100%; " class="border-2 border-gray-900 text-gray-900 ">
|
|
<p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Ahnenkarma Mutterlinie</p>
|
|
<span style=" ">{{ g
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div id="n72" class="trans" style="position:absolute; width:9%; height:9%; left:45%; bottom:-8%;">
|
|
<p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Seelenvertrag Spiritualität</p>
|
|
<div style=" width:100%; height:100%; " class="border-2 border-gray-900 text-gray-900 ">
|
|
<span style=" ">{{ n72
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="n73" class="trans" style="position:absolute; width:9%; height:9%; left:83%; bottom:8%;">
|
|
<p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Seelenvertrag Gesellschaft</p>
|
|
<div style=" width:100%; height:100%; " class="border-2 border-gray-900 text-gray-900 ">
|
|
<span style=" ">{{ n73
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="n" class="trans" style="position:absolute; width:4.5%; height:4.5%; right:2.2%; bottom:8%;">
|
|
<div style=" width:100%; height:100%; " class="border-2 border-gray-900 text-gray-900 ">
|
|
<p class=" absolute flex items-center justify-center h-12 py-3 px-2 info">Männlich</p>
|
|
<span style=" ">{{n
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="t" class="trans" style="position:absolute; width:4.5%; height:4.5%; right:9%; bottom:2%;">
|
|
<div style=" width:100%; height:100%; " class="border-2 border-gray-900 text-gray-900 ">
|
|
<p class=" absolute flex items-center justify-center h-12 py-3 px-2 info" >Weiblich</p>
|
|
<span style=" " >{{ t
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div v-if="showResult == true" class="container mx-auto w-full">
|
|
|
|
<div class="flex flex-wrap justify-center mt-12 px-12 lg:px-2">
|
|
|
|
<div class="flex gap-4 w-full mb-4 items-center">
|
|
<p>Programme aus der väterlichen Abstammungslinie:</p>
|
|
<div class="flex gap-0.5" >
|
|
<div class="round trans rounded-full border-2 w-12 h-12 border-gray-900 flex justify-center items-center" id="n61">{{ n2 }}</div>
|
|
<div class="round trans rounded-full border-2 w-12 h-12 border-gray-900 flex justify-center items-center" id="n61">{{ n6 }}</div>
|
|
<div class="round trans rounded-full border-2 w-12 h-12 border-gray-900 flex justify-center items-center" id="n61">{{ n64 }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-4 w-full mb-4 items-center">
|
|
<p>Programme aus der mütterlichen Abstammungslinie:</p>
|
|
<div class="flex gap-0.5" >
|
|
<div class="round trans rounded-full border-2 w-12 h-12 border-gray-900 flex justify-center items-center" id="n61">{{ n4 }}</div>
|
|
<div class="round trans rounded-full border-2 w-12 h-12 border-gray-900 flex justify-center items-center" id="n61">{{ n8 }}</div>
|
|
<div class="round trans rounded-full border-2 w-12 h-12 border-gray-900 flex justify-center items-center" id="n61">{{ n65 }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start justify-between flex-wrap mt-12 gap-5 lg:gap-0 w-full">
|
|
<div class="flex flex-col gap-6 w-full lg:w-1/4 justify-between">
|
|
|
|
<div class="flex items-center flex-col ">
|
|
<div style="font-size:17px; font-weight:bold; margin-bottom:5px;">Seelenvertrag Selbstfindung
|
|
</div>
|
|
|
|
</div>
|
|
<div class="flex justify-center gap-2.5 items-center">
|
|
<div>
|
|
<div class="flex items-center justify-between gap-2.5">
|
|
<p>Himmel </p>
|
|
<span class="round trans rounded-full border-2 w-12 h-12 border-gray-900 flex justify-center items-center" id="n57">{{ n57 }}</span>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-2.5">
|
|
<p>Erde</p>
|
|
<span class="round trans rounded-full border-2 w-12 h-12 border-gray-900 flex justify-center items-center" id="n59">{{ n59 }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<img src="https://wordpresstuts.com.br/wp-content/uploads/2024/04/curlybraces.png" alt="curly" />
|
|
<div class="round trans rounded-full border-2 w-12 h-12 border-gray-900 flex justify-center items-center" id="n58">{{ n58 }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-6 w-full lg:w-1/4 justify-between">
|
|
<div class="flex items-center flex-col ">
|
|
<div style="font-size:17px; font-weight:bold; margin-bottom:5px;">Seelenvertrag Gesellschaft
|
|
</div>
|
|
|
|
</div>
|
|
<div class="flex justify-center gap-2.5 items-center">
|
|
<div>
|
|
<div class="flex items-center justify-between gap-2.5">
|
|
<p>M</p>
|
|
<span class="round trans rounded-full border-2 w-12 h-12 border-gray-900 flex justify-center items-center" id="n60">{{ n60 }}</span>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-2.5">
|
|
<p>W</p>
|
|
<span class="round trans rounded-full border-2 w-12 h-12 border-gray-900 flex justify-center items-center" id="n62">{{ n62 }}</span>
|
|
</div>
|
|
</div>
|
|
<img src="https://wordpresstuts.com.br/wp-content/uploads/2024/04/curlybraces.png" alt="curly" />
|
|
<div class="round trans rounded-full border-2 w-12 h-12 border-gray-900 flex justify-center items-center" id="n61">{{ n61 }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap lg:flex-nowrap gap-2.5 w-full lg:w-1/4">
|
|
<div class="flex flex-col gap-2.5 w-full">
|
|
<div class="flex gap-2.5 items-center justify-center">
|
|
<span style="font-size:17px; font-weight:bold; ">Seelenvertrag Spiritualität</span>
|
|
|
|
</div>
|
|
|
|
<span class="round trans rounded-full border-2 w-12 h-12 border-gray-900 flex justify-center items-center mx-auto" id="n63">{{ n63 }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap lg:flex-nowrap gap-2.5 w-full lg:w-1/4">
|
|
<div class="flex flex-col gap-2.5 w-full">
|
|
<div class="flex gap-2.5 items-center justify-center">
|
|
<span style="font-size:17px; font-weight:bold; ">Seelenvertrag Planetarisch</span>
|
|
|
|
</div>
|
|
|
|
<span class="round trans rounded-full border-2 w-12 h-12 border-gray-900 flex justify-center items-center mx-auto" id="n69">{{ n69 }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
|
|
export default {
|
|
|
|
data() {
|
|
return {
|
|
|
|
schema: "schema.png",
|
|
name: '',
|
|
age: '',
|
|
date: '09-09-1999',
|
|
resultDay: 0,
|
|
resultMonth: 0,
|
|
resultYear: 0,
|
|
|
|
isRestult: true,
|
|
showResult: false,
|
|
values: 0,
|
|
day: 2,
|
|
month: 4,
|
|
year: 1981,
|
|
h:0,
|
|
j:0,
|
|
k:0,
|
|
t:0,
|
|
g:0,
|
|
n:0,
|
|
y:0,
|
|
f:0,
|
|
n1: 0,
|
|
n3: 0,
|
|
n5: 0,
|
|
n2: 0,
|
|
n4: 0,
|
|
n6: 0,
|
|
n7: 0,
|
|
n8: 0,
|
|
n9: 0,
|
|
n10: 0,
|
|
n11: 0,
|
|
n12: 0,
|
|
n13: 0,
|
|
n14: 0,
|
|
n15: 0,
|
|
n16: 0,
|
|
n17: 0,
|
|
n18: 0,
|
|
n19: 0,
|
|
n20: 0,
|
|
n21: 0,
|
|
n22: 0,
|
|
n23: 0,
|
|
n24: 0,
|
|
n25: 0,
|
|
n26: 0,
|
|
n27: 0,
|
|
n28: 0,
|
|
n29: 0,
|
|
n30: 0,
|
|
n31:0,
|
|
n32:0,
|
|
y1: 0,
|
|
y2: 0,
|
|
y3: 0,
|
|
y4: 0,
|
|
y5: 0,
|
|
y6: 0,
|
|
y7: 0,
|
|
y8: 0,
|
|
y9: 0,
|
|
y10: 0,
|
|
y11: 0,
|
|
y12: 0,
|
|
y13: 0,
|
|
y14: 0,
|
|
y15: 0,
|
|
y16: 0,
|
|
y17: 0,
|
|
y18: 0,
|
|
y19: 0,
|
|
y20: 0,
|
|
y21: 0,
|
|
y22: 0,
|
|
y23: 0,
|
|
y24: 0,
|
|
y25: 0,
|
|
y26: 0,
|
|
y27: 0,
|
|
y28: 0,
|
|
y29: 0,
|
|
y30: 0,
|
|
y31: 0,
|
|
y32: 0,
|
|
y33: 0,
|
|
y34: 0,
|
|
y35: 0,
|
|
y36: 0,
|
|
y37: 0,
|
|
y38: 0,
|
|
y39: 0,
|
|
y40: 0,
|
|
y41: 0,
|
|
y42: 0,
|
|
y43: 0,
|
|
y44: 0,
|
|
y45: 0,
|
|
y46: 0,
|
|
y47: 0,
|
|
y48: 0,
|
|
y49: 0,
|
|
y50: 0,
|
|
y51: 0,
|
|
y52: 0,
|
|
y53: 0,
|
|
y54: 0,
|
|
y55: 0,
|
|
y56: 0,
|
|
n33: 0,
|
|
n34: 0,
|
|
n35: 0,
|
|
n36: 0,
|
|
n37: 0,
|
|
n38: 0,
|
|
n39: 0,
|
|
n40: 0,
|
|
n41: 0,
|
|
n42: 0,
|
|
n43: 0,
|
|
n44: 0,
|
|
n45: 0,
|
|
n46: 0,
|
|
n47: 0,
|
|
n48: 0,
|
|
n49: 0,
|
|
n50: 0,
|
|
n51: 0,
|
|
n52: 0,
|
|
n53: 0,
|
|
n54: 0,
|
|
n55: 0,
|
|
n56: 0,
|
|
n57: 0,
|
|
n58: 0,
|
|
n59: 0,
|
|
n60: 0,
|
|
n61: 0,
|
|
n62: 0,
|
|
n63: 0,
|
|
n64:0,
|
|
n65:0,
|
|
n66:0,
|
|
n67:0,
|
|
n68:0,
|
|
n69:0,
|
|
n70:0,
|
|
n71:0,
|
|
n72:0,
|
|
n73:0,
|
|
}
|
|
},
|
|
methods: {
|
|
isDarkMode(){
|
|
if (localStorage.getItem("color-theme")) {
|
|
if (localStorage.getItem("color-theme") === "light") {
|
|
this.darkMode = true;
|
|
}else{
|
|
this.darkMode = false;
|
|
}
|
|
}
|
|
},
|
|
toDarkMode(){
|
|
|
|
// if set via local storage previously
|
|
if (localStorage.getItem("color-theme")) {
|
|
if (localStorage.getItem("color-theme") === "light") {
|
|
document.documentElement.classList.add("dark");
|
|
this.darkMode = false;
|
|
localStorage.setItem("color-theme", "dark");
|
|
} else {
|
|
document.documentElement.classList.remove("dark");
|
|
localStorage.setItem("color-theme", "light");
|
|
this.darkMode = true;
|
|
}
|
|
|
|
// if NOT set via local storage previously
|
|
} else {
|
|
if (document.documentElement.classList.contains("dark")) {
|
|
document.documentElement.classList.remove("dark");
|
|
localStorage.setItem("color-theme", "light");
|
|
this.darkMode = true;
|
|
|
|
} else {
|
|
document.documentElement.classList.add("dark");
|
|
localStorage.setItem("color-theme", "dark");
|
|
this.darkMode = false;
|
|
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
Age(){
|
|
var today = new Date();
|
|
var birthDate = new Date(this.date);
|
|
var age = today.getFullYear() - birthDate.getFullYear();
|
|
var m = today.getMonth() - birthDate.getMonth();
|
|
if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
|
|
age--;
|
|
}
|
|
this.age = age;
|
|
},
|
|
|
|
IfIsMoreThan22(value) {
|
|
if (value > 22) {
|
|
this.values = value.toString().split('').map(Number);
|
|
value = this.values.reduce((a, b) => b + a);
|
|
|
|
if (value < 22) {
|
|
return value;
|
|
} else {
|
|
|
|
if(value == 22){
|
|
return value
|
|
}else {
|
|
this.values = value.toString().split('').map(Number);
|
|
value = this.values.reduce((a, b) => b + a);
|
|
return value;
|
|
}
|
|
|
|
}
|
|
|
|
} else {
|
|
return value;
|
|
}
|
|
},
|
|
TheN1() {
|
|
this.resultDay = this.date.split('-');
|
|
this.day = parseInt(this.resultDay[2]);
|
|
this.n1 = this.IfIsMoreThan22(this.day);
|
|
},
|
|
|
|
TheN5() {
|
|
this.resultYear = this.date.split('-');
|
|
this.year = parseInt(this.resultYear[0]);
|
|
this.n5 = this.IfIsMoreThan22(this.year);
|
|
},
|
|
|
|
TheN3() {
|
|
this.resultMonth = this.date.split('-');
|
|
this.month = parseInt(this.resultMonth[1]);
|
|
this.n3 = this.IfIsMoreThan22(this.month);
|
|
},
|
|
|
|
TheN7() {
|
|
this.n7 = this.IfIsMoreThan22(this.n1 + this.n5 + this.n3);
|
|
},
|
|
|
|
TheD() {
|
|
this.n30 = this.IfIsMoreThan22(this.n1 + this.n5 + this.n3 + this.n7);
|
|
},
|
|
TheN17() {
|
|
|
|
this.n17 = this.IfIsMoreThan22(this.n30 + this.n1);
|
|
},
|
|
TheN19() {
|
|
this.n19 = this.IfIsMoreThan22(this.n3 + this.n30);
|
|
},
|
|
|
|
TheN21() {
|
|
this.n21 = this.IfIsMoreThan22(this.n5 + this.n30);
|
|
},
|
|
|
|
TheN23() {
|
|
this.n23 = this.IfIsMoreThan22(this.n7 + this.n30);
|
|
},
|
|
|
|
TheN9() {
|
|
this.n9 = this.IfIsMoreThan22(this.n1 + this.n17);
|
|
},
|
|
|
|
TheN11() {
|
|
this.n11 = this.IfIsMoreThan22(this.n19 + this.n3);
|
|
},
|
|
TheN13() {
|
|
this.n13 = this.IfIsMoreThan22(this.n5 + this.n21);
|
|
},
|
|
|
|
TheN15() {
|
|
this.n15 = this.IfIsMoreThan22(this.n7 + this.n23);
|
|
},
|
|
|
|
TheN2() {
|
|
this.n2 = this.IfIsMoreThan22(this.n1 + this.n3);
|
|
},
|
|
|
|
TheN4() {
|
|
this.n4 = this.IfIsMoreThan22(this.n5 + this.n3);
|
|
},
|
|
|
|
TheN6() {
|
|
this.n6 = this.IfIsMoreThan22(this.n5 + this.n7);
|
|
},
|
|
|
|
TheN8() {
|
|
this.n8 = this.IfIsMoreThan22(this.n1 + this.n7);
|
|
},
|
|
|
|
TheN18() {
|
|
this.n18 = this.IfIsMoreThan22(this.n2 + this.n30);
|
|
},
|
|
|
|
TheN20() {
|
|
this.n20 = this.IfIsMoreThan22(this.n4 + this.n30);
|
|
},
|
|
|
|
TheN22() {
|
|
this.n22 = this.IfIsMoreThan22(this.n6 + this.n30);
|
|
},
|
|
|
|
TheN24() {
|
|
this.n24 = this.IfIsMoreThan22(this.n8 + this.n30);
|
|
},
|
|
|
|
TheN10() {
|
|
this.n10 = this.IfIsMoreThan22(this.n2 + this.n18);
|
|
},
|
|
|
|
TheN12() {
|
|
this.n12 = this.IfIsMoreThan22(this.n4 + this.n20);
|
|
},
|
|
|
|
TheN14() {
|
|
this.n14 = this.IfIsMoreThan22(this.n6 + this.n22);
|
|
},
|
|
|
|
TheN16() {
|
|
this.n16 = this.IfIsMoreThan22(this.n8 + this.n24);
|
|
},
|
|
|
|
TheN26() {
|
|
this.n26 = this.IfIsMoreThan22(this.n19 + this.n30);
|
|
},
|
|
|
|
TheN25() {
|
|
this.n25 = this.IfIsMoreThan22(this.n17 + this.n30);
|
|
},
|
|
|
|
TheN31() {
|
|
this.n31 = this.IfIsMoreThan22(this.n2 + this.n4 + this.n6 + this.n8);
|
|
},
|
|
|
|
TheN32() {
|
|
this.n32 = this.IfIsMoreThan22(this.n30 + this.n31);
|
|
},
|
|
|
|
|
|
TheN28() {
|
|
this.n28 = this.IfIsMoreThan22(this.n23 + this.n21);
|
|
},
|
|
|
|
TheN27() {
|
|
this.n27 = this.IfIsMoreThan22(this.n28 + this.n21);
|
|
},
|
|
|
|
TheN29() {
|
|
this.n29 = this.IfIsMoreThan22(this.n28 + this.n23);
|
|
},
|
|
|
|
//calculating years
|
|
|
|
TheY1() {
|
|
this.y1 = this.IfIsMoreThan22(this.n1 + this.n2);
|
|
},
|
|
|
|
TheY2() {
|
|
this.y2 = this.IfIsMoreThan22(this.n1 + this.y1);
|
|
},
|
|
|
|
TheY3() {
|
|
this.y3 = this.IfIsMoreThan22(this.n1 + this.y2);
|
|
},
|
|
|
|
TheY4() {
|
|
this.y4 = this.IfIsMoreThan22(this.y1 + this.y2);
|
|
},
|
|
|
|
TheY5() {
|
|
this.y5 = this.IfIsMoreThan22(this.y1 + this.n2);
|
|
},
|
|
|
|
TheY7() {
|
|
this.y7 = this.IfIsMoreThan22(this.y1 + this.y5);
|
|
},
|
|
|
|
TheY6() {
|
|
this.y6 = this.IfIsMoreThan22(this.y5 + this.n2);
|
|
},
|
|
|
|
TheY8() {
|
|
this.y8 = this.IfIsMoreThan22(this.n3 + this.n2);
|
|
},
|
|
|
|
TheY9() {
|
|
this.y9 = this.IfIsMoreThan22(this.y8 + this.n2);
|
|
},
|
|
|
|
TheY10() {
|
|
this.y10 = this.IfIsMoreThan22(this.y9 + this.n2);
|
|
},
|
|
|
|
TheY11() {
|
|
this.y11 = this.IfIsMoreThan22(this.y9 + this.y8);
|
|
},
|
|
|
|
TheY12() {
|
|
this.y12 = this.IfIsMoreThan22(this.n3 + this.y8);
|
|
},
|
|
|
|
TheY13() {
|
|
this.y13 = this.IfIsMoreThan22(this.month + this.y12);
|
|
},
|
|
|
|
TheY14() {
|
|
this.y14 = this.IfIsMoreThan22(this.y8 + this.y12);
|
|
},
|
|
|
|
TheY15() {
|
|
this.y15 = this.IfIsMoreThan22(this.month + this.n4);
|
|
},
|
|
|
|
TheY16() {
|
|
this.y16 = this.IfIsMoreThan22(this.month + this.y15);
|
|
},
|
|
|
|
TheY17() {
|
|
this.y17 = this.IfIsMoreThan22(this.month + this.y16);
|
|
},
|
|
|
|
TheY18() {
|
|
this.y18 = this.IfIsMoreThan22(this.y15 + this.y16);
|
|
},
|
|
|
|
TheY19() {
|
|
this.y19 = this.IfIsMoreThan22(this.y15 + this.n4);
|
|
},
|
|
|
|
TheY20() {
|
|
this.y20 = this.IfIsMoreThan22(this.y15 + this.y19);
|
|
},
|
|
|
|
TheY21() {
|
|
this.y21 = this.IfIsMoreThan22(this.n4 + this.y19);
|
|
},
|
|
|
|
TheY22() {
|
|
this.y22 = this.IfIsMoreThan22(this.n5 + this.n4);
|
|
},
|
|
|
|
TheY23() {
|
|
this.y23 = this.IfIsMoreThan22(this.y22 + this.n4);
|
|
},
|
|
|
|
TheY24() {
|
|
this.y24 = this.IfIsMoreThan22(this.y23 + this.n4);
|
|
},
|
|
|
|
TheY25() {
|
|
this.y25 = this.IfIsMoreThan22(this.y23 + this.y22);
|
|
},
|
|
|
|
TheY26() {
|
|
this.y26 = this.IfIsMoreThan22(this.n5 + this.y22);
|
|
},
|
|
|
|
TheY27() {
|
|
this.y27 = this.IfIsMoreThan22(this.n5 + this.y26);
|
|
},
|
|
|
|
TheY28() {
|
|
this.y28 = this.IfIsMoreThan22(this.y22 + this.y26);
|
|
},
|
|
|
|
TheY29() {
|
|
this.y29 = this.IfIsMoreThan22(this.n6 + this.n5);
|
|
},
|
|
|
|
TheY30() {
|
|
this.y30 = this.IfIsMoreThan22(this.y29 + this.n5);
|
|
},
|
|
|
|
TheY31() {
|
|
this.y31 = this.IfIsMoreThan22(this.y29 + this.y30);
|
|
},
|
|
|
|
TheY32() {
|
|
this.y32 = this.IfIsMoreThan22(this.n5 + this.y30);
|
|
},
|
|
|
|
TheY33() {
|
|
this.y33 = this.IfIsMoreThan22(this.n6 + this.y29);
|
|
},
|
|
|
|
TheY34() {
|
|
this.y34 = this.IfIsMoreThan22(this.n6 + this.y33);
|
|
},
|
|
|
|
TheY35() {
|
|
this.y35 = this.IfIsMoreThan22(this.y29 + this.y33);
|
|
},
|
|
|
|
TheY36() {
|
|
this.y36 = this.IfIsMoreThan22(this.n6 + this.n7);
|
|
},
|
|
|
|
TheY37() {
|
|
this.y37 = this.IfIsMoreThan22(this.n6 + this.y36);
|
|
},
|
|
|
|
TheY38() {
|
|
this.y38 = this.IfIsMoreThan22(this.n6 + this.y37);
|
|
},
|
|
|
|
TheY39() {
|
|
this.y39 = this.IfIsMoreThan22(this.y36 + this.y37);
|
|
},
|
|
|
|
TheY40() {
|
|
this.y40 = this.IfIsMoreThan22(this.y36 + this.n7);
|
|
},
|
|
|
|
TheY41() {
|
|
this.y41 = this.IfIsMoreThan22(this.y36 + this.y40);
|
|
},
|
|
|
|
TheY42() {
|
|
this.y42 = this.IfIsMoreThan22(this.n7 + this.y40);
|
|
},
|
|
|
|
TheY43() {
|
|
this.y43 = this.IfIsMoreThan22(this.n7 + this.n8);
|
|
},
|
|
|
|
TheY44() {
|
|
this.y44 = this.IfIsMoreThan22(this.n7 + this.y43);
|
|
},
|
|
|
|
TheY45() {
|
|
this.y45 = this.IfIsMoreThan22(this.n7 + this.y44);
|
|
},
|
|
|
|
TheY46() {
|
|
this.y46 = this.IfIsMoreThan22(this.y43 + this.y44);
|
|
},
|
|
|
|
TheY47() {
|
|
this.y47 = this.IfIsMoreThan22(this.y43 + this.n8);
|
|
},
|
|
|
|
TheY48() {
|
|
this.y48 = this.IfIsMoreThan22(this.y43 + this.y47);
|
|
},
|
|
|
|
TheY49() {
|
|
this.y49 = this.IfIsMoreThan22(this.n8 + this.y47);
|
|
},
|
|
|
|
TheY50() {
|
|
this.y50 = this.IfIsMoreThan22(this.n8 + this.n1);
|
|
},
|
|
|
|
TheY51() {
|
|
this.y51 = this.IfIsMoreThan22(this.n8 + this.y50);
|
|
},
|
|
|
|
TheY52() {
|
|
this.y52 = this.IfIsMoreThan22(this.n8 + this.y51);
|
|
},
|
|
|
|
TheY53() {
|
|
this.y53 = this.IfIsMoreThan22(this.y50 + this.y51);
|
|
},
|
|
|
|
TheY54() {
|
|
this.y54 = this.IfIsMoreThan22(this.y50 + this.n1);
|
|
},
|
|
|
|
TheY55() {
|
|
this.y55 = this.IfIsMoreThan22(this.n1 + this.y54);
|
|
},
|
|
|
|
TheY56() {
|
|
this.y56 = this.IfIsMoreThan22(this.y50 + this.y54);
|
|
},
|
|
|
|
TheN33() {
|
|
this.n33 = this.n1;
|
|
},
|
|
|
|
TheN34() {
|
|
this.n34 = this.n3;
|
|
},
|
|
|
|
TheN35() {
|
|
this.n35 = this.IfIsMoreThan22(this.n3 + this.n1);
|
|
},
|
|
|
|
TheN36() {
|
|
this.n36 = this.n9;
|
|
},
|
|
|
|
TheN37() {
|
|
this.n37 = this.n11;
|
|
},
|
|
|
|
TheN38() {
|
|
this.n38 = this.IfIsMoreThan22(this.n9 + this.n11);
|
|
},
|
|
|
|
TheN39() {
|
|
this.n39 = this.n17;
|
|
},
|
|
|
|
TheN40() {
|
|
this.n40 = this.n19;
|
|
},
|
|
|
|
TheN41() {
|
|
this.n41 = this.IfIsMoreThan22(this.n19 + this.n17);
|
|
},
|
|
|
|
TheN42() {
|
|
this.n42 = this.n25;
|
|
},
|
|
|
|
TheN43() {
|
|
this.n43 = this.n26;
|
|
},
|
|
|
|
TheN44() {
|
|
this.n44 = this.IfIsMoreThan22(this.n26 + this.n25);
|
|
},
|
|
|
|
TheN45() {
|
|
this.n45 = this.n30;
|
|
},
|
|
|
|
TheN46() {
|
|
this.n46 = this.n30;
|
|
},
|
|
|
|
TheN47() {
|
|
this.n47 = this.IfIsMoreThan22(this.n30 + this.n30);
|
|
},
|
|
|
|
TheN48() {
|
|
this.n48 = this.n21;
|
|
},
|
|
|
|
TheN49() {
|
|
this.n49 = this.n23;
|
|
},
|
|
|
|
TheN50() {
|
|
this.n50 = this.IfIsMoreThan22(this.n21 + this.n23);
|
|
},
|
|
|
|
TheN51() {
|
|
this.n51 = this.n5;
|
|
},
|
|
|
|
TheN52() {
|
|
this.n52 = this.n7;
|
|
},
|
|
|
|
TheN53() {
|
|
this.n53 = this.IfIsMoreThan22(this.n5 + this.n7);
|
|
},
|
|
|
|
TheN54() {
|
|
this.n54 = this.IfIsMoreThan22(this.n1 + this.n9 + this.n17 + this.n25 + this.n30 + this.n21 + this.n5);
|
|
},
|
|
|
|
TheN55() {
|
|
this.n55 = this.IfIsMoreThan22(this.n3 + this.n11 + this.n19 + this.n26 + this.n30 + this.n23 + this.n7);
|
|
},
|
|
|
|
TheN56() {
|
|
this.n56 = this.IfIsMoreThan22(this.n35 + this.n38 + this.n41 + this.n44 + this.n47 + this.n50 + this.n53 );
|
|
},
|
|
|
|
TheN57() {
|
|
this.n57 = this.IfIsMoreThan22(this.n3 + this.n7);
|
|
},
|
|
|
|
|
|
TheN59() {
|
|
this.n59 = this.IfIsMoreThan22(this.n1 + this.n5);
|
|
},
|
|
|
|
TheN58() {
|
|
this.n58 = this.IfIsMoreThan22(this.n59 + this.n57);
|
|
},
|
|
|
|
|
|
TheN60() {
|
|
this.n60 = this.IfIsMoreThan22(this.n2 + this.n6);
|
|
},
|
|
|
|
|
|
TheN62() {
|
|
this.n62 = this.IfIsMoreThan22(this.n4 + this.n8);
|
|
},
|
|
|
|
TheN61() {
|
|
this.n61 = this.IfIsMoreThan22(this.n60 + this.n62);
|
|
},
|
|
|
|
|
|
TheN63() {
|
|
this.n63 = this.IfIsMoreThan22(this.n58 + this.n61);
|
|
},
|
|
|
|
|
|
TheN64() {
|
|
this.n64 = this.IfIsMoreThan22(this.n2 + this.n6);
|
|
},
|
|
|
|
TheN65() {
|
|
this.n65 = this.IfIsMoreThan22(this.n4 + this.n8);
|
|
},
|
|
Theh(){
|
|
this.h = this.IfIsMoreThan22(this.n3 + this.n7);
|
|
},
|
|
|
|
Thej(){
|
|
this.j = this.IfIsMoreThan22(this.n1 + this.n5);
|
|
},
|
|
|
|
TheM(){
|
|
this.n70 = this.IfIsMoreThan22(this.j + this.h);
|
|
},
|
|
|
|
They(){
|
|
this.y = this.n6;
|
|
},
|
|
|
|
Thef(){
|
|
this.f = this.n2;
|
|
},
|
|
|
|
Thek(){
|
|
this.k = this.n8;
|
|
},
|
|
|
|
Theg(){
|
|
this.g = this.n4;
|
|
},
|
|
|
|
TheU(){
|
|
this.n71 = this.IfIsMoreThan22(this.k + this.g);
|
|
},
|
|
|
|
TheO(){
|
|
this.n68 = this.IfIsMoreThan22(this.y + this.f);
|
|
},
|
|
|
|
TheN(){
|
|
this.n = this.IfIsMoreThan22(this.y + this.f);
|
|
},
|
|
|
|
TheT(){
|
|
this.t = this.IfIsMoreThan22(this.k + this.g);
|
|
},
|
|
|
|
TheZ(){
|
|
this.n73 = this.IfIsMoreThan22(this.t + this.n);
|
|
},
|
|
|
|
TheSE(){
|
|
this.n72 = this.IfIsMoreThan22(this.n73 + this.n70);
|
|
},
|
|
|
|
TheSP(){
|
|
this.n69 = this.IfIsMoreThan22(this.n72 + this.n73);
|
|
},
|
|
|
|
|
|
Calculat() {
|
|
if(this.date != '----------'){
|
|
|
|
|
|
this.Age();
|
|
this.isRestult = true;
|
|
this.showResult = true;
|
|
this.TheN1();
|
|
this.TheN5();
|
|
this.TheN3();
|
|
this.TheN7();
|
|
this.TheD();
|
|
this.TheN17();
|
|
this.TheN19();
|
|
this.TheN41();
|
|
this.TheN21();
|
|
this.TheN23();
|
|
this.TheN9();
|
|
this.TheN11();
|
|
this.TheN13();
|
|
this.TheN2();
|
|
this.TheN15();
|
|
this.TheN4();
|
|
this.TheN6();
|
|
this.TheN8();
|
|
this.TheN18();
|
|
this.TheN20();
|
|
this.TheN22();
|
|
this.TheN24();
|
|
this.TheN10();
|
|
this.TheN12();
|
|
this.TheN14();
|
|
this.TheN16();
|
|
this.TheN26();
|
|
this.TheN25();
|
|
this.TheN31();
|
|
this.TheN32();
|
|
this.TheN28();
|
|
this.TheN27();
|
|
this.TheN29();
|
|
this.TheY1();
|
|
this.TheY2();
|
|
this.TheY3();
|
|
this.TheY4();
|
|
this.TheY5();
|
|
this.TheY7();
|
|
this.TheY6();
|
|
this.TheY8();
|
|
this.TheY9();
|
|
this.TheY10();
|
|
this.TheY11();
|
|
this.TheY12();
|
|
this.TheY13();
|
|
this.TheY14();
|
|
this.TheY15();
|
|
this.TheY16();
|
|
this.TheY17();
|
|
this.TheY18();
|
|
this.TheY19();
|
|
this.TheY20();
|
|
this.TheY21();
|
|
this.TheY22();
|
|
this.TheY23();
|
|
this.TheY24();
|
|
this.TheY25();
|
|
this.TheY26();
|
|
this.TheY27();
|
|
this.TheY28();
|
|
this.TheY29();
|
|
this.TheY30();
|
|
this.TheY31();
|
|
this.TheY32();
|
|
this.TheY33();
|
|
this.TheY34();
|
|
this.TheY35();
|
|
this.TheY36();
|
|
this.TheY37();
|
|
this.TheY38();
|
|
this.TheY39();
|
|
this.TheY40();
|
|
this.TheY41();
|
|
this.TheY42();
|
|
this.TheY43();
|
|
this.TheY44();
|
|
this.TheY45();
|
|
this.TheY46();
|
|
this.TheY47();
|
|
this.TheY48();
|
|
this.TheY49();
|
|
this.TheY50();
|
|
this.TheY51();
|
|
this.TheY52();
|
|
this.TheY53();
|
|
this.TheY54();
|
|
this.TheY55();
|
|
this.TheY56();
|
|
this.TheN33();
|
|
this.TheN34();
|
|
this.TheN35();
|
|
this.TheN36();
|
|
this.TheN37();
|
|
this.TheN38();
|
|
this.TheN39();
|
|
this.TheN40();
|
|
this.TheN41();
|
|
this.TheN42();
|
|
this.TheN43();
|
|
this.TheN44();
|
|
this.TheN45();
|
|
this.TheN46();
|
|
this.TheN47();
|
|
this.TheN48();
|
|
this.TheN49();
|
|
this.TheN50();
|
|
this.TheN51();
|
|
this.TheN52();
|
|
this.TheN53();
|
|
this.TheN54();
|
|
this.TheN55();
|
|
this.TheN56();
|
|
this.TheN57();
|
|
this.TheN59();
|
|
this.TheN58();
|
|
this.TheN60();
|
|
this.TheN62();
|
|
this.TheN61();
|
|
this.TheN63();
|
|
this.TheN64();
|
|
this.TheN65();
|
|
this.Theh();
|
|
this.Thej();
|
|
this.TheM();
|
|
this.They();
|
|
this.Thef();
|
|
this.Thek();
|
|
this.Theg();
|
|
this.TheU();
|
|
this.TheO();
|
|
this.TheN();
|
|
this.TheT();
|
|
this.TheZ();
|
|
this.TheSE();
|
|
this.TheSP();
|
|
|
|
}else {
|
|
alert('Please, informe the birthdate');
|
|
}
|
|
}
|
|
|
|
},
|
|
beforeMount() {
|
|
|
|
this.isDarkMode();
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
|
|
|
|
.animate-go.move-left { right: 10px; }
|
|
.animate-go.move-right { left: 15px; }
|
|
|
|
.animate-go.move-left {
|
|
left: 90%;
|
|
transform: translate(-240%, 0);
|
|
}
|
|
|
|
.animate-go.move-right {
|
|
right: 110%;
|
|
transform: translate(100%, 0);
|
|
}
|
|
|
|
|
|
.resultItem {
|
|
background: #fafbfc;
|
|
}
|
|
|
|
.sectionopener items-center span {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.info {
|
|
border-radius: 8px;
|
|
top: -45px;
|
|
left: 50%;
|
|
transform: translate(-50%);
|
|
display: none;
|
|
z-index: 1000;
|
|
transition: 300ms;
|
|
background: rgb(249, 236, 222);
|
|
min-width: 180px;
|
|
|
|
}
|
|
|
|
.info:after {
|
|
z-index: 99;
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
width: 15px;
|
|
height: 15px;
|
|
background: rgba(249, 236, 222,.8);
|
|
transform: rotate(-45deg) translateX(-50%);
|
|
bottom: -3px;
|
|
left: 50%;
|
|
|
|
transition: 300ms;
|
|
border-bottom: 1px solid;
|
|
border-left: 1px solid;
|
|
}
|
|
|
|
#n30,
|
|
#n3,
|
|
#n19,
|
|
#n11,
|
|
#n15,
|
|
#n25,
|
|
#n26,
|
|
#n21,
|
|
#n13,
|
|
#n5,
|
|
#n2,
|
|
#n27,
|
|
#n28,
|
|
#n29,
|
|
#n23,
|
|
#n7,
|
|
#n1,
|
|
#n9,
|
|
#n10,
|
|
#n18,
|
|
#n4,
|
|
#n12,
|
|
#n6,
|
|
#n14,
|
|
#n16,
|
|
#n8,
|
|
#n24,
|
|
#n12,
|
|
#n22,
|
|
#n20,
|
|
#n32,
|
|
#h,
|
|
#j,
|
|
#k,
|
|
#t,
|
|
#y,
|
|
#f,
|
|
#g,
|
|
#n,
|
|
#n17, #n31 {
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
#n30:hover .info,
|
|
#n32:hover .info,
|
|
#n68:hover .info,
|
|
#n69:hover .info,
|
|
#n70:hover .info,
|
|
#n71:hover .info,
|
|
#n72:hover .info,
|
|
#n73:hover .info,
|
|
#h:hover .info,
|
|
#j:hover .info,
|
|
#k:hover .info,
|
|
#t:hover .info,
|
|
#y:hover .info,
|
|
#f:hover .info,
|
|
#g:hover .info,
|
|
#n:hover .info,
|
|
#n8:hover .info,
|
|
#n16:hover .info,
|
|
#n24:hover .info,
|
|
#n22:hover .info,
|
|
#n6:hover .info,
|
|
#n14:hover .info,
|
|
#n4:hover .info,
|
|
#n12:hover .info,
|
|
#n20:hover .info,
|
|
#n10:hover .info,
|
|
#n18:hover .info,
|
|
#n3:hover .info,
|
|
#n19:hover .info,
|
|
#n11:hover .info,
|
|
#n15:hover .info,
|
|
#n21:hover .info,
|
|
#n25:hover .info,
|
|
#n26:hover .info,
|
|
#n13:hover .info,
|
|
#n5:hover .info,
|
|
#n27:hover .info,
|
|
#n28:hover .info,
|
|
#n29:hover .info,
|
|
#n23:hover .info,
|
|
#n7:hover .info,
|
|
#n1:hover .info,
|
|
#n17:hover .info,
|
|
#n9:hover .info,
|
|
#n2:hover .info,
|
|
#n31:hover .info {
|
|
display: flex;
|
|
text-align:center;
|
|
|
|
|
|
}
|
|
|
|
div,
|
|
p,
|
|
span {
|
|
font-family: 'Lato', sans-serif;
|
|
}
|
|
|
|
.transimage {
|
|
bottom: 4px !important;
|
|
right: 3px !important;
|
|
}
|
|
|
|
|
|
.added .trans span {
|
|
font-size:22px;
|
|
}
|
|
|
|
#h span,
|
|
#j span,
|
|
#k span,
|
|
#t span,
|
|
#y span,
|
|
#f span,
|
|
#g span,
|
|
#n span{
|
|
font-size:14px
|
|
}
|
|
|
|
select {
|
|
background-color: #fff !important;
|
|
border-radius: 26px !Important;
|
|
}
|
|
|
|
@media screen and (max-width:1200px) {
|
|
.obch {
|
|
flex: 0 0 100% !important;
|
|
padding: 10px;
|
|
|
|
}
|
|
|
|
.transimage {
|
|
bottom: 5px !important;
|
|
}
|
|
|
|
.added .trans span {
|
|
font-size:15px;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
#formMatrix h3 {
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
.obch .trans,
|
|
.obch .trans>div {
|
|
border-radius: 50%;
|
|
display:flex;
|
|
justify-content:center;
|
|
align-items:center;
|
|
}
|
|
|
|
.container {
|
|
width: 1280px;
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.birthdate {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
margin-bottom: 90px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.birthdate-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
}
|
|
|
|
.transimage {
|
|
width: 102%;
|
|
z-index: 0;
|
|
position: relative;
|
|
bottom: 6px;
|
|
right: 5px;
|
|
|
|
}
|
|
|
|
.result p {
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.trans span {
|
|
font-size: 14px;
|
|
}
|
|
|
|
|
|
@media screen and (max-width:1335px) {
|
|
.trans span {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.obch .added .trans span {
|
|
font-size:16px;
|
|
}
|
|
|
|
#h span,
|
|
#j span,
|
|
#k span,
|
|
#t span,
|
|
#y span,
|
|
#f span,
|
|
#g span,
|
|
#n span{
|
|
font-size:11px
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width:1200px) {
|
|
|
|
|
|
.rightblock {
|
|
flex: 0 0 100%;
|
|
}
|
|
|
|
.trans span {
|
|
font-size: 15px;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
#n1 span,
|
|
#n3 span,
|
|
#n5 span,
|
|
#n7 span,
|
|
#n30 span,
|
|
#n2 span,
|
|
#n4 span,
|
|
#n6 span,
|
|
#n8 span {
|
|
font-size: 22px
|
|
}
|
|
|
|
@media screen and (max-width:600px) {
|
|
.chakras>div {
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.trans span {
|
|
font-size: 12px;
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.obch .trans span {
|
|
font-size: 8px;
|
|
|
|
}
|
|
|
|
#n1 span,
|
|
#n3 span,
|
|
#n5 span,
|
|
#n7 span,
|
|
#n30 span,
|
|
#n2 span,
|
|
#n4 span,
|
|
#n6 span,
|
|
#n8 span {
|
|
font-size: 16px;
|
|
position: relative;
|
|
bottom: 1px;
|
|
}
|
|
|
|
.transimage {
|
|
width: 100%;
|
|
z-index: 0;
|
|
position: relative;
|
|
bottom: 2px !important;
|
|
right: 2px;
|
|
}
|
|
|
|
table {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
}
|
|
|
|
@media screen and (max-width:470px) {
|
|
|
|
.obch .trans span {
|
|
font-size: 9px;
|
|
|
|
|
|
}
|
|
|
|
#h span,
|
|
#j span,
|
|
#k span,
|
|
#t span,
|
|
#y span,
|
|
#f span,
|
|
#g span,
|
|
#n span{
|
|
font-size:9px
|
|
}
|
|
|
|
}</style>
|