JoinMicrocosm.vue 2.26 KB
Newer Older
Adam Procter's avatar
init  
Adam Procter committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<template>
  <form>
    <span class="arrow">⬇⬇</span>
    <h1>What shall we call you ? 👩‍🚀</h1>
    <p>
      First we need to connect this device to your ideas. This name is what
      allows you to create and edit your nodes and this name can be anything you
      like, this name is always anonymous.
    </p>
    <div class="breaker-one">
      <label for="name">Name:</label>
      <input
        type="text"
        id="name"
        autocomplete="name"
        placeholder="type name here!"
        autocorrect="off"
        autocapitalize="none"
      />
      <button type="button">Store</button>
    </div>
    <h2>Next start or join a <span class="long">microcosm !</span> 🚀</h2>

    <p>
      Start your own microcosm to store your ideas and ask others to join you,
      either tell them the microcosm name or share the URL and add the ending;
      /microcosm/<strong>nameofyourmicrocosm</strong>
    </p>
    <div class="breaker-two">
      <label for="microcosm">Microcosm:</label>
      <input
        type="text"
        id="microcosm"
        autocomplete="microcosm"
        placeholder="type microcosm name here!"
        autocorrect="off"
        autocapitalize="none"
      />
      <button type="button">Start or Join</button>
    </div>
  </form>
</template>

<script>
export default {
  name: "JoinMicrocosm"
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
  margin-top: -0.5em;
  font-size: 5.2em;
  line-height: 1.2em;
}

h2 {
  font-size: 5.2em;
  line-height: 1.2em;
  margin: -0.5em 0 0 0;
  padding: 0em;
  font-family: houschka-rounded, sans-serif;
  font-weight: 700;
  font-style: normal;
  color: black;
}

.arrow {
  font-size: 6em;
  color: #1cc469;
}

.breaker-one {
  padding: 1em;
  margin-left: -1em;
  margin-right: -0.4em;
  margin-bottom: 2.5em;
  background-color: rgba(196, 47, 152, 0.4);
}

.breaker-two {
  padding: 1em;
  margin-left: -1em;
  margin-right: -0.4em;
  margin-bottom: 1em;
  background-color: rgba(37, 194, 194, 0.4);
}

label,
button {
  display: block;
}

input {
  margin-top: 0.8em;
  border: none;
  padding: 1em;
  font-size: 1em;
}
button {
  cursor: pointer;
  background-color: #1cc469;
  border: none;
  margin-top: 1em;
  padding: 1em;
  font-size: 1em;
}
</style>