-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
109 lines (100 loc) · 5.29 KB
/
index.html
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
<!DOCTYPE html>
<html lang="no">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Valentine's Day Kort til Venner</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="card">
<div class="date-lock-container">
<div class="date-input" id="dateInputSection">
<input type="datetime-local" id="unlockDateTime" class="unlock-date-input">
<button onclick="setUnlockDate()" class="lock-btn">Lås kortet og få delingslenke</button>
</div>
<div id="lockMessage" class="lock-message hidden">
<p>🔒 Dette kortet er tidslåst</p>
<p id="unlockTime" class="unlock-time"></p>
</div>
</div>
<div id="cardContent" class="card-content">
<div class="heart"></div>
<div class="message-input">
<textarea id="frontMessage" placeholder="Skriv forsidemelding her"></textarea>
</div>
<div class="message-input">
<textarea id="insideMessage" placeholder="Skriv innvendig melding her"></textarea>
</div>
<input type="text" id="nameInput" placeholder="Skriv inn ditt navn her" class="name-input">
<button onclick="changeMessage()">Trykk for å få en ny melding!</button>
<button onclick="shareCard()">Del kortet</button>
<div class="options-container">
<div class="option-column">
<p class="option-label">Kortfarge:</p>
<div class="option-buttons">
<button class="color-btn pink" onclick="changeColor('#ffb6c1')"></button>
<button class="color-btn red" onclick="changeColor('#ff6b6b')"></button>
<button class="color-btn purple" onclick="changeColor('#dda0dd')"></button>
<button class="color-btn blue" onclick="changeColor('#87ceeb')"></button>
</div>
</div>
<div class="option-column">
<p class="option-label">Tekststil:</p>
<select class="style-select" onchange="changeFont(this.value)">
<option value="Dancing Script">Stil 1</option>
<option value="Pacifico">Stil 2</option>
<option value="Comic Sans MS">Stil 3</option>
<option value="Quicksand">Stil 4</option>
</select>
</div>
<div class="option-column">
<p class="option-label">Ramme:</p>
<select class="style-select" onchange="changeBorder(this.value)">
<option value="none">Ingen</option>
<option value="simple">Enkel</option>
<option value="hearts">Hjerter</option>
<option value="dotted">Prikker</option>
</select>
</div>
</div>
<div class="options-container">
<div class="option-column">
<p class="option-label">Tekstfarge:</p>
<div class="option-buttons">
<button class="color-btn" style="background: #ff1493" onclick="changeTextColor('#ff1493')"></button>
<button class="color-btn" style="background: #9400d3" onclick="changeTextColor('#9400d3')"></button>
<button class="color-btn" style="background: #4b0082" onclick="changeTextColor('#4b0082')"></button>
<button class="color-btn" style="background: #ff69b4" onclick="changeTextColor('#ff69b4')"></button>
</div>
</div>
<div class="option-column">
<p class="option-label">Bakgrunn:</p>
<select class="style-select" onchange="changeEffect(this.value)">
<option value="none">Ingen</option>
<option value="hearts">Hjerter</option>
<option value="sparkles">Stjerner</option>
<option value="dots">Prikker</option>
<option value="waves">Bølger</option>
</select>
</div>
</div>
<div class="card-type-selector" id="cardTypeSelector">
<div class="type-buttons">
<button onclick="selectCardType('vennekort')" class="type-btn" id="vennekortBtn">
🤝 Vennekort
</button>
<button onclick="selectCardType('kjaerlighetskort')" class="type-btn" id="kjaerlighetskortBtn">
❤️ Kjærlighetskort
</button>
<button onclick="selectCardType('hemmelig')" class="type-btn" id="hemmeligBtn">
🤫 Hemmelig beundrer
</button>
</div>
<div id="selectedType" class="selected-type"></div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>