Assignment-Maker/index.html at master · Shaleel/Assignment-Maker · GitHub

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
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,600&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Homemade+Apple&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Dawning+of+a+New+Day&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Satisfy&display=swap" rel="stylesheet">

    <title>Assignment Maker</title>
    <link rel = "icon" href =
"./title.png"
        type = "image/x-icon">
</head>
<body>
    <div class="welcome-area">
        <h1>Assignment Maker</h1>
        <h3 style="margin:2vh;">Select your Page Layout</h3>
        <div class="page-selector">

            <select id="page-select">
                <option value="Lines with Margin">Lines with Margin</option>
                <option value="Lines w/o Margin">Lines w/o Margin</option>
                <option value="Plain">Plain</option>
                <option value="Plain with Margin">Plain with Margin</option>
            </select>

            <label class="container">Spiral
                <input id="spiral" type="checkbox" >
                <span class="checkmark"></span>
              </label>
              <h5>Select Your Font</h5>

            <select id="font-select">
                <option value="Caveat">Caveat</option>
                <option value="Sacramento">Sacramento</option>
                <option value="Homemade Apple">Homemade Apple</option>
                <option value="Dawning of a New Day">Dawning of a New Day</option>
                <option value="Satisfy">Satisfy</option>
                <option value="Bohemian">Bohemian</option>
                <option value="Romantic">Romantic</option>
                <option value="Khanela">Khanela</option>
                <option value="Liberika">Liberika</option>

            </select>
            <h5 >Select Your Ink color</h5>
            <input id="ink" label="Ink Color" type="color">
        </div>
    </div>

    <h5 style="margin-bottom: 20px;">Type OR Paste Text Below</h5>
    <!-- editor -->
    <div id="dumm" >
        <div id="main-container" class="main-container">
            <div id="spiral-image-left"></div>
            <div id="spiral-image-right"></div>
            <div id="full-page-overlay" class="overlay editable" contenteditable="true"><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia hic temporibus quam? Cum ad perspiciatis voluptatum temporibus atque sapiente nobis porro, dolore qui similique maiores enim labore fugiat laborum pariatur?</p></div>
            <textarea id="bottom-page-overlay" class=" bottom editable" contenteditable="true" ></textarea>
            <div id="overlay"  class="overlay "></div>
            <div class="top">
                <div id="date-container" class=" editable" contenteditable="true"></div>

            <div id="top-container" class=" editable" contenteditable="true"></div>
        </div>

        <div  id="lines" class="lines bottom"></div>
            <div class="bottom">
                <div id="margin-container" class=" editable" contenteditable="true"></div>
                    <div id="page-container" class=" editable"  contenteditable="true">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. In beatae libero alias iusto ratione quae. Ea animi architecto facilis perferendis, pariatur incidunt labore accusantium maiores natus nesciunt! Esse, laborum nihil. Lorem ipsum dolor sit amet consectetur adipisicing elit. In beatae libero alias iusto ratione quae. Ea animi architecto facilis perferendis, pariatur incidunt labore accusantium maiores natus nesciunt! Esse, laborum nihil.
                    </div>
            </div>

        </div>
</div>
    <!-- editor closed -->

<div class="buttons1">
    <button id="image-generator">Generate Image</button>
    <button id="download">Download</button>
</div>
<h5>Preview</h5>
    <div id="photo-container" class="photo-container" style="margin-top: 20px; " >
    </div>

  <br>
<h5 >Collection</h5>
    <div id="collection">

    </div>

    <div id="buttons2" class="buttons2" style="opacity: 1;">
        <button id="download-pdf">Download Pdf</button>
        <button id="download-images">Download All Pages</button>
    </div>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
    <script src="./scripts/spiral.js"></script>
    <script src="./scripts/downloadImage.js"></script>
    <script src="./scripts/imageGenerator.js"></script>
    <script src="./scripts/downloadPDF.js"></script>
    <script src="./domtoimageTEST.js"></script>
    <script src="./scripts/fonts.js"></script>
    <script src="./scripts/domtoimage.js"></script>
    <script src="./scripts/lines.js"></script>
    <script src="./scripts/margin.js"></script>
    <script src="./scripts/pageLayout.js"></script>
    <script src="./scripts/main.js" ></script>

</body>
</html>