tinytapeout_gds_viewer/index.html at main · mbalestrini/tinytapeout_gds_viewer · 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
117
118
119
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>TinyTapeout GDS Viewer</title>
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <style>
        body {
            margin: 0;
            font-family: 'Roboto', sans-serif;
            font-size: 12px;
        }

        .textShadow {
            text-shadow:
            -1px -1px 0 #202020,
             0   -1px 0 #202020,
             1px -1px 0 #202020,
             1px  0   0 #202020,
             1px  1px 0 #202020,
             0    1px 0 #202020,
            -1px  1px 0 #202020,
            -1px  0   0 #202020;
        }

        #loadingStatus {
            position: absolute;
            top: 50%;
            left: 50%;
            font-size: medium;
            color: white;
            font-weight: bold;
        }

        #dropZone {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            height: 200px;
            border: 2px dashed #666;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0.5);
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        #dropZone.hidden {
            display: none;
        }
        #dropZone.dragover {
            border-color: #fff;
            background: rgba(0, 0, 0, 0.7);
        }

        #crossSection {
            position: absolute;
            bottom: 0;
            left: 0;
            margin-left: 10px;
            margin-bottom: 10px;
        }

        #instanceClassTitle {
            font-size: large;
        }

        #information {
            font-size: small;
        }

        .lil-gui {
            /* --folder-ident: 4; */
            --background-color: #181818;
            /* --widget-color: rgb(0, 89, 134); */
            /* --padding: 2px; */
        	--width: 300px;
	        /* --name-width: 65%; */
        }

        .selection_link a {
            color: white;
            cursor: pointer;
        }
    </style>
</head>

<body>

    <div id="crossSection"></div>
    <div id="loadingStatus">LOADING...</div>

    <div style="position: absolute; color:white; left: 5px; top: 5px;">
        <div id="instanceClassTitle" class="textShadow">DESIGN</div>
        <div id="information" class="textShadow"></div>
        <div class="textShadow"><br>KEYS
            <br>1: Hide Fill, Decap, Tap cells
            <br>2: Hide top cell geometry
            <br>3: Isolate selection / back
            <br>4: Zoom to selection
        </div>

    </div>

    <div id="dropZone" class="hidden">
        <div style="font-size: 18px; margin-bottom: 10px;">Drop GDS file here</div>
        <div style="font-size: 14px; opacity: 0.8;">or click to select</div>
    </div>

    <script type="module" src="src/viewer.js"></script>
</body>

</html>