JoinMicrocosm.vue 2.31 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
<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 {
ap2x07's avatar
updates    
ap2x07 committed
46
47
48
49
50
51
52
53
  name: 'JoinMicrocosm',

  data: function() {
    return {
      name: ''
    }
  }
}
Adam Procter's avatar
init  
Adam Procter committed
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
110
111
112
113
114
115
</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>